forEach

forEach와 map은 javaScript 배열의 메서드로, 배열 내의 요소들을 순회하며 작업을 수행하는 데 사용된다. 하지만 두 메서드의 사용 목적과 동작 방식에는 차이가 있다.

forEach

forEach 메서드는 배열의 각 요소를 순회하며 반복 작업을 하는 메소드이다.
이때, 콜백 함수는 각 요소와 인덱스, 그리고 배열 자체를 매개변수로 받을 수 있다. forEach는 주로 각 요소에 대해 어떤 동작을 수행하거나 값을 변경하는 데 사용된다.

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

numbers.forEach((number, index)=>{
  console.log(`Element at index ${index}: ${number}`)
})

map

map 메서드는 배열의 각 요소를 순회하며 주어진 콜백 함수를 실행하고, 콜백 함수의 반환값들로 새로운 배열을 생성한다. 따라서 원본 배열은 변경되지 않고 새 배열이 반환된다. map은 주로 각 요소를 변형하여 새로운 배열을 생성하는 데 사용된다.

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

const squreNumbers = numbers.map(number => number ** 2);
console.log(squareNumbers); // [1, 4, 9, 16, 25]

차이점

• 사용 목적

  • forEach: 배열의 각 요소에 대한 어떤 동작을 수행하거나 값을 변경하는 데 주로 사용한다.
  • map: 각 요소를 변형하여 새로운 배열을 생성하는 데 사용한다. 기존 배열을 변경하지 않고 새 배열을 반환한다.

• 반환 값

  • forEach: 반환값이 없다. 단순히 각 요소에 대한 동작을 수행한다.
  • map: 변형된 요소들로 이루어진 새 배열을 반환한다.

• 원본 배열 변경

  • forEach: 원본 배열의 요소를 변경하지 않는다.
  • map: 원본 배열을 변경하지 않고 새로운 배열을 생성한다.