[JavaScript] Spread Operator 활용 방법

안녕하세요 :)
이번 글에서는 Spread Operator라는 개념에 대해 알아보겠습니다.

먼저 Spread의 영단어 뜻을 네이버 영어사전에 검색해보면

펼치다라는 뜻이 나옵니다.

실제 자바스크립트에서도 이런 느낌으로 이해하시면 될 것 같습니다.
어떠한 문자열, 배열, 객체등을 감싸고 있는것을 ... 이라는 문법을 통하여 감싸고 있는 것을 허물어서 펼쳐주는거라고 보시면 됩니다.

활용 예시

  let array = ["hello", "world"];
  //배열을 spread
  //대괄호를 제거
  //hello world
  console.log(...array);

  let letter = "hello";
  //문자를 spread
  //'h','e','l','l','o' -> 이런식으로 해체가됨
  console.log(...letter);

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

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