JavaScript spread와 rest

ES6에서 도입
spread는 특정 객체나 배열 안에 다른 객체나 배열을 퍼트리는 역할
rest는 퍼져있는 것들을 모아오는 역할
둘 다 앞에 ...을 사용한다.

spread

• 객체에서 spread

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

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

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

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

{ name: '슬라임' }
{ name: '슬라임', attribute: 'cute' }
{ name: '슬라임', attribute: 'cute', color: 'purple' }

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

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


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

const greenCuteSlime = {
    ...purpleCuteSlime,
    color: 'green'
} // 위의 color값을 덮어 쓴다.

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' }

기존 객체를 복사하고 추가적인 값을 넣어줄 때 사용한다.

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

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


const purpleCuteSlime = cuteSlime;
purpleCuteSlime.color = 'purple';

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

console.log(slime === cuteSlime);

{ name: '슬라임', attribute: 'cute', color: 'purple' }
{ name: '슬라임', attribute: 'cute', color: 'purple' }
{ name: '슬라임', attribute: 'cute', color: 'purple' }
true

cuteSlime = slime과 purpleCuteSlime = cuteSlime으로 서로 연결되어 있기 때문에 모두 같은 결과가 나온다.

• 배열에서 사용

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기']; //aniamls.concat('비둘기')와 같다.

console.log(anotherAnimals);

[ '개', '고양이', '참새', '비둘기' ]

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

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);

[1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

rest

• 객체에서 rest

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

const {color, ...rest} = purpleCuteSlime;
console.log(color);
console.log(rest);
// rest안에 {name: '슬라임', attribute: 'cute'} 있음
// rest 이름은 마음대로 변경 가능

const { attribute, ...slime} = rest;
console.log(slime);

purple
{ name: '슬라임', attribute: 'cute' }
{ name: '슬라임' }

• 배열에서 rest

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, two, ...rest] = numbers;
// const[...rest, last] = numbers; 배열에서 ...rest는 가장 마지막에 와야 함
console.log(one);
console.log(two);
console.log(rest);

0
1
[ 2, 3, 4, 5, 6 ]

함수에서 rest와 spread

• 함수 파라미터에서 rest

function sum(...rest) {
    return rest.reduce((acc, current) => acc + current, 0);
}

console.log(sum(1,2,3,4,5,6,7));

28

기본값 0으로 시작해서 0이 acc가 되고 current에 배열이 들어가져서 순차적으로 acc + current가 실행 된다.

• 함수 인자에서 spread

function subtract(x, y) { //(x, y)는 파라미터, 함수에서 받아오는 값
    return x - y;
}
const numbers = [1, 2];
const result = subtract(...numbers) //(...numbers)는 인자, 함수를 사용할 때 넣어주는 값, spread
console.log(result);

-1

function sum(...rest) {
    return rest.reduce((acc, current) => acc + current, 0);
}

const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
console.log(sum(...numbers));

36