Scope & Closures

Question 1

Define scope.

Answer 1

Scope is the accessibility of variables, functions, and objects in some particular part of your code during runtime. If a variable or expression is not in the current scope then it is unavailable for use.

Question 2

True or false: scope is created by a function/code block?

Answer 2

True. Here, ‘count’ belongs to a scope created by foo(). Outside the foo() scope, count is inaccessible.

function foo() {
  let count = 0;
  console.log(count);
}
foo();
console.log(count); // ReferenceError

Question 3

What are the two types of scope?

Answer 3

Global and local. A variable is in the global scope if it’s defined outside of a function.

Question 4

When you nest a function inside another a function, are the variables of the outer scope accessible inside the inner scope?

function outerFunc() {
  let outerVal = 'I am outside!';

  function innerFunc() {
    console.log(outerVal);
  }

innerfunc();
}
outerFunc();

Answer 4

Yes. In that example, it will log “I am outside!”

Question 5

What kind of scoping mechanism does JavaScript use?

Answer 5

Lexical scoping.

Question 6

What is lexical scoping?

Answer 6

Lexical scope is determined at lexing time, which is a phase of compilation that converts a stream of characters into a stream of tokens.

Lexical scope is based on where variables and blocks of scope exist at author time. The engine determines the nesting of scope just by looking at the JavaScript source code, without executing it.

Question 7

What is a closure?

Answer 7

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment) so that it can access its lexical scope even when executed outside of its lexical scope.

function makeAdder(x) {
  return function(y) {
    return x + y;
  }
}
const add5 = makeAdder(5);
console.log(add5(2)); // 7

The inner function above maintains a reference to its lexical environment, which contains the variable x. That makes the inner function a closure because it closes over (captures, remembers) the variable x from it lexical scope.

Question 8

What do you call a function that remembers the variables from the place where it was defined, regardless of where it is executed later?

Answer 8

A closure.

Question 9

What’s a good way to identify a closure?

Answer 9

If you see a function with an alien variable (not defined inside the function), most likely the function is a closure because the alien variable is captured.

Question 10

Name two uses of closures.

Answer 10

(1) Partial application: The process of applying a function to some of its arguments. The partially applied function gets returned for later use.
(2) Data privacy: Storing items in the lexical environment of that is not accessible outside the outer function.

const counter = (function() {
  var privatecounter = 0;

  function changeBy(val) {
    privatecounter += val;
  }

return {
increment: function() { changeBy(1); },
value: function() { return privateCounter; }
})();

Question 11

Why does this for loop log the same value (3) each time? What are two ways of fixing it so it logs 0 then 1 then 2?

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Answer 11

Closures created in a loop share the same lexical environment. The variable ‘i’ is not scoped to the inside of the for loop. It is scoped at the function level since it was defined by var. So there is just one variable whose value gets updated each time you go through the loop.

To fix it you need the closure to bind the variable to a tighter scope. For example, you could use ‘let’ so that ‘i’ is block-scoped.

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 1000);
}

Or you could get the ‘i’ in function scope by using an immediately invoked function expression (IIFE).

for (var i = 0; i < 3; i++) {
  (function() {
    console.log(i);
  })();
}