Search code examples
javascriptpromisedestructuring

Object destructuring resolve and reject in a Promise


Object destructuring is not something i ike the most and i often try to avoid using it. However in this particular case i am too curious to neglect what is happening.

Now we can do like;

var o = {},
    x = 1,
    y = 2;
o = {x,y};
console.log(o); // <- {x: 1, y: 2}

all is fine;

My case is a little more complicated though;

var p = function(o){
          o.promise = new Promise((resolve,reject) => o = {resolve,reject});
          console.log(o)  // -< {resolve: ƒ, reject: ƒ}
          return o;
        }({});
console.log(p);           // -< {resolve: ƒ, reject: ƒ}

where is the promise property of p..? So i do it the classical way like;

var q = function(o){
          o.promise = new Promise((resolve,reject) => ( o.resolve = resolve
                                                      , o.reject  = reject
                                                      ));
          console.log(o)  // <- {promise: Promise, resolve: ƒ, reject: ƒ}
          return o;
        }({});
console.log(q);           // <- {promise: Promise, resolve: ƒ, reject: ƒ}

I have a strange feeling like i am missing something very fundamental but i can not tell what.


Solution

  • There is no destructuring in any of the code you've shown.

    You are re-assigning o to a simple plain new object with 2 properties:

    o = {resolve,reject}
    

    which is just the object literal shorthand syntax introduced with ES2015 and identical to

    o = {resolve: resolve, reject: reject}
    

    Of course the previous promise property is then lost, because it lives on an object that is no longer referenced by o (and will eventually be garbage collected if there's no other reference to it in memory).

    Try

    o.promise = new Promise((resolve,reject) => o = { ...o, resolve, reject });

    And no, that ...o isn't destructuring either, it's object spread syntax.

    You can also use

    o.promise = new Promise((resolve,reject) => o = Object.assign(o, { resolve, reject }));
    

    Note that Object.assign() triggers setters (if any), whereas spread syntax doesn't.