frk-ozbk

Posted on Feb 26, 2020

What is the difference between 'Var' and 'Let' ?

#javascript #beginners

First of all, I want to talk about Javascript Scopes.
Scopes determine the accessibility of the variable. You can't access a variable from outside of its scope.

In Javascript, before ES6 there were two types of scope:

Global Scope
Local Scope (Function Scope)

Global Scope

Any variable declared outside of a block or function is inside Global Scope.You can access these variables from everywhere.

Local Scope (Function Scope)

As the name suggests, variables declared inside the Function has Local Scope. They can only be accessed inside the Function.

ES6 introduces Let and Const variables that can be scoped to a block. So now there is one more type of scope.

Block Scope

In Javascript curly brackets creates a block. So if you declare a variable inside the block with Let or Const, you can't access it from outside of that block.

Var

Variables declared with Var has function scope. You can't access this variable from outside the function. However, if you declare variables inside the block with Var you can access it from outside.

Unlike Var, Let has block scope. You can only access these variables from inside the block. So if you try to access from outside it will give you Reference Error.

You can reassign the variable that declared with Var.

But you can't with Let.

Var declarations (var a) whenever they occur, they move up to the top of the file. This is called hoisting.With this, you can do something like this. (You can read more about hoisting if you click here)

With let you can't do this. It will give an error:

Reference

https://developer.mozilla.org/en-US/

Top comments (12)

Lucas.T • Feb 26 '20 • Edited

Hey 👋,

I think you can add the fact that you can update the value of an let variable but never a const variable.

Let example:

let x = 0
x = 1
console.log(x) // 1

Const example:

const x = 0
x = 1
console.log(x) // TypeError cannot reassign x

Otherwise it is a nice article.

frk-ozbk • Feb 26 '20

Thank you,

I just want to focus on the differences between let and var in this post.

Amin • Feb 26 '20

Nice, neat and clear article!

I also like to add the fact that in a for loop, you can access the declared variables with var, when you can't with a let.

"use strict";

for (var number = 0; number < 5; number++) {
    // ...
}

console.log(number); // 5

for (let index = 0; index < 5; index++) {
    // ...
}

console.log(index); // ReferenceError: index is not defined

Simple use-case, but useful to know IMO.

frk-ozbk • Feb 26 '20

Thank you.
Actually the first difference I wrote explains this. For loops are actually block. So if you declare a variable with "Let" inside the "For" block, you can't access it from outside of the "For" block.
But if you declare with "Var" you can access it because variables declared with "Var" have "function scope".

Amin • Feb 26 '20

Indeed, variable are blocked scoped, except for those who are declared with the var keyword and your article explain the thing really well.

But if you look closely, for loops are kind of special, especially since the variable is declared inside the parens of the for loop, and not inside the body (the block).

So this might be kind of confusing for newcomers! Especially those who use the var keyword inside of the for loop. I thought this would be great to have that in your article.

There was a very special talk from the Google YouTube channel about that. It is really cool (and a cool show!)

Indeed, for loops are... complicated!

frk-ozbk • Feb 26 '20

Thank you.
I did not watch this video. I will watch it and try to add it.

frk-ozbk • Feb 27 '20

I watched the video. But I am not too sure whether I should add or not? I'm afraid it will cause confusion for beginners.

Tobias SN • Feb 26 '20 • Edited

The reason you couldn’t assign the let variable is because you were declaring it at the same time, which you had already done. After a variable has been declared, just do a = 4 instead of let a = 4. Same goes for var, which you shouldn’t be using anyway.

However, if you do want a variable that can’t be re-assigned after the first time, use const instead of let.

lesha 🟨⬛️ • Feb 27 '20 • Edited

I guess writing an article about something is like a school homework assignment (but for grownups). Glad you figured it out, but...

At a risk of sounding salty, how many more of these articles do we really need?

frk-ozbk • Feb 27 '20 • Edited

I do not agree with you.
The Javascript community is big. There are too many articles about javascript. If I check every topic that I want to create an article about it, I can't write anything.
Right now I am writing an article about "This" keyword next time I will try to write about a more advanced topic. My only concern is that I will write something false which also I think my biggest benefit. Because it forces me to read more articles about what I wrote

Thank you for your feedback.