Introduction to JavaScript Variables

Understand the differences between var, let, and const in JavaScript. Learn how scope works and when to use each declaration effectively.

Why Variables Matter in JavaScript

Variables are a fundamental part of any programming language—they allow developers to store and manipulate data over the lifetime of an application. In JavaScript, how you declare variables has a direct impact on the behavior, maintainability, and reliability of your code.

Overview of var, let, and const

JavaScript offers three main keywords for declaring variables: var, let, and const. While they might look similar at first glance, they differ significantly in scope, hoisting, reassignment rules, and intended use. Understanding these differences is essential for writing clear and bug-free code.

Importance of Understanding Variable Scope and Declarations

Scope defines where in your code a variable can be accessed. Poor understanding of scope—especially with legacy declarations using var—can lead to unintended behaviors and difficult-to-debug bugs. As JavaScript evolves, using the right declaration keyword has become an important best practice for writing modern, predictable code.

Understanding var

What is var?

The var keyword is the original way to declare variables in JavaScript, dating back to the earliest versions of the language. It is still valid syntax today but comes with behavior that can be counterintuitive.

Function Scope Explained

Variables declared with var are function-scoped. This means they are accessible throughout the entire function in which they are declared, regardless of block boundaries such as if or for statements.

JavaScript 
function example() {
    if (true) {
        var x = 10;
    }
    console.log(x); // 10 — accessible outside the if-block
}

Hoisting Behavior of var

var-declared variables are hoisted to the top of their function scope. However, only the declaration is hoisted—not the assignment.

JavaScript 
console.log(x); // undefined
var x = 5;

This can lead to confusing behavior, especially for beginners.

Problems and Pitfalls with var

  • Variables are accessible before declaration (due to hoisting).
  • Lack of block-level scoping leads to unexpected access.
  • Redeclaring the same variable within the same scope doesn’t throw an error, which can mask bugs.

When (and Why) to Avoid Using var

In modern JavaScript (ES6+), var is generally considered outdated. It's best to avoid using it unless working with legacy code or targeting very old environments. Favor let or const instead.

Understanding let

Introduction to let

Introduced in ECMAScript 2015 (ES6), let was designed to fix many of the quirks associated with var, particularly related to scoping and redeclaration.

Block Scope Explained

Unlike var, variables declared with let are block-scoped. This means they are only accessible within the {} block in which they are declared.

JavaScript 
if (true) {
    let y = 20;
}
console.log(y); // ReferenceError

Differences Between let and var

Differences Between let and var
Feature var let
Scope Function Block
Hoisting Yes (initialized as undefined) Yes (but not usable before declaration)
Redeclaration Allowed Not allowed

Reassignment and Redeclaration Rules

You can reassign a let variable, but redeclaring it in the same scope will throw a SyntaxError.

JavaScript 
let z = 5;
z = 10; // OK
let z = 15; // SyntaxError

Use Cases for let

Use let when a variable's value will change over time. It's ideal for loop counters or conditions where reassignment is expected.

Understanding const

Introduction to const

Also introduced in ES6, const is used to declare variables whose values are not intended to be reassigned.

Block Scope for const

Like let, const is block-scoped. It cannot be accessed outside the block in which it is defined.

Immutability Misconceptions (const ≠ Immutable)

Declaring an object or array with const prevents reassignment of the variable itself, but not the contents of the object or array.

JavaScript 
const obj = { name: "Alice" };
obj.name = "Bob"; // OK
obj = { name: "Charlie" }; // TypeError

When to Use const

Use const by default when you don’t intend to reassign the variable. It signals to others (and to yourself) that the reference won’t change.

Working with Objects and Arrays Declared with const

You can and often will mutate the contents of arrays and objects declared with const. For deep immutability, you’ll need additional techniques like Object.freeze() or using libraries such as Immutable.js.

Comparing var, let, and const

Summary Table of Differences

Comparison Table: var vs let vs const
Feature var let const
Declaration Example var a = variable; let a = variable; const a = variable;
Scope Function scope Block scope Block scope
Redeclaration Allowed Not allowed Not allowed
Reassignment Allowed Allowed Not allowed
Hoisting Yes No No
this Binding Possible Not automatic Not automatic

Key Differences

  • Scope: var is function-scoped; let and const are block-scoped.
  • Hoisting: All are hoisted, but let and const cannot be accessed before declaration (temporal dead zone).
  • Mutability: Only const enforces no reassignment.
  • Best Practice: Prefer const, use let if reassignment is needed, avoid var.

Practical Examples and Common Pitfalls

Loop Examples (var vs let in Closures)

JavaScript 
// Using var
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000); // prints 3, 3, 3
}

// Using let
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 1000); // prints 0, 1, 2
}

Avoiding Hoisting Bugs

Avoid using variables before they are declared. Stick to declaring variables at the top of their scope or before usage.

Managing Global Variables and Avoiding Pollution

Avoid using var globally. It becomes a property on the global object (e.g., window), leading to potential conflicts. Use let and const within modules or local scopes.

Real-World Scenarios and Debugging Tips

  • Use ESLint to catch scope-related bugs.
  • Use block scoping to avoid name collisions in closures.
  • Don't rely on hoisting—declare first, use second.

Modern JavaScript Best Practices for Variable Declarations

Why Use const by Default?

Using const as a default helps prevent accidental reassignments, encourages immutable design patterns, and improves code clarity.

When to Use let?

Use let when you need to update the variable value, such as counters in loops or conditional branches.

Avoiding var in ES6+ Projects

There are very few valid use cases for var in modern code. Unless you're maintaining legacy scripts or supporting outdated environments, you should avoid it entirely.

Improving Code Readability and Maintainability

Using const and let according to their purpose makes the code more predictable and easier to understand for both humans and static analysis tools.

Conclusion

Recap of Key Points

  • Always prefer const unless you plan to reassign the variable.
  • Use let when reassignment is necessary.
  • Avoid var unless absolutely required for legacy compatibility.
  • Understand scoping and hoisting to avoid common bugs.

The Importance of Proper Variable Declarations

Properly declaring your variables leads to safer, cleaner, and more maintainable code. It also signals your intent clearly to anyone reading the codebase.

Encouragement to Practice and Master These Concepts

The best way to internalize these rules is through practice. Try rewriting older code using let and const, and observe how behavior changes. The more mindful you are about variable declarations, the more robust your code will become.

Specifications

Specification for JavaScript Variable Declarations
Specification
var ECMAScript Language Specification
#sec-variable-statement
let ECMAScript Language Specification
#sec-let-and-const-declarations
const ECMAScript Language Specification
#sec-let-and-const-declarations

Browser compatibility

Browser compatibility for JavaScript Variable Declarations
Keyword
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
var 1 12 1 1
let 49 14 44 10
const 21 12 36 5.1

References