[JavaScript] Spread Operator 활용 방법

이런식으로 가지고 있는것들을 퍼뜨리면서 해체를 시킵니다.
배열에서는 [] 를 없애고,객체에서는 {}을, 문자열에서는 문자들을 나눠주죠.

Spread Operator는 배열이나, 객체의 병합 혹은 카피를 할때 많이 사용하게 됩니다.

병합

  let a = [1, 2, 3];
  let b = [3, 4, 5];

  //배열 합치기
  console.log([...a, ...b]);

  var obj = { lastName: "shin", firstName: "hoon" };
  var obj2 = { favoriteThing: "마라탕", age: "28" };

	//객체 합치기
  console.log({ ...obj, ...obj2 });

이런식으로 각기 다른 배열과 객체를 하나로 합칠 수가 있습니다.
...을 통해 두 값들의 껍데기를 없앤다음 다시 바깥에 껎데기를 씌어서 하나로 만든 셈이죠.

Deep Copy

뿐만아니라, Spread Operator를 통해 Deep Copy라는 것을 합니다

let a = [1,2,3];
let b = a;

let a = [1,2,3];
let b = [...a];

이 두가지의 차이점을 아시나요?
첫번째 방법은 참조 타입(reference type) 변수를 복사한 것이고,
두번째 방법은 Deep Copy를 한것입니다.

아래 코드를 보시면 참조 타입 변수 복사는 동일한 참조를 담고 있기 때문에 a의 값이 변하게 되면 b의 값도 따라 변하게 됩니다.

let a = [1, 2, 3];
   let b = a;
   a[3] = 4;
   console.log(b); //[1,2,3,4]

하지만 Deep Copy로 준 두번째 방법은 a를 변화시키더라도 b의 값에 영향을 주지 않죠. 이것이 딥카피라는 것입니다.

	let a = [1, 2, 3];
      let b = [...a];
      a[3] = 4;
      console.log(b); // [1,2,3]

참고자료
-https://velog.io/@surim014/JavaScript-Primitive-Type-vs-Reference-Type
-https://mygumi.tistory.com/322