spread operator는 무엇인가.

spread operator는 string 또는 array 자료형에서 요소를 전부 한번에 찾을 수 있게 해주는 신문법이다.

 

const array = [ 'alpha', 'beta', 'omega' ];

이 배열을 spread operator로 꺼내보면..

 

console.log(...array);

이런 식으로 꺼낼 수 있고, 값은..

 

alpha beta omega 이렇게 콘솔창에 출력된다.

 

즉 for문이나 forEach를 쓰지 않고도 한번에 모든 값을 빼내오는 기능이다. (대괄호를 제거해준다고 생각하자.)

 

const text = 'array';

이런 스트링형을 

console.log(...text); 로 꺼내본다면,

 

t e x t 이런식으로 한 글자씩 꺼내준다.

 

그렇다면 spread operator는 어디에 주로 쓰이는가?

 

 

일단 spread operator는 배열을 합치는데에 쓰일 수 있다.

 

const array1 = [ 1, 2, 3 ];

const array2 = [ ...array1, 4, 5, 6 ];

 

이런식으로 ...변수명을 직접적으로 배열의 대괄호에 넣어줌으로서 해당 변수명이 가르키는 주솟값에 있는 배열이

호출하는 배열의 값으로 전부 복사되어 들어온다. 

여기서 복사는 얕은 복사가 아니라 값 자체를 복사하는 깊은 복사이다.

 

const array1 = [ 1, 2, 3 ];

const array2 = [ 4, 5, 6 ];

const array3 = [ ...array1, ...array2 ];

 

이런식으로 spread operator를 사용해 array1과 array2를 합쳐 각 배열의 값이 복사된 완전히 다른 배열을

생성할 수도 있다.

 

그리고 역시,

 

const array1 = [ 1, 2, 3 ];

const array2 = [ ...array1 ]; 

 

위와 같이 선언을 해준다면 복사하고자하는 배열의 주솟값을 복사(얕은 복사)가 아닌 값 전체를 전부 가져와 복사하는

깊은 복사를 수행해줄 수 있다.

 

그래서 array1과 array2는 같은 값을 가지지만 주소는 완전히 다른 별개의 변수가 되는것이다.

 

기본적으로 array와 object 자료형은 원시타입 변수가 아니라 주솟값을 가지는 변수이자 객체이기때문에

저런식으로 통째 복사를 해주어야한다.

 

 

또 object의 복사에도 사용할 수 있다.

 

const obj1 = { name: 'Jack', age: 28, gender: 'male' };

const obj2 = { ...obj1 };

 

이러면 obj1의 프로퍼티 값들이 낱개씩 모두 해체되어 다시 obj2라는 객체에 담긴다.

 

역시 깊은 복사를 수행해준것이다.

 

const obj1 = { name: 'Jack', age: 28, gender: 'male' };

const obj2 = { ...obj1, height: 177 };

 

또 역시 배열처럼 기존에 값들이 들어있는 객체 안에 옮기고자 하는 프로퍼티를 심어줄 수 있다.

 

 

그렇다면 객체를 복사할 때 key값이 겹친다면 어떻게될까?

요런식으로 말이다.

 

복사하는 o2에도 a라는 key값이 있고 복사되는 o1도 a라는 key 프로퍼티를 갖는다.

 

저런 경우에는 어찌됐든 뒤에 오는 a가 살아남는다.

앞에있는 중복된 key값의 프로퍼티는 제거된다.