DEV Community

loading...

Var, let and const- what's the difference?

sarah_chima profile image Sarah Chima Updated on ・5 min read

A lot of shiny new features came with ES2015 (ES6) and since it's 2017, it's assumed that a lot of JavaScript developers have become familiar with and have started using these features. While this assumption might be true, it's still possible that some of these features remain a mystery to some.

One of the features that came with ES6 is addition of let and const which can be used for variable declaration. The question now is, what makes them different from our good ol' var which has been in use? If you are still not clear about this, this article is for you.

In this article, var, let and const will be discussed with respect to their scope, use and hoisting. As you read, take note of the differences between them I'll point out.

VAR

Before the advent of ES6, var declarations ruled as King. There are issues associated with variables declared with var though. That is why it was necessary for new ways to declare variables to emerge. First though, let us get to understand var more before we discuss one of such issues.

Scope of var

Scope essentially means where these variables are available for use. var declarations are globally scoped or function/locally scoped. It is globally scoped when a var variable is declared outside a function. This means that any variable that is declared with var outside a function block is available for use in the whole window. var is function scoped when it is declared within a function. This means that it is available and can be accessed only within that function.
To understand further, look at the example below.

    var greeter = "hey hi";

    function newFunction() {
        var hello = "hello";
    }

Here, greeter is globally scoped because it exists outside a function while hello is function scoped. So we cannot access the variable hello outside of a function. So if we do this:

    var tester = "hey hi";

    function newFunction() {
        var hello = "hello";
    }
    console.log(hello); // error: hello is not defined

We'll get an error which is as a result of hello not being available outside the function.

var variables can be re-declared and updated

That means that we can do this within the same scope and won't get an error.

    var greeter = "hey hi";
    var greeter = "say Hello instead";

and this also

    var greeter = "hey hi";
    greeter = "say Hello instead";

Hoisting of var

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. What this means is that if we do this:

    console.log (greeter);
    var greeter = "say hello"

it is interpreted as this

    var greeter;
    console.log(greeter); //greeter is undefined
    greeter = "say hello"

So var variables are hoisted to the top of its scope and initialized with a value of undefined.

Problem with var

There's a weakness that comes with var. I'll use the example below to explain this.

    var greeter = "hey hi";
    var times = 4;

    if (times > 3) {
        var greeter = "say Hello instead"; 
    }

    console.log(greeter) //"say Hello instead"

So, since times > 3 returns true, greeter is redefined to "say Hello instead". While this is not a problem if you knowingly want greeter to be redefined, it becomes a problem when you do not realize that a variable greeter has already been defined before.
If you have use greeter in other parts of your code, you might be surprised at the output you might get. This might cause a lot of bugs in your code. This is why the let and const is necessary.

LET

let is preferred for variable declaration now. It's no surprise as it comes as an improvement to the var declarations. It also solves this problem that was raised in the last subheading. Let's consider why this is so.

let is block scoped

A block is chunk of code bounded by {}. A block lives in curly braces. Anything within curly braces is a block. So a variable declared in a block with the let is only available for use within that block. Let me explain this with an example.

   let greeting = "say Hi";
   let times = 4;

   if (times > 3) {
        let hello = "say Hello instead";
        console.log(hello);//"say Hello instead"
    }
   console.log(hello) // hello is not defined

We see that using hello outside its block(the curly braces where it was defined) returns an error. This is because let variables are block scoped .

let can be updated but not re-declared.

Just like var, a variable declared with let can be updated within its scope. Unlikevar, a let variable cannot be re-declared within its scope. So while this will work,

    let greeting = "say Hi";
    greeting = "say Hello instead";

this will return an error.

    let greeting = "say Hi";
    let greeting = "say Hello instead";//error: Identifier 'greeting' has already been declared

However, if the same variable is defined in different scopes, there will be no error.

    let greeting = "say Hi";
    if (true) {
        let greeting = "say Hello instead";
        console.log(greeting);//"say Hello instead"
    }
    console.log(greeting);//"say Hi"

Why is there no error? This is because both instances are treated as different variables since they have different scopes.

This fact makes let a better choice than var. When using let, you don't have to bother if you have used a name for a variable before as a variable exists only within its scope. Also, since a variable cannot be declared more than once within a scope, then the problem discussed earlier that occurs with var does not occur.

Hoisting of let
Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

CONST

Variables declared with the const maintain constant values. const declarations share some similarities with let declarations.

const declarations are block scoped

Like let declarations, const declarations can only be accessed within the block it was declared.

const cannot be updated or re-declared

This means that the value of a variable declared with const remains the same within its scope. It cannot be updated or re-declared. So if we declare a variable with const, we can neither do this

    const greeting = "say Hi";
    greeting = "say Hello instead";//error : Assignment to constant variable. 

nor this

    const greeting = "say Hi";
    const greeting = "say Hello instead";//error : Identifier 'greeting' has already been declared

Every const declaration therefore, must be initialized at the time of declaration.
This behavior is somehow different when it comes to objects declared with const. While a const object cannot be updated, the properties of this objects can be updated. Therefore, if we declare a const object as this

    const greeting = {
        message : "say Hi",
        times : 4
    }

while we cannot do this

    const greeting = {
        words : "Hello",
        number : "five"
    }//error :  Assignment to constant variable.

we can do this

    greeting.message = "say Hello instead";

This will update the value of greeting.message without returning errors.

Hoisting of const

Just like let, const declarations are hoisted to the top but are not initialized.

So just in case, you missed the differences, here they are :

  1. var declarations are globally scoped or function scoped while let and const are block scoped.

  2. var variables can be updated and re-declared within its scope; let variables can be updated but not re-declared; const variables can neither be updated nor re-declared.

  3. They are all hoisted to the top of their scope but while varvariables are initialized with undefined, let and const variables are not initialized.

  4. While var and let can be declared without being initialized, const must be initialized during declaration.

Got any question or addition? please leave a comment.

Thank you for reading :)

Discussion

pic
Editor guide
Collapse
abhijeetckar92 profile image
abhijeetckar92

this is a good article..however you should update your last example
const flow = {
message : "say Hi",
times : 4
}

to

const greeting = {
message : "say Hi",
times : 4
}

don't know how anybody who's reading this article missed that!

Collapse
abdushaker profile image
Abdu Shaker

I noticed something did not add up but I didn't pay attention to the details since I got what I was looking for. Good catch, tho.

Collapse
bkmillanzi profile image
Bkmillanzi

left me in blanks... I am glad you had pointed it out! Thanks'
and btw, the article is indeed one of the best!

Collapse
sarah_chima profile image
Collapse
ramachowdary profile image
Collapse
curiousconfuseddev profile image
Ansh

It's updated now. Thanks for notifying

Collapse
domin profile image
Dominic Sears

For a noob like me, this explained "let" declarations for me.

Collapse
sarah_chima profile image
Sarah Chima Author

I'm glad it did.

Collapse
jeansberg profile image
Jens Genberg

Good post. I wasn't sure about these. Just knew that 'var' should be avoided.

I think you have typo here. Remove the second 'let' from the first code block. :)
So while this will work,
let greeting = "say Hi";
let greeting = "say Hello instead";
this will return an error.
let greeting = "say Hi";
let greeting = "say Hello instead";//error: Identifier 'greeting' has already been declared

Collapse
sarah_chima profile image
Sarah Chima Author

Thanks a lot for pointing that out. I'll correct it right away.

Collapse
itayko profile image
itayko

Thank for a great article

Error still exists in the article..

Collapse
ashbrandn profile image
Ashley Brandon

Why should var be avoided?

Collapse
sgmallon profile image
Scott Mallon

'Var' allows for re-declarations in code which does not throw errors and can create unintended side-effects in your code.

'Let' allows for variable reassignment but not for duplicate declarations (block-scoped), much like strongly typed languages like C# and Java.

'Const' allows for declaration once and for assignment once, and can never be re-declared or reassigned (block-scoped). For instance, I use 'const' for inline function declarations, so that I don't accidentally redefine this function's behavior at some later point in time by mistake. Even though I am unlikely to do so, it is just safer for myself and others to work on.

To paraphrase Sarah more generically:

"While it is not a problem if you knowingly want a var to be a certain value at a certain point in code, it becomes a problem when you do not realize that this same var has already been declared/defined before or, even worse, has had other functions operate on this var without your knowledge."

So, in other words, it's a much better idea to use 'let' and 'const' in order have safer control over your variables and constants.

Thread Thread
oizabaiye profile image
Oiza

This was incredibly helpful, and a great TLDR!

Collapse
mushin108 profile image
Mushin108

"Variable shadowing"

Collapse
olawanle_joel profile image
Joel Olawanle

const alone does not guarantee protection for your data or let me say it does not protect your data from mutation,

Example:

const GREETING = {
    name : "Joel",
    info : "Goodday!"
 }

Though the above code makes use of const i can still update the values via the code below

GREETING.name = "Elijah";

But this could easily be avoided by making use of Object.freeze() to freeze our const variables.
Just add this line of code and you will discover that the values cannot be updated.

Object.freeze(GREETING); 

GREETING.name = "Elijah"; // This will now be ignored due to mutation

For more clarification check: freecodecamp.org/learn/javascript-...

Collapse
avrani profile image
Ariel

Hi, great article but I think you have a mistake about the hoisting,you wrote:
"They are all hoisted to the top of their scope but while var varvariables are initialized with undefined, let and const variables are not initialized."
If you will look at the JavaScript Hoisting section in w3schools.com website,
you will notice that:"Variables and constants declared with let or const are not hoisted!"
Please check in:
w3schools.com/js/js_hoisting.asp

Collapse
sobhardwaj profile image
Siddharath shankar bhardwaj

That's exactly I m thinking the new let and const in javascript are not hoisted..she wrote wrong things..u should correct this article..do not mislead people with this ??

Collapse
mohammedyehia profile image
Mohammed

According to MDN and ECMA 2015 her words are right
check this developer.mozilla.org/en-US/docs/W...

Collapse
wolf00bomber profile image
Wolf00Bomber

The article is well written, but the problem is with the visualization of the concepts, if only these were depicted in pictorial or tabular format, can have immense effect on readers. Thanks for the article thought.

Collapse
kramffud profile image
Mark Duff

Years later, this is still the most concise explanation and welcomed even by those of us who are not lightweights - but don't stray into the JS badlands much. You have great teacher chromosomes, Sarah. Ignore the nit-pickers - this is still the best explanation primarily because of its brevity.

Collapse
sarah_chima profile image
Sarah Chima Author

Thanks for the kind words, I really appreciate it.

Collapse
nicksu86 profile image
NickSu86

Thank you for your post, I am a newbie to Nodejs and quite confusing on when to use let, const or var. As I saw some require a module with var while some with const, could you advise which is better when requiring a module? After reading your post, I think const is better to require another module because it will never change.
One more question could you please do me a favor to explain the memory usage between these three, is there any different other than scope, thank you

Collapse
full_stackgeek profile image
Full Stack Geek

That's a great article. Inspired me to write:

Var is function-scoped and not block-scoped which means that constructs like if statements, while loops etc do not create new scopes while using var. It also means that, as var is function-scoped, if we do not create a function, we do not create new scope while using var.

Read More here:

Var vs Let in JavaScript

Collapse
gamebecks profile image
gamebecks

Hi, you have said that variable declared as var will have global scope if declared outside a function. But the same can even be said for variables declared as let and const. They indeed are locally scoped but when done outside a function, they will have global scope like var.
Please correct me if am wrong?

Collapse
vnsc16 profile image
Victor Sanchez

I've finally understood.
(Again) 'Cause I had forgotten hehe 😹😹
Thanks ♥

Collapse
hexiaosheng profile image
hexiaosheng

very helpfully, many thanks

Collapse
erkanokman profile image
Erkan Okman

var erkan = 3;
if (erkan == 3) {
var erkan = 2;
console.log(erkan); //2
}
console.log(erkan); //2

//////////////

let erkan = 3;
if (erkan == 3) {
let erkan = 2;
console.log(erkan); //2
}
console.log(erkan); //3

//////////////

const erkan = 3;
if (erkan == 3) {
const erkan = 2;
console.log(erkan); //2
}
console.log(erkan); //3

Collapse
elecrei profile image
Ryan

Thanks for the explanations on the differences between var, let and const. When I first heard of let and const I was so confused. I wanted to know though is var still good to use and how should it be used when compared with let and const?

Collapse
niksolaz profile image
Nicola Solazzo

Good article, if you are interested you could read my article on the same topic. Maybe an exchange of ideas :)
medium.com/notonlycss/difference-b...

Collapse
arung86 profile image
Arun Kumar G

In a global scope var will be associated with global object
where as let and const are not
ex: window.var_variable
not supported by let and const

Collapse
sgmallon profile image
Scott Mallon

The cleanest explanation I've seen so far of let vs. const vs. var.

Collapse
delubiod profile image
delubio de paula

I'm glad I found you. No flowery language. Spot on. Thank you Sarah!!!

Collapse
jaliph profile image
Akash Chandra

Very well written.. Thanks.. It made this clear

Collapse
puneet_pandey profile image
Puneet Pandey

Nice to know about var, let and const. Great article!

Collapse
vinayp59 profile image
vinayp59

If i declare an array as const variable , Can i update the array?

Collapse
sarah_chima profile image
Sarah Chima Author

While you cannot reassign the array, JavaScript allows you to update it. Personally, I think that defeats the idea of using const. If you want to declare an array that will be updated, it might be more ideal to use let.

Collapse
rahulbhatija profile image
rahul bhatija

Thank you Sarah! It helped :)

Collapse
jkbiggs profile image
Joshua Biggs

Thank you for the article! I didn't know about variable hoisting or why using let and const was preferred over var. Excellent to know!

Collapse
paul99337902 profile image
Paul

Excellent article! Thanks!

Collapse
shareazc profile image
Shareni Azcárraga

Thank you so much, really cleared things up for me!

Collapse
nikhilchugh161 profile image
Nikhil Chugh

Thanks for this article, it really helps me understand these basic concepts well.
Thanks a lot!

Collapse
rainyman2012 profile image
Ehsan

Thank you.

Collapse
npandey25 profile image
nitish pandey

Some typos in there though. You have used an object flow accidentally. Two varying illegal examples of const look identical to me. Do check. Or did I miss the point. ☺. Cheers

Collapse
sarah_chima profile image
Collapse
commandline_ profile image
Okpala Chuks

Nice piece... ES6 all the way!

Collapse
sarah_chima profile image
Sarah Chima Author

Thanks Chuks :)

Collapse
mengnans profile image
Mengnan Shi

Well explained!