📘Object.assign()

JS ⟩ value ⟩ object ⟩ extend ⟩ Object.assign()

• copies all enumerable own property values from sources to a target (with get/set).

• and returns the modified target.

Object.assign(target, source1, source2, ...)  // overwrite target with sources

// similar to 
{...target, ...source1, ...source2}

☢️ Alert：

• Object.assign() copies property values (with get/set), not their attributes❗
• if a source has a getter or the target has a setter, they will be invoked❗️, not copied❗️ 👉 ⛔️ Object.assign causing TypeError

• use obj.mergeWith() instead if we want to copy accessors.

🧨 雷區

Object.assign()

• only copies the values of enumerable properties, not their attributes❗
• if one of the source objects has an accessor property, it is the value returned by the getter that is copied to the target object, not the getter itself❗

❓ 問題： ⛔️ Object.assign causing TypeError 💊 解藥： .assignDescriptors()

☢️ Alert：

Don't use Object.assign() with sources that have getters, the inner states of the sources may change❗❗❗ 👉 .assignDescriptors()

⭐️ 重點

assigning sources to target (👉 💈範例)

source property	target property	result
any	getter	TypeError
setter (only)	data	value of undefined is copied
non-configurable	(new) data	configurable/writable/enumerable all true

🔴 主題

• ⛔️ Object.assign causing TypeError

• ❗️Object.assign copies with getter/setter

• mergeWithoutOverride()

• .assignDescriptors()

👥 相關

• compare with obj.mergeWith().

• is used for mixin.

• mergeWithoutOverride() keeps old values.

• .assignDescriptors() copies descriptors instead of values.

• spread operator (...) can be used instead to assign default values.

• see attribute for enumerable properties.

• uses [[Get]] on the source object and [[Set]] on the target object and invokes getter/setter to perform the task.

💈範例

• assign default values (replit)

// default values
const defaults = {x: 0, y: 0, z: 0};

// ❌ wrong way:
// -------------------------------------------------------------------
const p = {x: 1};
Object.assign(p, defaults);    // overwrites p with defaults ❌

// ✅ right way
// -------------------------------------------------------------------
let q = {x: 2};

// 1. create new object  2. copy defaults  3. overwrite defaults with q
// ╰───────────── ↓ ─╯   ╰ ↓ ────────────╯  ╰─────────────────────────╯
q = Object.assign({}, defaults, q);    // <─────┘

// ⭐ use ... spread operator
let r = {x: 3};
r = {...defaults, ...r};

p    // { x: 0, y: 0, z: 0 }  <-- ❌ p been overwritten
q    // { x: 2, y: 0, z: 0 }  <-- ✅ q overwrites defaults
r    // { x: 3, y: 0, z: 0 }  <-- ⭐ excellent!

• replit ⟩ Object.assign(), require ⟩ Object extension

// ⭐ import
const _Object = require('./ext/Object_ext.js');    // extend Object.prototype
// ---------------------------------------------------------------------------

// ⭐ Object.assign(target, ...sources)
// ----------------------------------------------
// • only copies own enumerable properties
//
// case  source        target
// ----------------------------------------------
// • 1:  data       -> getter        // ⛔ [TypeError]
// • 2:  setter     -> getter        // ⛔ [TypeError]
// • 3:  setter     -> data          // ✅ OK (`undefined` is copied)
// • 4:  non-config -> configurable  // ✅ writable/enumerable/configurable all true by default

// ⭐ targets
const t1 = {
    get age() { return 18 },    // getter (accessor property)
};

const t2 = { age: 18 };         // data property
const t3 = {};                  // empty object

// ⭐ sources

// s1: source with setter (only) property
const s1 = {
    set age(v) {},              // setter (only)
}

// s2: source with non-configurable (enumerable) property
const s2 = {};

// define `s2.x`: own enumerable (data) property
s2.defineProperty('x', {
    value: 1, enumerable: true  // non-configurable by default
});    

// ⭐ log
;[
    
    // • 1: data -> getter
    `t1.assign({age: 6})`,    // ⛔ [TypeError] 
    // Cannot set property 'age' of #<Object> which has only a getter

    // • 2: setter -> getter
    `t1.assign(s1)`,          // ⛔ [TypeError] 
    // Cannot set property 'age' of #<Object> which has only a getter

    // • 3: setter -> data
    `t2.assign(s1)`,          // ✅ { age: undefined }

    // • 4: non-configurable -> configurable/writable/enumerable (new) property
    `t3.assign(s2)`,          // ✅ { x: 1 }
    `t3.propertyDescriptor('x')`,
    // { value: 1, writable: true, enumerable: true, configurable: true }
    
    
].forEach(exprStr => {
    try { log(eval(exprStr)) } catch(e) { logError(e) }
});

// log error
function logError(e) {
    log(`⛔ [${e.constructor.name}]`, e.message);
}

📗 參考

• (2020) JavaScript: The Definitive Guide ⭐️

  • 6.7 Extending Objects,

  • 14.1 Property Attributes

• DZone ⟩ Simplifying the Object.assign Method in JavaScript

• CodeProject ⟩ The Object.assign() Method In JavaScript

📘 手冊

• Object.assign()