JavaScript - 반복문

반복문은 어떤 명령을 반복적으로 실행해야할때 사용됩니다. 자바스크립트에서는 다음과 같은 반복문을 사용할 수 있습니다.

 

1. for  문
2. while  문
3. do...while 문
4. 레이블, break, continue 문
5. for...in 문
6. for...of 문

 

 

1. for 문

for문은 "초기문, 조건문, 증감문"을 사용해서 반복 횟수를 지정하는 방식입니다.

 

 

for([초기문]; [조건문]; [증감문]) {
    문장;
}

 

// 0부터 4까지 5회 반복
for(let i = 0; i < 5; i++) {
    console.log("i = " + i);
}

// 배열 인덱스로 사용하는 방법
let arr = [ "foo", "bar", "baz" ];
for(let i = 0; i < arr.length; i++) {
    console.log("arr["+i+"] = " + arr[i]);
}

초기문, 조건문, 증감문 각각은 필수가 아닌 선택사항입니다. 필요에 따라 사용하지 않을수도 있습니다.

 

// 무한루프가 됩니다.
for(;;) {
    ...
}

 

 

2. while 문

"조건문"이 참인 동안에는 계속 반복합니다.

 

while(조건문) {
    문장;
}

 

// 0부터 4까지 5회 반복
let i = 0;
while(i < 5) {
    console.log("i = " + i);
    i++;
}

// 배열 인덱스로 사용하는 방법
let arr = [ "foo", "bar", "baz" ];
let i = 0;
while(i < arr.length) {
    console.log("arr["+i+"] = " + arr[i]);
    i++;
}

// 무한 루프가 됩니다.
while(true) {
   ...
}

 

 

3. do...while 문

while문은 조건을 체크후 실행하지만 do...while문은 일단 한번 실행하고 조건을 체크합니다.

 

// 0부터 4까지 5회 반복
// 값을 1 증가시키는 ++ 연산자는 비교 평가후에 실행됩니다.
let i = 0;
do {
    console.log("i = " + i);
} while(i++ < 5);

// 빈 배열이면 arr[0] = undefined 출력.
let arr = [ "foo", "bar", "baz" ];
let i = 0;
do {
    console.log("arr["+i+"] = " + arr[i]);
} while(i++ + 1 < arr.length);

// 무한 루프가 됩니다.
do {
    ...
} while(true);

 

 

4. 레이블, break, continue 문

- 레이블 문
문장에 레이블을 붙여서 표시를 할 수 있습니다. 레이블은 예약어가 아니고 식별자(identifier) 규칙을 따르면 됩니다.

레이블은 어떤 문장에도 붙일 수 있지만, 주로 중첩된 블록({})에 break 또는 contiune와 함께 사용하여 중첩된 블록을 한번에 빠져나가거나 할때 많이 사용됩니다.

 

// 블록에 붙인 예입니다.
markBlock: {
    console.log("블록 시작");
    
    // 레이블된 블럭을 빠져나갑니다.
    break markBlock;
    
    console.log("이 부분은 출력 안됨.");
}
console.log("블록 지나감");

결과)
블록 시작
블록 지나감

중첩된 if문을 한번에 빠져나가는 예입니다.

 

// 바깥쪽 if 레이블
outerIf:
if(true) {
    // 안쪽 if 레이블
    innerIf:
    if(true) {
        // 바깥쪽 if를 바로 빠져나갑니다.
        break outerIf;
    }
    console.log("이곳은 출력되지 않습니다.");
}

console.log("완전 빠져나감.");

- break 문
반복문과 switch문을 빠져나올때 사용됩니다. 레이블과 같이 사용하여 레이블로 표시된 반복문을 빠져나올 수 있습니다. 레이블이 없을 때는 자신에게 가장 가까운 반복문을 빠져나옵니다.

outerFor:
for(let i = 0; i < 2; i++) {
    innerFor:
    for(let j = 0; j < 5; j++) {
        // j가 3보다 크면 바깥반복문(outerFor)를 빠져 나갑니다.
        if(j > 3) break outerFor;
        console.log("i = " + i + ", j = " + j);
    }
}

결과)
i = 0, j = 0
i = 0, j = 1
i = 0, j = 2
i = 0, j = 3

- continue 문
반복문에서 continue를 만나면 해당 루프만 빠져나가서 다음루프가 실행됩니다. 레이블과 같이 사용하여 레이블로 표시된 반복문의 다음 루프로 넘어갑니다. 레이블이 없으면 자신에게 가장 가까운 반복문의 다음 루프를 실행합니다.

 

outerFor:
for(let i = 0; i < 2; i++) {
    innerFor:
    for(let j = 0; j < 10; j++) {
        // j가 1보다 크면 바깥반복문(outerFor)의 다음 루프를 실행합니다.
        if(j > 1) continue outerFor;
        console.log("i = " + i + ", j = " + j);
    }
}

결과)
i = 0, j = 0
i = 0, j = 1
i = 1, j = 0
i = 1, j = 1

 

 

5. for...in 문

객체가 가진 속성(property)을 지정된 변수에 넣어 반복 작업을 합니다. 이때 열거되는 속성은 enumerable = true인 속성만 보여집니다(enumerable은 속성이 열거될지 말지를 지정하는 속성 서술자입니다).

 

let foo = {
    name: "홍길동",
    age: 30,
    address: "제주도"
}

for(let key in foo) {
    console.log(key + " : " + foo[key]);
}

결과)
name : 홍길동
age : 30
address : 제주도

 

 

6. for...of 문

배열과 같은 반복가능한(iterable) 객체의 내용을 변수에 담아 반복할 수 있습니다. 반복 가능한 객체는 "배열, 문자열, Map, Set, arguments(함수의 인수)" 등이 있습니다.

 

let arr = [ "foo", "bar", "baz" ];
for(let value of arr) {
    console.log(value);
}

결과)
foo
bar
baz