[Node.js] javascript: forEach VS for each...in VS for...in VS for...of 비교 정리

기본 내용

● forEach()

forEach()는 Array의 메서드로 주어진 함수를 배열 요소 각각에 대해 실행
ES6부터는 Map이나 Set에서도 지원

arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])

• callback : 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받음
  • currentValue : 처리할 현재 요소
  • index (Optional) : 처리할 현재 요소의 인덱스
  • array (Optional) : forEach()를 호출한 배열
• thisArg (Optional) : callback을 실행할 때 this로 사용할 값

forEach()는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행.
삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않음
forEach()는 배열을 변형하지 않지만, callback이 변형할 수는 있음

예외를 던지지 않고서는 forEach()를 중간에 멈출 수 없기 때문에, 중간에 멈춰야한다면 forEach()를 사용하지 않는 게 좋음

 

● for each...in

for each...in문은 객체의 모든 속성 값에 대해 지정된 변수를 반복

→ 더 이상 지원되지 않음. 대신 for ... of 사용 권장

 

● for...in

상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복 (Symbol로 키가 지정된 속성은 무시)

 for (variable in object) { ... }

• variable : 매번 반복마다 다른 속성이름(Value name)이 변수(variable)로 지정
• object : 반복작업을 수행할 객체로 열거형 속성을 가지고 있는 객체

for...in은 특정 순서에 따라 인덱스를 반환하는 것을 보장할 수 없기 때문에 인덱스의 순서가 중요한 Array에서 반복을 위해 사용하지 않는 것이 좋다. (대신 for문을 사용)

쉽게 객체의 속성을 확인할 수 있기 때문에 디버깅을 위해 사용될 수 있다. (ex: 특정 값을 가진 키가 있는지 확인하는 경우, ...)

key를 이용해 value에 접근해야함. 직접 value에 접근 불가능.

 

● for...of

반복 가능한 객체에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성

for (variable of iterable) {
  statement
}

• variable : 각 반복에 서로 다른 속성값이 variable에 할당
• iterable : 반복되는 열거가능(enumerable)한 속성이 있는 객체

for...in 루프는 객체의 모든 열거가능한 속성에 대해 반복하지만
for...of 구문은 컬렉션 전용으로, 모든 객체보다는 [Symbol.iterator] 속성이 있는 모든 컬렉션 요소에 대해 이 방식으로 반복한다.

Object.prototype.objCustom = function () {};
Array.prototype.arrCustom = function () {};

let iterable = [3, 5, 7];
iterable.foo = "hello";

for (let i in iterable) {
  console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i of iterable) {
  console.log(i); // logs 3, 5, 7
}

 

정리

forEach()는 Array 메서드

for each...in은 더이상 사용 X

for...in은 디버깅용으로만 사용하는 것이 좋음 (성능상 forEach()보다 느림)

for...of는 컬렉션 전용. 이걸 사용하는 것을 권장 (ES6에 추가됨)

※ forEach()나 map보단 reduce()를 사용하는 것이 훨씬 나음!

 

참고 사이트

• Array.prototype.forEach() - JavaScript | MDN
• for each...in - JavaScript | MDN
• for...in - JavaScript | MDN
• for...of - JavaScript | MDN