프론트엔드 짧은 간단 지식 정리 - forEach()와 map() 함수의 차이

1. forEach() vs map()

• 두 메소드 모두, JavaScript에서 배열을 순회(iterate)하는 데 사용되는 메서드이다.
  - 그러나, 용도와 동작에서 중요한 차이점이 존재한다.
  
  

2. forEach()

const numbers = [1, 2, 3, 4];
numbers.forEach((num) => { console.log(num * 2); });

목적

• 배열의 각 요소에 대해 주어진 함수를 실행한다.
• forEach는 요소를 변형하거나 side effect(사이드 이펙트/부수효과) 를 발생시키는 작업(예: DOM 조작, 콘솔 출력)을 수행할 때 주로 사용된다.

반환 값

• forEach는 undefined를 반환한다.
• 즉, 배열을 순회하며 작업을 수행할 뿐, 새로운 배열을 반환하지 않는다는 뜻이다.

변형 가능성

• 원본 배열은 변형되지 않으며, forEach 안에서 수정하지 않는 한 원래 배열은 그대로 유지된다.

 

3. map()

const numbers = [1, 2, 3, 4]; 
const doubled = numbers.map((num) => num * 2); console.log(doubled); // [2, 4, 6, 8]

목적

• 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 기반으로 새로운 배열을 만든다.
• map은 주로 배열을 변환(transform)하여 새로운 배열을 얻고자 할 때 사용된다.

반환 값

• map은 새로운 배열을 반환한다.
• 이 배열은 원본 배열의 각 요소에 대해 주어진 함수를 실행한 결과로 이루어진다.

변형 가능성

• 원본 배열은 변형되지 않으며, 새로운 배열이 생성된다.

참고

• map은 새로운 배열을 만들고 반환하기 만들기 때문에, 메모리를 할당한다.
• 성능 면에서 map()이 forEach()보다 빨라 유리하다고 한다.

 

4. 차이점

반환 값:

• forEach는 undefined를 반환하고, 배열을 순회하며 주어진 작업을 수행하는 데 그친다.
• map은 주어진 함수를 실행한 결과로 이루어진 새로운 배열을 반환한다.

사용 목적:

• forEach는 주로 배열의 각 요소에 대해 작업을 수행하기 위한 목적으로 사용된다(부수효과).
• map은 배열을 변환하여 새로운 배열을 얻고자 할 때 사용된다.

원본 배열:

• 두 메서드 모두 원본 배열을 변경하지 않는다.
• 그러나 forEach에서 배열의 요소를 직접 수정하는 코드를 작성할 경우 원본 배열이 변경될 수 있다.

 

5. 참고자료 : forEach 및 부수효과

5-1. 재정리 : forEach

• forEach는 배열의 각 요소를 한 번씩 순회하면서 주어진 함수를 실행하는 메서드라고 위에서 언급했다.
  • 이 함수는 배열의 각 요소에 대해 작업을 수행할 수 있지만, 그 작업의 결과를 배열로 반환하지 않는다.
  • forEach는 작업을 실행할 뿐이라는 것이다.

5-2. side effect (사이드 이펙트 / 부수효과)

• 부수효과란, 함수가 반환값 외에 외부 상태를 변경하는 모든 작업을 의미한다.
  • 여기서 외부 상태는 함수 외부의 변수, 데이터 구조, 파일, 데이터베이스, 사용자 인터페이스 등이 있다.

• 그 예시는 아래와 같다.
  1. 콘솔에 값을 출력하는 것(console.log).
  2. HTML 문서를 변경하는 것(DOM 조작).
  3. 전역 변수의 값을 변경하는 것.
  4. 데이터베이스에 데이터를 저장하거나 불러오는 작업.
  5. 파일을 읽거나 쓰는 것.

• 이런 작업들은 모두 함수가 반환하는 값과는 별개로 외부 세계에 영향을 미치므로 부수효과로 간주된다.

5-3. forEach와 부수효과

• forEach는 주로 부수효과를 발생시키기 위해 사용된다고 했다.
  • 예를 들어, 배열의 각 요소를 콘솔에 출력하거나, DOM 요소를 변경하거나, 배열의 각 요소를 기반으로 다른 곳에 저장하는 작업을 할 때 forEach를 사용다.

const numbers = [1, 2, 3, 4];
let sum = 0;

numbers.forEach((num) => {
  sum += num; // 부수효과: sum이라는 외부 변수를 수정하고 있음
});

console.log(sum); // 10

• 여기서 forEach는 배열의 각 요소를 sum에 더하는 작업을 수행한다.
  • 이 때 sum이라는 외부 변수의 값을 변경하는 것이 부수효과이다.
  • forEach 자체는 값을 반환하지 않지만, sum의 값을 변화시키는 외부 효과를 발생시킨다.

• forEach는 특정 값을 반환하지 않기 때문에, 특정 변수의 상태값을 변경하기 위해서는 부수효과를 사용한다는 점이 이 단락의 핵심이라 할 수 있다.