[JS] map 함수 / forEach 함수 에 대해서 알아보자

 

map 함수는 배열의 각 요소에 대해 주어진 함수를 호출하고, 그 결과로 새로운 배열을 변형하거나 수정할 때 유용하게

사용됩니다.

 

즉, 배열을 처리해서 새로운 배열로 반환하기 위한 함수입니다.

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

const numbers2 = numbers.map(function(number) {
    return number * 2;
});

console.log(numbers2);
// 출력: [2, 4, 6, 8, 10]

 

위 코드와 같이 numbers 배열에 있는 1,2,3,4,5 값이 각 숫자에 2를 곱한 값을 가지는 numbers2의 배열을 생성하게 되며 number2를 출력하게 됩니다.

 

---

 

forEach 함수는 각 요소를 순회하면서 제곱한 값을 지정한 배열에 추가합니다. 

반환 값이 없고, 원본 배열을 변경하거나 다른 배열에 값을 추가해야 합니다.

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

// forEach() 메서드 사용
const squaredNumbersForEach = [];

numbers.forEach(function(number) {
    squaredNumbersForEach.push(number * number);
});

console.log("Using forEach():", squaredNumbersForEach);
// 출력: "Using forEach():" [1, 4, 9, 16, 25]

 

---

 

이를 통해서 map 함수와 forEach함수의 사용 방식과 결과의 차이를 비교할 수 있습니다.

map 함수는 변환 작업을 통해 새로운 배열을 생성하며, forEach 함수는 각 요소에 대해 작업을 수행하면서 배열을 변경하거나 다른배열에 값을 추가합니다.

 

 

map 함수의 장점

 

1) 각 배열 요소를 변환하여 새로운 배열을 반환합니다.

2) 반환된 배열은 원본 배열과 길이가 같고, 각 요소는 변환된 값으로 구성됩니다.

3) 변환 작업을 통해 새로운 배열을 생성하기 때문에 원본 배열은 변경되지 않습니다.

 

map 함수의 단점

 

1) 새로운 배열을 생성하는 과정에서 메모리를 사용하므로, 큰 크기의 배열에 대해서는 성능 이슈가 있을 수 있습니다.

2) forEach 함수보다 코드가 길어질 수 있습니다.

 

 

forEach 함수의 장점

 

1) map 함수 보다 코드가 간결합니다.

2) 반환 값이 없기 때문에, 작업 결과를 다른 변수에 저장하거나 활용하지 않아도 됩니다.

3) 원본 배열을 직접 변경할 수 있으므로, 필요에 따라 배열을 수정할 수 있습니다.

 

forEach 함수의 단점

 

1) 배열의 각 요소를 다른 값으로 바꾸거나, 특정작업을 수행하거나, 배열의 각 요소를 필터링하는데 사용할 수 없습니다.

2) 새로운 배열을 반환하지 않습니다.