var vs let vs const: What’s The Difference?

var vs let vs const: What’s The Difference?

If you are confused about the differences between let, var and const keywords in JavaScript, this post is for you.

If you are confused about the differences between let, var and const keywords in JavaScript, this post is for you.

If you are a JavaScript programmer, you may have seen the usage of different types of keywords like let, var and const all over your code. Do you know the difference between them and which one to pick?

var

Before ES6 (ES2015) few years ago, there was only one way to declare variables and constants in JavaScript, which was using var.

Function Scope

To understand var, we need to first learn how they are scoped. Let’s look at a simple example below to learn more about it.

function begin () { for (var i=0; i<5; i++) { console.log(i) } // i is accessible outside the for loop console.log(i) }

Now, in our code snippet above, we have a variable i that is declared inside the for loop. The console output that you will see for this code is shown below.

0 1 2 3 4 5

What is strange here is that, although the variable i* is declared inside the for-loop, it is still accessible outside the scope of the for-loop. This is because the var *variables are accessible within the scope of the function that they are declared.

In our example, the variable i* is accessible anywhere within the function begin(). This is a behaviour that is unique to the JavaScript var* keyword. In many other languages, the expected behaviour, would be that the scope of ***i *is limited to the block within which it is declared.

Global Scope

Now, let’s take a look at another example.

var name = 'Adhithi';

In this example, I have declared a variable name using var, outside a function. Now, JavaScript treats this as a global variable, and attaches it to the window object. Since there is only one instance of the window* *object, attaching our global variables to the window object is a bad practice. If you were to use a third-party library that has variables with the same name as your global variables, then you run into the risk of your variables being overridden.

var variables have a function-scope, if they are not declared within a function, they have a global-scope. Since *var *does not offer a block-scope, and also attaches itself to the window object, incase of global scope, it leads to several problems and unexpected behaviour of your application.

After ES6/ES2015, JavaScript introduced *let *and *const *as newer alternatives to overcome the problems faced with var*. *Let’s dive into those next.

let

Typically, we want our variables to be scoped within a block of code. If we declare a variable within a block of code say a for-loop, we want it to live within that block and be inaccessible outside of it. This behavior can be achieved in JavaScript using the let keyword.

Let’s go back to our previous example, and replace the var with let instead.

function begin () { for (let i=0; i<5; i++) { console.log(i) } // i is not defined and will return an error console.log(i) }

The output that we see for this example after replacing it with let will be slightly different than the previous example.

0 1 2 3 4 Uncaught reference error: i is not defined

The console log that happens outside the for-loop block returns an error. It does not know what i** *is, and returns that i** *is not defined. This is a desirable output that we get with the use of let instead of **var.

*let *is block-scoped and variables declared within a block of code cannot be accessed outside of it. Now that we know the major differences between var *and *let, we can explore the next keyword const.

const

*const *is another addition in the ES6 JavaScript standards. It is similar to *let, *where it also adheres to the block-scope. The difference between *const *and *let *can be understood with a simple example below.

const name = 'Adhithi'; let age = 25; // can reassign age age = 27;

In the example above, I have assigned a name using *const *and an age using **let. *You can notice here that I can assign another value to *age and it will work just fine.

In the same example, I cannot assign another value to the const *name.*

const name = 'Adhithi'; let age = 25; age = 27; // cannot re-assign name. will throw error name = 'Adhithi Ravichandran'; 

This example above will throw an error when *name *is :TypeError: Assignment to constant variable.

The takeaway here is that, *const * does not allow you to re-assign values to a constant variable. Whereas, *let *allows you to re-assign values to variables that already have a value (example above: age).

Let’s take a look at how *const *objects work in JavaScript.

const user = {"name": "Adhithi", "age": 10} //Can manipulate object properties user.name = "Josh"; //Cannot re-assign the entire object user = {"name": "Josh", "age": "12"} //Uncaught TypeError: Assignment to constant variable

In this example, we can manipulate the properties of an Object. We can change the name and age properties of the user Object although the user Object is a const.

But, we cannot re-assign the entire Object. The idea is that in case of *const *Objects, the individual properties of the Object can be modified/re-assigned but the Object itself cannot be changed entirely.

Recap

Alright, we have reached the end of this post. In my opinion there are still times when you may want to use var, when you want to keep the scope within a function instead of a block of code.

*let *and *const *are great additions to the ES6 standards, to write more predictable code.

  1. var – Can be re-assigned, re-defined and has a function-scope. When declared outside the function, it has a global scope and attaches itself to the window object.
  2. *let *– Can be re-assigned. It’s scope is within a block of code.
  3. const *– *Cannot be re-assigned or re-defined. It’s scope is within a block of code.

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.