Difference Between var and let in JavaScript

Photo by Reza Namdari on Unsplash

Originally published on Hashnode.

One of the features that ES6 (ECMAScript 2015) introduced was let and const which raised some confusion. If we could already declare variables with var why do we need let? What’s the difference between the two? Let’s discover that!

The legendary battle: let vs var

1) Scope

Variables declared with var are said to be function-scoped. They are only known inside the body of the function where they were declared:

Another example would be:

Variables declared with let are said to be block-scoped. They are only known inside of the block they were declared in:

Note: A block is code between the curly brackets {}

2) Hoisting

But what if…

We wouldn’t expect such result because it doesn’t make sense, how the hell would it recognize the variable something if it was not declared yet?

The answer to this is hoisting.

Hoisting in JavaScript is a dense topic that I will write about in separate article, for now, I will briefly summarize it.

Hoisting is a JavaScript engine behavior that recognizes variables and functions before they’re initialized.

You can picture it as moving all the declarations to the top of the code, but that’s not what happens, your code does not move, it is just a way for you to understand it more easily!

In the example above, we notice that the variable something was initialized with the value undefined before reaching the initialization (with the value “Banana boy”), that’s exactly what hoisting does.

It is “equivalent” to:

Now when it comes to variables declared with let we do not encounter such result:

We cannot access or use variables declared with let before initialization.

Does that mean that they are not hoisted?

No. They are indeed hoisted, in a different way. I will explain how that is the case in detail in a separate article to keep it simple.

All in all:

  • Variables defined with var are always known inside of the function they are defined in, before the declaration (with undefined) and after it (with the value you assigned).
  • Variables defined with let are known inside of the block they are defined in, only AFTER the declaration.

3) Global object property

When a variable is defined globally with var, it becomes a property of the window object:

That is not the case with global variables defined with let though:

4) Redefining

You can redefine the same variable with var.

But when you try to do that with let, it raises SyntaxError:

So why was “let” introduced?

  • Declaring variables with var is prone to error. When we use a variable, we want it to “stick around” only when needed (in other words, we want it to only exist within the block it was declared in). That’s why let declares block-scoped variables. Our code becomes less prone to error.
  • Attaching variables to the window object (by declaring them globally with var) is problematic. When working with different modules, it is possible to run into conflicts (different variables with the same name, resulting in one overriding the other).
  • There is no reason for being able to redeclare variables, it makes code more confusing and is not a sensible decision. let does not let you do that (pun semi-intended).

Thank you for reading!

That was the main difference between var and let, I hope you learned a thing or two!

Any feedback or constructive critique is warmly welcomed and appreciated, so please tell me what you think in the comments so I can better the quality. Thanks for reading ❤️!

Follow my blog and my Twitter for more!

Have a nice one!

--

--

--

Just a front-end guy and a bookworm who loves to share what he is learning.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

10 JavaScript Array Method!

ReactJS: Showing Custom Children

Learn Mongoose with an explanation

CoffeeScript — The Easier Javascript

Lab 6: Introducing JavaScript

Initializing a New App with a Rails API backend and React Frontend

Mutation Observers to The Rescue

Why you should care about Caching with Redis ? — Part 3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mohamed El Amine Yamani

Mohamed El Amine Yamani

Just a front-end guy and a bookworm who loves to share what he is learning.

More from Medium

10 Essential JavaScript Array Methods for Best Practice

Babel: How to use Babel once your project is built

Understanding JavaScript for the Future!

Javascript — Tricky Questions-Array