Mini Quiz: Javascript Scoping

twitter logo github logo Updated on ・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?

twitter logo DISCUSS (6)
markdown guide
 

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 8 '17

Avoid getters and setters whenever possible

Let's make getters and setters our last, rather than first, resort.

Sheldon Nunes profile image
A giraffe obsessed software developer