JavaScript has three variable declaration statements: var,
let and const. The latter two were added in ES6,
whereas var existed since previous versions. One of the first
things to notice is that const defines constants (i.e. values
that will not be reassigned), whereas var and
let define variables. Yet, var behaves
differently from both let and const in various
other ways.
Variables declared with var are function scoped, in contrast
to variables declared with let or const which
are block scoped.
const scopeExample = () => {
var a = 'var';
let b = 'let';
console.log(a, b); // 'var', 'let'
{
var c = 'var';
let d = 'let';
console.log(c, d); // 'var', 'let'
}
console.log(c); // 'var'
console.log(d); // Throws a ReferenceError
};
If you want to learn more, we have an article covering JavaScript variables and scopes in more depth.
While variables declared with var are hoisted to the
enclosing scope, variables declared with let or
const are not initialized until their definition is
evaluated.
const hoistingExample = () => {
console.log(a); // undefined
var a = 'var';
console.log(a); // 'var'
console.log(b); // ReferenceError
let b = 'let';
console.log(b); // 'let'
};
If you want to learn more, we have an article covering JavaScript hoisting in more depth.
At the top level, variables declared with var, unlike ones
declared with let or const, create a property on
the global object.
var a = 'var';
let b = 'let';
console.log(window.a); // 'var'
console.log(window.b); // undefined
In strict mode, variables declared with var can be
re-declared in the same scope, whereas this is not allowed for variables
declared with let or const.
'use strict';
var a = 'var1';
var a = 'var2';
let b = 'let1';
let b = 'let2'; // SyntaxError
If you want to learn more, we have an article covering JavaScript’s strict mode in more depth.