Variables in JavaScript - let, const, var Explained

Master variables in JavaScript! Learn when to use let, const, var, scoping, and best practices!

Introduction

Variables are containers for storing data! In modern JS, we have let, const, and the old var! Let's master them!

What You Will Learn

  • How to declare variables with let, const, var
  • Differences between them
  • Scoping rules
  • Best practices for choosing which to use
  • Common pitfalls

Why This Matters

Variables are the building blocks of any program! Choosing the right one and understanding scoping prevents bugs!

Prerequisites

let: The "Normal" Variable

Use let for variables that will change!

let count = 0;
count = 1; // Perfectly fine!
count++; // 2, still fine!

Characteristics of let

  1. Block-scoped: Only exists inside { ... } it was declared
  2. Can be reassigned: But not re-declared in the same scope!
  3. Hoisted but not initialized: Can't use before declaration!

const: The "Constant" Variable

Use const for variables that won't change!

const PI = 3.14159;
const name = 'John';

// PI = 3; // ERROR! Can't reassign const!

Important! const with Objects/Arrays

const only prevents reassigning the reference, not the contents!

const person = { name: 'John' };
person.name = 'Jane'; // OK - modifying object, not reassigning variable!
// person = { name: 'Bob' }; // ERROR! Reassigning is not allowed!

const arr = [1, 2, 3];
arr.push(4); // OK - modifying array!

Characteristics of const

  1. Same scoping rules as let
  2. Must be initialized when declared! const x; // ERROR!
  3. Can't be reassigned

var: The Old One (Avoid!)

var is the old way. Avoid in modern code! Use let/const instead!

Problems with var

  1. Function-scoped, not block-scoped! Weird behavior!
  2. Hoisted and initialized to undefined
  3. Can be re-declared in same scope!
for (var i = 0; i < 3; i++) {
  console.log(i); // 0,1,2
}
console.log(i); // 3! i exists outside loop - BAD!

Compare to let:

for (let i = 0; i < 3; i++) {
  console.log(i);
}
// console.log(i); // Error! i doesn't exist here! Good!

Scoping Rules

Global Scope

Variables declared outside any function/block are global! Avoid too many globals!

Function Scope

Variables declared inside function only exist there!

Block Scope (let/const)

Variables declared inside { } only exist there!

if (true) {
  let a = 1;
  const b = 2;
  var c = 3;
}
console.log(a); // Error!
console.log(b); // Error!
console.log(c); // 3 (var leaks!)

Hoisting

Variables are "hoisted" to top of their scope!

  • var: Hoisted and initialized to undefined
  • let/const: Hoisted but NOT initialized → "Temporal Dead Zone" (TDZ)
console.log(x); // undefined (var - hoisted, undefined value)
var x = 5;

// console.log(y); // Error! TDZ!
let y = 5;

Best Practices

  1. Use const by default! Most variables don't need to change!
  2. Use let only when you need to reassign
  3. Never use var in modern code!
  4. Use descriptive variable names: username not just u!
  5. Use camelCase: firstName, totalPrice

Common Mistakes

  1. Using var: Just don't!
  2. Forgetting const needs initial value: const x; // Error!
  3. Trying to reassign const: const a = 1; a = 2; // Error!
  4. Confusing block vs function scope!

Code Examples

Good

// Good! Use const for things that don't change
const PI = 3.14159;
const baseURL = 'https://api.example.com';

// Good! Use let for things that do change
let score = 0;
let username = '';

function greet(name) {
  const message = `Hello, ${name}!`; // const inside function!
  console.log(message);
}

Bad

// Bad! Use const instead!
var daysInWeek = 7;

// Bad! Use const instead!
let taxRate = 0.08; // Never changes - use const!

Summary

Use const by default, let when needed, and never var! This will save you from countless bugs!

Related Articles

Previous Tutorial

← First JavaScript Program

Next Tutorial

Let's learn data types! → Data Types: Primitive & Reference

← Back to Syllabus