서론

자바스크립트를 이용한 프로젝트를 이용하면서 헷갈렸던 반복문에 대해서 정리한다.

iterable

iterable은 반복 가능한 객체(iterable object)을 줄여도 부르는 명칭입니다.
자바스크립트의 iterable 객체를 만들어내는 생성자는 string Array, TypedArray, Map, Set 이 있습니다.

for...of

• for...of는 ES6에 추가된반복문 입니다.
• 반복 가능한 객체(iterable)를 순회 할 수 있게 해줍니다.
• 순회하면서 반복 가능한 객체의 값을 반환해줍니다.
• Object는 불가합니다.

for(let value of ['a', 'b', 'c']) {
  	console.log(value); // 'a', 'b', 'c'
}

for...in

• Iterable object이면 가능합니다.
• key를 반환해줍니다.
• 배열도 가능합니다.(index를 반환)

const obj = {name : 'song', age : 1};
for(let key in obj) {
  	console.log(key); // 'name', 'age'
  	console.log(obj[key]); // 'song', 1
}

foreach

• return break continue를 사용하여 루프를 제어 할 수 없습니다.
• 루프를 제어하기 위해서는 예외처리를 통해서 throw 시키는 방법이 있습니다.

 // 루프제어 잘못된 코드
 const arr = [1,2,3,4,5];
 
 arr.forEach((value) => {
 	if(value == 3) 
      return;
    console.log(value);
 });

//루프제어 옳바른 코드
const arr = [1,2,3,4,5];
try{
  arr.forEach(function(value){ 
    if(value==3)
      throw new Error("stop loop"); 
    console.log(value);
  })
}catch(e){
 
}
 

정리

for ...of// 반복 가능한 객체 순환

for ...in // 객체 순환

foreach // return, break, continue 불가