🔖 스프레드 연산자(Spread operator)

…spread operator

뭔가 내용물을 빼고 싶을 때 쓰면 된다. 

 

1. Array에 붙이면 대괄호를 제거해준다.

var arr = ['hello', 'world'];

console.log(...arr); // hello world

 

 

2. 문자열에 붙이면 펼쳐준다.

var str = 'hello';

console.log(...str); // h e l l o

 

 

 

...spread operaotr 어디다가 쓰면 좋을까?

 

1. 배열 합치기 / 얕은 복사

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

var c = [...a];
console.log(c) // [1, 2, 3]

var d = [...a, ...b];
console.log(d) // [1, 2, 3, 4, 5]

얕은 복사 할 때 유용하다.

 

var a = [1, 2, 3];
var b = a; // 그냥 등호로 복사하면 값을 공유함(참조관계)

a[3] = 4;

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

a와 b는 참조관계이다.

🚨 Array, Object 는 reference data type(참조 타입) 이기 때문에 함부로 복사해버리면 값 공유가 일어난다.

 

 

 

각각 독립적인 값을 가지도록 Array, Object를 복사하려면(얕은 복사)? 

- Spread operator를 이용하자.

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

a[3] = 4;

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

 

 

 

2. 객체 합치기 / 얕은 복사

var obj1 = { a: 1, b: 2 };
var obj2 = { ...obj1, c: 3 };

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

spread operator

대괄호 벗기기

중괄호 벗기기 

둘다 가능

 

obj1을 obj2에 얕은 복사하려면?

var obj1 = { a: 1, b: 2 };
var obj2 = { ...obj1 };

 

 

근데 카피하다가 값 중복이 일어나면?

- 가장 뒤에 있는걸 적용

var obj1 = { a: 1, b: 2 };
var obj2 = { ...obj1, a: 2 };

console.log(obj2) // { a: 2, b: 2 }

 

 

spread operator

- 괄호 벗겨주세요~라는 뜻으로 정리

- 중괄호,대괄호,소괄호안에서만 사용가능

 

 

 

3. 함수 파라미터 넣을 때

array 내의 모든 데이터를 파라미터로 집어넣고 싶은 경우

function add(a,b,c) {
  console.log(a + b + c);
}

var arr = [10,20,30];

add( arr[0], arr[1], arr[2] );

add.apply(undefined, arr); // (옛날방식)

add(...arr); // (요즘방식)

 

spread 연습문제1.

var a = [1,2,3];
var b = ['hello', 'world'];
var c = function(a,b){
  console.log( [[...a], ...[...b]][2] )
}

c(a,b);
// ▼ 출력
// world

 

 

 

apply 함수 개념설명

var person = {
  인사 : function() {
    console.log( this.name + '안녕' );
  },
}

var person2 = {
  name : '손흥민',
}

person.인사.apply(person2) // 손흥민안녕

person.인사.call(person2)

 

apply() 그냥 함수를 옮겨와서 실행하는거랑 똑같음

 

apply/call 비슷함

근데 apply는 파라미터를 array형태로 집어넣기 가능