Ad

var, let and const in JavaScript

    


    ES2015 (ES6) was released with a lot of new features, one of them is the adding of let and const which can be used for variable declaration. So, what makes them different from var which we have been using? If you are not clear about that, then this article is for you.



Scoping


    The first difference is about scoping rule. While the variable declared with var is scoped to the function that it was created in and is accessible inside of that function or any nested functions, let and const variable is only available for use within the block bounded by{}. To understand further, look at the example below: 

function greet() {
  var foo = "Hello";
  let bar = "I am tian";
  console.log(foo, bar); // Hello I am tian
  {
    var moo = "Bye"
    let baz = "See you again";
    console.log(moo, baz); // Bye See you again
  }
  console.log(moo); // Bye
  console.log(baz); // ReferenceError: baz is not defined
}

greet();

Here, we cannot access the variable baz outside the block which is defined between {} because it is block scoped, while moo is scoped to the function it is created (function scope). The result will be the same when let is replaced by const.

Hoisting


    For ones who may not know about hoisting, it is Javascript's default behavior of moving declarations to the top of their scope before code execution. In other words, a variable can be used before it has been declared.


And while var variables are hoisted with a value of undefined, let and const variables are not initialized, and they cannot be used until they have been declared. On top of that, Javascript only hoists declarations, not initializations. 
function greet() {
  console.log(foo); // undefined
  var foo = "Hello from Tian";
  console.log(foo); // Hello from Tian
}

If we replace var with let/const keyword in that case, it will result in a 

ReferenceError: Uncaught ReferenceError: Cannot access 'greet' before initialization.



Redeclaration and Redefinition


    var variables can can be re-declared and reassigned within the same scope, which means we can do like this: 

var foo = "Hi";
var foo = "I'm Tian";

and this also:

var foo = "Hi";
foo = "I'm Tian";

Unlike var, let cannot be re-declared within the same scope, but it can be reassigned. So, while this will work: 

let foo = "Hi";
foo = "I'm Tian";

this will return an error:

let foo = "Hi";
let foo = "I'm Tian";

However, if the same variable is defined in different scopes, there will be no error: 

let foo = "Hi";
{
    let foo = "I'm Tian";
    console.log(foo); // "I'm Tian"
}
console.log(foo); // "Hi"

const is used to declare variables that are meant to be constant, so that it cannot be re-declared or reassigned. And the value must be assigned when declaring:

const foo = "Hi, I'm Tian";

It's important to note that if a variable is an object or an array, the values within that object or array can be changed even if the variable itself is declared with const. So, if we declare an object with const like this:

const foo = {
    greeting: "Hi",
    name: "Tian"
}

while we cannot do this:

foo = {
    message: "I'm Tian"
}

this will work:

foo.greeting = "Hello";

It will update the greeting property value without any errors.


In summary, var has function scope, can be re-declared and reassigned, let and const have block scope. They are all hoisted to the top of their scope. But while var variables are initialized with undefined, let and const variables are not initialized. let can be reassigned but not re-declared, and const cannot be re-declared or reassigned, but the values of its properties can be changed in case of objects and arrays.

Tags