[JS] forEach() 와 Map()

⭐️ forEach()

forEach()는 map()과 달리 반환 값이 존재하지 않습니다.
즉 , forEach 메서드는 내부에 return 값이 필요하지 않습니다.
forEach()는 항상 undefined를 반환하므로 체이닝 할 수 없습니다.

// forEach() 예제
const arr = [1, 2, 3, 4, 5, 6];

const forEachArr = arr.forEach((el) => {
    return el * 2;
});
console.log(forEachArr);

// forEach()는 항상 undefined를 반환하기 때문에
// consoleo.log(forEachArr) 는 undefined를 출력하게 됩니다.

❓체이닝이란 무엇인가요 ?

체이닝이란 연속적인 코드 줄에서 개체의 method를 반복적으로 호출하는 것을 의미합니다. method가 객체를 반환하면 그 반환 값이 또 다른 method를 호출하여 부수 효과를 일으킬 수 있습니다.

// 체이닝 예시
const numbers = [1, 2, 3, 4, 5, 6];

const result = numbers
    .filter((num) => {
        return num % 2 === 0;
    }) // 짝수만 필터링
    .map((num) => {
        return num * 2;
    }) // 각 요소를 2배로 매핑
    .reduce((acc, num) => {
        return acc + num;
    }); // 모든 요소를 더해서 최종 결과 얻기

console.log(result); // 출력: 24

❓ 부수 효과 (side effect)란 무엇인가요 ?

함수가 외부 상태를 변경하거나 다른 부작용을 일으키는 것을 의미합니다.

let arr = [1, 2, 3, 4];

// forEach를 사용하여 각 요소를 제곱하고 원본 배열을 변경 (부수 효과)하는 예시
arr.forEach((value, index, arr) => {
  arr[index] = value * value;
});

console.log(arr); // 출력: [1, 4, 9, 16]

이런 부수 효과는 원본 배열을 변경하여 , 프로그램의 실행 과정을 예측하지 못하게 하거나 의도치 않은 결론을 낼 수 있기 때문에 최소화하는 것이 좋습니다.

⭐️ map()

map() 메서드는 forEach()와는 달리 새로운 배열을 반환합니다. 배열 내의 모든 요소에 대하여 callback function을 호출한 결과를 모아 새로운 배열을 반환합니다.

✅ forEach()와 map()은 둘 다 원본 배열을 변경하지 않는다는 공통점을 가지고 있습니다. 하지만 forEach()는 희소 배열에서 빈 요소(undefined)를 무시하고 실행되는 반면 , map()은 빈 요소에도 일관성 있게 작동한다는 차이점이 있습니다.

//forEach() map() 희소 배열에서의 예시
const arr = [1, 2, 3, , 5, 6];

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

const mapArr = arr.map((el) => {
    return el * 2;
});

console.log(mapArr);

// 1
// 2
// 3
// 5
// 6
// [ 2, 4, 6, <1 empty item>, 10, 12 ]

⭐️ 결론

map()은 원본 배열을 변경하지 않고 , 원본 배열을 이용하여 새로운 배열을 만들어내고자 할 때 사용합니다.
forEach()는 원본 배열을 변경하지 않고 , 새로운 배열을 만들어내지 않으며 각 요소에 대한 작업을 시행하고자 할 때 사용합니다.