[ES6 기초] spread operator

spread operator

 

함수의 매개변수인자로 배열을 넣을수가 있는데 배열의 요소에는 접근이 불가능하다.

ex)

function sum(x,y,z){
    return x+y+z;
}

console.log(sum(1,2,3));

let arr = [10,20,30];
console.log(sum(arr));

결과

 

6

10,20,30undefinedundefined

 

위처럼 배열은 이상한 값이 출력이 된다.

그래서 함수의 매개변수로 받은 배열의 요소에 접근하기 위해선 apply를 사용해야 한다.

ex)

console.log(sum.apply(null,arr));

결과 

6

60

 

하지만 apply는 번거롭다 그래서 우리가 이때 사용할것은 spread operator라는것이다.

이를 사용하는 방법은 매우 간단하다 해당 배열 매개변수 앞에 ... 을 붙이면 된다.

 

ex)

console.log(sum(...arr)); 

이렇게 하면 해당 매개변수로 받은 배열의 요소에 접근이 가능하다.

spread operator는 배열의 요소를 다른 매개변수 사이에 넣어도 해당 배열의 요소에 접근이 가능하다.

 

ex)

function sum(a,b,c,d,e){
    return a+b+c+d+e;
}

let arr = [20,30];

console.log(sum(10,...arr,40,50)); 

결과 

150

 

이게 매개변수 뿐만 아니라 그냥 배열 요소에 접근할때 다 사용이 가능한가보다.

ex)

let face = ['eye','nose','mouth'];
let head = ['hair',...face,'neck']

console.log(head);

결과

['hair', 'eye', 'nose', 'mouth', 'neck']

 

즉 이처럼 배열 안의 요소에 쉽게 접근하기 위해서 쓰는게
spread operator이다.

 

이를 활용해서 배열의 복사도 가능하다.

 

let face = ['eye','nose','mouth'];
let head = [...face]

console.log(head);

결과
(3) ['eye', 'nose', 'mouth']

 

자 그럼 이제까지는 배열안에서 어떻게 되는지를 알게 됐는데
이제는 객체 안에서 어떻게 되는지 알아보자.

객체 안에 obeject 값을 넣기 위해서는 우리는 일반적으로 그냥 object를 넣는데 이렇게 되면 
객체 안의 값은 반영이 되지 않고 그냥 그 객체명만 보여질 뿐이다.

 

let drink ={
    caffe : 'latte',
    coca : 'cola'
}

let newDrink = {
    lemon : 'ade',
    orange : 'juice',
    drink
}
console.log(newDrink);

결과

{lemon: 'ade', orange: 'juice', drink: {…}}

 

근데 우리는 drink라는 object안의 값을 가져오고 싶을땐 ...을 붙여서 해당 내용을 가져오면 된다.

 

ex)

let drink ={
    caffe : 'latte',
    coca : 'cola'
}

let newDrink = {
    lemon : 'ade',
    orange : 'juice',
    ...drink
}
console.log(newDrink);

결과
{lemon: 'ade', orange: 'juice', caffe: 'latte', coca: 'cola'}