for...of와 forEach 차이

 

🧐 for...of 루프
- 반복을 중간에 멈출 수 있다

🧐 forEach 메서드
- 중간에 반복을 멈출 수 없다.
- 예외를 던지는 방법을 사용하면 멈출 수는 있지만 권장되지 않음

 

 

const items = [
  { name: 'Pickle', extra: 1 },
  { name: 'Size', choices: ['Small', 'Medium', 'Large'] }
];

 

 

for...of 루프

for (const item of items) {
  console.log(item.name);
}

• for...of 루프는 배열이나 다른 이터러블 객체의 요소를 반복하는 데 사용된다.
• 반복을 중간에 멈출 수 있다.

 

 

forEach 메서드

items.forEach(item => {
  console.log(item.name);
});

• forEach 메서드는 배열의 각 요소에 대해 제공된 콜백 함수를 한 번씩 실행한다.
• 중간에 반복을 멈출 수 없다.

 

 

주요 차이점

 

1. 제어 흐름:
   • for...of는 break, continue, return 등을 사용할 수 있어 반복을 제어할 수 있다.
   • forEach는 중간에 반복을 멈출 수 없다. (예외를 던지는 방법을 사용하면 멈출 수는 있지만 권장되지 않음)
     
     
     
2. 구문:
   • for...of는 보다 간결하고 직관적일 수 있다.
   • forEach는 콜백 함수를 통해 요소에 접근한다.
     
     
     
3. this 바인딩:
   • forEach는 두 번째 인자로 thisArg를 받아 콜백 함수 내부에서 this로 사용할 객체를 지정할 수 있다.
     
     
     
4. 성능:
   • 성능 차이는 미미하지만, for...of가 약간 더 빠를 수 있다.
   • 이는 특정 상황에 따라 다를 수 있다.