[JS] forEach, map, for...of

forEach

forEach는 배열의 각 요소에 더해 주어진 CallBack 함수를 실행한다. 배열을 순회하며, 각 요소를 순차적으로 처리한다.

리턴값이 없고, 원본 배열을 변경하지 않는다. break문을 사용해서 중간에 순회를 멈출 수 없다.

const arr = [1, 2, 3];

arr.forEach((element) => {
	console.log(element);
});

map

map은 배열의 각 요소에 대해 주어진 CallBack 함수를 실행하고, CallBack 함수의 결과를 새로운 배열로 반환한다.

배열을 순회하며, 각 요소를 순차적으로 처리하면서 새로운 배열을 생성하는데 원본 배열은 변경되지 않는다.

const arr = [1, 2, 3];

const mappedArr = arr.map((element) => {
  return element * 2;
});

console.log(mappedArr); // [2, 4, 6];

for...of

for...of는 ES6에서 도입된 반복문으로, 배열 뿐만 아니라 문자열, 맵, 셋 등의 반복 가능한(iterable) 객체를 순회할 수 있다.

for..of문은 배열의 요소나 반복 가능한 객체의 요소들을 순회하는데 사용된다. 배열의 요소들을 순차적으로 처리하고, break문을 사용해서 중간에 순회를 멈출 수 있다.

const arr = [1, 2, 3];

for (const element of arr) {
	console.log(element);
}

차이점

주요 차이점은 forEach는 원본 배열을 변경하지 않고 리턴값이 없다. map은 새로운 배열을 반환하고 원본 배열을 변경하지 않는다.

for..of는 배열 뿐만 아니라 다양한 반복 가능한(iterable) 객체를 순회할 수 있고, forEach와 map과 달리 break문 을 사용하여 순회를 멈출 수 있다.

속도적인 측면에서 각 성능은 다소 차이가 있을 수 있다. 하지만 대체로 미세하고, 성능 측정 결과는 브라우저나 싱행 환경에 따라서 다를 수 있다.

forEach는 브라우저 최적화로 인해서 다른 반복문에 비하여 빠르게 동작할 수 있다. 또한 배열을 순회하면서 동시에 다른 작업을 할 수있고, 배열 요소를 변경하는 경우에 유용하다.

map은 원본 배열을 변경하지 않기 때문에 순수 함수의 특성을 가진다. 새로운 배열을 만들기 때문에 추가적인 메모리를 사용하게 된다.

map은 배열을 변환하는 경우에 유용하지만, 요소를 반환하지 않는 경우에는 forEach보다 미세하기 성능이 떨어질 수 있다.

for...of는 다른 반복문에 비해 추가적인 메모리를 사용하지 않기 때문에 빠른 성능을 보장한다.

for...of는 forEach와는 다르게 중간에 순회를 멈출 수 있으므로, 일부 요소만 처리하는 경우에 유용하다.

전반적으로는 성능 차이는 매우 작고, 대부분의 경우 사용하는 방법에 따라 차이가 미미하기 때문에 가독성과 코드의 목적에 맞게 선택하는 것이 중요하다.

코드의 효율성을 측정할 때는 프로파일 도구를 사용하여 성능 측정을 하거나, 큰 규모의 데이터를 다룰 때 성능을 비교해보는 것이 좋다.

하지만 보통 일반적인 상황에서는 이러한 성능 차이가 크게 영향을 미치지 않는다.