[JavaScript_study] Spread operator

* Spread 연산자, 전개구문

• 모든 Iterable은 Spread 될 수 있다.
• 순회가 가능한 모든 것들을 촤르륵 펼쳐 질 수 있다.
• func(...iterable)
• [...iterable]
• {...obj}
• ECMAScript 2018년도의 최신문법이여서 예전버전에서는 호환이 안될수도 있다.
• (Babel을 이용해서 호환을 해주어야한다.)

 

* Spread operator 예시 코드

function add(a, b, c) {
  return a + b + c;
}

const nums = [1, 2, 3];
console.log(add(...nums));

// Rest parameters
function sum(first, second, ...nums) {
  console.log(nums);
}
sum(1, 2, 0, 1, 2, 4);

// Array Concat
const fruits1 = ['사과', '키위'];
const fruits2 = ['딸기', '바나나'];
let arr = fruits1.concat(fruits2);
console.log(arr);
arr = [...fruits1, '딸기', ...fruits2];
console.log(arr);

// Object
// Spread를 통해서 copy를 하여서 Object안에 Object가 있다면 안에 있는 Object는 Shallow copy가 된다.
// Spread는 1 depth까지만 copy가 된다.
const poodle = { name: 'latte', age: 20, home: { address: 'home' } };
const updated = {
  ...poodle,
  job: 's/w engineer',
};
console.log(poodle);
console.log(updated);