Spread Operator

구현하는 기능과 배우는 컨셉

✅ Spread Operator

👉 Spread Operator

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

결과 값: hello world

let word = 'hello';
console.log(...word);
console.log(word[0])

=> 'h', 'e' ,'l' ,'l' ,'o'

◾ Array에 붙이면 대괄호를 제거가 된다.
◾ 문자에 붙이면 문자 하나씩 펄쳐준다.
◾ 문자도 index 사용가능하다.

👉 어디에 유용할까?

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

let c = [...a];
// ...a = 1, 2, 3
c = [...a, ...b]
// ...a = 4,5
결과 값 : 
[1, 2, 3]
[1,2,3,4,5,]

◾ Array를 합치거나 복사할때 유용하다

👉 shallow copy

let a = [1,2,3];
let b = a;

◾ 등호 = 를 사용하면 쉽게 a에 있던 값을 b에 할당할수있다.
◾ 하지만, 자바스크립트에선 복사를 이렇게 하면 문제가발생한다.
◾ 등호로 복사를 하면 a와 b 변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어난다!
◾ 그래서 a라는 array를 수정하면 b도 똑같이 바뀌게 된다.

let a = [1,2,3,4];
let b = [...a];

a = [1,20]

console.log(a)
console.log(b)

결과 값 :
[ 1, 20 ]
[ 1, 2, 3, 4 ]

◾ spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우는 방법이다.
◾ a와 b 변수의 값 공유가 일어나지 않는다!!

👉 Object 합치기 !

let infoUser1  = { name: 'kim', age : 14}
let infoUser2  = { 'hobby' :piano}

◾ infoUser2를 만들고 싶은데 infoUser1에 있던 내용들을 그대로 추가하고싶을때!?
◾ spread operator를 사용하자
◾ 대괄호 뿐만아니라 중괄호도 제거해준다!

let infoUser1  = { name: 'kim', age : 14}
let infoUser2  = { 'hobby':piano ,...infoUser1}

결과 값 : { hobby: 'piano', name: 'kim', age: 14 }

◾ infoUser2를 출력해보면 a,b,c, 키 값이 다 들어있다.
◾ 왜냐하면 infoUser1를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 떄문이다.
◾ 오브젝트 shallow copy도 비슷한 방식으로 한다.

Object의 key값이 중복발생이 된다면?

let infoUser1  = { name: 'kim', age : 14}
let infoUser2  = { name : 'Park',hobby: 'piano' ,...infoUser1}

console.log(infoUser2)

결과 값 : { name: 'kim', hobby: 'piano', age: 14 }

◾ infoUser2를 infoUser1 항목을 추가해서 만들고 싶은데 name이라는 key 값이있다.
◾ 이렇게 name이라는 값이 중복발생되면 *무조건 뒤에오는 name이 이긴다.
◾ 그래서 출력해보면 name의 value값은 'kim'이 된다.

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

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

let arr = [10,20,30];
plus(arr);
결과 값 : '10,20,30undefinedundefined'

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

let arr = [10,20,30];
plus.apply(undefined, arr);
plus(...arr);

결과 값 : 60

◾ 대괄호를 넣으면 하나의 파라미터로 인식해서 undefined가 나온다.
◾ plus(arr[0], arr[1], arr[2]) 이런식으로 해체작업을 해야한다.
◾ 전에는 apply함수를 사용해서 전달했다.
◾ 요즘에는 spread operator를 사용한다.

👉 apply & call

let person = {
  introduce : function (){ console.log(this.name + '안녕')}
  }



let person2 = {
    name : 'kim'
    }
person.introduce();
person.introduce.apply(person2 , [1,2])
person.introduce.call(person2 , 1,2)

결과 값 :
'undefined안녕'
'kim안녕'

◾ person2에도 introduce를 사용하고싶지만 또 반복작업하기 번거롭다.
◾ apply를 적용하면 person2에서도 introduce 메서드를 사용할 수 있다.
◾ person에서 name이라는 key가 없기때문에 undefined가 나온다.
◾ apply를 적용하면 person2에서는 name이 있으므로 this.name이 출력된다.
◾ 함수를 옮겨서 실행해주세요. 라는의미가있다.
◾ introduce의 파라미터를 쓰고싶다면 array형태로 전달 => apply
◾ introduce의 파라미터를 쓰고싶다면 콤마로 전달 => call
◾ 둘다 같은 기능을 실행함