ES6 문법 - 스프레드 연산자

스프레드 연산자

스프레드 연산자를 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값 쌍으로 객체로 확장시킬 수 있습니다.

참고 레퍼런스: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

함수 호출에서의 전개

const sum(x, y, z) {
  return x + y + z;
}
const numbers = [2, 3, 4];

/* 스프레드 연산자 */
console.log(sum(...numbers)) // 9

/* apply() */
console.log(sum.apply(null, numbers)) // 9

/* new 에 적용 */
let dateFields = [1970, 0, 1];
let d = new Date(...dateFields) // 'Thu Jan 01 1970 00:00:00 GMT+0900 (대한민국 표준시)'

// 함수 호출에서 spread 문법을 사용할 때, 자바스크립트 엔진의 인수 길이 제한을 초과하지 않도록 주의합니다.

배열 리터럴에서의 전개

/* 얕은 복제(prototype 제외) 또는 객체의 병합은 이제 Object.assign() 보다 더 짧은 문법을 사용해 가능 */
let obj1 = { manU: 'park', number: 13 }
let obj2 = { manU: 'Son', goals: 15 }
let cloneObj = {...obj1 }; // Object { manU: 'park', number: 13 }
let mergeObj = { ...obj1, ...obj2 }; // Object { manU: 'Son', number: 13 ,goals: 15 }

const merge = (...objects) => ({ ...objects })

let mergedObj1 = merge(obj1, obj2);
// Object { 0: Object { manU: "park", number: 13 }, 1: Object { manU: "Son", goals: 15 } }

let mergedObj2 = merge({}, obj1, obj2);
// Object { 0: Object {  }, 1: Object { manU: "park", number: 13 }, 2: Object { manU: "Son", goals: 15 } }

이터러블 전용

/* 전개 구문(spread 프로퍼티인 경우 제외) 은 iterable 객체에만 적용됩니다. */
let son = { 'team': 'tottenham' };
let copy = [...son] // TypeError: son is not iterable