[typescript - 2.1] Object Spread and Rest

[denzels]

ES2017 Spread and Rest 를 지원함.

let original = {
  start: "ABC",
  end : "XYZ"
};
let copy = { ...original };
console.log( copy );
// 예상과 같이 다음과 같음.
// { start: 'ABC', end: 'XYZ' }

변환된 코드

var __assign = (this && this.__assign) || Object.assign || function(t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
            t[p] = s[p];
    }
    return t;
};
var original = {
    start: "ABC",
    end: "XYZ"
};
var copy = __assign({}, original);
console.log(copy);

---

객체를 merge 하는데 사용할 수도 있다.

let foo = {
    a: "A",
    b: "B"
};
let bar = {
    c: "C",
    d: "D"
};
let baz = {
    e: "E",
    f: "F"
};

let merged = { ...foo, ...bar, ...baz };
console.log( merged );
// { a: 'A', b: 'B', c: 'C', d: 'D', e: 'E', f: 'F' }

---

동일한 property가 존재하는 경우 엎어 써버린다(override)

let foo2 = {
    a: "A",
    b: "B"
};
let bar2 = {
    b: "BBB",
    c: "C"
};
let merged2 = { ...foo2, ...bar2 };
console.log( merged2 );
// { a: 'A', b: 'BBB', c: 'C' }

예상 했던 것 처럼 가장 뒤에 위치한 놈이 앞에 값들을 엎어쓰고 최종값이 된다.

---

값을 할당하는 경우에도 사용할 수 있음. (rest destructuring)

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log( "x: ",x ); // x: 1
console.log( "y: ",y ); // y: 2
console.log( "z: ",z ); // z:  { a: 3, b: 4 }

deep copy가 아님. shallow copy

nested 한 구조에서도 적용이 가능한데 가독성이 떨어지니 적당히 쓰자.