Mini Quiz: Javascript Scoping

Updated on Oct 10, 2018 ・1 min read

A quick quiz question on javascript scoping. Try and figure this out before executing in browser

If you were to create this object:

var person = {
    name: 'Dave',
    weight: 100,
    height: 180,
    calculateBMI: function() {
        console.log(this);
        function innerFunction() {
            console.log(this);
        }
        innerFunction();
    }
}

When running person.calculateBMI() what object will this be mapped to when logged by the innerFunction?

DISCUSS (6)
 

Depends on whether you 1) fix the code (you're missing a comma after the height and a closing } at the end) and 2) don't have "use strict" before the code (in which case this is set to undefined until explicitly set by call/apply or in prototypal methods); then the first console.log will show the person and the second one window/global (depending on your JS runtime).

 

Well spotted on the code error. Was not intentional and have since updated it :P

 

Trick question, it won't run because it will throw a SyntaxError when parsing the code, so this won't be mapped to anything :P

 

The calculateBMI method this mapping to the person object makes sense to me, but the innerFunction mapping to the Window object was a surprise. Anybody care to explain?

 

Because innerFunction have another different scope. Then this inside reference to function and not to person.

You can solve it adding self:

var person = {
    name: 'Dave',
    weight: 100,
    height: 180,
    calculateBMI: function() {
        console.log(this);
        var self = this;
        function innerFunction() {
            console.log(self);
        }
        innerFunction();
    }
}

Or with arrow function:

var person = {
    name: 'Dave',
    weight: 100,
    height: 180,
    calculateBMI: function() {
        console.log(this);
        let innerFunction = () => {
            console.log(this);
        }
        innerFunction();
    }
}
 
Classic DEV Post from Dec 13 '18

Best Tech GIFs & Memes Ever! Humour and Laughter — The Best Medicine!

Following Molly's post: ...

A giraffe obsessed software developer

Sore eyes?

dev.to now has dark mode.

Go to the "misc" section of your settings and select night theme ❤️