Types of JavaScript Variables

Variables are the building blocks of any programming language. In JavaScript, they store data that can be used later. Understanding the types of variables is crucial for writing clean and bug-free code.

JavaScript has three ways to declare a variable: var, let, and const. Each behaves differently in terms of scope, hoisting, and reassignment. Let's explore each one.

1. The var Keyword

Before ES6 (2015), var was the only way to declare variables. It has function scope and can be hoisted. This means it is accessible within the function it is declared in, even before its declaration.

Important:var does not have block scope. This can lead to unexpected behavior in loops and conditionals.

// Example of var hoisting
console.log(myVar); // Output: undefined
var myVar = 10;
console.log(myVar); // Output: 10

undefined
10

Notice that myVar is accessible before its declaration. It is hoisted to the top of its scope and initialized with undefined. This can cause confusion for beginners.

Because of these quirks, var is rarely used in modern JavaScript. Instead, developers prefer let and const. For a deeper dive, check out our JavaScript Variable Declaration Guide.

2. The let Keyword

The let keyword was introduced in ES6. It has block scope, meaning it is only accessible inside the block (curly braces) where it is defined. This makes it safer and more predictable than var.

Important:let can be reassigned, but it cannot be redeclared in the same scope.

// Example of let with block scope
let x = 5;
if (true) {
    let x = 10; // This is a different variable
    console.log(x); // Output: 10
}
console.log(x); // Output: 5

10
5

The inner x is separate from the outer x. This prevents accidental overwriting of variables. Use let when you need to change the value later.

Want to learn more about how scope works? Read our JavaScript Variable Scope Explained.

3. The const Keyword

The const keyword also came with ES6. It declares a variable that cannot be reassigned. However, it does not make the value immutable. If the value is an object or array, its properties can still be changed.

Important:const must be initialized at the time of declaration. You cannot declare a const variable without a value.

// Example of const
const PI = 3.14159;
console.log(PI); // Output: 3.14159

// This will cause an error
// PI = 3.14; // TypeError: Assignment to constant variable

// But objects are mutable
const person = { name: "Alice" };
person.name = "Bob"; // This works
console.log(person); // Output: { name: "Bob" }

3.14159
{ name: "Bob" }

Use const by default for variables that should not be reassigned. It makes your code more predictable and easier to debug. For a complete overview, see our JavaScript Variables Guide.

Key Differences at a Glance

Here is a quick comparison of the three variable types:

• Scope:var is function-scoped. let and const are block-scoped.
• Hoisting:var is hoisted with undefined. let and const are hoisted but not initialized (Temporal Dead Zone).
• Reassignment:var and let can be reassigned. const cannot.
• Redeclaration:var can be redeclared. let and const cannot.

When to Use Each Variable Type?

Modern JavaScript best practices recommend:

• Use const as your default choice. It prevents accidental reassignment.
• Use let only when you know the variable will change (e.g., loop counters).
• Avoid var in new code. It is outdated and can cause scope-related bugs.

Following these rules will make your code cleaner and less error-prone. For more examples, read our detailed JavaScript Variable Types Guide.

Conclusion

JavaScript offers three types of variables: var, let, and const. Each has its own scope, hoisting behavior, and use cases. var is legacy and should be avoided. let is for mutable variables with block scope. const is for immutable bindings and is the preferred choice.

Understanding these differences is essential for writing robust JavaScript. Start using const and let today. Your future self will thank you.