Difference Between let and var and const in JavaCcript

In this tutorial we will discuss about const vs let performance. Until ES2015, var was the only construct available for defining variables. We now know that var is function scope, and now we know that let and const are block scope, which means any time you’ve got a set of curly brackets you have block scope. Let's see with example.

var a = 0

If you forget to add var you will be assigning a value to an undeclared variable, and the results might vary.

In modern environments, with strict mode enabled, you will get an error. In older environments (or with strict mode disabled) this will initialize the variable and assign it to the global object. If you don't initialize the variable when you declare it, it will have the undefined value until you assign a value to it.

var a //typeof a === 'undefined'

You can redeclare the variable many times, overriding it:

var a = 1
var a = 2

The scope is the portion of code where the variable is visible. A variable initialized with var outside of any function is assigned to the global object, has a global scope and is visible everywhere. A variable initialized with var inside a function is assigned to that function, it's local and is visible only inside it, just like a function parameter.

Any variable defined in a function with the same name as a global variable takes precedence over the global variable, shadowing it. It's important to understand that a block (identified by a pair of curly braces) does not define a new scope. A new scope is only created when a function is created, because var does not have block scope, but function scope.

es6-javascript

Inside a function, any variable defined in it is visible throughout all the function code, even if the variable is declared at the end of the function it can still be referenced in the beginning, because JavaScript before executing the code actually moves all variables on top (something let and const that is called hoisting).

To avoid confusion, always declare variables at the beginning of a function.

let

let is a new feature introduced in ES2015 and it's essentially a block scoped version of var . Its scope is limited to the block, statement or expression where it's defined, and all the contained inner blocks. Defining let outside of any function - contrary to var - does not create a global variable.

const list = [1,2,3,4,5];

for(let i = 0; i < list.length; i++ ) {
 console.log(i); //works here
}

console.log(i); //error here

See the below image to understand better

var-vs-let-vs-const-in-javascript

Cause we already know let is essentially a block scoped version of var. But see the below example

const list = [1,2,3,4,5];

for(var i = 0; i < list.length; i++ ) {
 console.log(i); //works here
}

console.log(i); //there is no error

Because var does not have block scope, it has global scope. So i highly recommend you to use let in block scope not var. See output from below image.

var-let-const-in-javascript

const

Variables declared with var or let can be changed later on in the program, and reassigned. Once a const is initialized, its value can never be changed again, and it can't be reassigned to a different value.

const a = 'test'

const does not provide immutability, just makes sure that the reference can't be changed. const has block scope, same as let . Modern JavaScript developers might choose to always use const for variables that don't need to be reassigned later in the program.