펼침 연산자 spread operator, 전개 구문

펼침 연산자는 변수명 앞에 마침표 3개를 연달아 붙여(...) 표시합니다. 펼침 연산자는 적용한 객체의 개별 속성, 요소를 펼쳐서 각각의 개별 요소, 또는 속성이 순서대로 적용되도록 합니다.

 

펼침 연산자는 확산 연산자, 또는 스프레드 오퍼레이터, spread syntax 등으로 부릅니다.

let calc = function (x, y, ...restparams) {
  return (
    x +
    y +
    restparams.reduce(function (sum, param) {
      return sum + param;
    })
  );
};
let arr11 = [0, 1];
console.log(calc(-1, ...arr11, 2, ...[3])); // 배열로 넘어가는 인자들을 펼쳐 파라메터에 순서대로 적용함.

let arr12 = [1, 2, 3, 4, 5, 6];
console.log(calc(...arr12));
console.log(calc(null, ...arr12)); // null,1,2,3,4,5,6 이 파라메터에 적용

마지막 파라미터에만 펼침 연산자를 사용할 수 있다는 점을 꼭 주의해야 합니다.

 

상속과는 다르게 복제된 새로운 객체 리터럴을 생성하지만, 여러 개의 작은 객체 리터럴을 조합해서 다양한 객체 리터럴을 조합할 수 있습니다.

// 배열과 객체의 복사와 합치기(병합)
var parts = ["shoulers", "knees"];
var lyrics = ["head", ...parts, "and", "toes"]; //배열을 합침

var arr21 = [1, 2, 3];
var arr22 = [...arr21]; //배열의 복사
arr22.push(4);
console.log(arr22);

var obj1 = { foo: "bar", x: 42 };
var obj2 = { foo: "baz", y: 13 };
var cloneObj = { ...obj1 }; // Object {foo: "bar", x: 42}
console.log(cloneObj);
var mergedObj = { ...obj1, ...obj2 }; // Object {foo: "baz", x: 42, y: 13}
console.log(mergedObj);

특정 상황에서 클래스보다 활용성이 더 좋을 때도 있습니다.