Var, Let, Const in JavaScript

Before the advent of ES6, there were only two ways to declare variables - global variables or using var keyword (function or global scope).

With ES6, let and const keywords were introduced. Both can either have a global or block scope. let can be updated, but not redeclared. const as the name implies, can't either be updated or redeclared.

Let's learn the details about each of the above keywords by looking at the code examples. After that, we'll sum up recommendations and best practices.

Globals are evil.

In the above example, we declared the setTimeout variable without using any keyword and assigned the Hello World string to it. This way, the variable became global. Additionally, we accidentally overwrote the existing setTimeout function and it'll cause unwanted behavior.

The window object has a lot of built-in properties that shouldn't be overridden. Unless you have a good reason (e.g. polyfill, custom implementation), you should strive away from overriding existing variables, functions in the window object.

In the later sections, I'll explain how to avoid global variables overrides, for now, try to study window object and make sure you don't come up with the exact same name when naming your variables.

var has the same problems as global variables, but it can be used in a function scope to not pollute the global one.

It's good that we didn't overwrite the outer message variable inside of the hello function as the inner message variable had a function scope which is helpful in avoiding leaking of the variables to outer scopes. However, the outer message variable still polluted the global scope.

Another bad thing about using var is that it can be redeclared and updated which breaks the immutability approach of functional, declarative programming:

We redeclared and updated canBeChangedAndUpdated variable 3 times and it was applied to the global scope.

In JavaScript, there is a concept of Hoisting which var also can't handle properly. 🙈 It means that variable declarations are moved all the way to the top of the global scope or function scope. Let's see how that works.

Only the declaration of x was hoisted as it printed undefined. The best practice is to always include variable declarations and assigning values to them (in most scenarios) at the top as using hoisting is confusing and difficult to reason about. It should look like below.

We got 5 when printing it through console.log which is good. y variable throws an error as it never was defined.

Let's see what improvements ES6 keywords bring to us.

The first improvement is that let doesn't add to the window object when declared as a global variable. However, it's still polluting the global scope if used like below.

The second improvement is a block scope of let. Let's see it in action.

Outer name variable polluted global scope but inner (inside if statement) lived only there. Block scope is helpful in avoiding leaking of variables to outer scopes similar to function scope.

The third improvement is that let can't be redeclared, let's see what happens if we try to do that.

We get an error that notifies us canOnlyBeUpdated variable can't be redeclared.

It can still be updated which contradicts the immutability concept.

And if it comes to hoisting, let deals with it in a bit more strict way than var.

Hoisting still occurs but let lands in Temporal Dead Zone thus it's not accessible and we get an error. x should be declared and assigned (in most cases) before it's used.

Let's jump to the perfect one (almost) which is a const keyword.

The great thing about const is that it has all the good properties from let - block scoped, can't be redeclared and additionally, it can't be updated. 😍

const keyword perfectly fits in functional, declarative programming with immutability in mind.

But the almost mentioned before.

Whoops, we updated the property of the person object, not so immutable. There are caveats you'll face in JavaScript, take a look at this article about preventing modifications to an object.

An additional example of how good it feels to write code using const can be found below.

The simplest solution is to use a function or block scope. If you need something more organized, create a namespace to avoid name collisions.

This way, the built-in window.setTimeout is untouched and we can declare our variables in the namespace.

There are more solutions for avoiding global variables in JavaScript. Similarly like in CSS there are CSS-in-JS solutions, BEM, SMACSS. Study the below list to avoid creating global variables.

Let's dive into the summary of recommendation & best practices.

You probably guessed my preference about const but honestly, as Dan Abramov said in his post, "I don't care". It's all about conventions agreed with the entire team. Make sure it fits all of you and set linters appropriately.

Below you can find my recommendations:

I hope it was something and you could've learned a ton from the article. We went through an explanation of hoisting, scopes, and variable keywords. Additionally, you've acknowledged best practices and proposed solutions to avoid global scope pollution.

Big thanks for reading the article, you're awesome! 🙇‍♂️

You can also find me on:

Thanks for all the support. ❤️