javascript] spread와 rest 연산자

자바스크립트의 스프레드 연산자와 rest연산자를 알아본다.

 

 

 

이런 객체가 있다고 가정해본다.

const slime = {
  name: '슬라임'
}

const cuteSlime = {
  name: '슬라임',
  attr: 'cute'
}

const pinkCuteSlime = {
  name : '슬라임',
  attr: 'cute',
  color: 'purple'
}

console.log(slime);
console.log(cuteSlime);
console.log(pinkCuteSlime);

각각 다른 슬라임이지만 공통적인 부분이 보인다. 이 부분을 ... Spread 연산자를 사용해서 중복되는 부분을 사용해본다.

 

const slime = {
  name: '슬라임'
}

const cuteSlime = {
  ...slime,
  attr: 'cute'
}

const pinkCuteSlime = {
  ...cuteSlime,
  color: 'purple'
}

console.log(slime);
console.log(cuteSlime);
console.log(pinkCuteSlime);

위의 코드는 각각의 객체에 있는 특성을 주입한 결과이며, 아래의 코드이며 아래의 코드는 하나의 객체에 특성을 주입시킨 것이다.

 

const slime = {
  name: '슬라임'
}

const cuteSlime = slime;
cuteSlime.attr = 'cute'

const pinkCuteSlime = cuteSlime;
pinkCuteSlime.color = 'pink'

console.log(slime);
console.log(cuteSlime);
console.log(pinkCuteSlime);

console.log(slime === cuteSlime)

 

그리고 스프레드는 배열에서도 사용이 가능하다.

const animals = ['개', '닭', '비둘기']
const anotherAnimals = [...animals, '닭둘기']
//const anotherAnimals2 = animals.concat('닭둘기')

console.log(animals)
console.log(anotherAnimals)
//console.log(anotherAnimals2)

또한 스프레드를 사용한 것과 concat을 사용했을 때와 같은 결과를 나타낸다.

 

스프레드는 중복으로도 사용이 가능하다.

const numbers = [1,2,3,4,5]

const spreadNumbers = [...numbers, 1000, ...numbers];

console.log(spreadNumbers)

 

즉, 스프레드 연산자는 기존 객체를 복사하고 추가할 때 사용한다.

 

---

다음은 rest 연산자를 알아본다.

 

rest는 스프레드와는 약간 반대되는 개념이다.

const pinkCuteSlime = {
  name : '슬라임',	 //이름
  attr : 'cute',	//속성
  color: 'pink'		//색상
}

const { color, ...rest } = pinkCuteSlime;
//const { attr, ...zz } = rest;

console.log(rest)

//스프레드는 특정 객체나 배열안에 다른 객체에 퍼트린다면
//rest는 반대로 모아둔다.

로그를 찍어보면 color를 제외한 name, attr이 로그에 출력된다.

그리고 ...rest에서 rest는 마음대로 바꿔도 된다.

 

배열에서도 사용이 가능한데 아래의 코드를 보자.

const numbers = [0, 1, 2, 3, 4, 5, 6];

const [one, ...rest] = numbers;

console.log(one)
console.log(rest)

rest를 찍어보면 0을 제외한 모든 숫자가 출력되는 것을 확인할 수 있다.

 

rest는 맨 마지막에 와야한다는 규칙이 있다.

const pinkCuteSlime = {
  name : '슬라임',	 //이름
  attr : 'cute',	//속성
  color: 'pink'		//색상
}

const { ...rest, color } = pinkCuteSlime; //순서가 바뀌면 안된다.

console.log(rest)

SyntaxError: /src/index.js: Rest element must be last element (7:15)

 

...rest의 순서가 바뀌면 위와 같은 SyntaxError가 나타난다.