// Global scope: available everywhere
const globalVar = 'global';

function fn() {
  const localVar = 'local'; // function scope
  if (true) {
    let blockVar = 'block'; // block scope
  }
}

Deep Dive Course

**Scope** is the region of code where a variable is accessible. JavaScript has: **global scope** (window/globalThis), **function scope** (inside a function), and **block scope** (inside `{}`with let/const). **Lexical scope** means scope is determined by where code is written, not where it runs. **Context** is `this` — determined by how a function is called.

1Understanding Scope & Context

Scope is the region of code where a variable is accessible. JavaScript has: global scope (window/globalThis), function scope (inside a function), and block scope (inside {}with let/const). Lexical scope means scope is determined by where code is written, not where it runs. Context is this — determined by how a function is called.

💡

Scope is lexical (static) — set at write time. Context (this) is dynamic — set at call time. Arrow functions unify them by using lexical 'this'.

editor.html

// Scope chain: inner can access outer
const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    // Can access: innerVar, outerVar, global
    console.log(innerVar, outerVar, global);
  }
  inner();
  // Can access: outerVar, global (NOT innerVar)
}
outer();

localhost:3000

2Practical Example

Here is a real-world application of Scope & Context showing how it is used in production JavaScript code.

editor.html

// Block scope
let x = 1;
{
  let x = 2; // different x!
  console.log(x); // 2
}
console.log(x); // 1

// No block scope with var
var y = 1;
{
  var y = 2; // SAME y!
  console.log(y); // 2
}
console.log(y); // 2 (changed!)

localhost:3000

3Best Practices

Follow these guidelines when working with Scope & Context:

1. Minimize global scope pollution

2. Use closures for privacy

3. Understand lexical scope for debugging closure issues

⚠️

Tip: Scope is lexical (static) — set at write time. Context (this) is dynamic — set at call time. Arrow functions unify them by using lexical 'this'.

editor.html

// Scope chain: inner can access outer
const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    // Can access: innerVar, outerVar, global
    console.log(innerVar, outerVar, global);
  }
  inner();
  // Can access: outerVar, global (NOT innerVar)
}
outer();

localhost:3000

Examples

Example 01Basic Usage

// Scope chain: inner can access outer
const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    // Can access: innerVar, outerVar, global
    console.log(innerVar, outerVar, global);
  }
  inner();
  // Can access: outerVar, global (NOT innerVar)
}
outer();

Example 02Advanced Example

// Block scope
let x = 1;
{
  let x = 2; // different x!
  console.log(x); // 2
}
console.log(x); // 1

// No block scope with var
var y = 1;
{
  var y = 2; // SAME y!
  console.log(y); // 2
}
console.log(y); // 2 (changed!)

Best Practices

Minimize global scope pollution
Use closures for privacy
Understand lexical scope for debugging closure issues

Interview Question

What is the scope chain?▼

Hint: How JS looks up variable names.

The scope chain is the series of scopes from the innermost to the outermost (global). When JavaScript can't find a variable in the current scope, it walks UP the scope chain until it finds it or reaches the global scope (where it throws ReferenceError). Each function creates a new scope, and closures capture the chain at the time of creation.

Exercises

MediumPractice using Scope & Context in a real scenario.

View Solution

// Scope chain: inner can access outer
const global = 'global';

function outer() {
  const outerVar = 'outer';

  function inner() {
    const innerVar = 'inner';
    // Can access: innerVar, outerVar, global
    console.log(innerVar, outerVar, global);
  }
  inner();
  // Can access: outerVar, global (NOT innerVar)
}
outer();

Frequently Asked Questions

What is the scope chain?▼

Related Functions

ClosuresthisHoistingLet-Const