JavaScript Variables

Variables are containers for storing data values. In JavaScript, you declare variables using var, let, or const. Understanding the differences between these keywords is essential for writing bug-free code.

What are Variables?

Think of variables as labeled boxes where you can store information. Each box has a name (the variable name) and can hold a value (like a number, text, or more complex data).

// Creating a variable is like labeling a box
let message = "Hello, World!";

// You can read the value
console.log(message); // "Hello, World!"

// And change it (with let)
message = "Goodbye!";
console.log(message); // "Goodbye!"

Three Ways to Declare Variables

JavaScript provides three keywords for declaring variables. Each has different behaviors regarding scope, hoisting, and reassignment.

var - The Original Way

var was the only way to declare variables before ES6 (2015). It's function-scoped and hoisted to the top of its scope.

let - Block-Scoped Variables

let declares a block-scoped variable that can be reassigned. Use it when you know the value will change.

let count = 0;
count = 1;      // OK - reassignment allowed
count = 2;      // OK

let count = 3;  // ERROR - cannot redeclare

const - Constants

const declares a block-scoped variable that cannot be reassigned. However, if the value is an object or array, its properties can still be modified.

const PI = 3.14159;
PI = 3.14;  // ERROR - cannot reassign

const user = { name: "Alice" };
user.name = "Bob";  // OK - modifying property
user = {};          // ERROR - cannot reassign reference

Try It Yourself

Run this example to see how var, let, and const behave:

// Using var (function-scoped)
var name = "Alice";
console.log("var name:", name);

// Using let (block-scoped, can be reassigned)
let age = 25;
console.log("let age:", age);
age = 26; // Reassignment is allowed
console.log("let age after reassignment:", age);

// Using const (block-scoped, cannot be reassigned)
const PI = 3.14159;
console.log("const PI:", PI);

// const with objects - the reference is constant, not the value
const user = { name: "Bob" };
user.name = "Charlie"; // This works!
console.log("const user:", user);

Comparison: var vs let vs const

Here's a quick comparison of the three declaration keywords:

Variable Scope

Scope determines where variables are accessible in your code. Understanding scope is crucial for avoiding bugs.

Block Scope (let and const)

Variables declared with let or const are only accessible within the nearest enclosing block ({}).

if (true) {
  let blockScoped = "I only exist here";
  console.log(blockScoped); // Works
}
console.log(blockScoped); // ReferenceError!

Function Scope (var)

Variables declared with var are accessible throughout the entire function, even if declared inside a block.

function example() {
  if (true) {
    var functionScoped = "I exist in the whole function";
  }
  console.log(functionScoped); // Works!
}

Run this example to see the scope difference in action:

// var is function-scoped
function testVar() {
  if (true) {
    var x = 10;
  }
  console.log("var x inside function:", x); // Works! x is 10
}
testVar();

// let and const are block-scoped
function testLet() {
  if (true) {
    let y = 20;
    const z = 30;
    console.log("let y inside block:", y);
    console.log("const z inside block:", z);
  }
  // console.log(y); // Would throw ReferenceError!
}
testLet();

// Loop example showing the difference
console.log("\n--- Loop with var ---");
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log("var i:", i), 10);
}
// All print 3 because var is function-scoped

console.log("\n--- Loop with let ---");
for (let j = 0; j < 3; j++) {
  setTimeout(() => console.log("let j:", j), 20);
}
// Prints 0, 1, 2 because let is block-scoped

Hoisting

JavaScript moves variable declarations to the top of their scope before execution. This is called hoisting.

var Hoisting

var declarations are hoisted and initialized with undefined.

console.log(x); // undefined (not an error!)
var x = 5;
console.log(x); // 5

let/const Hoisting (Temporal Dead Zone)

let and const are hoisted but NOT initialized. Accessing them before declaration throws a ReferenceError. This period is called the Temporal Dead Zone (TDZ).

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 5;

Best Practices

Common Mistakes

1. Forgetting const with Objects

// This is allowed:
const arr = [1, 2, 3];
arr.push(4); // OK - modifying the array

// This is NOT allowed:
arr = [5, 6, 7]; // TypeError!

2. Using var in Loops

Quick Reference

Test Your Knowledge

Practice Exercises

// Challenge: Declare three variables
// 1. A constant called MAX_USERS set to 100
// 2. A variable called currentUsers set to 0
// 3. A variable called appName set to "MyApp"

// Your code here:

// Challenge: Fix the scoping bug
// The code below has a bug related to variable scope.
// Fix it so that each button logs its correct index.

function createButtons() {
  const buttons = [];

  for (var i = 0; i < 3; i++) {
    buttons.push({
      label: "Button " + i,
      onClick: function() {
        console.log("Clicked button", i);
      }
    });
  }

  return buttons;
}

const buttons = createButtons();
buttons[0].onClick(); // Should log 0
buttons[1].onClick(); // Should log 1
buttons[2].onClick(); // Should log 2

Frequently Asked Questions

Summary

You've learned the three ways to declare variables in JavaScript and when to use each:

• const - Your default choice. Use for values that won't be reassigned.
• let - Use when you need to reassign a variable (counters, accumulators).
• var - Avoid in modern code. Has confusing scope behavior.

Remember: let and const are block-scoped, while var is function-scoped. This difference is the main reason to prefer the modern keywords.