[JavaScript] 펼침 연산자(...)로 배열을 복사해야하는 이유

자바스크립트로 코딩을 하다보면 배열을 무수하게 많이 사용하게 된다. 더불어 배열은 데이터를 다룰 때 엄청난 수준의 유연성을 제공한다. 그렇지만 배열에는 수많은 메서드가 있으므로 혼란스럽거나 조작(mutation)과 부수 효과(side efect)로 인한 문제에 맞닥뜨릴 수 있다. 

 

하지만, 펼침 연산자를 사용하면 최소한의 코드로 배열을 빠르게 생성하고 조작할 수 있게 된다. 펼침 연산자의 기능은 단순하다. 배열에 포함된 항목을 모곡으로 바꿔준다. 목록은 매개변수 또는 새로운 배열을 생성할 때 사용할 수 있는 일련의 항목이다.그리고 이런 이점들은 단순히 배열에만 국한되지 않는다. 맵 컬렉션, 함수의 매개변수, 제너레이터를 이용하는 데이터 구조나 클래스 속성에도 사용이 가능하다.

 

간단한 배열에 펼침연산자를 사용해보자.

주의할점은 ...cart 같이 펼침연산자만 단독으로 사용할 수 없다. 밑에처럼 단독으로 사용하지 않아야한다. 그리고 펼침연산자의 결과를 변수에 할당할 수 없다. 정보를 어디든 펼쳐 넣어야 한다.

 

const cart = ['apple', 'banana']
console.log('cart : ', cart) // [ 'apple', 'banana' ]
 
const copyCart = [...cart]
console.log('copyCoart : ', copyCart) // [ 'apple', 'banana' ]
 
const copyCart2 = [...cart, 'warterMellon']
console.log('copyCoart2 : ', copyCart2) // [ 'apple', 'banana', 'warterMellon' ]
 
// 배열을 수정해도 원본은 그대로 출력된다.
console.log('cart : ', cart) // [ 'apple', 'banana' ]

const items = ["AAA", "BBB", "CCC", "DDD"];
 
function removeItem(items, removable) {
  const index = items.indexOf(removable);
  items.splice(index, 1);
  return items;
}
 
console.log("removeItem() : ", removeItem(items, "BBB"));
// ['AAA', 'CCC', 'DDD' ]
console.log("items : ", items);
// [ 'AAA', 'CCC', 'DDD' ]
 

for문만을 사용했을 때에 비해 훨씬 깔끔해졌다. 다만 splice() 메서드의 단점은 원본 배열까지 조작된다는 점이다. splice()는 for문의 대안처럼 사용할 수 도 있지만, 원본배열의 조작은 많은 혼란을 가져오므로 피하는 것이 좋다.

 

그렇다면 다른방법은 또 무엇이 있을까? slice()가 존재한다. slice()는 원본 배열을 변경하지 않고 얕은 복사를 한다.

const items = ["AAA", "BBB", "CCC", "DDD"];
 
function removeItem(items, removable) {
  const index = items.indexOf(removable);
 
  return items.slice(0, index).concat(items.slice(index + 1));
}
console.log("removeItem() : ", removeItem(items, "BBB"));
// [ 'AAA', 'CCC', 'DDD' ]
console.log("items : ", items);
// [ 'AAA', 'BBB', 'CCC', 'DDD' ]
 

 

slice()와 concat() 조화는 원본배열은 건들이지 않고 새로운 배열을 만들어내는 훌륭한 작업을 한다. 다만, concat을 사용해서 배열 두개를 병합해서 하나의 배열로 만든다는 사실을 이해해야 한다. 무슨 일이 일어나는지를 눈으로만 봐서는 정확히 어떤 작업을 하는 코드인지 확인이 어려운게 단점이다.

 

 

그렇다면 펼침연산자(...연산자)를 사용하면 어떨까? ... 연산자만 사용하기 때문에 가독성이 더욱 좋아진다.

const items = ["AAA", "BBB", "CCC", "DDD"];
 
function removeItem(items, removable) {
  const index = items.indexOf(removable);
  return [...items.slice(0, index), ...items.slice(index + 1)];
}
console.log("removeItem() : ", removeItem(items, "BBB"));
// [ 'AAA', 'CCC', 'DDD' ]
 

 

 

 

 

추가적으로, 펼침연산자는 함수의 인수 목록을 생성할 때 많이 사용되는 방법이다. 

간단한 예시이다. 

const book = ["IT의 미래", "이정현", 99000];
 
function formatBook(title, author, price) {
  return `책 제목: ${title} 저자: ${author} 가격: ${price}원`;
}
 
console.log(
  "formatBook(book[0], book[1], book[2]) : ",
  formatBook(book[0], book[1], book[2])
);
// 책 제목: IT의 미래 저자: 이정현 가격: 99000원

 

인수들을 일일이 넣어줌으로써 출력이 가능하다. 하지만 펼침연산자를 사용하면 훨씬 간단하게 처리된다.

formatBook인수에 ...book을 넣어줌으로써 간단하게 실행이 가능해진다. 추가적으로 인수의 항목이 늘었을 때도 추가적인 코드가 적어짐으로써 실수를 줄일 수 있게 된다.

const book = ["IT의 미래", "이정현", 99000];
 
function formatBook(title, author, price) {
  return `책 제목: ${title} 저자: ${author} 가격: ${price}원`;
}
 
console.log("formatBook(...book) : ", formatBook(...book));
// 책 제목: IT의 미래 저자: 이정현 가격: 99000원
 
const book2 = ["IT의 미래", "이정현", 99000, "2020년10월08일"];
 
function formatBook2(title, author, price, publicationDate) {
  return `책 제목: ${title} 저자: ${author} 가격: ${price}원 발간일: ${publicationDate}`;
}
 
console.log("formatBook2(...book2) : ", formatBook2(...book2));
// 책 제목: IT의 미래 저자: 이정현 가격: 99000원 발간일: 2020년10월08일
 

 

 

 

 

 

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