Javascript VAR vs LET vs CONST – A Simple Explanation

Once upon a time in Javascript, we declare variables with var and end of story. Very simple. But ever since ECMAScript 2015, two new “gimmicks” called let and const were introduced.

In simple terms, the main difference between var, let, and const is their scope and usage.

  • var is function-scoped.
  • let is block-scoped.
  • const is block-scoped. It is a constant that can only be assigned once.

But what is variable scope? Why is there a need for all of these confusions? Read on for more examples!

 

 

TABLE OF CONTENTS

VAR LET CONST Summary & More Use or Not?

 

VAR VS LET VS CONST

So why the need for “LET” and “CONST”? When do we use them? Let’s walk through all of these in this section.

 

1) VAR LET CAN BE REDEFINED, CONST CANNOT BE REDEFINED.

// (A) DEFINE VARIABLES
var first = "foo";
let second = "bar";
const third = "par";

// (B) REDEFINE
first = "boo"; // OK
second = "coo"; // OK
third = "doo"; // ERROR

Captain Obvious to the rescue, var let const are all used to define variables. The only “odd one” is const or constant – It can only be assigned once and cannot be changed afterward. Good for keeping stuff like settings that you do not want to be overridden by mistake.

 

 

2) DIFFERENT SCOPE

// (A) VAR - FUNCTION SCOPE
for (var i=0; i<3; i++) {}
console.log(i); // 2
 
// (B) LET - BLOCK SCOPE
for (let j=0; j<3; j++) {}
console.log(j); // GONE!

For you guys who have not heard of “scope”, it is simply where a variable is valid. In this example:

  1. var is function-scoped – Notice how var i still exists even after the for loop has ended.
  2. let is block-scoped – Notice how let j is only valid in the for loop, it perishes once the loop ends.

Yes, const is also block-scoped. If defined within a block, it will only be valid within that block.

 

 

3) VAR LET CONST FOR GOOD CODING PRACTICE

// (A) CIRCLE RADIUS
var circles = ["12, 34, 56"];
 
// (B) PI
const pi = 3.142;
 
// (C) CALCULATE
var area = [];
for (let r of circles) {
  area.push(pi * (r * r));
}
console.log(area);

So far so good? Let us finally answer the most important question – When we should be using each.

  • var Variables that we want to keep and use for the “long term”.
  • let Temporary variables that will perish once it’s done. Less confusion, fewer mistakes.
  • const Constants, values that remain the same.

 

 

SUMMARY & MORE

That’s all for the main tutorial, and here is a small section on some extras and links that may be useful to you.

 

SUMMARY TABLE

VAR LET CONST
Scope Function scoped. Block scoped. Block scoped.
Assignment Can be reassigned. Can be reassigned. Is a constant, can only be assigned once.
When to use As you want to define global or variables that you want to keep. For “temporary” variables that you want to perish within a function or loop. For defining constant values that you do not want people to change. For example, Pi or settings.

Hey, it’s not so confusing after all?

 

INFOGRAPHIC CHEAT SHEET

Var VS Let VS Const in Javascript (click to enlarge)

 

LINKS & REFERENCES

 

TO USE OR NOT TO USE?

Thank you for reading, and we have come to the end of this chapter. I hope that it has helped you to better understand the difference between var, let, and const. But the final remaining question is, should we adopt let and const?

Historically, I never had a lot of issues with “using var only”. I don’t see myself switching to use let and const out of a knee-jerk effect as well. But since it is here for a good reason, I am sure I will use it when the occasion arises – You also have to take backward compatibility into consideration, not the entire world is using updated browsers.

But for now, you can rest easy knowing that the “traditional var” works well enough, and nothing is going to change much. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *