[JavaScript] Spread Operator 활용방법

Spread Operator

... 쓰면 괄호제거해주는 연산자 

1. 배열에 붙이면 대괄호제거

2. 문자에 붙이면 단어하나씩 해체

var 어레이 = ['hello', 'world'];
console.log(어레이); //['hello', 'world']
console.log(...어레이); //hello world

var 문자 = 'hello';
console.log(...문자) //'h','e','l','l','o'

 

✔ 활용방법

1. Array 합치기

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


//Deep Copy

var d = [1,2,3];
var e = [...d];
d[3] = 4;

console.log(d) // [1,2,3,4]
console.log(e) // [1,2,3]

 

Array, object는 reference data type으로 각각의 독립적인 값을 가지도록
Deep Copy 상황에서는 함부러 복사하지 않도록 스프레드 연산자를 사용

 

2. Object 합치기

var o1 = { a : 1, b : 2 };
var o2 = { ...o1, c : 3 }; // {a:1, b:2, c:3}


var o1 = { a : 1, b : 2 };
var o2 = { a : 2, ...o1 }; // {a:1, b:2} //값 중복이 일어나면 가장 뒤에있는걸 적용

 

값중복이 일어날경우 가장 뒤에 할당된 값을 적용함

 

3. 함수에 파라미터 넣을 때

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

var 어레이 = [10, 20, 30];
더하기(...어레이);

 

array 내의 모든 데이터를 파라미터로 집어넣을 때 적용

 

 

※ apply / call 

var person = {
    인사 : function(){
      console.log(this.name + '안녕')
    }
}
  
var person2 = {
    name : '손흥민'
    //인사 : function똑같이 쓴것과 같음
}

person.인사.apply(person2, [1,2]); //실행할함수.apply(적용할곳) 배열 한꺼번에 집어넣기가능
person.인사.call(person2, 1,2); //실행할함수.apply(적용할곳) 배열안되고 하나씩 집어넣기만 가능