[Javascript] forEach()와 map() 의 차이

 

긴가민가한 부분을 다시 공부해보았다

예제를 통해 공부하니 확실히 이해되는 느낌이 든다!

 

// foreach와 map 차이점
// 배열의 각 요소의 제곱값 구하기

//forEach 사용
const numbers = [1, 2, 3, 4, 5];
const squaredNumbersForEach = [];

numbers.forEach((number) => {
  squaredNumbersForEach.push(number * number);
});
console.log(squaredNumbersForEach);

// forEach 사용 결과값 : [1, 4, 9, 16, 25]
// forEach는 각 요소를 순회하면서 제곱한 값을 squaredNumbersForEach 배열에 추가한다.
// forEach는 반환 값이 없고, 원본 배열을 변경하거나 다른 배열에 값을 추가(push)해야 한다
// 원본 배열을 직접 변경할 수 있다
// 반환 값이 없어서 작업 결과를 다른 변수에 저장하거나 활용하지 않아도 된다
// 필터링 할 수 없다

// map 사용
const squaredNumbersMap = numbers.map((number) => {
  return number * number;
});

console.log(squaredNumbersMap);

// map 사용 결과값 : [1, 4, 9, 16, 25]
// map은 각 요소를 제곱하여 새로운 배열을 squaredNumbersMap를 생성한다.
// map은 변환 작업을 수행한 결과를 새로운 배열로 반환한다
// 기존 배열을 변경하지 않는다
// 새로운 배열로 메모리를 많이 차지한다
// 코드가 길어진다

 

 

각자의 장단점이 있으니 상황에 맞게 쓰는 연습이 필요할 것 같다

 

 

 

---