Scope - Intro to Programming Tutorial

Quick Summary

Scope controls where a variable can be accessed. let and const are block-scoped, while var is function-scoped. Understanding scope prevents bugs where variables unexpectedly overwrite each other or aren't accessible where you need them.

Understanding Scope

Scope determines where in your code a variable is accessible. Think of it like rooms in a house — a variable in one room isn't automatically available in another.

Global Scope

Variables declared outside any function or block:

const globalVar = "I'm everywhere!";

function test() {
  console.log(globalVar); // Accessible
}

Function Scope

Variables declared inside a function:

function myFunction() {
  const localVar = "Only in this function";
  console.log(localVar); // Works
}

console.log(localVar); // Error! Not defined

Block Scope (let and const)

Variables declared inside any {} block:

if (true) {
  const blockVar = "Only in this block";
  let anotherBlock = "Also block-scoped";
}
console.log(blockVar); // Error! Not defined

var is Function-Scoped (Not Block-Scoped)

This is why we avoid var:

if (true) {
  var leaky = "I escape blocks!";
}
console.log(leaky); // Works (but shouldn't!)

Scope Chain

Inner scopes can access outer scopes:

const outer = "outer";

function parent() {
  const middle = "middle";

  function child() {
    const inner = "inner";
    console.log(outer);  // ✓ Can access
    console.log(middle); // ✓ Can access
    console.log(inner);  // ✓ Can access
  }
}

Variable Shadowing

Inner scope variable "hides" outer one:

const name = "Global";

function test() {
  const name = "Local"; // Shadows global
  console.log(name);    // "Local"
}

console.log(name); // "Global"

Closures

Functions "remember" their scope:

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

Try It Yourself

Here's a practical example you can try. Copy this code and run it in your browser's console (press F12 to open developer tools) or in the Code Playground.

// Global scope
const appName = "MyApp";

function demonstrateScope() {
  // Function scope
  const functionVar = "Only in this function";

  if (true) {
    // Block scope
    const blockVar = "Only in this block";
    let anotherBlockVar = "Also block-scoped";

    console.log(appName);      // ✓ Global accessible
    console.log(functionVar);  // ✓ Function accessible
    console.log(blockVar);     // ✓ Block accessible
  }

  // console.log(blockVar); // Error! Out of scope
  console.log(functionVar);   // ✓ Still in function scope
}

// Variable shadowing
const status = "global";

function checkStatus() {
  const status = "local"; // Shadows global
  console.log(status);    // "local"
}

checkStatus();
console.log(status); // "global" (unchanged)

// Closure example
function createMultiplier(factor) {
  return function(number) {
    return number * factor; // "remembers" factor
  };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5)); // 10
console.log(triple(5)); // 15

Key Takeaways

✓Variables live in specific blocks or functions.
✓Practice with real code examples to solidify your understanding
✓This concept builds the foundation for more advanced topics