ES6 came with a lot of great new features including two new ways to define variables in JavaScript. There are now three different keywords or identifiers to declare a variable in JavaScript. In this article, I will explain the main differences between var, let, and const and when should you use them.
In order to fully understand the differences between each of the identifiers we first need to understand the concept of scope.
What is Scope?
Scope determines the accessibility or visibility of variables to JavaScript. There are three types of scope in JavaScript:
1. Global scope
2. Function [local] scope
3. Block scope [new with ES6]
Variables declared outside a function are in the global scope. Global variables can be accessed and changed in any other scope. Variables defined within a function are in local scope and are not accessible in other functions. Each function, when invoked, creates a new scope, therefore variables with the same name can be used in different functions.
Block scope includes if statements and loops, or any other code wrapped in {}. When invoked, they don’t create a new scope. Variables declared inside a block scope will remain in the scope they were already in.
The Var Keyword
Before ES6, the var keyword was used to declare a variable in JavaScript. The var keyword has been around since the inception of JavaScript, and it’s what you will see in any pre ES6 code.
Variables declared using the var keyword are either globally or functionally scoped, they do not support block-level scope. This means that if a variable is defined in a loop or in an if statement it can be accessed outside the block and accidentally redefined leading to a buggy program. As a general rule, you should avoid using the var keyword.
The Let Keyword
In many ways, the let keyword is very similar to the var keyword as they both allow you to reassign the value later on. The main difference between the two is that let deals with a block scope and although it can be reassigned it cannot be redeclared.
The Const Keyword
Like the let keyword, the const keyword is also blocked scoped. However, declaring a variable with the const keyword means that it cannot only be redeclared but also it cannot be reassigned. Therefore, every const variable must be assigned a value at the time of declaration.
Summary
As a general rule, you should always declare variables with const, if you realize that the value of the variable needs to change, go back and change it to let.
Use let when you know that the value of a variable will change.
Use const for every other variable.
Do not use var.