JavaScript Scope and Hoisting Practice Questions with Solutions

Introductions

Scope determines where a variable can be accessed in JavaScript. Hoisting explains how JavaScript handles variable and function declarations before the code actually runs. These concepts can seem confusing at first, but simple examples make them much easier to understand. In this chapter, you will practice global scope, function scope, block scope, let, const, var, and hoisting with beginner-friendly examples. JavaScript Scope and Hoisting practice questions with solutions help to understand the concepts.

Question 1: Understand Global Scope

Problem

Create a variable outside a function and access it from inside the function.

Solution

let message = "Hello JavaScript";

function showMessage() {
    console.log(message);
}

showMessage();

Output

Hello JavaScript

Step-by-step Explanation

1. message is created outside the function.
2. Therefore, it has global scope in this example.
3. The showMessage() function can access message.
4. Calling showMessage() displays the value.
5. Variables in a wider scope can generally be accessed from an inner scope.

Question 2: Understand Local Function Scope

Problem

Create a variable inside a function and use it inside the same function.

Solution

function showName() {
    let name = "Rahul";

    console.log(name);
}

showName();

Output

Rahul

Step-by-step Explanation

1. name is declared inside showName().
2. Therefore, it belongs to the function’s local scope.
3. The variable can be accessed inside that function.
4. Calling the function displays "Rahul".

A variable declared inside a function is not normally available outside that function.

Question 3: Understand Block Scope with let

Problem

Create a variable using let inside an if block. Try to understand where it can be accessed.

Solution

if (true) {
    let message = "Inside the block";

    console.log(message);
}

Output

Inside the block

Step-by-step Explanation

1. The if statement creates a block using {}.
2. message is declared using let inside that block.
3. It can be accessed inside the block.
4. It is not available outside the block.

For example, this would cause an error:

if (true) {
    let message = "Hello";
}

console.log(message);

The variable message exists only inside the if block.

Question 4: Understand Block Scope with const

Problem

Create a constant inside a block and access it inside the same block.

Solution

{
    const age = 18;

    console.log(age);
}

Output

18

Step-by-step Explanation

1. A block is created using {}.
2. age is declared using const.
3. const variables are block-scoped.
4. The variable can be accessed inside the block.
5. It cannot be accessed outside the block.

Question 5: Understand var Function Scope

Problem

Create a variable using var inside an if block and observe whether it can be accessed outside the block.

Solution

if (true) {
    var message = "Hello";
}

console.log(message);

Output

Hello

Step-by-step Explanation

1. message is declared using var.
2. Unlike let and const, var is not block-scoped.
3. The if block does not create a separate scope for var.
4. Therefore, message can be accessed after the block.
5. This behavior is one reason modern JavaScript code generally prefers let and const.

Question 6: Understand Hoisting with var

Problem

Try to access a variable before its var declaration and observe the result.

Solution

console.log(age);

var age = 18;

Output

undefined

Step-by-step Explanation

JavaScript processes the var declaration before executing the code.

Conceptually, the code behaves somewhat like:

var age;

console.log(age);

age = 18;

1. The declaration of age is hoisted.
2. Its value is initially undefined.
3. console.log(age) therefore displays undefined.
4. After that, age receives the value 18.

Important: The assignment age = 18 is not hoisted in the same way as the declaration.

Question 7: Understand Hoisting with let

Problem

Try to access a let variable before its declaration.

Solution

console.log(age);

let age = 18;

Output

ReferenceError

Step-by-step Explanation

1. age is declared using let.
2. The declaration is processed before execution, but the variable cannot be accessed before its declaration is reached.
3. This period is known as the Temporal Dead Zone (TDZ).
4. Accessing age before the declaration causes a ReferenceError.
5. Therefore, unlike var, you cannot safely access a let variable before its declaration.

Question 8: Understand Hoisting with const

Problem

Try to access a const variable before its declaration.

Solution

console.log(name);

const name = "Aman";

Output

ReferenceError

Step-by-step Explanation

1. name is declared using const.
2. const variables cannot be accessed before their declaration.
3. The variable is in the Temporal Dead Zone before the declaration is executed.
4. Accessing it too early causes a ReferenceError.
5. Therefore, declare the variable before using it.

Correct approach:

const name = "Aman";

console.log(name);

Question 9: Understand Function Declaration Hoisting

Problem

Call a function before its declaration and observe what happens.

Solution

greet();

function greet() {
    console.log("Hello JavaScript");
}

Output

Hello JavaScript

Step-by-step Explanation

1. greet() appears before the function declaration.
2. JavaScript hoists function declarations.
3. Therefore, the function can be called before its declaration in this example.
4. The function executes normally.
5. "Hello JavaScript" is displayed.

This is different from variables declared with let and const.

Question 10: Understand Scope with Nested Functions

Problem

Create an outer function containing a variable and an inner function. Access the outer variable from the inner function.

Solution

function outer() {
    let message = "Hello from outer function";

    function inner() {
        console.log(message);
    }

    inner();
}

outer();

Output

Hello from outer function

Step-by-step Explanation

1. outer() is the outer function.
2. message is created inside outer().
3. inner() is created inside outer().
4. inner() can access message.
5. This works because the inner function can access variables from its surrounding scope.
6. inner() is called from inside outer().
7. The message is displayed.

This idea becomes very important later when learning closures.

Key Takeaways

• Scope determines where a variable can be accessed.
• Global variables can be accessed from wider parts of a program.
• Variables declared inside functions have local function scope.
• let and const are block-scoped.
• var is function-scoped rather than block-scoped.
• Hoisting affects how declarations are handled before code execution.
• var variables can produce undefined when accessed before their assignment.
• let and const cannot be accessed before their declaration.
• The period before a let or const declaration is called the Temporal Dead Zone.
• Function declarations are hoisted.
• Inner functions can access variables from their outer scopes.
• Understanding scope and hoisting helps prevent unexpected JavaScript errors.

FAQs

1. What is scope in JavaScript?

Scope defines where a variable can be accessed in a JavaScript program.

For example:

function test() {
    let message = "Hello";

    console.log(message);
}

Here, message is available inside the function.

2. What is global scope?

A variable declared outside functions or blocks can have global scope.

let name = "Rahul";

function showName() {
    console.log(name);
}

The function can access the outer name variable.

3. What is function scope?

Function scope means a variable is available within the function where it was declared.

function test() {
    let age = 18;

    console.log(age);
}

The age variable belongs to the function’s local scope.

4. What is block scope?

Block scope limits a variable to a block created by {}.

let and const are block-scoped.

if (true) {
    let age = 18;
}

age cannot be accessed outside this block.

5. What is hoisting?

Hoisting is JavaScript’s behavior around processing declarations before executing code. Function declarations can be called before their declaration, while var, let, and const behave differently.

6. What is the difference between var, let, and const?

The main difference includes their scope and behavior before declaration.

7. What is the Temporal Dead Zone?

The Temporal Dead Zone, or TDZ, is the period between entering a scope and reaching the declaration of a let or const variable. Accessing the variable during this period causes a ReferenceError.

Example:

console.log(age);

let age = 18;

This produces a ReferenceError.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar