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값의 프로퍼티는 제거된다.