Scope

Global Scope

Declaration

// Variables declared outside any function/block
color = 'blue';      // Global (no declaration)
var size = 'large';  // Global (var)
let width = 100;     // Global (let)
const height = 200;  // Global (const)

Window Object (Browser)

// var adds to window
var globalVar = 'I am on window';
console.log(window.globalVar); // "I am on window"

// let/const do NOT add to window
let globalLet = 'I am NOT on window';
console.log(window.globalLet); // undefined

Global Scope Problems

// Naming conflicts
let count = 0;
// ... later in code ...
let count = 10; // Error: already declared

// Pollution
window.myApp = {};
// Any code can modify it
window.myApp.config = 'changed';

Avoiding Global Scope

// Use modules
// user.js
export const name = 'John';

// app.js
import { name } from './user.js';

// Use IIFE
(function() {
  const private = 'not global';
})();

// Use namespaces
const MyApp = {
  config: {},
  utils: {}
};

Function Scope

var is Function-Scoped

function example() {
  var x = 10;
  if (true) {
    var y = 20; // Same scope as x!
    console.log(x); // 10
  }
  console.log(y); // 20 (accessible!)
}

// x is not accessible here

Parameters are Function-Scoped

function greet(name) {
  // name is function-scoped
  console.log(name);
}

// name is not accessible outside

Function Scope vs Block Scope

function example() {
  var a = 1;   // function-scoped
  let b = 2;   // block-scoped
  const c = 3; // block-scoped
  
  if (true) {
    var d = 4;   // function-scoped (same as a)
    let e = 5;   // block-scoped
    const f = 6; // block-scoped
  }
  
  console.log(a); // 1
  console.log(d); // 4 (accessible!)
  // console.log(e); // Error
  // console.log(f); // Error
}

IIFE (Function Scope)

// Create function scope
(function() {
  var private = 'I am private';
  console.log(private);
})();

// private is not accessible outside

Callbacks and Function Scope

// var in callbacks
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 3, 3, 3
  }, 1000);
}

// let in callbacks
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 0, 1, 2
  }, 1000);
}

Block Scope

let and const are Block-Scoped

if (true) {
  let x = 10;
  const y = 20;
  var z = 30;
}

// console.log(x); // Error: x is not defined
// console.log(y); // Error: y is not defined
console.log(z);  // 30 (var is function-scoped)

Blocks in JavaScript

// if blocks
if (condition) { /* block */ }

// for blocks
for (let i = 0; i < 5; i++) { /* block */ }

// while blocks
while (condition) { /* block */ }

// switch blocks
switch (value) { case 1: /* block */ }

// standalone blocks
{ /* block */ }

Standalone Block Scope

// Use {} for temporary scope
{
  let temp = 'temporary';
  console.log(temp); // Works
}
// console.log(temp); // Error: temp is not defined

// Useful for destructuring
const user = { name: 'John', age: 30 };
{
  const { name, age } = user;
  console.log(name, age);
}

Block Scope Gotchas

// TDZ (Temporal Dead Zone)
{
  // console.log(x); // Error: Cannot access before initialization
  let x = 10;
}

// var ignores blocks
{
  var x = 10;
}
console.log(x); // 10

// Loop scope
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 0, 1, 2

Scope Chain

let global = 'global';

function outer() {
  let outer = 'outer';
  
  function middle() {
    let middle = 'middle';
    
    function inner() {
      let inner = 'inner';
      console.log(global);  // accessible
      console.log(outer);   // accessible
      console.log(middle);  // accessible
      console.log(inner);   // accessible
    }
    
    inner();
  }
  
  middle();
}

outer();