[JavaScript] 배열을 조작하는 push()메서드 종류 대신 사용할 수 있는 펼침 연산자 사용 방법 및 사용해야 하는 이유

자바스크립트를 사용하면서 배열을 사용할 경우가 많다. 

특히나, 배열을 조작하기 위해 흔히 사용하는 push()메서드를 생각해보자. push() 메서드의 경우는 새로운 항목을 기존 배열 뒤에 추가해 원본배열을 변경하게 된다.  즉, 원본 배열을 조작하게 되는 것이다. 하지만 펼침연산자(...)을 이용하면 원본 배열이 조작되는 부수 효과를 방지할 수 있다.

 

모던 자바스크립트에서는 상당수가 함수형 프로그래밍 형식을 취하기 때문에 부수효과와 조작이 없는 코드를 지향해야 한다.

 

const cart = [
  {
    name: "The Foundation Trioloigy",
    price: 19.99,
    discount: false,
  },
  {
    name: "Godel, Escher, Bach",
    price: 15.99,
    discount: false,
  },
  {
    name: "Red Mars",
    price: 5.99,
    discount: true,
  },
];
const reward = {
  name: "Guide to Science Fiction",
  discount: true,
  price: 0,
};
 
function addFreeGift(cart) {
  if (cart.length > 2) {
    cart.push(reward);
    return cart;
  }
  return cart;
}
 
function sumarizeCart(cart) {
  const discountable = cart.filter((item) => item.discount);
  if (discountable.length > 1) {
    return {
      error: "할인 상품은 하나만 주문할 수 있습니다.",
    };
  }
 
  const cartWithReward = addFreeGift(cart);
  return {
    discounts: discountable.length,
    items: cartWithReward.length,
    cart: cartWithReward,
  };
}
 
console.log("cart : ", cart);
// cart :  [
//   { name: 'The Foundation Trioloigy', price: 19.99, discount: false },
//   { name: 'Godel, Escher, Bach', price: 15.99, discount: false },
//   { name: 'Red Mars', price: 5.99, discount: true }
// ]
 
console.log("cart.length : ", cart.length); // 3
console.log("sumarizeCart() : ", sumarizeCart(cart));
// sumarizeCart() :  {
//   discounts: 1,
//   items: 4,
//   cart: [
//     { name: 'The Foundation Trioloigy', price: 19.99, discount: false },
//     { name: 'Godel, Escher, Bach', price: 15.99, discount: false },
//     { name: 'Red Mars', price: 5.99, discount: true },
//     { name: 'Guide to Science Fiction', discount: true, price: 0 }
//   ]
// }
 
console.log("cart : ", cart); // 원본 배열이 수정됨.
// cart: [
//   { name: "The Foundation Trioloigy", price: 19.99, discount: false },
//   { name: "Godel, Escher, Bach", price: 15.99, discount: false },
//   { name: "Red Mars", price: 5.99, discount: true },
//   { name: "Guide to Science Fiction", discount: true, price: 0 },
// ];
 

 

 

push() 사용 예2 )

const cartWithReward = addFreeGift(cart); 을 33번 라인으로 올리니 에러가 발생하게 된다. 

const cart = [
  {
    name: "The Foundation Trioloigy",
    price: 19.99,
    discount: false,
  },
  {
    name: "Godel, Escher, Bach",
    price: 15.99,
    discount: false,
  },
  {
    name: "Red Mars",
    price: 5.99,
    discount: true,
  },
];
const reward = {
  name: "Guide to Science Fiction",
  discount: true,
  price: 0,
};
 
function addFreeGift(cart) {
  if (cart.length > 2) {
    cart.push(reward);
    return cart;
  }
  return cart;
}
 
function sumarizeCart(cart) {
  const cartWithReward = addFreeGift(cart);
 
  const discountable = cart.filter((item) => item.discount);
  if (discountable.length > 1) {
    return {
      error: "할인 상품은 하나만 주문할 수 있습니다.",
    };
  }
 
  return {
    discounts: discountable.length,
    items: cartWithReward.length,
    cart: cartWithReward,
  };
}
 
console.log("cart : ", cart);
// cart: [
//   { name: "The Foundation Trioloigy", price: 19.99, discount: false },
//   { name: "Godel, Escher, Bach", price: 15.99, discount: false },
//   { name: "Red Mars", price: 5.99, discount: true },
// ];
 
console.log("cart.length : ", cart.length); // 3
console.log("sumarizeCart() : ", sumarizeCart(cart)); // { error: '할인 상품은 하나만 주문할 수 있습니다.' }
 

 

 

펼침연산자 사용 예)

펼침연산자를 사용하니 원본 배열은 수정되지 않고 제대로 작동하는 것을 확인할 수 있다.

const cart = [
  {
    name: "The Foundation Trioloigy",
    price: 19.99,
    discount: false,
  },
  {
    name: "Godel, Escher, Bach",
    price: 15.99,
    discount: false,
  },
  {
    name: "Red Mars",
    price: 5.99,
    discount: true,
  },
];
const reward = {
  name: "Guide to Science Fiction",
  discount: true,
  price: 0,
};
 
function addGift(cart) {
  if (cart.length > 2) {
    return [...cart, reward];
  }
  return cart;
}
 
function sumarizeCart(cart) {
  const cartWithReward = addGift(cart);
 
  const discountable = cart.filter((item) => item.discount);
  if (discountable.length > 1) {
    return {
      error: "할인 상품은 하나만 주문할 수 있습니다.",
    };
  }
 
  return {
    discounts: discountable.length,
    items: cartWithReward.length,
    cart: cartWithReward,
  };
}
 
console.log("addGift() : ", addGift(cart));
// addGift() :  [
//   { name: 'The Foundation Trioloigy', price: 19.99, discount: false },
//   { name: 'Godel, Escher, Bach', price: 15.99, discount: false },
//   { name: 'Red Mars', price: 5.99, discount: true },
//   { name: 'Guide to Science Fiction', discount: true, price: 0 }
// ]
 
console.log("cart : ", cart); // 원본 배열이 수정되지 않음.
// cart: [
//   { name: "The Foundation Trioloigy", price: 19.99, discount: false },
//   { name: "Godel, Escher, Bach", price: 15.99, discount: false },
//   { name: "Red Mars", price: 5.99, discount: true },
// ];
 

 

펼침연산자 사용 예2)

const titles = ["Moby Dick", "White Teeth"];
const moreTitles = [...titles, "The Conscious Mind"];
console.log("moreTitles : ", moreTitles); //  [ 'Moby Dick', 'White Teeth', 'The Conscious Mind' ]
console.log("titles : ", titles); // [ 'Moby Dick', 'White Teeth' ]
 
const moreTitles2 = ["The Conscious Mind", ...titles];
console.log("moreTitles2 : ", moreTitles2); // [ 'The Conscious Mind', 'Moby Dick', 'White Teeth' ]

 

펼침연산자 사용 예3)

// 배열 앞에 추가하기
const titles = ["Moby Dick", "White Teeth"];
console.log("titles : ", titles); // [ 'Moby Dick', 'White Teeth' ]
titles.shift("The Consciouys Mind");
console.log("밑 titles : ", titles); // [ 'White Teeth' ]
 
const moreTitles = ["Moby Dick", "White Teeth"];
console.log("moreTitles : ", moreTitles); // [ 'Moby Dick', 'White Teeth' ]
const evenMoreTitles = ["The Conscious Mind", ...moreTitles];
console.log("evenMoreTitles : ", evenMoreTitles); // [ 'The Conscious Mind', 'Moby Dick', 'White Teeth' ]
 
// 복사하기
const toCopy = ["Moby Dick", "White Teeth"];
console.log("toCopy : ", toCopy); // [ 'Moby Dick', 'White Teeth' ]
// slice() 얕은복사
const copied = toCopy.slice();
console.log("copied : ", copied); // [ 'Moby Dick', 'White Teeth' ]
 
const moreCopies = ["Moby Dick", "White Teeth"];
console.log("moreCopies : ", moreCopies); // [ 'Moby Dick', 'White Teeth' ]
// ... 얕은복사
const moreCopied = [...moreCopies];
console.log("moreCopied : ", moreCopied); // [ 'Moby Dick', 'White Teeth' ]

 

 

 

 

 

 

 

베타존 : 네이버쇼핑 스마트스토어