ES6 or ECMAScript 2015 is the 6th version of the ECMAScript programming language also known as Javascript. ECMAScript is the standardization of Javascript which was released in 2015 and subsequently renamed ECMAScript 2015.

ECMAScript, or ES6, was published in June 2015. It was subsequently renamed ECMAScript 2015. Web browser support for the full language is not yet complete, though major portions are supported. Major web browsers support some features of ES6. However, it is possible to use software known as a transpiler to convert ES6 code into ES5, which is better supported on most browsers.

ES6 introduced several key features like const, let, arrow functions, template literals, default parameters, function rest parameters, Javascript Modules, Promises and a lot more. We will learn about them one by one.

const

The const keyword also known as a constant is mainly used to store that variable whose value is not going to be changed. Consider an example where you are creating a web application where you want to store a variable whose value is not going to change, then const is the best choice to store that variable. In Javascript, const is considered to be more powerful than var. Once used to store a variable it can’t be reassigned. In simple words, it is an immutable variable except when used with objects.

Example

const foe = 8

foe = 9

// results in: Uncaught TypeError: Assignment to constant variable.

The above code returned an error because we changed the value of the foe variable. Any variable declared with const is meant to be constant and immutable.

let

In the case of the let keyword, the variables declared will be mutable i.e. their values can be changed. It works similarly to the var keyword with some key differences like scoping which makes it a better option when compared to var.

let name = 'foe';
console.log(name); // foe

name = 'joe';
console.log(name); // joe

In the above code we can see that unlike const we were able to change the value of the name variable declared with let without getting an error in the console.

*Block-Scoped Variables and Functions

variables declared using let and const follow block scoping rules. Before es6, variables in JavaScript were function scoped. That is, when you needed a new scope for a variable, you had to declare it within a function.

Variables retain their value till the end of the block. After the block, the value in the outer block (if any) is restored.


  let x = "hello";
  {
    let x = "world";
    console.log("inner block, x = " + x); // inner block, x = world
  }
  console.log("outer block, x = " + x); // outer block, x = hello

You can reassign variables declared with const too, within such blocks.


  const x = "hello";
  {
    const x = 4.0;
    console.log("inner block", x ); // inner block, 4

  }
  console.log("outer block", x); // outer block, world
}

const in Objects and arrays

Objects declared with const can be mutable. meaning that the value can be reassigned.

const bike = {
    name : 'Ninja ZX-10R',
    engine:'998cc',
    abs : 'dual channel'
};

console.log(bike.engine); // 998cc

bike.engine = '789cc';
console.log(bike.engine); // 789cc

Use Object. freeze() to make objects immutable

The same rules apply to the array. it is possible to mutate an array declared with const by pushing new items into the array. however, assigning a new array to the variable will throw an error.

const Fruits = ["mango", "banana" ];
Fruits.push("oranges");
console.log(Fruits); //mango, banana, oranges

Fruits = ['oranges']; //Uncaught TypeError: Assignment to constant variable.

Understanding ES6 for beginners

const

let

const in Objects and arrays