JavaScript Scope & Closures Quiz

Test your understanding of how variables are accessed and updated in different contexts, including nested functions, closures, and global vs. local scopes.

Question 1/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  f = h;
}

g();
f();

Question 2/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  h();
}

g();
f();

Question 3/15

What is the output of the following code? 
"use strict";

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

function bar() {
  let a = 20;
  function baz() {
    console.log(a);
  }
  return baz;
}

const closure = bar();
closure();
foo();

Question 4/15

What is the output of the following code? 
function f() {
  let a = 10;
  function g() {
    let b = 20;
    function h() {
      let c = 30;
      console.log(a + b + c);
    }
    return h;
  }
  return g();
}

const result = f()();

Question 5/15

What is the output of the following code? 
function foo() {
  let a = 10;
  function bar() {
    console.log(a);
  }
  return bar;
}

const baz = foo();
baz();

Question 6/15

Which of the following best describes the concept of closure in JavaScript?

Question 7/15

What is scope in JavaScript?

Question 8/15

What is the value of the sum variable after the following code is executed? 
function getSum() {
  let sum = 0;
  for (let i = 1; i <= 5; i++) {
    setTimeout(function() {
      sum += i;
    }, i * 1000);
  }
  return sum;
}

const result = getSum();

Question 9/15

What is the output of the following code? 
"use strict";

let a = 10;

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

function bar() {
  let a = 20;
  function baz() {
    console.log(a);
    let a = 30;
  }
  return baz;
}

const closure = bar();
closure();
foo();

Question 10/15

What is the output of the following code? 
let x = 10;

function f() {
  let x = 20;
  {
    let x = 30;
    console.log(x);
  }
  console.log(x);
}

f();

Question 11/15

What is the output of the following code? 
let x = 10;

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

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

g();
console.log(x);

Question 12/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  return h;
}

const closure = g();
closure();

Question 13/15

What is the output of the following code? 
let x = 10;

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

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

g();

Question 14/15

let is block-scoped, while var is function-scoped

Question 15/15

What is the value of the counter variable after the following code is executed? 
function makeCounter() {
  let count = 0;
  function increment() {
    count++;
    console.log(count);
  }
  return increment;
}

const counter = makeCounter();
counter();
counter();
You did not answer any questions correctly.

Your Answers

Question 1/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  f = h;
}

g();
f();
  1. The let x = 10; statement declares a global variable x with a value of 10.
  2. The f() function is defined to log the value of x to the console. Since x is not defined within the function, it will look for the variable in the outer scope, which is the global scope in this case.
  3. The g() function is defined to declare a local variable x with a value of 20, and then define a nested function h() that logs the value of x to the console. Since x is not defined within h(), it will look for the variable in the outer scope, which is the local scope of g() in this case.
  4. The f variable is reassigned to the h() function within the g() function. This means that after the g() function is executed, f() will actually execute the h() function defined within g().
  5. The g() function is called, which declares the local variable x and reassigns f to the h() function.
  6. The f() function is called, which now actually executes the h() function defined within g(). Since h() logs the value of its local x variable, which has a value of 20, the output of the function call is 20.

Question 2/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  h();
}

g();
f();
  1. The let x = 10; statement declares a global variable x with a value of 10.
  2. The f() function is defined to log the value of x to the console. Since x is not defined within the function, it will look for the variable in the outer scope, which is the global scope in this case.
  3. The g() function is defined to declare a local variable x with a value of 20, and then define a nested function h() that logs the value of x to the console. Since x is not defined within h(), it will look for the variable in the outer scope, which is the local scope of g() in this case.
  4. The h() function is called within g(), which logs the value of its local x variable, which is 20.
  5. The g() function is called, which declares the local variable x and calls the h() function, so the output of the function call is 20.
  6. The f() function is called, which logs the value of the global variable x, which is 10.

The first function call to h() logs the local variable x within g(), which has a value of 20. The second function call to f() logs the global variable x, which has a value of 10.

Question 3/15

What is the output of the following code? 
"use strict";

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

function bar() {
  let a = 20;
  function baz() {
    console.log(a);
  }
  return baz;
}

const closure = bar();
closure();
foo();
  1. "use strict"; is a directive that enables strict mode in JavaScript. Strict mode enforces stricter rules for writing JavaScript code, making it less error-prone.
  2. The foo() function is defined with a single statement that logs the value of a to the console. The variable a is not defined within the function, which will throw a reference error in strict mode.
  3. The bar() function is defined with a block of code that declares a variable a and assigns it the value of 20, followed by an inner function baz() that logs the value of a to the console. The inner function baz() has access to the variable a through closure.
  4. The bar() function returns the baz() function.
  5. const closure = bar(); calls the bar() function and assigns the returned baz() function to the closure constant.
  6. closure(); invokes the baz() function that was returned by the bar() function. The baz() function logs the value of the inner a variable (20) to the console.
  7. foo() is called, which logs the value of the outer a variable (which is not defined) to the console. This will throw a reference error in strict mode.

Question 4/15

What is the output of the following code? 
function f() {
  let a = 10;
  function g() {
    let b = 20;
    function h() {
      let c = 30;
      console.log(a + b + c);
    }
    return h;
  }
  return g();
}

const result = f()();
  1. The f() function is defined with a block of code that declares a variable a and assigns it the value of 10.
  2. The function contains an inner function g() that declares a variable b and assigns it the value of 20.
  3. The g() function contains an inner function h() that declares a variable c and assigns it the value of 30.
  4. The console.log(a + b + c); statement within the h() function logs the sum of a, b, and c (which is 60) to the console.
  5. The g() function returns the h() function.
  6. The f() function returns the value of calling the g() function, which returns the h() function.
  7. const result = f()(); calls the f() function and immediately invokes the returned function, which is h(). The sum of a, b, and c (60) is logged to the console.

In summary, the code defines three nested functions (f(), g(), and h()), with each inner function retaining access to its outer function's variables through closure. When the f() function is called and its returned value is immediately invoked, the h() function is executed and logs the sum of a, b, and c (which is 60) to the console.

Question 5/15

What is the output of the following code? 
function foo() {
  let a = 10;
  function bar() {
    console.log(a);
  }
  return bar;
}

const baz = foo();
baz();
  1. The foo() function is defined with a block of code that declares a variable a and initializes it to 10.
  2. The function contains an inner function bar() that logs the value of a to the console.
  3. The foo() function returns the bar() function.
  4. const baz = foo(); calls the foo() function and assigns the returned bar() function to the baz constant.
  5. baz(); calls the bar() function, which logs the value of a (10) to the console.

In summary, the foo() function returns an inner function bar() that retains access to the outer function's variables (a in this case) through closure. When foo() is called and the returned bar() function is assigned to the baz constant, the variable a is initialized to 10. When baz() is called, it invokes the bar() function, which logs the value of a (10) to the console.

Question 6/15

Which of the following best describes the concept of closure in JavaScript?

Closure in JavaScript refers to the ability of a function to access variables in its outer scope, even after the outer function has returned. This is made possible by the fact that JavaScript supports lexical scoping, where variables are resolved in the context of the code they are defined in.

Question 7/15

What is scope in JavaScript?

Scope in JavaScript refers to the set of rules that determines the visibility and accessibility of variables in different parts of a program. These rules define where variables can be accessed and manipulated in the code.

Question 8/15

What is the value of the sum variable after the following code is executed? 
function getSum() {
  let sum = 0;
  for (let i = 1; i <= 5; i++) {
    setTimeout(function() {
      sum += i;
    }, i * 1000);
  }
  return sum;
}

const result = getSum();
  1. The getSum() function is defined with a block of code that declares a variable sum and initializes it to 0.
  2. The function contains a for loop that declares a variable i and initializes it to 1, and loops while i is less than or equal to 5. On each iteration, it sets a timeout to execute an anonymous function that adds the value of i to sum. The timeout duration is determined by multiplying the value of i by 1000, which means that each iteration will add its value to sum after a delay of i seconds.
  3. The getSum() function returns the value of sum, which at this point is still 0.
  4. const result = getSum(); calls the getSum() function and assigns the returned value (0) to the result constant. This happens before the timeouts set in the loop have a chance to execute.

In summary, the getSum() function initializes a variable sum to 0 and sets timeouts to add values to sum after a delay. The function returns the initial value of sum before any of the timeouts have a chance to execute. As a result, the result variable will be assigned the value of 0, and the timeouts will add values to sum asynchronously but will not affect the value of result.

Question 9/15

What is the output of the following code? 
"use strict";

let a = 10;

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

function bar() {
  let a = 20;
  function baz() {
    console.log(a);
    let a = 30;
  }
  return baz;
}

const closure = bar();
closure();
foo();
  1. "use strict"; is a directive that enables strict mode in JavaScript. Strict mode enforces stricter rules for writing JavaScript code, making it less error-prone.
  2. let a = 10; declares a variable a and assigns it the value of 10.
  3. The foo() function is defined with a single statement that logs the value of a to the console.
  4. The bar() function is defined with a block of code that declares a variable a and assigns it the value of 20, followed by an inner function baz() that logs the value of a to the console and declares a new variable a with a value of 30. This will throw a reference error in strict mode because the inner a variable is referenced before it is declared.
  5. The bar() function returns the baz() function.
  6. const closure = bar(); calls the bar() function and assigns the returned baz() function to the closure constant.
  7. closure(); invokes the baz() function that was returned by the bar() function. This will throw a reference error in strict mode because the inner a variable is referenced before it is declared.

Question 10/15

What is the output of the following code? 
let x = 10;

function f() {
  let x = 20;
  {
    let x = 30;
    console.log(x);
  }
  console.log(x);
}

f();
  1. let x = 10; declares a variable x and assigns it the value of 10.
  2. The f() function is defined with a block of code that declares a variable x and assigns it the value of 20.
  3. The function contains an inner block of code that declares a variable x and assigns it the value of 30. This inner block has its own scope and is known as a block scope.
  4. The console.log(x); statement within the inner block logs the value of x (30) to the console.
  5. The console.log(x); statement outside the inner block logs the value of x (20) to the console.
  6. f(); calls the f() function, which logs the values of x (30 and 20) to the console.

In summary, the code demonstrates the concept of variable scope in JavaScript. The outer variable x is declared and assigned the value of 10. The f() function declares a new variable x with a value of 20 in its own block scope. Within the same function, a new variable x is declared in a separate block with a value of 30. Since this block has its own scope, the console.log(x); statement within it logs the value of this inner x variable (30) to the console. When the inner block is exited, the outer x variable with a value of 20 is still in scope, and the second console.log(x); statement logs this value (20) to the console.

Question 11/15

What is the output of the following code? 
let x = 10;

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

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

g();
console.log(x);
  1. The let x = 10; statement declares a global variable x with a value of 10.
  2. The f() function is defined to log the value of x to the console. Since x is not defined within the function, it will look for the variable in the outer scope, which is the global scope in this case.
  3. The g() function is defined to declare a local variable x with a value of 20, and then call the f() function. Since f() is not defined within g(), it will look for the function in the outer scope, which is the global scope in this case.
  4. The g() function is called, which declares the local variable x and calls the f() function. The f() function logs the value of x, which is the global variable with a value of 10, so the output of the function call is 10.
  5. The last line of code console.log(x); logs the value of the global variable x, which is 10.

The first console.log(x) call is executed within the f() function called by g(), so it logs 10. The second console.log(x) call is executed after g() has finished running, so it logs the same value of 10 for the global variable x.

Question 12/15

What is the output of the following code? 
let x = 10;

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

function g() {
  let x = 20;
  function h() {
    console.log(x);
  }
  return h;
}

const closure = g();
closure();
  1. The let x = 10; statement declares a global variable x with a value of 10.
  2. The f() function is defined to log the value of x to the console. Since x is not defined within the function, it will look for the variable in the outer scope, which is the global scope in this case.
  3. The g() function is defined to declare a local variable x with a value of 20, and then define a nested function h() that logs the value of x to the console. Since x is not defined within h(), it will look for the variable in the outer scope, which is the local scope of g() in this case.
  4. The g() function returns the h() function.
  5. The closure variable is assigned the h() function returned by the g() function, which logs the value of its local x variable, which has a value of 20.
  6. The closure() function call logs the local variable x within the closure, which has a value of 20.

The closure() function call logs the local variable x within the closure returned by g(), which has a value of 20. Note that the global variable x is not accessed or modified in this code, since it is not in the same scope as the functions g() and h().

Question 13/15

What is the output of the following code? 
let x = 10;

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

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

g();
  1. The let x = 10; statement declares a global variable x with a value of 10.
  2. The f() function is defined to log the value of x to the console. Since x is not defined within the function, it will look for the variable in the outer scope, which is the global scope in this case.
  3. The g() function is defined to declare a local variable x with a value of 20, and then call the f() function. Since f() is not defined within g(), it will look for the function in the outer scope, which is the global scope in this case.
  4. The g() function is called, which declares the local variable x and calls the f() function. The f() function logs the value of x, which is the global variable with a value of 10, so the output of the function call is 10.

Therefore, the output of the code will be 10.

Question 14/15

let is block-scoped, while var is function-scoped

The let keyword declares a variable that is block-scoped, which means it is only accessible within the block it is defined in (i.e., within a set of curly braces {}). The var keyword, on the other hand, declares a variable that is function-scoped, which means it is accessible within the entire function it is defined in, including any nested blocks. In addition, variables declared with var are subject to hoisting, which means they are moved to the top of their scope before execution.

Question 15/15

What is the value of the counter variable after the following code is executed? 
function makeCounter() {
  let count = 0;
  function increment() {
    count++;
    console.log(count);
  }
  return increment;
}

const counter = makeCounter();
counter();
counter();
  1. The makeCounter() function is defined with a block of code that declares a variable count and initializes it to 0.
  2. The function contains an inner function increment() that increments the value of count by 1 and logs the new value to the console.
  3. The makeCounter() function returns the increment() function.
  4. const counter = makeCounter(); calls the makeCounter() function and assigns the returned increment() function to the counter constant.
  5. counter(); calls the increment() function, which increments the value of count from 0 to 1 and logs the new value to the console.
  6. counter(); is called again, which increments the value of count from 1 to 2 and logs the new value to the console.

In summary, the makeCounter() function returns an inner function increment() that retains access to the outer function's variables (count in this case) through closure. When the makeCounter() function is called and the returned increment() function is assigned to the counter constant, the variable count is initialized to 0. Each time counter() is called, the increment() function increments the value of count by 1 and logs the new value to the console. This process is repeated each time counter() is called, resulting in a count that increases by 1 on each call.

Take Another Quiz

Advanced CSS Quiz

Advanced CSS Quiz designed to test your knowledge of advanced CSS concepts, including layout, positioning, blending, and responsive design. Start quiz

Agile Methodologies Quiz

Test your understanding of Agile methodologies, including Scrum, Kanban, and Lean. Understand how to use Agile principles to enhance the efficiency and productivity of your software development projects. Start quiz

Basic HTML & CSS Quiz

From basic tags and selectors to layout and positioning, this quiz covers essential topics that every beginner frontend web developer should know. Start quiz

Basic JavaScript Quiz

Test your understanding of the fundamental concepts and syntax of JavaScript, including variables, data types, conditionals, loops, and functions. Start quiz

CSS Box Model Quiz

Identify the correct box model properties for various layout scenarios and determine how changes to these properties affect the appearance of an element. Start quiz

CSS Flexbox Quiz

Test your knowledge of the CSS Flexbox layout module with multiple choice questions and their explanations. Start quiz