spread operator (깊은복사, 함수의 파라미터로 배열 넣기)

spread operator 

 ...     이렇게 쓰는데, 안에있는거 펼쳐서 늘어놓아 주는 친구다.

spread syntax. 즉 전개문법 이라고도 함.

배열, 혹은 이터러블 객체(for...of 반복문 적용이 가능한)에 사용 가능하다.

for..of 와 같은 방식으로 내부에서  iterator(반복자)를 사용해 요소를 수집한다. 

 

 

문자열에 spread operator 사용하는 경우

array 처럼 인덱싱을 해서 요소 하나하나를 가져올 수 있다. 

 

 

배열에 spread operator 사용하는 경우.

대괄호를 제거하고 요소들을 다 나열해준다. 

배열을 합치거나 깊은 복사를 할 수 있다. 

 

 

배열 합치기 

let a = [1,2,3];

let b = [4,5];

let c = [...a, ...b]   // (5) [1, 2, 3, 4, 5]

 

 

배열 복사하기

let a = [1,2,3];

let b = [4,5];

let c = a;

a[3] = 7;

console.log(a);  // (4) [1, 2, 3, 7]

console.log(c);  // (4) [1, 2, 3, 7]

 

   

여기서 복사한 배열 c는 요소를 추가하지 않았는데도, a와 똑같이 추가가 되어버렷다. 

지금 이 상황은 얕은 복사이기 때문에 이런 현상이 발생한것. 이래서 깊은 복사가 필요하다. 

 

reference data type(array, object 같은 자료형을 이렇게 부름.) 이런 자료형들은 방금 한것처럼 복사를 하면  그 값을 서로 공유하게 된다.

각각 독립적인 값을 갖도록 array나  object를 복사하려면, spread operator를 사용하면 된다. 

 

 

 

object 에 spread operator 사용하는 경우

합치기

var o1 = {a: 1, b: 2};

var o2 = {...o1, c: 3};    // 2개의 object를 합치기

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

 

깊은복사하기

var o3 = {...o1};     //object 깊은 복사 하기. spread operator 활용해서.

o1.d = 5;

console.log(o1);  //{a: 1, b: 2, d: 5}

console.log(o3);   //{a: 1, b: 2}

 

복사시 값 중복

만약 복사하다가 값 중복이 생길 경우___ 동일한 값중 가장 뒤에 있는걸 적용한다. 

var o7 = {a: 2, ...o1};

console.log(o7);   //{a: 1, b: 2, d: 5}

 

var o6 ={...o1, a: 2};

console.log(o6);   //{a: 2, b: 2, d: 5} 

 

 

spread operator 는 

오브젝트 중괄호 안, array 대괄호 안, 함수 소괄호 안 에서만 사용할 수 있다. 밖에다 하면 에러남. 

 

 

 

해체한 요소들 다시 붙여주기.

 ...를 또 쓰면 된다. ...[...spread]

 

 

함수의 파라미터로 array에 있는 요소들 넣어주기  (spread operator 이용)

함수이름(...파라미터로 넣을 배열 이름)

 

 function plus(a,b,c){

      console.log(a+b+c);

};

let aarray = [22, 44, 66];

 

plus(...aarray);