[Java Script] spread / 객체와 배열의 값을 그대로 복사해서 새로운 객체와 배열을 만드는 법

... 

이거를 사용한다

 

spread

spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다이다.

 이 문법을 사용하면, 객체 혹은 배열을 펼칠 수 있다.

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

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

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

기존의 객체가 가진 것이랑 또 추가해서 객체를 만들고 싶으면 spread 문법이 유용하다.

 

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

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

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

 

이렇게

 

그런데 만약에 

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

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

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

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

이렇게 해주면 모두 같은 값이 나온다.

왜냐하면 모두 같은 객체에 값을 넣어준 것이기 때문이다.

 

 

 

그리고

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

console.log(greenCuteSlime);

저기서 이렇게 greenCuteSlime도 만들어주었다.

purpleCuteSlime을 복사해서 color을 바꾸어주었다.

그러면 값을 덮어 쓰게 된다.

근데 만약에 color을 위에다가 선언하면 안바뀐다.

 

 

---

배열에서도 사용할 수 있다.

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

기존의 배열은 건드리지 않으면서 새로운 배열을 만든다

 

 

또 spread연산자를 여러번 쓸 수 있다.

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]