JavaScript · Lesson 12 / 32 · தமிழ்

Scope & Hoisting

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesRunnable JavaScriptPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

Scope determines where a binding can be read. let and const use block scope. Function declarations can be called before their declaration; let and const cannot be read before initialization.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

JavaScript-ல Scope

Scope என்பது ஒரு variable code-ல எங்கெல்லாம் accessible-ஆ இருக்கும்னு determine பண்றது. JavaScript-ல மூணு levels of scope இருக்கு.

Global, Function, மற்றும் Block Scope

JavaScript reference fragmentCODE

// Global scope — எங்கயும் accessible
const globalVar = "நான் global";

function myFunction() {
  // Function scope — இந்த function-க்கு உள்ளே மட்டும்
  const funcVar = "நான் function-scoped";

  if (true) {
    // Block scope — இந்த {} block-க்கு உள்ளே மட்டும்
    const blockVar = "நான் block-scoped";
    var funcScoped = "நான் function-scoped (var!)";
  }

  // console.log(blockVar); // ❌ ReferenceError
  console.log(funcScoped);   // ✅ var block-ஐ leak பண்ணும்!
}

Key rule: const மற்றும் let use பண்ணு — இவை block scope respect பண்ணும். var blocks-ஐ ignore பண்ணி enclosing function-க்கு leak ஆகும்.

Hoisting

Hoisting என்பது declarations-ஐ scope-ன் top-க்கு move பண்றது JavaScript-ன் behaviour. var vs let/const vs functions எப்படி hoist ஆகுதுன்னு வேற வேறா இருக்கு.

JavaScript reference fragmentCODE

// var — hoisted, undefined-ஆ initialise ஆகும்
console.log(x); // undefined (ReferenceError இல்ல!)
var x = 5;

// let/const — hoisted ஆனா initialise ஆகல (Temporal Dead Zone)
// console.log(y); // ❌ ReferenceError
let y = 10;

// Function declarations — fully hoisted
greet(); // ✅ works
function greet() { console.log("Hello!"); }

// Function expressions — hoisted இல்ல
// sayHi(); // ❌ ReferenceError
const sayHi = () => console.log("Hi!");

Temporal Dead Zone (TDZ)

JavaScript reference fragmentCODE

// TDZ — block ஆரம்பிக்கிறதிலிருந்து declaration வரை
{
  // TDZ for 'name' இங்க ஆரம்பிக்கும்
  console.log(typeof name); // ❌ ReferenceError
  const name = "Alice";     // TDZ இங்க முடியும்
  console.log(name);        // ✅ "Alice"
}

Scope Chain

JavaScript reference fragmentCODE

const level1 = "outer";

function outer() {
  const level2 = "middle";

  function inner() {
    const level3 = "inner";
    // Outer scopes எல்லாத்தையும் access பண்ணலாம்
    console.log(level1); // ✅ "outer"
    console.log(level2); // ✅ "middle"
    console.log(level3); // ✅ "inner"
  }

  inner();
  // console.log(level3); // ❌ ReferenceError
}

03 / Read & predict

முழுமையான உதாரணம்

Run this complete index.js program in the JavaScript console editor below. The earlier reference fragments may need a browser page or other surrounding setup.

index.js · complete exampleCODE

const topic = "JavaScript";
function report() {
  const completed = 2;
  console.log(topic + ": " + completed);
}
report();
console.log(typeof missingName);

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

JavaScript: 2
undefined

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

Load the example, change a value, predict the output, and run it again. Use the console output to check your reasoning.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Try reading completed outside report. What error should you expect?

விடை மற்றும் விளக்கம்

A ReferenceError: completed exists only inside the function.

தவிர்க்க வேண்டிய தவறு: Hoisting does not mean every declaration can be used early. Reading let or const in its temporal dead zone throws a ReferenceError.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.