Why object destructuring in javascript will affect scope?

Question

I am trying to understand why object destructuring is changing the scope?

(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log(this);
        }
    }
    var { log } = o;
    o.log();
    log();
})();

this code will log two different objects

the first one is object o as expected but the second will log the global object

UPDATE (3 - May - 2021): If you have the same question and looking for a more detailed answer, read this one as well: How does the "this" keyword work?

This actually has nothing to do with destructuring, but rather with bound (`o.log()`) vs unbound (`log()`) calls. You'll get the right `this` only with the former. — georg, Apr 28 '21 at 22:50

King Friday · Accepted Answer · 2021-04-28T23:26:51.713

It's not exactly right

function log() {
  console.log('na aahh')
}
(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log('hi, i am locally scoped');
        }
    }
    var { log } = o;
    o.log();
    log();
})();

Run and see.

But...when you log this it always takes on the nearest scope which happens to be global because its detached from the o when destructured.

Try doing something like this...

function log() {
  console.log('nananana')
}
(function() {
    var o = {
        add: function(a , b) {
            return a + b;
        },
        log: function () {
            console.log(this);
        }
    }
    o.log = o.log.bind(o);
    var { log } = o;
    o.log();
    log();
})();

and notice how it retains this on destructure.

Also... side note, you should use let over using var as let when declared also has block scope which is pretty nice.

Happy coding sir.

score 2 · Answer 2 · answered Apr 28 '21 at 22:53

What you are doing is more or less equivalent of

const log = o.log

You have extracted a method from an object, but trying to call it without doing anything else, this will not refer to the original object. You need to bind it.

const log = o.log.bind(o)

Victor Luchian · Answer 3 · 2021-04-28T23:00:56.127

0

It depends on what you set this to be:

(function() {
var o = {
    add: function(a , b) {
        return a + b;
    },
    log: function () {
        console.log(this);
    }
}
var { log } = o;
o.log();
// equivalent to
log.call(o);
})();

edited Apr 28 '21 at 23:00

answered Apr 28 '21 at 22:54

Victor Luchian

112
9

Why object destructuring in javascript will affect scope?

3 Answers3

It's not exactly right