ES6

3 min readApr 29, 2021

ES6 is an acronym of ECMAScript 6 and also known as ECMAScript 2015.

ECMAScript 6 is a scripting language specification that was standardized by ECMAScript International in 2015.

ES6 allows you to make the code more modern and readable. By using ES6 features, we write less and do more, so the term ‘Write less, do more suits

ES6 introduces you to many great features such as scope variables, arrow functions, template strings, class destruction, modules, etc.

FEATURES OF ES6

Variable Creation using let and const.
Template String
Arrow Function
Rest and Spread Operator
Destructuring

VARIABLE CREATION USING let AND const.

var

var has a function scope, not a block scope.
If you use var outside of a function, it belongs to the global scope.
If you use var inside of a function, it belongs to that function.
var x = 5.6;

let

let has block scope.
It’s limited to the block (or expression) where it is defined.
let x = 33;

const

const is a variable that once it has been created, its value can never change.
const has a block scope.
const x = 5.6;

TEMPLATE STRING

It’s just a string that allows embedded expression inside.
Expressions are embedded by wrapping inside ${}.

Examples:

const name = "john"            
const  fname = "Name is ${name}"

output: Name is john

const returnfullname = (fn,ln) => { 
  return ("Name is  ${fn} {$ln}"); 
} 
returnfullname('John','Emanual')

output: Name is John Emanual

ARROW FUNCTION

Arrow functions are introduced in ES6, which provides you 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.
Examples:-

1)With parameter

const show = (a,b,c) => {
console.log(a + " " + b + " " + c );
}
show(100,200,300);
const returnfullname = (fn,ln) => {
return ("Name is ${fn} {$ln}");
}

output: 600

2)Without Parameter

const show = () => {
return "Welcome!";
}

output: Welcome!

SPREAD OPERATOR

ES6 introduced a new operator referred to as a spread operator, which consists of three dots (…).
Spread syntax allows arrays and objects to be expanded into elements in case of array and key-value pairs in case of objects.
Examples:-

1)With Array

let a1 = [1,2,3,,5,6]
let a2 = [7,8,9]
let a3 = […a1,…a2]

output : [1,2,3,4,5,6,7,8,9]

2)With Objects

let obj1 = {name : 'sameer',email:'sameer.mistry@gmail.com'}
let obj2 ={age:22}
let obj3 = {...obj1,...obj2}

output : {name:’sameer”,email:’sameer.mistry@gmail.com’,age:22}

REST PARAMETER

The rest parameter is introduced in ECMAScript 2015 or ES6, which improves the ability to handle parameters.
The rest parameter allows us to represent an identified number of arguments as an array. By using the rest parameter, a function can be called with any number of arguments.
Example:-

var colors = ["Violet", "Indigo", "Blue", "Green", "Yellow", "Orange", "Red"];
var [a,b,…args] = colors;
console.log(a);
console.log(b);
console.log(args);

output :

Violet

Indigo

[ ‘Blue’, ‘Green’, ‘Yellow’, ‘Orange’, ‘Red’ ]

DE-STRUCTURING

De-structuring means breaking down a complex structure into simpler parts. With the syntax of de-structuring, you can extract smaller fragments from objects and arrays.
It can be used for assignments and declaration of a variable.
Examples:-

1)Array De-structuring

var arr = ["Sam", "Billings"]
var [a,b] = arr;
console.log(a);
console.log(b);

Output :

Sam

Billings

2)Object De-structuring

const num = {x: 100, y: 200,z:300};
const {x, y} = num;
console.log(x);
console.log(y);