For Loop

➰ forEach

forEach 반복문은 각각의 엘리멘트에 반복해 특정한 함수를 실행하는 반복문이다. forEach 안에서 동작하는 함수의 인자는 현재 요소, 현재 인덱스, 현재 배열 (배열 전체)로 총 3개가 있다.

let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy'];
crews.forEach((crew, index, currentArr) => console.log(`This is ${crew}`));

이때 forEach()는 Array에만 사용할 수 있다. 만약 Array-like Object에서 forEach를 호출한다면

let divs = document.getElementsByClassName('list-div'); // HTMLCollection 리턴
divs.forEach((item, idex, currentArr) => console.log(item));

divs.forEach is not a function이라는 오류가 뜬다. HTMLcollection은 지원하지 않는 메소드라는 뜻이다.
그럼 이번엔 forEach를 돌다가 crew가 Sulu이면 다른 여타 반복문을 중간에 중단할 때처럼 break를 걸어보자.

let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy'];
crews.forEach((crew, index, currentArr) => {
    if(crew === 'Sulu') {
        console.log(`This is acting captain ${crew}`);
        break;
    } else{
        console.log(`This is ${crew}`);
    }
});

실행 결과 Uncaught SyntaxError: Illegal break statement 오류가 발생한다. forEach문에서는 break문을 사용할 수 없다. (return false는 사용할 수 있다.) forEach를 사용하면서 break문을 사용하고 싶다면 https://blog.outsider.ne.kr/847 이 링크를 참조하면 된다.

for-of

for-of는 Iterable Object에 모두 적용할 수 있는 반복문이다. Object 반복문인 for-in 반복문과 비슷한 형태로 사용할 수 있다.

let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy'];
for(let crew of crews){
    console.log(`This is ${crew}`);
}

위에서 본 forEach 예제를 for-of문으로 똑같이 동작하게 작성하였다. 크게 다른 점은 없어 보이고 한 눈에 봤을 땐 for-of문보다 forEach문에 더 간단해보인다. 하지만 for-of문은 생각보다 강력하다.

Array 타입만 반복할 수 있는 forEach와 달리 for-of는 Array, NodeList, HTMLCollection, arguments 그리고 문자열까지 모든 Iterable Object에 사용이 가능하다. (Iterable Object란? 👉 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable)

let str = 'HELLO WORLD';
for(let letter of str){
    console.log(letter);
}

위 코드를 실행하면 HELLO WORLD 문자열이 문자 하나씩 나눠져서 콘솔에 출력된다. 마찬가지로 Iterable Object 중 하나인 HTMLCollection을 반환하는 document.getElementsByClassName()도 사용할 수 있다. 또한, forEach문과 달리 break와 continue도 사용할 수 있다.

let crews = ['Kirk', 'Spock', 'Sulu', 'Uhura', 'Chekov', 'Scott', 'McCoy'];
for(let crew of crews){
    if(crew === 'Sulu') {
        console.log(`This is acting captain ${crew}`);
        break;
    } else{
        console.log(`This is ${crew}`);
    }
};

crew가 Sulu일 때 This is acting captain Sulu를 출력하고 남은 요소 네 개에 대해서는 반복문을 실행하지 않는다. break문이 작동한다는 뜻이다.

---

원글
ES6 for loop