forEach()

forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다.

특징

• forEach() 메서드는 아무것도 리턴하지 않는다.
• 콜백함수에서 호출 된 배열을 변경할 수 있다.

구문 예제

// 기본 사용법
const arr = [1, 2, 3];

// 인자로 콜백 함수를 받으며, 콜백 함수는 currentValue, index, array 3개의 인자를 가진다.
arr.forEach((currentValue, index, array) => {
		console.log(currentValue, index, array);
});

// 결과
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

// forEach()는 아무것도 리턴하지 않는다.
const arr2 = [1, 2, 3].forEach((e) => e);
console.log(arr2); // undefined

// 콜백함수에서 배열을 변경할 수 있다.
const arr3 = [1, 2, 3];

arr3.forEach((currentValue, index, array) => {
		array[index] = 7;
});
console.log(arr3) // [7, 7, 7]

map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 합니다.

특징

• 콜백함수에서 호출 된 배열의 원본을 유지하며, 새로운 배열을 생성할 수 있다.
• map() 메서드는 새로 생성된 배열을 리턴한다.

구문 예제

// 기본 사용법
const arr = [1, 2, 3];

// 인자로 콜백 함수를 받으며, 콜백 함수는 currentValue, index, array 3개의 인자를 가진다.
arr.map((currentValue, index, array) => {
		console.log(currentValue, index, array);
});

// 결과
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]

// 콜백함수에서 호출 된 배열의 원본을 유지하며, 새로운 배열을 생성할 수 있다.
// map() 메서드는 새로 생성된 배열을 리턴한다.
const arr2 = [1, 2, 3];
const newArr = arr2.map((currentValue) => currentValue * 3);
console.log(newArr); // [3, 6, 9]

// 콜백함수 내에서 아무것도 리턴하지 않으면 undefined로 채워진다.
const arr3 = [1, 2, 3];
const newArr = arr3.map(() => {});
console.log(newArr); // [undefined, undefined, undefined]

차이점

• forEach()는 새로운 배열을 반환할 수 없지만, map()은 기존 배열을 유지하며 동일한 사이즈의 새로운 배열을 반환할 수 있다.
• forEach()가 map()보다 더 빠르다.
  • map()은 결괏값을 새로운 변수에 담고 반환하는 작업을 하기 때문이다.
  • (단, 무조건은 아니며 데이터를 변경하거나 등의 케이스마다 조금씩 다르기 때문에 상황에 맞게 적절히 사용하는 것이 바람직한 것 같다.)
  • 참조 - https://pewww.tistory.com/12