JavaScript Tutorial

The language for programming web pages.

Chapter Quiz Exercises

JS Scope

JavaScript Scope

Scope determines the accessibility (visibility) of variables. JavaScript has three types of scope.

Scope Types:

Global Scope — Declared outside functions, accessible everywhere
Function Scope — Declared with var inside a function
Block Scope — Declared with let/const inside {}

Closure:

A closure is a function that remembers variables from its outer scope even after the outer function has returned.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;">
<h2>Scope & Closure Demo</h2>
<div id="out" style="background:#1e1e1e;color:#abb2bf;padding:15px;border-radius:8px;font-family:monospace;line-height:2;"></div>
<button onclick="showScope()" style="margin-top:10px;padding:10px 20px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;cursor:pointer;font-weight:bold;">▶ Show Scope</button>
<script>
// Global scope
const globalVar = "I am GLOBAL 🌍";

function showScope() {
  // Function scope
  var funcVar = "I am function-scoped (var)";

// Block scope
  if (true) {
    let blockLet = "I am block-scoped (let)";
    const blockConst = "I am block-scoped (const)";
    var notBlockScoped = "var is NOT block-scoped!";
  }
  // blockLet is NOT accessible here — would throw ReferenceError

// Closure example
  function makeCounter() {
    let count = 0;
    return () => ++count; // remembers count
  }
  const counter = makeCounter();

document.getElementById("out").innerHTML =
    "Global:          "+globalVar+"<br>"+
    "Function (var):  "+funcVar+"<br>"+
    "var after block: "+notBlockScoped+"<br>"+
    "let/const:       not accessible outside block<br>"+
    "─────────── Closure ───────────<br>"+
    "counter():       "+counter()+"<br>"+
    "counter():       "+counter()+"<br>"+
    "counter():       "+counter()+" (remembers state!)";
}
</script>
</body></html>

Result

Topics

JS Introduction JS Where To JS Output JS Variables JS Data Types JS Functions JS Objects JS Arrays JS Strings JS If Conditions JS Loops JS Math JS Errors JS Scope JS DOM JS Events JS Promises & Async JS Classes JS JSON JS RegExp