TIP 7: 펼침 연산자로 배열을 본떠라

펼침 연산자를 이용해 배열 작업을 단순하게 만들 수 있다. 

 

펼침 연산자:

 

• 마침표 세개(...)로 표시한다. 
• 배열에 포함된 항목을 목록으로 바꿔준다.

 

---

 

 

문제

1. 반복문만 사용하여 배열에서 항목을 제거하려 할 때: 코드가 길어지는 문제가 있음

function removeItem(items, removable) {
  const updated = [];
  for (let i = 0; i < items.length; i++) {
    if (items[i] !== removable) {
      updated.push(items[i]);
    }
  }
  return updated;
}

 

 

2. splice()를 사용해서 항목을 제거하려 할 때: splice()가 원본 배열을 조작하는 문제가 있음

function removeItem(items, removable) {
  if (items.includes(removable)) {
    const index = items.indexOf(removable);
    items.splice(index, 1);
  }
  return items;
}

const books = ['practical vim', 'moby dick', 'the dark tower'];
const recent = removeItem(books, 'moby dick');
const novels = removeItem(books, 'practical vim');

console.log(novels) //['the dark tower'];
console.log(books) //['the dark tower'];

-처음 removeItem()을 호출할 때 배열 books를 전달하고 'moby dick'을 제거한 배열을 반환 받는다.

-그러나 이 과정에서 배열 books도 변경되었다.  ['the dark tower'] 로. (원본이 변경된 것!)

 

 

3. slice()를 사용해서 항목을 제거하려 할 때(원본 배열 변경 X): 무엇이 반환되는 지 정확하지 않음

function removeItem(items, removable) {
  if (items.includes(removable)) {
    const index = items.indexOf(removable);
    return items.slice(0, index).concat(items.slice(index + 1));
  }
  return items;
}

const books = ['practical vim', 'moby dick', 'the dark tower'];
const recent = removeItem(books, 'moby dick');
const novels = removeItem(books, 'practical vim');

console.log(recent); //['practical vim', 'the dark tower'];
console.log(novels); //['moby dick', 'the dark tower'];
console.log(books) //['practical vim', 'moby dick', 'the dark tower'];

-slice()로 원본 배열을 변경하지 않고, 요소를 제거 후 새로운 배열을 생성한다.

-concat()으로 배열 두 개를 병합한다.

 

 

 

---

 

3번 코드를 펼침 연산자로 코드를 짧게 정리할 수 있다. 

function removeItem(items, removable) {
  if (items.includes(removable)) {
    const index = items.indexOf(removable);
    return [...items.slice(0, index), ...items.slice(index + 1)];
  }
  return items;
}

const books = ['practical vim', 'moby dick', 'the dark tower'];
const recent = removeItem(books, 'moby dick');
const novels = removeItem(books, 'practical vim');

console.log(recent); //['practical vim', 'the dark tower'];
console.log(novels); //['moby dick', 'the dark tower'];
console.log(books) //['practical vim', 'moby dick', 'the dark tower'];

-펼침 연산자를 slice()와 함께 사용하면 하위 배열을 목록으로 변환해 대괄호 안에 작성할 수 있다. 

-원래 배열에 영향을 주지 않고 새로운 배열을 생성한다. 

-읽기 쉽고 간결하며, 재사용 할 수 있고 예측할 수도 있다.  

 

 

 

함수의 인수 목록을 생성할 때 펼침 연산자를 자주 사용한다. 

다음은 배열의 담긴 정보의 서식을 생성하는 간단한 함수를 만든 것이다. 

const book = ['Reasons and Persons', 'Derek Parfit', 19.99];

function formatBook(title, author, price) {
  return `${title} by ${author} $${price}`;
}

 

위의 함수에 정보를 전달하려면 다음과 같이 쓸 수 있다. 

formatBook(book[0], book[1], book[2]);

 

하지만 아래 함수는 책에 대한 정보의 양이 바뀌었을 때 코드를 고치치 않아도 된다. 

formatBook(...book);

*매개변수는 인수의 목록이므로 펼침 연산자를 이용하면 배열을 인수 목록으로 쉽고 빠르게 변환할 수 있다.