⚡️ ES6 Spread Operator

그냥 마침표를 연달아서 3개... 찍으면 그게 Spread Operator라는 문법이다.
한글로는 펼침연산자 이렇게 부른다. 무슨 역할을 하냐면 "괄호제거 해주는 연산자"이다.

var 어레이 = ['hello', 'world'];
console.log(어레이);
console.log(...어레이);

그럼 어레이라는 array에 붙어있떤 괄호를 제거해준다.
▲ 3번줄처럼 Spread Operator를 붙여서 출력해보면 괄호가 제거된 'hello','world'만 콘솔창에 출력된다.
이게 Spread Operator의 기능 끝이다.

동작원리

문자에 붙이면 문자에 붙은 괄호를 제거해준다.
문자도 array 자료형과 매우 비슷한데, 안보이는 대괄호가 쳐져있다고 보면된다.
(실제로 비슷한건 아니고 느낌)

var 문자 = 'hello';
console.log(문자[0]);
console.log(문자[1]);

문자를 이런식으로 array처럼 출력할 수 있다.
hello라는 문자에도 뭔가 대괄호 쳐있는 ['h', 'e', 'l', 'l', 'o'] 느낌이 난다.
실제로 그렇다는건 아니고 느낌
그럼 문자에 spread를 붙이면? 대괄호를 제거해준다.

var 문자 = 'hello';
console.log(문자);
console.log(...문자);

위 코드 셋째줄을 출력해보면 콘솔창에 h e l l o 라는 문자들이 출력된다.
console.log('h', 'e', 'l', 'l', 'o') 이렇게 한거랑 똑같다고 보면 된다.
그래서 spread를 문자에 붙이면 알파벳을 하나씩 펼쳐준다.

활용 방법

1. Array 합치기/복사

array 두개를 합치고 싶으면 어떻게 할까?

var a = [1,2,3];
var b = [4,5];
var c = [여기엔 1,2,3,4,5 가 들어오게 만들려면?];

var a = [1,2,3];
var b = [4,5];
var c = [...a, ...b];

이렇게 한 뒤에 c라는 어레이를 출력해보면 [1,2,3,4,5]가 되어 있다.
... 연산자를 이용해서 괄호를 없앤 a와 b를 집어넣는다는 이야기다.

어레이 복사의 경우
▼ a라는 어레이를 복사해서 b를 만들고 싶으면 보통 이렇게 하지않을까?

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

console.log(a);
console.log(b);

등호 = 를 이용하면 쉽게 a에 있던 값을 b에 집어넣을 수 있다. ([1,2,3]복사완료!)
그런데 자바스크립트에선 복사를 이렇게 하면 안된다.
등호로 복사하면 a와 b변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어난다.
그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 버그가 발생한다.

그래서 값을 공유하지 않고 각각 독립적인 값을 저장하도록
array를 복사하려면 spread를 사용하면 된다.

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

console.log(a);
console.log(b);

spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 것이다.
이렇게하면 아까처럼 a와 b 변수의 값 공유가 일어나지 않는다.

2. Object 합치기/복사

object 두개를 합치고 싶으면?

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, 그리고 o1에 있는거 전부.. }

o2를 만들고 싶은데 o1에 있던 내용들을 그대로 가져다 추가하고 싶다.
그럼 어떻게 해야되냐면 고민하지말고 spread operator를 떠올리면 된다.
이 연산자는 대괄호 뿐만 아니라 중괄호도 제거해준다.

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);

o2라는 오브젝트를 출력해보면 a, b, c키 값이 다 들어있다.
왜냐하면 o1프로젝트를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 때문이다.
오브젝트 shallow copy도 비슷한 방식으로 한다.
(deep copy는 오브젝트 안의 오브젝트까지고 엮임현상 없이 카피하는걸 뜻하고,
shallow는 그냥 맨 위의 오브젝트 하나만 카피하는 것을 뜻한다.)

참고1.

오브젝트의 key값 중복이 발생하면 어떻게될까?

var o1 = { a : 1, b : 2 };
var o2 = { c : 3, ...o1 };
console.log(o2);

o2를 o1항목을 추가해서 만들고 싶은데 a라는 키값이 이미 있다.
이렇게 a라는 값이 중복이 발생하면 무조건 뒤에 오는 a가 이긴다.
그래서 출력해보면 a:1이라는 자료가 담겨져있다.

참고2.

spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 보통 사용해야한다.
다른 곳에서 그냥 썼다간 에러가날 수 있다.