JavaScript Variables: Declaring with `var`, `let`, and `const`

4.2 Declaring Variables with var, let, and const§

In JavaScript, variables are fundamental building blocks that allow us to store and manipulate data. Understanding how to declare variables effectively is crucial for writing clean and efficient code. In this section, we’ll explore the three primary ways to declare variables in JavaScript: var, let, and const. We’ll discuss their differences, scope, and hoisting behavior, and provide guidance on when to use each.

Understanding Variable Declaration§

Before we dive into the specifics of var, let, and const, let’s briefly review what a variable is. A variable is a named storage location in memory that holds a value. You can think of it as a container for data that can be referenced and manipulated throughout your program.

var: The Traditional Way§

The var keyword is the traditional way of declaring variables in JavaScript. It has been around since the early days of the language and is still widely used. However, it comes with some quirks that you need to be aware of.

Scope of var§

Variables declared with var have a function scope or global scope. This means that if you declare a variable inside a function using var, it is only accessible within that function. If declared outside any function, it becomes a global variable.

function exampleFunction() {
    var functionScoped = "I'm only accessible within this function";
    console.log(functionScoped); // Output: I'm only accessible within this function
}

exampleFunction();
console.log(functionScoped); // Error: functionScoped is not defined
javascript

If you declare a variable with var outside of any function, it becomes globally scoped and can be accessed from anywhere in your code.

var globalScoped = "I'm accessible anywhere in the code";

function anotherFunction() {
    console.log(globalScoped); // Output: I'm accessible anywhere in the code
}

anotherFunction();
console.log(globalScoped); // Output: I'm accessible anywhere in the code
javascript

Hoisting with var§

One of the unique characteristics of var is hoisting. Hoisting is JavaScript’s default behavior of moving declarations to the top of the current scope (function or global). This means that you can use a variable before it has been declared, and JavaScript will not throw an error.

console.log(hoistedVar); // Output: undefined
var hoistedVar = "I'm hoisted!";
console.log(hoistedVar); // Output: I'm hoisted!
javascript

In the example above, the declaration of hoistedVar is hoisted to the top of the scope, but its assignment is not. This is why the first console.log outputs undefined.

let: The Modern Approach§

The let keyword was introduced in ECMAScript 6 (ES6) to address some of the issues associated with var. It provides block-level scope, which is more intuitive and predictable.

Scope of let§

Variables declared with let are block-scoped. A block is defined by a pair of curly braces {}. This means that a variable declared with let is only accessible within the block in which it is defined.

if (true) {
    let blockScoped = "I'm only accessible within this block";
    console.log(blockScoped); // Output: I'm only accessible within this block
}

console.log(blockScoped); // Error: blockScoped is not defined
javascript

In the example above, blockScoped is only accessible within the if block.

Hoisting with let§

Like var, let is also hoisted, but it is not initialized. This means that you cannot access a let variable before it is declared, which prevents the common pitfalls associated with var.

console.log(notHoistedLet); // Error: Cannot access 'notHoistedLet' before initialization
let notHoistedLet = "I'm not hoisted!";
console.log(notHoistedLet); // Output: I'm not hoisted!
javascript

const: Immutable Variables§

The const keyword, also introduced in ES6, is used to declare variables that are intended to remain constant. Once a variable is assigned a value using const, it cannot be reassigned.

Scope of const§

Like let, const is block-scoped. It follows the same rules regarding accessibility within blocks.

if (true) {
    const blockScopedConst = "I'm only accessible within this block";
    console.log(blockScopedConst); // Output: I'm only accessible within this block
}

console.log(blockScopedConst); // Error: blockScopedConst is not defined
javascript

Hoisting with const§

const is also hoisted, but like let, it is not initialized. You cannot access a const variable before it is declared.

console.log(notHoistedConst); // Error: Cannot access 'notHoistedConst' before initialization
const notHoistedConst = "I'm not hoisted!";
console.log(notHoistedConst); // Output: I'm not hoisted!
javascript

Immutability of const§

While const variables cannot be reassigned, it is important to note that if the variable holds an object or an array, the contents of the object or array can still be modified.

const myArray = [1, 2, 3];
myArray.push(4);
console.log(myArray); // Output: [1, 2, 3, 4]

const myObject = { key: "value" };
myObject.key = "newValue";
console.log(myObject); // Output: { key: "newValue" }
javascript

When to Use var, let, and const§

Now that we understand the differences between var, let, and const, let’s discuss when to use each.

• Use let when you need a variable that can change its value and is limited to a specific block scope. This is the most common use case in modern JavaScript development.
• Use const when you want to declare a variable that should not be reassigned. This is particularly useful for constants and values that should remain unchanged throughout your program.
• Avoid var in most cases, as it can lead to unexpected behavior due to its function scope and hoisting characteristics. let and const provide more predictable and safer alternatives.

Try It Yourself§

Let’s put our knowledge into practice with a simple exercise. Modify the following code to use let and const appropriately:

var name = "Alice";
var age = 25;
var isStudent = true;

if (isStudent) {
    var discount = 0.1;
    console.log("Discount applied:", discount);
}

console.log(name, age, isStudent, discount);
javascript

Challenge: Change the var declarations to let or const where appropriate, and ensure the code still functions correctly.

Visualizing Scope and Hoisting§

To better understand the scope and hoisting behavior of var, let, and const, let’s visualize it using a diagram.

Diagram Explanation:

• var can be accessed in the global or function scope and is hoisted.
• let and const are block-scoped and are also hoisted but not initialized.

Further Reading§

For more information on variable declaration and scope in JavaScript, check out the following resources:

• MDN Web Docs: var
• MDN Web Docs: let
• MDN Web Docs: const

Summary§

In this section, we’ve explored the differences between var, let, and const in JavaScript. We’ve learned about their scope, hoisting behavior, and best practices for using each. By understanding these concepts, you can write more predictable and maintainable JavaScript code.

Quiz Time!§