javascript es6 기초 배우기 004 - Spread Operator

Spread Operator

• ...
• 전개연산자

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

console.log(sum(1,2,3));
/* Result
6
*/

let arr = [10, 20, 30];
console.log(sum(arr));
/* Result
ERROR
*/
// 배열은 함수의 인잔로 사용될 수 없음

console.log(sum.apply(numm, arr));
/* Result
60
*/
// 배열을 함수의 인수로 사용하려면 apply 사용

console.log(sum(...arr));
/* Result
60
*/
// spread operator를 사용하면 배열을 함수의 인자로 사용가능

function sum(a, b, c, d, e) {
  return a+b+c+d+e;
}
let arr = [20, 30];
console.log(
  sum(10, ...arr, 40, 50)
)
/* Result
150
*/
// spread operator를 인자 중간에 사용가능

let face = ['eyes', 'nose', 'mouth'];
let head = ['hair', ...face, 'ears'];
console.log(head);
/* Result
[ 'hair', 'eyes', 'nose', 'mouth', 'ears' ]
*/
// 한 배열의 요소를 다른 배열에 넣을 때 spread operator 사용

let arr = [1, 2, 3];
let arr2 = arr;
let arrCopy = [...arr];
console.log(arr2);
console.log(arrCopy);
/* Result
[1, 2, 3]
[1, 2, 3]
*/
// arr2와 arrCopy는 arr와 동일함
arr.push(4);
console.log(arr2);
console.log(arrCopy);
/* Result
[1, 2, 3, 4]
[1, 2, 3]
*/
// arr에 요소를 추가하면 arr2는 영향을 받았지만, arrCopy는 영향을 받지 않음

let drinks = {
  caffe: 'latte',
  coca: 'cola'
}
let newDrinks = {
  lemon: 'tea',
  orange: 'juice',
  drinks
}
console.log(newDrinks);
/* Result
{ 
  lemon: 'tea',
  orange: 'juice',
  drinks: { caffe: 'latte', coca: 'cola' }
}
*/
// newDrinks에 drinks 객체가 요소로 저장됨

let drinks = {
  caffe: 'latte',
  coca: 'cola'
}
let newDrinks = {
  lemon: 'tea',
  orange: 'juice',
  ...drinks
}
console.log(newDrinks);
/* Result
{ 
  lemon: 'tea',
  orange: 'juice',
  caffe: 'latte', 
  coca: 'cola'
}
*/
// spread operator를 이용하여 drinks가 가진 요소들을 newDrinks의 요소들로 저장 가능

참고

• https://www.inflearn.com/course/리액트-네이티브-기초