DEV Community

Majeedat Abdulwahab
Majeedat Abdulwahab

Posted on

2 1 2 2

Understanding Variables In JavaScript: Let, Const and Var Explained.

Variables are one of the foundational concepts in programming, acting as containers for storing data. In JavaScript, there are three ways to declare variables: var, let, and const. Although they sound about the same, each serves a different purpose and has different behaviors. In this article, we are going to look at the differences between let, const, and var, and provide some practical examples to make it clear when to use which.

The Evolution of JavaScript Variables

Before ES6 (ECMAScript 2015), there was only one way to declare variables in JavaScript, and that was with var. However, var tended to have some peculiarity in itself, like function-scoping, hoisting, which created so many unanticipated bugs. With the introduction of let and const in ES6, developers have more control over variable behavior, making it easier to read and less error-prone.

1. var: The Old Guard

var is the original way of declaring variables in JavaScript. It's function-scoped, meaning it's only accessible within the function where it's declared. However, it's not block-scoped, which can lead to issues when working with loops or conditional statements.

Key Characteristics of var:

  • Function-scoped:
function example() {
    var message = "Hello, world!";
    console.log(message); // Accessible here
}
// console.log(message); // ReferenceError: message is not defined
Enter fullscreen mode Exit fullscreen mode
  • Hoisting:

Variables declared with var are hoisted to the top of their scope but are initialized with undefined.

console.log(name); // undefined
var name = "John";
Enter fullscreen mode Exit fullscreen mode
  • Re-declaration allowed:
var age = 25;
var age = 30; // No error
console.log(age); // 30

Enter fullscreen mode Exit fullscreen mode

When to use var:

While already valid, var is generally avoided in modern JavaScript in favor of let or const to prevent issues with scoping and hoisting.

2. let: The Flexible Modern Option

letwas introduced in ES6 as a block-scoped variable declaration. It's similar to var but avoids many of the quirks and pitfalls.

Key Characteristics of let:

  • Block-scoped: A variable declared with let is only accessible within the block, statement, or expression where it's defined.
if (true) {
    let greeting = "Hi!";
    console.log(greeting); // Accessible here
}
// console.log(greeting); // ReferenceError: greeting is not defined
Enter fullscreen mode Exit fullscreen mode
  • No hoisting with initialization:

Unlike var, let does not allow access to the variable before it's declared.

console.log(color); // ReferenceError: Cannot access 'color' before initialization
let color = "blue";
Enter fullscreen mode Exit fullscreen mode
  • Re-declaration not allowed in the same scope:
let score = 10;
// let score = 20; // SyntaxError: Identifier 'score' has already been declared
Enter fullscreen mode Exit fullscreen mode

When to use let:

Use let when you need a variable whose value will change over time or within a specific block.

3. const: The Immutable Choice

const was also introduced with ES6. It is intended for variables which are not to be reassigned. Like let, it is block-scoped and doesn't 'hoist' in the same way that var does.

Key Characteristics of const:

  • Block-scoped: As with let, const is scoped to the block on which it's defined.
if (true) {
    const pi = 3.14159;
    console.log(pi); // reachable here
}
// console.log(pi); // ReferenceError: pi is not defined
Enter fullscreen mode Exit fullscreen mode
  • Cannot be reassigned: Once a const variable is declared and set, that variable cannot be reassigned.
const birthYear = 1990;
// birthYear = 2000; // TypeError: Assignment to constant variable.
Enter fullscreen mode Exit fullscreen mode
  • Objects and arrays are mutable: One important thing is that the reference can't be changed but the contents of objects or arrays declared with const can be modified.
const person = { name: "Alice", age: 25 };
person.age = 26; // This works
console.log(person); // { name: "Alice", age: 26 }

Enter fullscreen mode Exit fullscreen mode

When to use const:

Default to using const for variables that should not be reassigned. This will make your code more predictable and easier to debug.

Comparison Table

Feature var let const
Scope Function Block Block
Hoisting Yes(initialized to undefined) No No
Re-declaration Yes No No
Re-assignment Yes Yes No

Best Practices

- Use const by default: It indicates that the variable will not be reassigned and makes the code more robust and predictable, thus more readable.

- Switch to let when re-assignment is necessary: Most variables actually don't change, so only use let for things that do, like counters or state variables.

- Avoid var: Modern JavaScript doesn't really need to use var, given that let and const do a far better job.

Conclusion

Understanding the differences between var, let, and const is crucial in writing clean, efficient, and bug-free code in JavaScript. You will be surprised less often and your code will be more readable if you default to const and only use let when you have to. You can safely leave var in the past.

So, do you have a favorite way of using let, const, or var? Let me know in the comments below!

Till next time, your friendly neighborhood writer, MJ.

Do your career a big favor. Join DEV. (The website you're on right now)

It takes one minute, it's free, and is worth it for your career.

Get started

Community matters

Top comments (0)

Cloudinary image

Zoom pan, gen fill, restore, overlay, upscale, crop, resize...

Chain advanced transformations through a set of image and video APIs while optimizing assets by 90%.

Explore

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay