Javascript Module 10

  Module 10 : Javascript Scope and Hoisting  

📚 1. Understanding Scope

🔹 What is Scope?

Scope determines the accessibility (visibility) of variables. In JavaScript, scope is defined by blocks, functions, and modules.

🔸 Types of Scope in JavaScript

Type

Description

Global Scope

Variables declared outside any function or block. Accessible anywhere.

Function Scope

Variables declared within a function are only accessible inside that function.

Block Scope

Variables declared with let and const inside {} (if, for, while) are block-scoped.

Lexical Scope

Functions can access variables defined in the scope in which they were defined (not called).

🧪 Example: Scope

javascript

 code

let a = 10; // global scope function exampleScope() { let b = 20; // function scope if (true) { let c = 30; // block scope var d = 40; // function-scoped because of var console.log(a, b, c, d); // 10 20 30 40 } console.log(d); // 40 // console.log(c); // Error: c is not defined } exampleScope();

💡 Observation: var is function-scoped, not block-scoped.

📚 2. Understanding Hoisting

🔹 What is Hoisting?

Hoisting is a JavaScript mechanism where variable and function declarations are moved to the top of their scope before execution.

🔸 Rules of Hoisting

Function declarations are hoisted entirely (can be called before declaration).

Variables declared with var are hoisted but initialized as undefined.

let and const are hoisted but stay in a temporal dead zone (TDZ)—accessing them before declaration results in an error.

Example: Hoisting

javascript

code

console.log(foo); // undefined (hoisted) var foo = 'Hello'; console.log(bar); // ReferenceError (TDZ) let bar = 'Hi'; sayHi(); // "Hi there!" - works due to hoisting function sayHi() { console.log("Hi there!"); }

🔎 Insight: Only function declarations are fully hoisted. Function expressions are not.

🔄 3. Methods Understanding

Step 1: Identify scope boundaries

Look for functions {} and blocks {}.

Note where each variable is declared and which keyword (var, let, const).

Step 2: Check hoisting impact

Mark var declarations as undefined at the top.

Remember that let and const are not initialized immediately.

Step 3: Simulate line-by-line execution

. the code to move declarations up.

 4. Common Pitfalls & Best Practices

Mistake

Why it Happens

Solution

Using variables before declaration

Due to hoisting and TDZ

Always declare variables at the top

Confusing var with let/const

Different scoping

Prefer let and const

Accessing function expressions before definition

Only declarations are hoisted

Define functions before use

🧠 5. Exercises with Explanations

✍️ Exercise 1: Predict the Output

javascript

code

function test() { console.log(a); var a = 5; console.log(a); } test();

Expected Output:

javascript

code

undefined

5

Why?

var a is hoisted, so first log sees undefined, then a = 5.

✍️ Exercise 2: Block Scope Challenge

            

javascript

code

{ let x = 10; var y = 20; } console.log(y); // ? console.log(x); // ?

Expected Output:

javascript

 code

20

ReferenceError

✍️ Exercise 3: Fix the Bug

javascript

code

function callLater() { console.log(message); let message = "Hello!"; } callLater();

Problem: Temporal Dead Zone

Fix:

javascript

 code

function callLater() { let message = "Hello!"; console.log(message); }

📈 6.  Deep Insights

🔍 Insight 1:

ES6 (ECMAScript 2015) introduced let and const to fix issues with var hoisting and scoping, making JavaScript more predictable and maintainable.

🔍 Insight 2:

According to MDN, let and const declarations create a binding in the temporal dead zone from the start of the block until the declaration is evaluated.

🔍  Insight 3:

Hoisting helps JS compilers read declarations during parsing. However, modern JavaScript discourages on hoisting due to readability and maintenance issues.

🧑‍🏫7.Guidance

🗣️ Strategy:

Start with analogy:

“Think of JavaScript like a play: declarations are introduced during rehearsal (compile time), but not all are ready to perform when the play begins (runtime).”

Use Visual Diagrams:

Draw execution contexts.

Use arrows to show variable visibility and lifetimes.

Live Coding Demos:

Show one code snippet with and without hoisting.

Group Activity:

Have students refactor messy scoped code using let/const.

audience:

Predict output or identify scoping issues.

🎯 8. Summary of Key Takeaways

Concept

Summary

Scope

Controls variable accessibility.

Global Scope

Available anywhere.

Function Scope

Limited to function body.

Block Scope

Limited to block {} with let/const.

Hoisting

Declarations are moved to top of scope.

var

Hoisted and initialized as undefined.

let/const

Hoisted but uninitialized (TDZ).

✅ 9.  Checklist

 Defined all scope types

 Covered hoisting rules

 Provided examples & output

 Included  exercises

 Integrated insights

 Structured  plan