javascript 반복문 정리 | for | forEach | for in | for of

요약

구분	문법	용도	비고
for	for(let i=0;i<5;i++){}	반복	break, continue, return 사용가능
forEach	arr.forEach(()=>{})	배열반복
for...in	for(let key in obj){key.. obj[key]..}	객체반복	배열에 사용금지
for...of	for(let value of arr){value..}	배열반복	break, continue, return 사용가능

---

---

for

• 순회시 인덱스 사용

const arr = [1, 2, 3]
for (let i = 0; i < arr.length; i++) {
  // 작업
}

• 시작, 조건, 증가 조건
• break, continue, return 사용가능
  
  

forEach

arr.forEach(function(item, index, array) {
    // 작업
});

• 배열의 요소들을 반복하여 작업 수행 가능
• ES6부터는 Map, Set 등에서도 지원
  
  

for ...in => 객체

• 객체의 속성들을 순회하기 위한 구문
• 객체의 key에 접근할 수 있지만, value에 접근 불가

배열에 사용 금지
for..in 반복문은 모든 프로퍼티를 대상으로 순회합니다. 키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다.

브라우저나 기타 호스트 환경에서 쓰이는 객체 중, 배열과 유사한 형태를 보이는 ‘유사 배열(array-like)’ 객체가 있습니다. 유사 배열 객체엔 배열처럼 length 프로퍼티도 있고 요소마다 인덱스도 붙어 있죠. 그런데 여기에 더하여 유사 배열 객체엔 배열과는 달리 키가 숫자형이 아닌 프로퍼티와 메서드가 있을 수 있습니다. 유사 배열 객체와 for..in을 함께 사용하면 이 모든 것을 대상으로 순회가 이뤄집니다. 따라서 ‘필요 없는’ 프로퍼티들이 문제를 일으킬 가능성이 생깁니다.

for..in 반복문은 배열이 아니라 객체와 함께 사용할 때 최적화되어 있어서 배열에 사용하면 객체에 사용하는 것 대비 10~100배 정도 느립니다. for..in 반복문의 속도가 대체로 빠른 편이기 때문에 병목 지점에서만 문제가 되긴 합니다만, for..in 반복문을 사용할 땐 이런 차이를 알고 적절한 곳에 사용하시길 바랍니다.

for ...of => 배열

• ES6에서 추가됨
• forEach에서 callback함수가 필요 없는 경우 for...of로 간단하게 반복 가능
• forEach 문에서 지원하지 않는 break, continue, return 구문 사용 가능
• 반복가능한 객체(Array, Map, Set, String, TypeArray, arguments 객체 등)을 반복하는 기능 수행
• 즉, 객체의 요소들(Data)를 순회하기 위한 구문(return value)

let user = {
  name: "John",
  age: 30,
  isAdmin: true
};

for (let key in user) {
  // 키
  alert( key );  // name, age, isAdmin
  // 키에 해당하는 값
  alert( user[key] ); // John, 30, true
}

• for in과 for of
  Iterable 객체 중 prototype chain이 Iterable한 것을 포함하면 for in, 그렇지 않으면 for of 입니다.
• Object.keys()
  Iterable 하지 않은 객체들 Iterable하게 만들어 반복문 사용

참고 : 모던 JavaScript 튜토리얼
참고 : 🙈[JS] for in와 for of 비교 - Iteration🐵