[JavaScript] 자바스크립트 for...of 반복문 이해하기

for.. of 반복문이란?

for.. of 반복문은 일반적으로 배열에 많이 사용되는데, 배열의 요소 개수만큼 반복하고, 반복 때마다 각 요소들을 사용할 수 있는 변수가 주어지는 독특한 반복문이라고 할 수 있다.

 

map메서드와 forEach메서드의 콜백 함수 내에 있는 element를 사용하는 것과 비슷하다고 생각하면 좋을 것 같다.

 

문법

for (변수 of 배열) {
    반복동작부분
}

기본적으로 for 문과 비슷한 모양을 하고 있지만 소괄호 내부에 세미콜론으로 구분되는 구간이 없고,

변수 하나와 of 키워드, 그리고 반복 할 배열을 입력해주고, 매 반복 때마다 동작할 구문은 중괄호 안에 넣어주면 된다.

 

그래서 map이나 forEach의 콜백 함수 내에 있는 element 파라미터처럼,

소괄호 안에 선언한 변수에 배열의 각 요소들이 매 반복 때마다 할당되게 된다.

const myArr = ['미카엘', '가브리엘', '라파엘'];

for (let angel of myArr) {
    console.log(angel)
}

이런 식으로 코드를 작성하면, myArr의 length가 3이니깐, 3번 반복하면서, angel이라는 변수에 각 요소들이 순서대로 할당되는 것이다.

코드를 실행한 결과는 다음과 같다.

다만, map이나 forEach 처럼 index를 가져오지는 못하기 때문에, 만약 index가 필요한 경우라면 for..of문 보다는 다른 메서드를 활용해야만 한다.

 

그리고 for..of문도 map과 forEach메서드와 같이 내부에서 배열의 요소를 변경할 수도 있고, 매 반복 때마다 반영된다.

하지만, map과 forEach 메서드의 경우에는 반복 횟수가 시작할 때 미리 정해져서 반복하는 반면,

for.. of문에서는 매 반복 때 마다 배열의 상태가 업데이트되기 때문에 만일 도중에 배열의 요소의 개수가 늘어나는 경우, 반복횟수도 함께 늘어나게 된다.

const myArr = ['미카엘', '가브리엘', '라파엘'];

for (let angel of myArr) {
    console.log(angel)
    if(angel === '라파엘') {
        myArr.push('우리엘');
    }
}

 

위 코드를 실행하면,

이렇게 반복횟수가 4번으로 늘어나게 된다.

const myArr = ['미카엘', '가브리엘', '라파엘'];

myArr.forEach(angel => {
    console.log(angel);
    if(angel === '가브리엘') {
        myArr.push('우리엘');
    }
})

map과 forEach의 경우에는 처음 반복이 시작될 때 반복 횟수가 정해져서 반복하기 때문에 위 코드를 실행하면

이렇게 세번만 반복하게 되고, 메서드가 호출된 이후에 배열을 살펴보면, '우리엘'이라는 요소가 추가된 걸 확인할 수 있다.

 

주의사항

직전에 언급한 특징 때문에, 만일 다음과 같이 반복이 진행되는 요소보다 앞쪽으로 요소가 추가될 경우에는 무한루프에 빠질 수 있으니 꼭 주의해야 한다. 

const myArr = ['미카엘', '가브리엘', '라파엘'];

for (let angel of myArr) {
    console.log(angel);
    if(angel === '가브리엘') {
        myArr.unshift('우리엘');
    }
}

 

참고사항

for..of 문은 말 그대로 for 반복문의 변형이기 때문에 도중에 break 혹은 continue문을 사용할 수도 있다.

그래서 만일 반복 도중에 반복을 제어해야될 경우에는 for.. of를 사용하는 것이 좋다.

forEach나 map메서드는 앞에서 언급했듯 반복이 시작될 때 반복 횟수가 미리 결정되기 때문에 break나 continue를 할 수 없다.

 

break문

const myArr = ['미카엘', '가브리엘', '라파엘'];

for (let angel of myArr) {
    if(angel === '가브리엘') {
        break;
    }
    console.log(angel);
}

continue문

const myArr = ['미카엘', '가브리엘', '라파엘'];

for (let angel of myArr) {
    if(angel === '가브리엘') {
        continue;
    }
    console.log(angel);
}

 

문자열에도..!!

for..of문은 문자열에도 활용이 가능하다.

const myStr = '가나다라마바사';

for (let el of myStr) {
    console.log(el);
}