Understanding Let, Var, and Const in JavaScript: A Guide to Variable Declarations

The way we declare variables in JavaScript has evolved, leading to improved readability and functionality in our code. In this article, we dive into the differences between let, var , and const , and understand when and why to use each one.

Let’s use an everyday life analogy to understand var, let, and const:

1. Var (Community Blackboard):

Imagine var as a community blackboard in a park. Anyone can write on it, erase it, or modify what’s written. However, because it’s in a public space, sometimes what you write might be changed by others, leading to confusion. This is like var being globally scoped and prone to being overwritten or causing conflicts.

2. Let (Personal Notebook) :

Think of let as a page in your personal notebook. You can write notes, erase them, or change them, but only within that page. Once you turn the page, those notes are not applicable. This is similar to let being block-scoped, meaning it only exists within the specific set of curly braces `{}` where it’s declared.

3. Const (Engraved Stone Tablet):

Consider const as an engraved stone tablet. Once you carve your message, it’s permanent. You can’t erase or change it. It’s great for important messages that must not be altered. This is akin to const in JavaScript, where once a value is assigned, it cannot be reassigned.

VAR

Var is the original keyword for variable declarations, and we will also explain its Mutability,function-level scope. We will also discuss its peculiarities such as hoisting, and why these led to the introduction of “let” and “const”.

1. MUTABILITY

Here, `myName` is declared with var, which means you can change its value later. Initially, it’s set to ”Rithin Menezes”, but then it’s changed to ”Brandon”.

2. SCOPE

`varVariable` is accessible both inside and outside the if block but still within the function, showing its function scope.

3. HOISTING

EXPLAINATION :

varVariable is hoisted to the top of the function scope. Before the line where it’s defined, its value is initialised with “undefined”.

This is why you don’t get a ReferenceError and instead get `undefined` when you try to access varVariable` before it’s declared.

LET

Let was introduced as a new way to declare variables, offering block-level scope, contrasting the function-level scope of `var`. Unlike var, let do hoist variables to the top of their enclosing scope but doesn’t initialize it. This reduces issues related to variable declarations and enhances code readability and maintainability

1. MUTABILITY

In this case, greeting is declared with let, so its value can be reassigned. It starts as “Hiii” and then gets updated to “Hello”.

2. SCOPE

`letVariable` is only accessible within the if block where it’s declared, demonstrating block scope.

3. HOISTING

EXPLAINATION :

letVariable is hoisted, but it’s not initialized with undefined

Accessing it before the declaration results in a ReferenceError because it’s in a “temporal dead zone” from the start of the block until the declaration is evaluated.

CONST

Const is used to declare constants. We emphasize its block-level scope and immutability, except when it comes to objects and arrays, which can still be mutable (e.g., you can push, pop, or change elements).Const variables just like let are hosted at the top .

1. MUTABILITY

With const, the value of country is set as ”Canada” and cannot be changed. Trying to assign a new value to `country` will result in an error.

2. SCOPE

`constVariable` behaves like `letVariable` in terms of scoping; it’s only accessible within the block it’s declared in.

3. HOISTING

EXPLAINATION :

Similar to let , constVariable is also hoisted but isn’t initialized. Trying to access it before its declaration line results in a ReferenceError due to being in the “temporal dead zone.”

SUMMARY

We wrap up by summarizing best practices on choosing the right keyword for different scenarios in modern JavaScript development.Prefer let and const over var in modern JavaScript development. They provide block-level scope and a clearer understanding of where variables are alive and accessible in your code.Use let when you have a variable that may change its value over time.Use const for variables that should remain constant after their initial assignment, which improves readability and maintainability of your code by providing a clear intent of immutability.

Thank you for reading my story! If you enjoyed it and want to stay updated with more of my work, subscribe to my newsletter (https://medium.com/@rithinmenezes/subscribe). I regularly share insights and stories about Web dev and I’d love to keep you in the loop.