ES6: Difference between Var, Let and Const with Examples

In this article, var, let and const will be discussed with respect to their scope and hoisting.

Var:

The Var statement declares a variable. Variables are containers for storing any information.

Scope:

The scope of a variable declared with var is its current execution context, which is either the enclosing function or, for variables declared outside any function, global.

var variables can be re-declared and updated.

function x() {
  y = 1;
  var z = 2;
}

x();

console.log(y); // 1, Since, y is Undeclared variable which is always global.
console.log(z); //Throws a Reference Error: z is not defined outside x, As z is constrained in the execution context in which it is declared

In the above function , y = 1, is merely a property assignment. It first tries to resolve y against scope chain. If it finds it anywhere in that scope chain, it performs assignment; if it doesn't find y , only then it creates y property on a global object (which is a top level object in a scope chain).

It is recommended to always declare variables, regardless of whether they are in a function or global scope.

Hoisting:

Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. What this means is:

console.log(myName);
var myName = ‘xyz’;

when the Javascript gets compiled, var myName would get moved to the top of its scope. But, key thing to note is that

the only thing that gets moved to the top is the variable declarations , not the actual value given to the variable.

This is why the console.log is able to output ‘undefined’, because it recognises that the variable myName exists, but myName hasn’t been given a value until the third line.

var myName;
console.log(myName);// Undefined
myName = ‘xyz’;

Let:

let allows to declare variables that are limited in scope to the block, statement, or expression on which it is used. This is unlike the var keyword, which defines a variable globally, or locally to an entire function regardless of block scope.

Scope:

let is block scoped. It can be updated but not re-declared in the same scope.

if (true) {
  let foo = "abc";
  let foo; // SyntaxError thrown. Re-declaration is not allowed.
}
---------------------------------------------------------
if (true) {
  let foo = "abc";
}
console.log(foo);// ReferenceError: foo is not defined.foo is block scoped
---------------------------------------------------------
let foo = "abc";
if (true) {
  let foo = "xyz";
}
console.log(foo);// abc. Variables are declared in different scope

Hoisting:

Just like var, let declarations are hoisted to the top. Unlike var which is initialized as undefined, the let keyword is not initialized. So if you try to use a let variable before declaration, you'll get a Reference Error.

if (true) {
    console.log(myName); 
    let myName = 'abc';// Reference Error
}

Const:

The const keyword does not allow a variable name to be reused anywhere within your code.

Scope:

const declarations are block scoped. It cannot be updated or re-declared. It must be initialized at the time of declaration.

if (true) {
  const foo = "abc";
  foo = "xyz"; // Assignment to constant variable. Can't be updated
}
---------------------------------------------------------
if (true) {
  const foo = "abc";
}
console.log(foo);// ReferenceError: foo is not defined.foo is block scoped
---------------------------------------------------------
const foo = "abc";
if (true) {
   const foo = "xyz";
}
console.log(foo);// abc. Variables are declared in different scope

Note: While a const object cannot be updated, the properties of this objects can be updated.

Hoisting:

Like let, const declarations are hoisted to the top but are not initialized. Here, const keyword is declared at the top within the scope but not initialized with Undefined.

if (true) {
    console.log(myName); 
    const myName = 'abc';// Reference Error
}

Please leave your comments.

Explore the Series:

• Scope and Execution Context in Javascript
• Hoisting Demystified with popular interview questions
• Javascript Closures

Please post any feedback, questions, or requests for topics.If this post was helpful, please click the clap 👏button below a few times to show your support.

Sources:

var

let