JavaScript - ES6 Features

What does ES6 stand for?

ECMAScript 6. ECMAScript is another name for Standardized javaScript.

JavaScript was created in 1995. This version of JavaScript brings a lots of
new features.

Some of the highlights:

1. let and const -

let -
It is well-known that JavaScript, unlike many other programming languages, has no concept of block scope. Instead, the var keyword defines a variable that is accessible within the function scope.
But with let, you are able to limit the scope of the variable to the block.

  // ES6 syntax
  for(let i = 0; i < 5; i++) {
    console.log(i); // 0,1,2,3,4
  }
  console.log(i); // undefined
  // ES5 syntax
  for(var i = 0; i < 5; i++) {
      console.log(i); // 0,1,2,3,4
  }
  console.log(i); // 5

const -
Sometimes we want to make a variable that we don’t want to change either by another developer or by ourselves. ES6 gives us access to ‘const’.
When we create a constant, if we ever try to re-assign the value, we’ll get an
error. Not only is this useful, but it is becoming more and more common to
us use ‘const’ in place of ‘var’ when we have a variable that we don’t want to change.

  const city = "Noida"
  console.log(city) // Noida
  city = "Delhi" // type error

2. Template Literals -

Template literals provide an easy and clean way create multi-line strings and perform string interpolation. Now we can embed variables or expressions into a string at any spot without any hassle. Template literals are created using back-tick (` `) (grave accent) character instead of the usual double or single quotes. Variables or expressions can be placed inside the string using the ${…} syntax.

  // String with embedded variables and expression
  let a = 10;
  let b = 20;
  let result = `The sum of ${a} and ${b} is ${a+b}.`; 
  console.log(result); // The sum of 10 and 20 is 30.

3. Rest Parameters -

ES6 introduces rest parameters that allow us to pass an arbitrary number of parameters to a function in the form of an array.
The rest parameter allows us to pass an indefinite number of parameters to
a function and access them in an array.

  function sortNames(...names) {
      return names.sort();
  }
  alert(sortNames("Sarah", "Harry", "Peter")); // Harry,Peter,Sarah
  alert(sortNames("Tony", "Ben", "Rick", "Jos"));//Ben,Jos,Rick,Tony
  A rest parameter is specified by prefixing a named parameter with 
  rest operator (...) i.e. three dots.

4. Spread Operator -

The spread operator, which is also denoted by (…), performs the exact opposite function of the rest operator. The spread operator spreads out
(i.e. splits up) an array and passes the values into the specified function,
as shown in the following example:

  function addNumbers(a, b, c) {
      return a + b + c;
  }
  let numbers = [5, 12, 8];
  alert(addNumbers(...numbers)); // 25

5. Arrow Function -

Arrow Functions are another interesting feature in ES6. It provides a more concise syntax for writing function expressions by opting out the function
and return keywords.
Arrow functions are defined using a new syntax, the fat arrow (=>) notation. Let’s take an example:

  var sum = function(a, b) {
      return a + b;
  }
  console.log(sum(2, 3)); // 5
  // Arrow function
  var sum = (a, b) => a + b;
  console.log(sum(2, 3)); // 5

6. Class -

Classes in JavaScript are nothing but “special functions”. It does not introduce a new object-oriented inheritance model to JavaScript.
Classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. Class gives your code nice structure and keep things neat. Let’s take an example:

  class myClass{
    constructor(name, age){
    this.name = name;
    this.age = age;
   }
  }
  const user = new myClass("Harry Potter",22);
  console.log(user.name) //Harry Potter 
  console.log(user.age) // 22

7. Default Argument -

ES6 provides default arguments for function. You can set default value of argument and if you pass value of that argument it will be overridden
and if you don’t pass default value of that argument, default value will be
taken for that argument.
Let’s take an example for better understanding:

  const add = (a, b=5) =>{ 
    console.log(a+b); 
  } 
  add(3,4) //7 
  add(3) //8

8. Promises -

Promises are a library for asynchronous programming. Promises are a first class representation of a value that may be made available in the future.
Promises are used in many existing JavaScript libraries.
The promise is resolved whenever any one of the add operation completes.
The promise will not wait for other asynchronous operations to complete.
Let’s take an example:

  let myPromise = new Promise(function(myResolve, myReject) {
    setTimeout(function() { 
      myResolve("I love You !!"); 
    }, 3000);
  });
  myPromise.then(function(value) {
    document.getElementById("demo").innerHTML = value;
  });