spread operater 사용법

 

사용이유

array에서 글자를 빼서 진열하고 싶을 때 쓰는 연산자 이다.

 

array 일때

용도1.

array에다 붙히면 array의 대괄호를 제거해서 안에 있는 것들을 쭉 나열해준다.

var array = ['a', 'b'];
console.log(...array);
console.log('a', 'b'); 
//두개가 동일함

 

용도2.

문자를 spread 하면, 대괄호가 사라지고 안에 있는 문자를 하나하나 쪼개서 내보낸다.

var 문자 = "HELLO";
console.log(...문자);

//H E L L O

 

 

spread operator는 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,4]

 

여기서 a[3]을 추가 했는데 b까지 영향을 끼친다. 그냥 등호로 복사하면 값을 공유한다. reference data type(Array, Object) 일 때 이런식으로 값을 공유한다.

 

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

a[3] = 4;

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

위와 같이 array를 deep copy하는 경우에는 공유하지 않는다. 단독적인 배열을 사용하고자 할 때 spread operator를 사용하면된다.

---

Object 일때

object도 동일하게 array와 같은 현상이 일어난다.

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

console.log(o2); //{a:1, b:2, c:3};

 

 

여기서 Deep copy를 한다면?

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

//var o2 = o1; o1이라고 쓰면 값을 공유하기 때문에 위 처럼 작성해주면 괸다.

 

 

유의점 (값이 중복일 때)

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

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

값이 중복일 경우에는 가장 뒤에 있는 같은 값을 덮어씌우기 한다

 

---

함수 파라미터 넣을 때

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

var 어레이 = [10,20,30];
더하기(어레이[0] + 어레이[1], 어레이[2]);

//예전 방식
//더하기.apply{undifined, 어레이};

//요즘 방식
//더하기(...어레이);

함수의 파라미터 형태로 하나씩 꺼내서 넣고싶을 때 사용.

 

* apply)

var person ={
	인사 : function(){
      console.log(this.name + "안녕")
    }
}

var persoon2 = {
  name : '손흥민' //apply 함수로 인해 this.name이 된다.
}

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


--------------------------------------------------------------------------------------

var persoon2 = {
  name : '손흥민',
  인사 : function(){
      console.log(this.name + "안녕")
    }
}
//apply를 쓰면 위 처럼 함수를 옮겨온 것 이라 생각하면 됌


//apply, call의 차이
person.인사.apply(person2, [1,2]);
person.인사.call(person2, 1,2);