JavaScript ES6

The Javascript programming language has been around for more than 25 years, and in that time it has changed quite a bit, adding new features and new syntax. It used to take years for new features to enter the language, but the modern Javascript standard is updated on an annual basis with new features.

Many major changes to the Javascript standard came with Javascript ES6. ES6 stands for ECMAScript 6. ECMAScript is another official name for Javascript since the organization ECMA International creates the standard.

ECMAScript 2015 is also known as ES6 and ECMAScript 6. ECMAScript 2015 was the second major revision to JavaScript.

Some important features of ES6

1. let and const keywords

2. Arrow Functions

3. Default Parameters

4. Template Literals

5. Destructuring Assignment

6. Promises

7. Classes

8. Spread- operator

let and const keywords

In ES6, the variables are declared by:

• Using let.

• Using const.

The keyword "let" enables the users to define variables and on the other hand, "const" enables the users to define constants.
The "var" variable is an old method to declare a variable in javascript. Variables were previously declared using "var" which had function scope and were hoisted to the top.

The main difference between "var", "let", and "const":

var:- It has functional scope, we can redeclare and reassign with the "var" variable.

let:- it has block scope, we can not redeclare but we can reassign with the "let" variable.

const:- it has block scope, we can not redeclare and reassign with the "const" variable.

Arrow Functions:

Arrow functions are introduced in ES6, which provides you with a more accurate way to write the functions in JavaScript. They allow us to write smaller function syntax. Arrow functions make your code more readable and structured.

ES6 provides a feature known as Arrow Functions. It provides a more concise syntax for writing function expressions by removing the "function" and "return" keywords.

Arrow functions are defined using the fat arrow (=>) notation.

//normal function 
var myfun1 = function show() {  
 console.log("It is a Function Expression");     
} 
myfun1(); 
// It is a Function Expression.

//arrow function
var myfun2 = () => {  
    console.log("It is an Arrow Function");     
   }; 
  myfun1(); 
// It is an Arrow Function

Default Parameters

When no value is passed in the function definition, a default value is being set for the function definition, known as the default parameter. It allows the named parameters to get initialized with a default value when either undefined or no value is passed.

function sum(a=5, b=7)  
{  
    return a+b;  
}  
console.log(" Sum of the numbers is : " + sum());   // there is no argument  
console.log(" Sum of the number is : " + sum(7));   // it has one argument  
console.log(" Sum is : " + sum(7,3));   // have both argument  

//  Output: Sum of the numbers is : 12.
//          Sum of the numbers is : 14.
//           sum is: 10.

Templates Literals

ES6 introduces very simple string templates along with placeholders for the variables. The syntax for using the string template is ${PARAMETER} and is used inside of the back-ticked string.

var name = 'World';  
var cname = 'javaTpoint';  
console.log(`Hello, ${name}!  
Welcome to ${cname}`);  
// Output: Hello, World!
//         Welcome to javaTpoint

Destructuring Assignment

Destructuring means to break down a complex structure into simpler parts. With the syntax of destructuring, you can extract smaller fragments from objects and arrays. It can be used for assignments and declaration of a variable.

Destructuring is an efficient way to extract multiple values from data that is stored in arrays or objects. When destructuring an array, we use their positions (or index) in an assignment.

//Array distructuring
var arr = ["Hello", "World"]  
// destructuring assignment  
var [first, second] = arr;  

console.log(first); 
// Output:- Hello  
console.log(second); 
// Output:- World 

//Object Destructuring
let person = {name: "ram", age: 28};
let {name, age} = person; // Object destructuring assignment
console.log(name);
//Output:- ram
console.log(age);
// Output:- 29

Promises

In ES6, Promises are used for asynchronous execution. We can use promise with the arrow function as demonstrated below.

// Syntax

var asyncCall =  new Promise((resolve, reject) => {
   // do something
   resolve();
}).then(()=> {   
   console.log('DON!');
})

Modules

Previously, there was no native support for modules in JavaScript. ES6 introduced a new feature called modules, in which each module is represented by a separate ".js" file. We can use the "import" or "export" statement in a module to import or export variables, functions, classes or any other component from/to different files and modules.

//Syntax
export var num = 50; 
export function getName(fullName) {   
   //data
};
import {num, getName} from 'module';
console.log(num); // 50

spread operator

ES6 introduced a new operator referred to as a spread operator, which consists of three dots (...). It allows an iterable to expand in places where more than zero arguments are expected. It gives us the privilege to obtain the parameters from an array.

let colors = ['Red', 'Yellow'];  
let newColors = [...colors, 'Violet', 'Orange', 'Green'];  
console.log(newColors);  
//Outpot: ['Red', 'Yellow','Violet', 'Orange', 'Green']