🌃 문자열

const txt = 'hello'
console.log(...txt) // h e l l o

🧊 Array

...붙이면 대괄호를 제거해줍니다.

const arr = ['hi','world']
console.log(...arr) // hi world

💙 활용

배열 복사할때 매우 유용합니다

const arr =[1,2,3]
const arr2 =[4,5]

const new = [...arr,...arr2] // [1,2,3,4,5]

💙 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, 4]

값 공유가 일어납니다.

그래서 a라는 array를 수정하면 b도 똑같이 바뀌는 신기한 버그가 일어납니다.

(나중에 자료형배울 때 다룰 것이지만 왜 그러냐면 등호쓰시면 값을 복사한게 아니라 [1,2,3] 값이 저기있어요~ 라고 가리키는 화살표를 복사하신 것입니다.)

array와 object 는 레퍼런스 타입이라서, 등호로 복사를하면 값 공유가 일어납니다.

💙 독립적인 값을 가지도록 deep copy

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

a[3]=4;

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

💦 오브젝트

var a = {a:1,b:2}
var b = {...a} //deep copy , a와 b는 값 공유가 되지않는다.



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

만약 값 중복이 일어난다면, 뒤에 있는 값을 적용해줍니다.

var a = {a:1,b:2}
var b = {a:3, ...a}

b // {a:1,b:2}

🐳 함수 파라미터

만약 array 내의 모든 요소를 파라미터로 집어넣고 싶은 경우에도, ... 사용

const arr =[1,2,3]

function 더하기(a,b,c){
   console.log(a + b + c)
}

더하기(...arr) // 6

예전방식 -> 더하기.apply(undefined,arr)

🌝 apply, call 함수

var person = {
    인사 : function(){
      console.log(this.name + ' 안녕')
    }
}
  
var person2 = {
    name : '손흥민'
}

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

//person.인사()라는 함수를 쓰는데 person2라는 오브젝트에 적용해서 실행해라~ 
//또는 person.인사()라는 함수를 쓰는데 person2라는 오브젝트에 있는 함수처럼 실행해라~ 라는 뜻입니다. 

 

person에 만들어놓은 person.인사()라는 함수를 person2에서도 쓰고 싶습니다.
그럴 때 apply를 쓰시면 됩니다.
apply는 이 함수를 실행하는데.. 저기 오브젝트에다가 적용해서 실행해주세요~ 라는 뜻입니다.

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

하지만 차이점이 하나 있는데, 내가 person.인사()에 파라미터를 넣어서 실행하고 싶은 경우에는

person.인사.apply(person2, 파라미터);
person.인사.call(person2, 파라미터);

이렇게 실행하셔야하는데
이 때 apply는 파라미터를 [array]로 한꺼번에 집어넣을 수 있고
call은 그냥 1,2,3 이렇게 일반 함수처럼 만 집어넣을 수 있습니다.