javascriptdestructuringobject-destructuring

Is this an intentional design on object destructuring: the assignment result differs as whether the value to be assigned is an object literal or not

I always have such an intuition that an expression inside code can be mentally substituted by its evaluation result. However, the following two code snippets have different execution results.

let obj = {};
({a: obj.b, b: obj.a} = {a: 1, b: 2}); //* This line
console.log(obj); // {b: 1, a: 2}

versus

let obj = {a: 1, b: 2};
({a: obj.b, b: obj.a} = obj); //* and this line
console.log(obj); // {a: 1, b: 1}

I think the two starred lines are same IN MY BRAIN, but they have different execution results.

Is this an intentional design?

Solution

  • Object destructuring is just syntactic sugar for this:

    let obj = {};

// ({a: obj.b, b: obj.a} = {a: 1, b: 2});
const __temp_source = {a: 1, b: 2};
obj.b = __temp_source.a;
obj.a = __temp_source.b;

console.log(obj); // {b: 1, a: 2}

    but here, source and target are the same object

    let obj = {a: 1, b: 2};

// ({a: obj.b, b: obj.a} = obj);
obj.b = obj.a;
obj.a = obj.b;

console.log(obj); // {a: 1, b: 1}

    what you could do is

    let obj = {a: 1, b: 2};

[obj.a, obj.b] = [obj.b, obj.a];

// const __temp_source = [obj.a, obj.b];
// obj.b = __temp_source[0];
// obj.a = __temp_source[1];

console.log(obj); // {a: 2, b: 1}