...spread operator

 var 어레이 = ['hello', 'world'];
// 1.Array에 붙이면 대괄호를 제거해준다. ...어레이 출력하면 hello world 이렇게나옴
var 문자 = 'hello';
// 2.문자에 붙이면 대괄호를 제거해준거처럼 보임 ...문자 출력하면 h e l l o 이렇게나옴
var a = [1,2,3];
var b = [4,5];

var c = [...a]; //c는 [1,2,3] 이렇게 됨 즉, 합치거나 복사를 할 수 있음 ...a,...bㅎ면 [1,2,3,4,5] 가 나옴.
// 쓸곳
// 보통 딥카피함 어레이는 등호로 복사를 하면 두개가 완전히 같은 값을 공유한다.
// 그래서 b에 a를 복사하려면 b = [...a] 이렇게 복사해야함

var o1 = { a : 1, b : 2 };
var o2 = { ...o1, c : 3 }
//중괄호를 없애서 합쳐줌
// 만약 카피하다가 중복이 일어나면 가장 뒤에 있는걸 적용함.

spread ...은 먼저, 대괄호를 제거해주는 역할을 한다. 그래서 어레이나 문자에 붙이면 대괄호를 제거하고 안의 값들만 나오게 된다. 

이러한 성질로 어레이를 복사하거나 합칠 수 있다. var 새어레이 = [...기존어레이]이렇게 쓰며, 기존 어레이의 대괄호를  없앴다가 다시 넣어서 어레이를 만들게 된다. 이런걸 딥카피라고 한다.

오브젝트에도 딥카피가 가능한데, 만약 key값이 겹치면 가장 뒤에있는 value 값을 가져오게 된다.

 

그리고 함수 파라미터를 넣을 때 사용가능하다.

function 더하기(a,b,c) {
            console.log(a+b+c)
        }
var 어레이 = [10,20,30];

더하기(어레이[0],어레이[1],어레이[2]);//노가다
더하기.apply(undefined,어레이);//옛날 방식
더하기(...어레이);//요즘 방식

이렇게 함수 파라미터에 어레이의 자료를 넣을 땐, 하나하나 풀어서 넣어야 한다. 이럴때 노가다로 []을 각각 붙일 수 있고, apply를 이용하거나, spread문법을 이용해서 넣을 수 있다.

 

여기서 apply함수를 알아보자.

var person = {
	인사 : function(){
		console.log('안녕')
	}
}

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

//person메소드를 잘만들어서 person2에서도 쓰고싶으면 
person.인사().apply(person2) //이렇게 적으면 person2.인사()의 뜻이 된다.

이렇게 잘만든 메소드를 다른 메소드에서도 쓰고 싶을때 사용한다. apply()안에 들어있는 메소드에서 사용하게끔 된다.

 

apply나 call함수는 서로 비슷한데, 파라미터를 넣는 방법이 다르다.

person.인사().apply(person2, [1,2]);
person.인사().call(person2, 1, 2)

이런 식으로, apply는 파라미터를 array형태로 집어넣기가 가능하다.

그럼,

더하기.apply(undefined,어레이);

얘는 undefined라고 적어서 그냥 더하기 함수를 실행하세요란 뜻이 되며, apply를 씀으로 뒤에 파라미터에 어레이를 넣을 수 있기 때문에, 위처럼 적은게 된다.