쉽게 이해하는 javaScript 객체지향&ES6 신문법③

 

spread operator(...) 설명

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

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

1. Array에 붙이면 대괄호를 제거해줌

2. 문자에 붙이면 문자를 펼쳐줌

 

 

활용방법

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

// Deep copy
var d = [1,2,3];
var e = [...d];   // var e = d  =>  X(값이 공유됨)
d[3] = 4;
console.log(d);   // 1,2,3,4
console.log(e);   // 1,2,3

1. 어레이 합치기 / Deep copy

위처럼 e에 d배열을 그대로 넣으면 d가 바뀌면 e도 같이 공유됨 (Reference data type)

그래서 독립적인 값을 가지기 위해선 Spread operator(...)사용

 

 

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

2. 오브젝트 합치기

값이 중복이 되면 뒤의 값을 할당함   var o2 = { ...o1, a : 3};  =>  a: 3, b: 2

 

 

-3-
function 더하기(a,b,c){
    console.log(a + b + c);
}
var 어레이2 = [10,20,30];
더하기(...어레이2);   // 60


// apply, call 메서드 개념설명
var person = {
    인사 : function(){
        console.log(this.name + '안녕');
    }
}
var person2 = {
    name : '손흥민'
}
person.인사.apply(person2)   // 손흥민안녕
person.인사.call(person2)   // 손흥민안녕

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

apply, call 메서드 설명

사용할 함수.apply(적용할 대상)   위 코드에서는 person의 인사 함수를 person2에 적용, call 메서드도 사용방법은 동일

apply 메서드는 파라미터를 배열로 가져올 때, call 메서드는 파라미터를 그대로 가져올 때 사용