map 메서드의 목적과 객체의 불변성

map 메서드의 목적

map은 기존 배열을 변경하지 않고 각 요소를 변환해서 새로운 배열을 만드는 함수이다.

즉, 원본 배열을 그대로 두고, 가공한 결과를 새 배열에 담는 것이 목적!

map은 반환(return)하는 값을 모아서 새로운 배열을 만들어주기 때문에. 반환값이 명확해야 한다.

const newArray = originalArray.map((item) => {
  // item을 가공해서 새로운 값을 반환
  return 가공된 값;
});

 

const products = [
    { name: "상품1", price: 10000 },
    { name: "상품2", price: 20000 },
    { name: "상품3", price: 30000 },
  ];
  
  const discountedProducts = products.map(function (product) {
    return product.price -= product.price / 10;
  console.log(discountedProducts);
  // 이렇게 나와야 합니다 => [{ name: "상품1", price: 9000 }, ...]

 

위 코드는 두 가지 문제가 있다.

1. 원본 객체를 직접 수정함 (불변성 위배)

product.price -= product.price / 10은 product.price 값을 직접 변경한다.

즉. 원본 배열 products의 객체가 바뀌어버린다.

map은 원본을 수정하지 않고 새로운 배열을 만들어야 하는데, 위 코드는 원본을 훼손하게 된다.

 

2. map의 반환값이 올바르지 않다.

위의 코드는 숫자(수정된 가격)을 반환한다.

그런데 map은 객체를 반환해야한다.

그래서 결과가 [9000, 18000, 27000]처럼 숫자 배열이 되고,

원하는 형태인 [ { name: "상품1", price: 9000 }, ... ] 이 나오지 않게된다.

 

 

올바른 방법 : 새로운 객체를 반환

const discountedProducts = products.map(function (product) {
  return {
    name: product.name,
    price: product.price * 0.9,  // 할인된 가격
  };
});

console.log(discountedProducts);
//[
  { name: "상품1", price: 9000 },
  { name: "상품2", price: 18000 },
  { name: "상품3", price: 27000 }
  ]

 

이렇게 하면 새로운 객체를 반환할수 있고, 원본 배열 products는 수정되지 않는다.