# Spread Operator

spread operator(펼침연산자)

...

모든 괄호를 없애줌.
중괄호, 대괄호, 소괄호 안에서 쓸 수 있음. (그냥 쓰면 에러남)

역할

1. array나 object에 붙이면 대괄호, 중괄호를 제거해줌

var arr = ['hello', 'world'];
console.log(...arr); // hello world

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

2. 문자에 붙이면 문자를 하나씩 쪼개줌

var 문자 = 'hello';
console.log(...문자) // h e l l o
console.log(문자[0]) // h (문자도 array처럼 indexing이 가능하다.)

활용 방법 1. 합치기

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

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

활용 방법 2. Deep copy

Deep copy

: 각각 독립적인 값을 가지도록 reference data type을 복사하는 것
reference data type : array, object

shallow copy : 등호로 복사

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

a[3] = 4;

console.log(a); // 1,2,3,4
consol.log(b); // 1,2,3,4  등호로 복사하면 값을 공유함

deep copy : spread operator로 복사

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

a[3] = 4;

console.log(a); // 1,2,3,4
consol.log(b); // 1,2,3  각각 독립적인 값을 가짐.

참고)

object에서 copy 하다가 값 중복이 일어나는 경우 : 가장 뒤에 있는걸 적용함.

var o1 = {a:1, b:2};
var o2 = {...o1, a:2};
consol.log(o2); // {a:2, b:2};

활용 방법 3. 함수 파라미터에 array 내의 모든 데이터 넣기

function 더하기(a,b,c){
consol.log(a+b+c)
}
var arr = [10,20,30];

더하기(arr[0],arr[1].arr[2]); // 주먹구구식
더하기.apply(undefined, arr); // 옛날방식
더하기(...arr) // 요즘방식

추가 설명

1. apply 함수
   person.인사()를 person2에 적용하고 싶을 때,
   person.인사.apply(person2)
   person2 안에 인사 함수를 넣은 것과 동일한 결과 나옴.
   call 함수와 다른 점 : apply는 파라미터를 array 형태로 집어넣을 수 있음.
   person.인사.apply(person2, [1,2])

2. call 함수
   apply와 비슷함
   person.인사.call(person2)