[Javascript ES6] Spread(...) 연산자 활용법

Spread 연산자는 ES6에서 도입되었다. 

Spread는 ...을 변수 앞에 붙여서 사용하는데, 배열이나 문자열같이 반복 가능한 내용들을 각각의 요소(element)로 풀어 헤쳐준다. 

예시를 통해 살펴보자.

 

1 2	const positive = [1, 2, 3, 4]; console.log(positive);

아래와 같이 평범하게 array가 출력된다.

이번에는 positive 변수명 앞에 ...을 붙여서 spread를 사용해서 출력해본다.

 

1	console.log(...positive);

이번에는 array가 그대로 출력되지 않고, 각 요소(element)로 풀어 헤쳐져 출력된다.

그럼 Spread 연산자는 어떻게 활용할 수 있을까?

배열들을 합치는데 사용하면 편리하다.

 

const positive = [1, 2, 3, 4];
const negative = [-1, -2, -3, -4];

const number = [...negative, ...positive];

console.log(number);

 

위와 같이 2개의 array를 Spread 연산자를 이용해 간단하게 합칠 수 있다. 결과는 아래와 같다.

만약 Spread 연산자를 쓰지 않고 바로 합치게 되면 아래와 같이

array 속에 각각의 array가 존재하는 방식으로 합쳐지게 된다.

Spread 연산자는 Array 뿐만 아니라, Object를 합치는 데에도 활용할 수 있다.

const name = {"firstName": "Namu", "lastName": "Kim"};
const bio = {"height": 170, "age": 30};

const userInfo = {...name, ...bio};

console.log(userInfo);

위와 같이 2개의 object를 Spread를 이용해서 합치게 되면 아래와 같다.

object를 합칠 때에도 spread를 이용하지 않으면 각각의 object가 element로 들어가게 된다.

object에서의 다른 활용 법을 알아보자.

spread를 이용하면 object 변수의 선언을 깔끔하게 할 수 있다.

value가 있을 경우 key를 추가하고, value가 없을 경우에는 key를 추가하지 않도록 할 수 있다.

let price = "";

let product = {
  name: "apple",
  ...(price !== "" && {price})
};

console.log(product);

위 코드를 실행시키면 결과는 아래와 같다. 

price !== "" 가 false이기 때문에 false를 반환하고, object에는 값이 추가되지 않는다.

그럼 price의 값이 있으면 어떻게 될까?

price = 1000;

let product = {
  name: "apple",
  ...(price !== "" && {price})
};

console.log(product);

위 코드를 실행시면 결과는 아래와 같다.

price !== "" 가 true이기 때문에 {price}를 반환하고 spread가 {price}의 element를 풀어 헤쳐서 추가해준다.

끝.