ES6 for loop

forEach

forEach 반복문은 각각의 엘리멘트에 반복해 function을 실행하는 반복문입니다. forEach 안에서 동작하는 함수의 인자는 현재 요소, 현재 인덱스, 현재 배열 (배열 전체)로 총 3개가 있습니다. 간단한 코드를 볼까요?

let umbrellaAcademy = ['luther', 'diego', 'allison', 'klaus', 'five', 'ben', 'vanya'];

umbrellaAcademy.forEach((number, index, currentArr) => console.log(`This is ${number}`));

이때 forEach()는 Array에만 사용할 수 있습니다. 만약 Array-like objects에 호출한다면

let divs = document.getElementsByClassName('list-div'); // HTMLCollection 리턴

divs.forEach((item, index, currentArr) => console.log(item));

divs.forEach is not a function 이라는 오류가 뜨게 됩니다. HTMLCollection은 지원하지 않는 메소드라는 뜻이죠.

그럼 이번엔 forEach를 돌다가 number가 ben이면 break를 걸어봅시다. 우리가 다른 반복문을 사용했을 때 처럼요.

let umbrellaAcademy = ['luther', 'diego', 'allison', 'klaus', 'five', 'ben', 'vanya'];

umbrellaAcademy.forEach((number, index, currentArr) => {
  if(number === 'ben'){
    console.log(`${number} is dead`);
    break; // index가 5인 배열에서 break를 걸면 index가 6인 'vanya'가 나오지 않아야합니다!
  }else{
    console.log(`This is ${number}`);
  }
}

실행 결과 🥁🥁🥁 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 umbrellaAcademy = ['luther', 'diego', 'allison', 'klaus', 'five', 'ben', 'vanya'];

for(let number of umbrellaAcademy) { // let말고 const도 사용할 수 있습니다!
  console.log(`This is ${number}`);
}

아까 위에서 본 forEach 예제를 for-of 버전으로 작성하였습니다. 크게 다른 점은 없어보이고 오히려 forEach 반복문이 더 간단해보이죠. 하지만 for-of는 어떻게 보면 forEach보다 더 강력합니다!

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문도 for-of에서는 사용이 가능합니다.

let umbrellaAcademy = ['luther', 'diego', 'allison', 'klaus', 'five', 'ben', 'vanya'];

for(let number of umbrellaAcademy) {
  if(number === 'ben'){
    console.log(`${number} is dead`);
    break; // 이번엔 멈출까요?
  }else{
    console.log(`This is ${number}`);
  }
}

number가 ben이 되자 ben is dead를 출력하고 그 뒤 요소인 vanya에 대한 로그는 출력되지 않습니다. break문이 제대로 작동한다는 뜻이죠. continue문도 마찬가지로 for-of 문에서는 잘 작동합니다.

---

forEach와 for-of 말고도 여러가지 다양한 for문을 적절한 객체와 함께 사용하면 일반적인 for문을 사용할 때보다 편하게 사용할 수 있을 것 같네요! 🙌

참고 :
노마드 코더 ES6의 정석