[ES6]전개연산자

전개연산자

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

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

활용1) 어레이 합치기 / 복사

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

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

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

활용2) 어레이 합치기 / Deep copy(독립적인 복사본 생성)

var a = [1,2,3];
var b = a //shallow copy

a[3] = 4;
console.log(a) //[1, 2, 3, 4]
console.log(b) //[1, 2, 3, 4]
//배열이나 객체 같은 reference data type은 
//참조값을 복사한 것이라 값을 공유함. 
//스트링, 넘버 등의 타입 자료들은 아래와 같이 참조값 공유 ㄴㄴ

var c = "dd";
var d = c;
d = "aa"
console.log(c) //"dd"
console.log(d) //"aa"

//따라서 전개연산자를 사용하면 괄호를 벗겨내고 새롭게 감싼것 이기 때문에
// 다른 참조값을 가지고 독립적인 카피본이 됨.

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

활용3) 오브젝트 합치기 / deep copy

1. 합치기

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

console.log(o2)
/*[object Object] {
  a: 1,
  b: 2,
  c: 3
}
  */

2. deep copy

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

3. 합칠 때 중복 키가 있다?

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


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

뒤에 온 프로퍼티가 주인이 됨.

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

중요! 전개연산자 (...)은 항상 괄호 안에서 사용해야 에러 안뜸.

활용4) 함수 파라미터 넣을 때

function 더하기(a, b, c){
  console.log(a+b+c);
}
let arr = [10, 20, 30];


더하기(어레이[0],어레이[1],어레이[2]); //무식함
더하기.apply(undefined, 어레이); // 구시대
//undefined는 따로 넣을 매개변수 없을 때 아무거나 써넣어도 됨.
//어차피 함수 내에서 사용하는 곳 없으니까.
더하기(...arr) // 요즘것

apply / call 설명

var person = {
  인사 : function(num){
    console.log(this.name + '안뇽' + num);
  }
}

var person2 = {
  name: '소농민'
}

// person2에서 person의 인사 함수를 사용하고 싶다?


person.인사(100) //"undefined안뇽100"
person.인사.apply(person2, [100]) //"소농민안뇽100"
person.인사.call(person2, 100) //"소농민안뇽100"