for...of VS forEach

1. for ... of

반복 가능한 객체(Iterable)의 각 항목을 순회하며 처리하는 반복문.
배열, 문자열, NodeList, Set, Map 등 이터러블 객체에 사용할 수 있다.

예제 : for...of로 순회 

const elements = [1, 2, 3];

for (let el of elements) {
    console.log(el); // 배열의 각 항목 출력
}

특징:

1. 객체의 각 항목 자체를 반환.
   • 배열의 값, NodeList의 각 요소, 문자열의 문자 등.
2. break/continue 사용 가능:
   • 반복을 중단하거나, 특정 조건에서 건너뛸 수 있음.

const elements = [1, 2, 3, 4, 5];

for (let el of elements) {
    if (el === 3) break; // 3에서 반복 중단
    console.log(el);
}
// 출력: 1, 2

 

2. forEach

배열(Array) 또는 NodeList 같은 유사 배열 객체에서 사용할 수 있는 메서드.
콜백 함수를 통해 각 항목에 대해 작업을 수행한다.

예제: forEach로 순회

const elements = [1, 2, 3];

elements.forEach(el => {
    console.log(el); // 배열의 각 항목 출력
});

특징:

1. 콜백 함수 사용:
   • 콜백 함수의 매개변수로 현재 값, 인덱스, 전체 배열을 전달받음.

const elements = [10, 20, 30];

elements.forEach((value, index, array) => {
    console.log(`Value: ${value}, Index: ${index}, Array: ${array}`);
});


Value: 10, Index: 0, Array: 10,20,30
Value: 20, Index: 1, Array: 10,20,30
Value: 30, Index: 2, Array: 10,20,30

1. break/continue 사용 불가:
   • 중간에 반복을 중단할 수는 없음.
   • 대신 return을 사용해 현재 콜백만 종료 가능.
     • ( 특정 조건에서 콜백 함수의 실행을 멈추고, 다음 항목으로 넘어갈 수 있다.)

예제: return 사용 

const elements = [1, 2, 3, 4, 5];

elements.forEach(el => {
    if (el === 3) return; // 3에서만 콜백 종료
    console.log(el);
});
// 출력: 1, 2, 4, 5

3. for...of와 forEach의 차이점

특징for...offorEach

사용 대상	반복 가능한 객체 (배열, 문자열, NodeList, Set 등)	배열(Array) 및 NodeList
콜백 함수	없음	필요 (콜백 함수 형태로 작업 수행)
break/continue	가능	불가능 (대체로 return 사용)
반환 값	각 항목 자체	없음 (작업만 수행하고 별도 반환값 없음)
동기/비동기 처리	동기 반복	동기 반복 (비동기 작업은 따로 구현 필요)

4. 선택 기준

1. for...of를 사용할 때
   • 반복을 중간에 멈추거나(break), 특정 조건에서 건너뛰고 싶을 때(continue).
   • 이터러블 객체(Set, Map, NodeList 등)에서 사용하고 싶을 때.
2. forEach를 사용할 때
   • 콜백 함수를 통해 코드의 의도를 명확히 하고 싶을 때.
   • 배열의 각 항목에 대해 일괄적으로 작업을 수행하고, 중단이 필요 없을 때.