[JavaScript/ES6] Spread Operator (... 연산자) / apply, call 함수

Spread Operator (... 연산자) : 괄호를 제거해주는 연산자

 

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

 

 

문자에 붙이면 어떻게 될까?

var str = 'hello';
console.log(...str);

 

console.log('h', 'e', 'l', 'l', 'o'); 

를 출력 하는 것과 동일하게 출력된다.

 

문자도 array 와 비슷하다. array 처럼 인덱스를 붙여서 출력할 수 있다.

 

 

어디에 활용할까?

1) Array 합치기/복사

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var arr3 = [...arr1, ...arr2];

 

var arr1 = [1, 2, 3];
var arr2 = [...arr1]; // arr1 값과 동일

 

2) Object 합치기/복사

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

 

 

- shallow copy : 맨 위 오브젝트 하나만 카피하는 것

- deep copy : 오브젝트 안의 오브젝트까지 카피하는 것

 

오브젝트의 key 값 중복이 발생하면?

무조건 뒤에 오는 값이 이김

 

 

3) array 를 파라미터형태로 집어넣고 싶을 때 쓴다.

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

plus(1, 2, 3); // 함수의 파라미터를 array 형태로 넣고 싶다면?

 

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

var arr = [1, 2, 3];

plus(...arr); // 요즘 방식
plus.apply(undefined, arr); // 옛날 방식

 

apply, call 함수

apply : 이 함수를 실행하는데, 저기 오브젝트에다가 적용해서 실행해주세요~ 라는 뜻이다.

 

실행할함수. apply(적용할곳);

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

var person2 = {
   name: '홍길동',
}

// person.sayHi() 라는 함수를 person2라는 오브젝트에 적용해서 실행하라는 뜻
person.sayHi.apply(person2); // person의 sayHi 메소드를 person2 에도 적용하고 싶을 때

 

 

 

apply 와  call 은 실행 결과도 똑같고 사용법도 똑같다.

 

차이점이 있다면, 

person.sayHi() 에 파라미터를 넣어서 실행하고 싶은 경우에는

person.sayHi.apply(person2, 파라미터)

person.sayHi.call(person2, 파라미터)

로 써야하는데

apply 는 파라미터에 [array] 로 한꺼번에 넣을 수 있고, call 은 array 형식을 쓰지 못한다

 

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

 

undefined 를 넣는 이유는 굳이 함수를 복사할 필요 없이 실행만 하면 되기 때문이다.

첫번째 파라미터를 비우면 에러나기 때문에 undefined 를 넣어준 것