Front-End

[JavaScript] 기초 공부 3

Minch13r 2025. 2. 9. 22:51

반복문

특정 코드를 반복해서 실행하고 싶을 때 사용하는 구문이다.

  1. for 문
  2. while 문

for문

조건식을 만족하는 한 계속해서 코드를 반복 실행한다. 매 반복 실행 마다 마지막에 증감식을 실행시킨다.

for (초기식; 조건식; 증감식) {
	반복 실행될 코드
}

while문

조건식을 만족하는 한 계속해서 코드를 반복 실행한다.

while(조건식){
	반복 실행될 코드
}

 

for문과 whlie문 중 어떤 거를 선택해야 할지 모르겠을 때, while문은 언제까지 반복할지 모를 때 사용하는거고 for문은 반복횟수를 명확히 알 때 사용하는 것이다.


반복문으로 피보나치 수열 구하기

피보나치 수열이란?

  • 첫 번째와 두 번째 숫자가 1이고, 그 다음부터는 바로 앞의 두 숫자를 더한 값이 되는 수열입니다.
  • 예: 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, ...

 

구현 방법 1 : For 반복문 사용

function fibonacci(n) {
    // 1. 첫 두 숫자를 저장할 변수 초기화
    let first = 1;
    let second = 1;
    
    // 2. 결과를 저장할 배열 생성
    let result = [first, second];
    
    // 3. n-2번 반복 (첫 두 숫자는 이미 있으므로)
    for (let i = 2; i < n; i++) {
        // 4. 현재 숫자는 이전 두 숫자의 합
        let current = first + second;
        
        // 5. 결과 배열에 추가
        result.push(current);
        
        // 6. 다음 계산을 위해 숫자들을 한 칸씩 이동
        first = second;
        second = current;
    }
    
    return result;
}

// 사용 예시
console.log("피보나치 수열 (처음 10개):");
console.log(fibonacci(10).join(", "));

 

 

구현 방법 2 : While 반복문 사용

function fibonacciWhile(n) {
    let first = 1;
    let second = 1;
    let result = [first, second];
    let count = 2;
    
    while (count < n) {
        let current = first + second;
        result.push(current);
        
        first = second;
        second = current;
        count++;
    }
    
    return result;
}

// 사용 예시
console.log("While문으로 구현한 피보나치 수열 (처음 10개):");
console.log(fibonacciWhile(10).join(", "));

1. 초기화 단계

let first = 1;   // 첫 번째 숫자
let second = 1;  // 두 번째 숫자
let result = [first, second];  // 결과 배열

 

2. 반복 과정

// 예: n = 5일 때의 진행 과정
반복 1: first(1) + second(1) = 2
       → result: [1, 1, 2]

반복 2: first(1) + second(2) = 3
       → result: [1, 1, 2, 3]

반복 3: first(2) + second(3) = 5
       → result: [1, 1, 2, 3, 5]

 

3. 변수 이동

first = second;      // 이전 두 번째 숫자가 첫 번째로
second = current;    // 새로 계산된 숫자가 두 번째로

 

4. 실행 결과 예시

피보나치 수열 (처음 10개):
1, 1, 2, 3, 5, 8, 13, 21, 34, 55

 

5. 주의 사항

너무 큰 수를 계산할 때는 BigInt 사용을 고려해야 한다.
재귀 방식은 스택 오버플로우가 발생할 수 있으니 주의해야 한다.
성능이 중요한 경우 메모이제이션 방식을 고려해야 한다.

배열형 (Array Type)

인덱스 기반으로 값을 순서대로 삽입할 수 있는 특별한 객체 형태

  • 인덱스(Index) : 위치, 0부터 시작하는 정수형 값
var array = [0, 10, 20];
array[0]; // 0
array[2]; // 20

배열형 (Array Type), 값의 삽입 / 제거

  • legnth : 배열의 크기를 리턴
  • push() : 배열에 새로운 값을 추가
  • unshift() : 배열에 새로운 값을 0번 인덱스로 추가
  • pop() : 배열의 마지막 값을 리턴하면서 제거
  • shift() : 배열의 처음 값을 리턴하면서 제거

length는 속성이고 push()~shift()는 함수이다.

 

예시

array.length => 배열크기 3
array.push(30); => [0, 10, 20, 30]
array.unshift(30); => [30, 0, 10, 20]
array.pop(); => [0, 10]
array.shift(); => [10, 20]

객체 자료형 (Object Type), 프로퍼티

프로퍼티는 값이나 함수(메소드, method)를 가질 수 있다.

	userName : "인프런"
  propertyname 	value

 

CSS처럼 Key와 Value라고 생각하면 좀 더 이해가 쉬울 것 같다.

 

객체 프로퍼티에 접근하거나 값을 저장하고 싶으면 . (dot) 기호를 사용한다.

var objects = {userName: "인프런", age: 10}; // 새로운 객체 타입 선언, 프로퍼티 없이 선언 가능
objects.userName // "인프런", userName 값에 접근
objects.age = 12 // age 값을 12로 변경
objects.online = true // online 값을 true로 지정

함수(Function)?

함수는 독립적인 실행 코드를 하나로 묶어 둔 것을 의미한다. 이렇게 코드들을 묶어서 작성하는 것을 함수의 정의(declaration)라고 하고 정의된 함수는 호출(call)을 통해 실행할 수 있다.

function 함수명(매개변수){
	실행코드
}

함수(Function)의 입력과 출력

수학에서의 함수는 미리 정해진 방정식에 미지수를 정의하면 해당 미지수에 값을 대입하고 y 값을 돌려받는다.

y = f(x)

 

프로그래밍의 함수도 한 개 이상의 입력(=매개변수)과 단일 출력(=리턴값)을 구현할 수 있다.

function converDollarToWon(dollar){
	return (dollar * 1457.8)
}

2월 7일자 달러 환율(환율이 ㅎㄷㄷ)

 

'Front-End' 카테고리의 다른 글

[CSS] 부트스트랩 태그 정리  (1) 2025.02.25
[JavaScript] 기초 공부 4  (1) 2025.02.10
[JavaScript] 기초 공부 2  (5) 2025.02.08
[JavaScript] 기초 공부 1  (2) 2025.02.03
[CSS] 기초 공부 4  (3) 2025.02.02