ECMAScript 6 (ES6), also colloquially known as JavaScript 6, is the latest standard of JavaScript as introduced in 2015. ES6 came with many important features, such as arrow functions and spread and rest operations, which we will cover in the near-future. Today, we will discuss the new declaration statements let and const and why we require them.

Problem with Var

Var is used to declare a variable in JavaScript and as far as basic functioning goes, it works pretty well. However, unlike most mainstream programming languages, it is function-scoped and not block-scoped causing confusion to many newcomers. Let us look at some example to understand what function-scope and block-scope mean.

The scope of a variable is the part of the program where it is visible. For instance, global scope means the variable is visible throughout the program.

Function scope denotes that the variable is visible only inside the body of the function.

//Global Scope
var a = 1;

function test() {
  //Function Scope

  var a = 2;
  console.log(a); //Output is 2

}

console.log(a); //Output is 1

Here, the variables are treated differently and hence the variable declared inside the body of the function does not affect the global scope variable.

Block scope, on the other hand, is similar to function-scope but is limited to blocks such as if-block or loop.

//Global Scope
var a = 1;

if(true){
  //Block Scope

  var a = 2;
  console.log(a); //Output is 2
}

console.log(a); //Output is 2 in place of 1

In the above code snippet, the value in the variable was changed which is the reason why let is used.

Let

Let is just like var except it is block-scoped. Here is an example of how let works.

//Global Scope
var a = 1;
let b = 2;

function test(){
  //Function Scope
 
  var a = 3;
  let b = 4;
  console.log(a, b); //Output is 3 4	
}

console.log(a, b); //Output is 1 2	

if(true){
  //Block Scope

  var a = 5;
  let b = 6;
  console.log(a, b); //Output is 5 6
}

console.log(a, b); //Output is 5 2

Const

Const makes your variable constant, that is, values cannot be reassigned to the variable. Reassigning value or declaring a const variable without a value will throw an error because the memory is assigned only once.

const a = 10;
console.log(a); // Output is 10

a = 20;
console.log(a); //TypeError: Assignment to constant variable

Const is helpful with datatypes which are not primitive like numbers and strings. Arrays and objects since they are reference datatypes, which store the reference to the variable. So, it is possible to change the data stored at the memory allocated to the array or object but we cannot assign a whole new entity.

const employee = {
  name: 'John Doe',
  age: 40
};

console.log(employee); // {name : "John Doe", age: 40}

employee.name = 'Jane Doe';

console.log(employee); // {name : "Jane Doe", age: 40}
const arr = [1,2,3,4];

//What is allowed
arr.push(5); // [1,2,3,4,5]

//What is not allowed
arr = [1,2,3,4,5]; //TypeError: Assignment to constant variable