[javascript] spread

펼쳤다.. 접었다...

spread

객체에서의 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"}

이렇게 작성하기보단 기존에 만들었던 객체를 참고해서 새로운 객체를 만들고 싶다면 spread를 쓰면 된다.

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

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

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

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

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

console.log(slime === cuteSlime);
// false

cuteSlime에서 기존에 slime이 갖고 있던 것들을 복사해서 쓰고 싶다 하면
... 을 써주고 뒤에 변수명을 입력해 준다. (여기서... 은 연산자이다. spread 연산자)
그럼 변수에 있던 내용들이 그대로 복사가 되어 나타난다. 하지만 여기서 마지막 console을 확인해보면 false가 나온다.

spread 연산자는 기존 객체를 복사하고 그 값을 어딘가에 넣어줄 때 많이 사용을 한다. 기존의 코드와 비슷해 보이지만 실제로 같지 않다는 걸 console이 보여주고 있다.

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

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

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

console.log(slime === cuteSlime);
// true

하지만 spread 연산자를 사용하지 않고 아래 예제처럼 작성해 보면 console에 찍히는 건true가 나오게 된다. 이 예제에서는 결국 다 같은 객체를 갖고 있다고 보면 된다. 왜냐하면
const cuteSlime = slime;을 적어줬기 때문에 기존에 slime이 갖고 있던 객체를 불러오게 된다.

배열에서의 spread

배열에서도 똑같이 spread 연산자를 사용할 수 있다.

const animals = ["개", "고양이", "참새"];
const anotherAnimals = [...animals, "독수리"];

console.log(anotherAnimals);
// (4) ["개", "고양이", "참새", "독수리"]

예전에 정리했던 concat()과 같은 기능을 갖고 있다. 하지만 concat()으로 작성하게 되면

const anotherAnimals = animals.concat("비둘기");

이렇게 작성을 해야 하는데 spread로 작성했을 때 "이게 어떤 역할을 하는구나"라고 좀 더 알아보기가 쉽다.

배열에서 여러 번 사용해 보기

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

const spreadNumbers = [...numbers, 1000, ...numbers];
console.log(spreadNumbers);
// (11) [1, 2, 3, 4, 5, 1000, 1, 2, 3, 4, 5]

결국에... numbers는 그 자리에 [1, 2, 3, 4, 5]가 들어온다는 걸 뜻하고 결과는 위와 같이 나온다.