Course: JavaScript

Progress (0%)

  1. Foundation

  2. Numbers

  3. Strings

  4. Conditions

  5. Loops

  6. Arrays

  7. Functions

  8. Objects

  9. Exceptions

  10. HTML DOM

  11. CSSOM

  12. Events

  13. Drag and Drop

  14. opt Touch Events

  15. Misc

  16. Project: Analog Clock

JavaScript Function Closures Quiz

Quiz 14 11 questions

Prerequisites for the quiz

  1. JavaScript Function Closures

Are you ready?

11 questions to solve

Instructions
  1. This quiz goes to full-screen once you press the Start button.
  2. At the end of the quiz, you are able to review all the questions that you answered wrong and see their explanations.
Which of the following definitions correctly describes a closure?
A function along with its lexical environment is collectively referred to as a closure. This goes with choice (D). For more details, refer to JavaScript Function Closures.
Determine the free variables of the function g() below:
var a = 1;

function f() {
    var b = 2;

    return function g() {
        var c = 3;
        console.log(a, b, c);
    }
}
For any given function, its free variables refer to those variables not local to the function. In the code above, the free variables of g() are a and b; c is not a free variable since it's defined locally inside g(). Hence, the correct choice is (B). For more details, refer to JavaScript Function Closures.
JavaScript is a statically-scoped language. True or false?
In JavaScript, the scopes of variables are defined once at compile time, when parsing the script, and then never change again. Hence, the language is called statically-scoped. Likewise, the statement above is true, which goes with choice (A). For more details, refer to JavaScript Function Closures.
JavaScript is a lexically-scoped language. True or false?
Another term for 'statically-scoped language' is lexically-scoped language. This means that the statement above is true. For more details, refer to JavaScript Function Closures.
What does the following code log?
var a = 10;

function f1() { console.log(a); }

function f2() {
    var a = 20;
    f1();
}

f2();
The name a inside f1() is resolved using its local, and then its lexical scope (if no match is found in the local scope). No match is found for a in the local scope of a, likewise searching shifts to its enclosing scope i.e. the global scope. Here, a match is found as is consequently used to resolve a in console.log(a).

Hence, the log made is 10, which goes with choice (A). For more details, refer to JavaScript Function Closures.
What does the following code log?
var a = 10;

(function() {
    function f1() { console.log(a); }

    function f2() {
        var a = 20;
        f1();
    }

    f2();
})();
The name a inside f1() is resolved by searching for it in the function's local scope, then in its lexical scope (which consists of its enclosing scope and then the global scope).. Neither a match is found in the local scope of f1(), nor in its enclosing scope (i.e. the local scope of the IIFE). However, a match for a is found in the global scope i.e. 10, and consequently used to resolve it in console.log(a).

The log made is therefore 10, which goes with choice (B). For more details, refer to JavaScript Function Closures.
What does the following code log?

There is no typo in the code below!

var x = 10;

(function() {
    function f() { console.log(x); }

    function g() {
        var x = 20;
        f();
    }

    g();
});
This is the simplest of all the questions asked in this quiz. The function expression in line 3 is not invoked, likewise nothing inside is executed. This means that nothing is logged in the console. Hence, the correct choice is (D).
What does the following code log?
var a = 10;

function f1() {
    var a = 20;

    return function() {
        console.log(a);
    }
}

var f2 = f1();
f2();
The function saved in f2 above is simply the anonymous function defined in line 6. Likewise, f2() executes this anonymous function. The name a inside it is first searched for in the local scope. No match is found here, likewise searching shifts to the enclosing scope i.e. the local scope of f1. A match a = 20 is found here and consequently used for the resolution.

The log made is therefore 20, which goes with choice (B). For more details, refer to JavaScript Function Closures.
What does the following code log?
var a = 10;

function f1() {
    return function() {
        console.log(a);
    }
}

var f2 = f1();
f2();
This question is fairly easy to solve. The name a inside the anonymous function defined in line 4 is resolved by first searching for it in the local scope of the function, and when no match gets found there, in the enclosing scope, and finally in the global scope. Now trivially, there is only one a in the code above and that is the global variable a = 10. Likewise, it's used for resolving a in console.log(a).

The log made is therefore 10, which goes with choice (B). For more details, refer to JavaScript Function Closures.
What does the following code log?
var a = 10;

function f1() {
    return function() {
        console.log(a);
    }
    var a = 20;
}

var f2 = f1();
f2();
The invocation expression f2() in line 11 executes the anonymous function defined in line 4. As before, there is a name a inside the function that ought to be resolved. It's first searched for in the local scope of the function. No match is found here, so searching moves to the enclosing scope i.e. the local scope of f1. Here, indeed a match for a is found, holding the value undefined and consequently used for the resolution.

Now there's a bit of technicality to consider over here. The statement var a = 20 in line 7 is never executed since there is a return keyword before it in line 5 (recall that return exits a function and takes execution back to the caller). However, due to variable hoisting in JavaScript, a is implicitly declared right at the beginning of f1() with the value undefined. The statement var a = 20 in line 7 is merely translated to a = 20 (the declaration is hoisted, not the assignment) which is, as before, not executed. So this local a of f1 is never assigned the value 20 — it stays equal to undefined.

The correct choice therefore is (A). For more details, refer to JavaScript Function Closures.
What does the following code log?
var a = 1;

function f1() {
    var b = 2;
    function f2() { console.log(a, b); }

    return f2;
}

var f2 = f1();
var b = 3;

function f3() {
    var a = 5;
    f2();
}

f3();
This is a complicated piece of code. If you carefully follow through it, you'll see that in the end, the function f2() (defined in line 5) is called. The most important thing is to take note of the values of a and b in the statement console.log(a, b) in this function.

The local scope of f2 doesn't contain a, likewise searching moves to its enclosing scope (i.e. the context of f1()). No match exists here as well, likewise searching moves to the global scope. Here, a is found with the value 1, and is consequently used for the resolution. Moving over to b, the local scope of f2() doesn't contain b, likewise searching moves to its enclosing scope (i.e. the context of f1()). Here, b is found with the value 2, and is consequently used for the resolution. In short, a is 1 and b is 2.

Hence, the correct choice is (A). For more details, refer to JavaScript Function Closures.