Lesson 6: Scope and Lifetime of Variables

Learning Objectives

By the end of this lesson, learners will be able to:

• Understand what scope means in JavaScript
• Differentiate between global, local, function, and block scope
• Learn how variable lifetime affects accessibility
• Recognize the difference between var, let, and const in terms of scope
• Avoid common mistakes like accidentally accessing variables outside their scope

What Is Scope?

Scope defines where in your code a variable can be accessed or used.

In JavaScript, variables can be:

• Globally scoped (available everywhere)
• Locally scoped (only available inside a function or block)

Think of scope like a “visibility zone” for a variable.

1. Global Scope

A variable declared outside of any function is in the global scope. You can use it anywhere in your code.

let siteName = "Codevisionz";

function showSite() {
  console.log(siteName); // ✅ Accessible
}

showSite();
console.log(siteName);   // ✅ Also accessible

✅ Global variables are accessible inside functions
❌ But global variables can be accidentally changed or overwritten

2. Function Scope (with var)

A variable declared inside a function using var is only available within that function.

function greet() {
  var message = "Hello!";
  console.log(message); // ✅ Accessible
}

greet();
console.log(message); // ❌ Error: message is not defined

🧠 This is called function scope — message lives and dies inside the function.

3. Block Scope (with let and const)

Variables declared with let or const are block-scoped. They exist only within the nearest { } block, such as:

• if statements
• loops
• function bodies

if (true) {
  let mood = "happy";
  const weather = "sunny";
  console.log(mood, weather); // ✅ Accessible inside block
}

console.log(mood);    // ❌ Error: mood is not defined
console.log(weather); // ❌ Error: weather is not defined

✅ let and const respect block-level boundaries
❌ var does not — which can lead to bugs

Comparison: var vs. let/const

Variable Lifetime

A variable exists as long as its scope allows:

• Global variables live as long as the app runs
• Function variables are created when the function runs and destroyed when it ends
• Block-scoped variables exist only within {}

Example: Mixing Global and Local Scope

let user = "Lisa";

function greetUser() {
  let greeting = "Hello";
  console.log(greeting + ", " + user); // Hello, Lisa
}

greetUser();
console.log(greeting); // ❌ Error: greeting is not defined

🧠 user is global, so it’s accessible
🧠 greeting is local to the function

Common Pitfall: Shadowing

You can declare a local variable with the same name as a global one. The local one will “shadow” the global one.

let message = "Hi (global)";

function showMessage() {
  let message = "Hi (local)";
  console.log(message); // Output: Hi (local)
}

showMessage();
console.log(message);   // Output: Hi (global)

Summary