JavaScript - Spread

• ES2015에서 등장한 문법이다.
• 배열에서 유용하게 활용할 수 있다.
• 스프레드 구문 시 주의해야할 점은, 배열에 요소가 1개인 경우 에러가 발생한다는 점이다.

spread 기능은 다음과 같다.

 

1. 배열 풀기

'펼치다'라는 의미처럼 여러개의 값을 하나로 묶은 배열을 스프레드를 사용해서 다시 풀어놓을 수 있다.

const numbers = [1, 2, 3];
console.log(…numbers); // 1 2 3 (배열이 아님) 마치 console.log(1, 2, 3); 한 것처럼 출력된다.

2. 깊은 복사

const firstAnimals = ['dog', 'cat'];
const secondAnimals = […firstAnimals];
secondAnimals.push(‘rabbit’);
console.log(firstAnimals); // ['dog', 'cat']
console.log(secondAnimals); // ['dog', 'cat', 'rabbit']


const thirdAnimals = […firstAnimals, 'bird'];
console.log(thirdAnimals); // ['dog', 'cat', 'bird']

위와같이, 스프레드 구분을 사용해서 firstAnimals.slice()를 한 것과 마찬가지로 깊은 복사가 된 것을 확인할 수 있다.

그리고 아래쪽의 thirdAnimals에서처럼 작성하면, 복사와 요소추가를 동시에 할 수 있다.

3. 배열 합치기

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = […arr1, …arr2];

4. 함수의 argumnet로 활용

const printValue = (first, second, third) => {
	console.log(first);
	console.log(second);
	console.log(third);
}
const arr = [‘mouse’, ‘cat’, ‘dog’];
printValue(…arr);

여러개의 파라미터를 필요로하는 함수가 있고, 이 함수에 넘길 값들을 배열의 형태로 모아두었다면, 스프레드구문으로 넘길 수 있다.

5. 배열을 객체로

const animals = [‘mouse’, ‘cat’, ‘dog’];
const animalsObject = {…animals};
console.log(animalsObject); // {0: ‘mouse’, 1: ‘cat’, 2: ‘dog’}

배열을 스프레드구문으로 객체로 만들면 위와같이 인덱스가 key(property name)으로 생성된다.

 

6. 객체에서 spread구문 사용하기

ES2018에서 객체에도 Spread구문을 사용할 수 있는 표준이 등장했다.

const kong = {
	type : 'cat',
	hair : 'soft'
}
const mimi = { …kong, size: 'big' };

주의점 

• spread구문을 통해 배열을 객체로는 만들 수 있었지만, 객체를 배열로 만들수는 없다.
• 객체에 스프레드 구문을 사용해도 함수의 아규먼트로도 사용할 수 없다.
• 객체에 스프레드 구문을 사용할 때에는 반드시 {} 중괄호 안에서 활용해야 한다.