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

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

배열에는 수많은 메서드가 있어서 혼란스럽거나 조작과 부수 효과로 인한 문제에 맞닥뜨릴 수 있는데 다행히 펼침 연산자를 사용하면 최소한의 코드로 배열을 빠르게 생성하고 조작할 수 있다.

 

펼침연산자는 ...로 표시한다.

 

펼침연산자의 기능은 배열에 포함된 항목을 목록으로 바꿔주는데 목록은 매개변수 또는 새로운 배열을 생성할 때 사용할 수 있는 일련의 항목이다. 이런 작은 기능이 여러 가지 이점을 가져다준다.

 

배열에서 항목을 제거하려고 할 때 반복문을 통해 작성할 수 있지만 코드 길이가 길어지므로 배열 메서드인 splice()를 사용할 수도 있다.

 

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

 

하지만 splice() 메서드는 원본 배열을 조작하는데 이는 함수에 전달하는 정보가 근본적으로 달라지는 것을 예측할 수 없기 때문에 위험하다.

 

또한 slice() 메서드를 사용하는 방법이 있는데 slice() 메서드는 원본 배열을 변경하지 않고 배열의 일부를 반환한다. slice() 메서드에 인수로 시작점과 종료점을 전달하면 그 사이에 있는 모든 항목을 반환한다.

 

또한 종료점을 생략하고 시작점만 인수로 전달하면 시작점부터 배열의 마지막 항목까지 반환한다.

 

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

이 코드는 꽤 훌륭하지만 무엇이 반환되는지 정확하지 않다. 바로 이런 곳이 펼침 연산자를 사용하기 적합하다. 

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

위 코드는 조작이 없고 읽기 쉽고 간결하다. 그리고 재사용할 수 있으며 예측 가능하다. 우리가 좋아하는 특징을 모두 갖추고 있다.

 

함수의 인수 목록을 생성할 때 펼침 연산자를 사용하는 것은 많이 사용하는 방법 중 하나이다. 배열에 담긴 정보의 서식을 생성하는 간단한 함수를 만들어보면

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);