Javascript - spread

... 사용

객체 혹은 배열을 펼칠 수 있다.

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

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

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

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

위와 같은 상황에서 중복을 줄이기 위해서 spread 사용

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

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

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

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

만약 이렇게 쓴다면, 모든 객체가 같은 값을 갖게 된다.

하지만

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(pupleCuteSlime);
console.log(greenCuteSlime);

위와 같은 방식으로 쓴다면, 그 내부의 값을 덮어쓰게 된다. 

하지만 덮어쓸 값을 spread연산자 아래에 써야한다.

 

배열에서도 spread 연산자 사용 가능

const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기']; // animals.concat('비둘기'); 랑 같은 코드

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

연속으로 spread연산자 사용

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

const spreadNumbers = [...num, 1000, ...num]
console.log(spreadNumbers); => [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]