spread 와 rest-spread 연산자 (feat. 비구조화할당)

1. spread 연산자 객체에서 이용하기

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

const cuteSlime = {
    ...slime,
    attribute: 'cute'
};

const purpleCuteSlime = {
    ...cuteSlime,
    color: 'purple'
};

const greenCuteSlime = {
    ...purpleCuteSlime,
    color: 'green'
};

console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);
console.log(greenCuteSlime);

//출력값
{ name: '슬라임' }
{ name: '슬라임', attribute: 'cute' }
{ name: '슬라임', attribute: 'cute', color: 'purple' }
{ name: '슬라임', attribute: 'cute', color: 'green' }

...을 이용했을때 이전에 선언되었던 객체가 같이 출력되는것을 볼 수 있습니다.

즉, 기존객체를 복사하고 거기에 추가적인 값을 넣어줄때 사용합니다. 또한 값을 덮어씌우기도 가능합니다.

 

 

 

2. spread연산자 배열에 사용하기

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];

console.log(animals);
console.log(anotherAnimals);

//출력값
[ '개', '고양이', '참새' ]
[ '개', '고양이', '참새', '비둘기' ]

 

 

 

3. rest spread 연산자 사용하기

const purpleCuteSlime ={
    name: '슬라임',
    attribute: 'cute',
    color: 'purple'
};

const {color, ...rest} = purpleCuteSlime;
console.log(color);
console.log(rest);

//출력값
purple
{ name: '슬라임', attribute: 'cute' }

출력값을 보면 알 수 있는것은, rest spread의 내용은 color로 비구조화할당을 제외한 값이 나오게 됩니다.

그리고 꼭 rest라고 작성하지 않고 다른 단어를 사용해도 됩니다.

 

 

 

4. rest spread에서 다른이름 사용하기

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

const [one, two, ...number] = numbers;

console.log(one);
console.log(two);
console.log(number);

//출력값
0
1
[ 2, 3, 4, 5, 6 ]

비구조화할당에서 임의로 다른 이름을 만들어도 값이 출력되는것을 알 수 있습니다.

 

 

 

**주의** rest spread는 복수로 비구조화할당할때 앞에 선언할 수 없습니다.

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

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

console.log(rest);

//출력값
const [...rest, last] = numbers;
       ^^^^^^^

SyntaxError: Rest element must be last element

rest는 반드시 마지막에 선언해야합니다.