JavaScript의 for each, for in, for of 비교

[dididy]

for each

for each 구문은 array에서만 사용할 수 있다. 인자로 callback 함수를 등록하여 배열 요소와 index에 접근해 사용할 수 있다. 성능은 좋지만 break을 지원하지 않는다. callback 함수의 return이 true든 false든 둘 다 continue 처리되어 루프를 전부 돌게 된다. for each 자체의 return은 undefined이다.

break을 사용하기 위해 try, catch를 사용할 수 있지만, 코드가 지저분해질 수 있다. 더 우아한 방법으로 for each 대신에 every나 some을 사용하면 된다.

두 메서드 모두 for each처럼 배열을 순회할 때 사용된다. 조건에 만족하는 값이 있는 경우(즉, callback 함수에 return 값이 존재하는 경우) 루프를 중지하고 every의 경우 메서드 자체에서 false를 return하고 some의 경우 메서드 자체에서 true를 return 한다.

• Array.prototype.every()
• Array.prototype.some()

for in

객체에서 순회가 필요할 때 사용된다. [[Enumerable]] 이 true인 것만 순회하게 되어있어 객체의 내장 메서드나 내장 프로퍼티 등 비열거형인 경우에는 순회하지 않는다.

for of

for each에 비해 느리다.(사실 플랫폼마다 다르다고 함) 사용하기 위해서는 컬렉션 객체가 [Symbol.iterator] 속성을 가지고 있어야 한다.

index를 사용하고 싶으면 아래와 같이 entires 메소드를 사용하면 된다.

for (const [index, each] of ['a', 'b', 'c'].entries()) {
  console.log(index, each);
}

References

• https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Loops_and_iteration
• https://niceman.tistory.com/78
• https://jsdev.kr/t/for-in-vs-for-of/2938/2
• https://flaviocopes.com/how-to-get-index-in-for-of-loop/