Introduction to ES6 - GeeksforGeeks (2024)

ES6 or ECMAScript 2015 is the 6^th version of the ECMAScript programming language. ECMAScript is the standardization of Javascript which was released in 2015 and subsequently renamed as ECMAScript 2015.
ECMAScript and Javascript are both different.

ECMAScript vs JavaScript

ECMAScript: It is the specification defined in ECMA-262 for creating a general-purpose scripting language. In simple terms, it is a standardization for creating a scripting language. It was introduced by ECMA International and is an implementation with which we learn how to create a scripting language.

JavaScript: A general-purpose scripting language that confirms the ECMAScript specification. It is an implementation that tells us how to use a scripting language.

ES6

Javascript ES6 has been around for a few years now, and it allows us to write code in a clever way which basically makes the code more modern and more readable. It’s fair to say that with the use of ES6 features we write less and do more, hence the term ‘write less, do more’ definitely suits ES6.

ES6 introduced several key features like const, let, arrow functions, template literals, default parameters, and a lot more. Let’s take a look at them one by one.

const

The const keyword is used to declare constant variables whose values can’t be changed. It is an immutable variable except when used with objects.

Example: The below example will explain you the use of const keyword in different situations.

// Const const name = 'Mukul';console.log(name); // Will print 'Mukul' to the console.// Trying to reassign a const variablename = 'Rahul';console.log(name); // Will give TypeError.// Trying to declare const variable first// and then initialise in another lineconst org_name;org_name = "GeeksforGeeks";console.log(org_name);// Throws an syntax error: missing initializer in const declaration

let

The let variables are mutable i.e. their values can be changed. It works similar to the var keyword with some key differences like scoping which makes it a better option when compared to var.

Example: This example will illustrate how to declare varibale using the let keyword.

// letlet name = 'Mukul';console.log(name); // Prints Mukulname = 'Rahul';console.log(name); // Prints Rahul// Trying to declare let variable first and then initialise in another linelet org_name;org_name = "GeeksforGeeks";console.log(org_name); // Prints GeeksforGeeks

MukulRahulGeeksforGeeks

Arrow functions

Arrow functions are a more concise syntax for writing function expressions. These function expressions make your code more readable, and more modern.

Example: The below example will show you how the arrow functions can be created and implemented.

// Function declaration using function keywordfunction simpleFunc(){ console.log("Declared using the function keyword");}simpleFunc(); // Function declared using arrow functionsconst arrowFunc = () => { console.log("Declared using the arrow functions");}arrowFunc();

Declared using the function keywordDeclared using the arrow functions

Template literal

It allows us to use the JavaScript variables with the string without using the ‘+’ operator. Template literal defined using (“) quotes.

Example: This example will explain the practical use of template literals.

// Without Template Literalvar name = 'GeeksforGeeks';console.log('Printed without using Template Literal'); console.log('My name is '+ name); // With Template Literalconst name1 = 'GeeksforGeeks';console.log('Printed by using Template Literal');console.log(`My name is ${name1}`); 

Printed without using Template LiteralMy name is GeeksforGeeksPrinted by using Template LiteralMy name is GeeksforGeeks

Object and Array Desctructuring

Destructing in javascript basically means the breaking down of a complex structure(Objects or arrays) into simpler parts. With the destructing assignment, we can ‘unpack’ array objects into a bunch of variables.

Example: The below example will explain how the destructuring can be done in ES6.

// Object Destructuringconst college = { name : 'DTU', est : '1941', isPvt : false};let {name, est, isPvt} = college;console.log(name, est, isPvt);// Array Destructuringconst arr = ['lionel', 'messi', 'barcelona'];let[value1,value2,value3] = arr;console.log(value1, value2, value3);

DTU 1941 falselionel messi barcelona

Default Parameters

In ES6, we can declare a function with a default parameter with a default value.

Example: This example will show how to define default paramters for a function.

function fun(a, b=1){ return a + b;}console.log(fun(5,2));console.log(fun(3));

74

Classes

ES6 introduced classes in JavaScript. Classes in javascript can be used to create new Objects with the help of a constructor, each class can only have one constructor inside it.

Example: The below example will show how to create classes in ES6.

// classes in ES6class Vehicle{ constructor(name,engine){ this.name = name; this.engine = engine; }}const bike1 = new Vehicle('Ninja ZX-10R','998cc');const bike2 = new Vehicle('Duke','390cc');console.log(bike1.name); // Ninja ZX-10Rconsole.log(bike2.name); // Duke

Ninja ZX-10RDuke

Rest parameter and spread operator

Rest Parameter: It is used to represent a number of parameter in an array to pass them together to a function.

Example: This example will illustrate the practical use of the Rest paramter.

// ES6 rest parameterfunction fun(...input){ let sum = 0; for(let i of input){ sum += i; } return sum;}console.log(fun(1,2)); // 3console.log(fun(1,2,3)); // 6 console.log(fun(1,2,3,4,5)); // 15

3615

Spread Operator: It simply changes an array of n elements into a list of n different elements.

Example: The below example will explain the practical implementation of the Spread Operator.

// Spread operatorlet arr = [1,2,3,-1];console.log(...arr);console.log(Math.max(...arr)); // -1

1 2 3 -13

for/of Loop

The for/of loop allows you to iterate through the iterable items but in a short syntax as compared to other loops.

Example: The for/of loop is implemented in the below code example with an array.

const myArr = [5, 55, 33, 9, 6]for(let element of myArr){ console.log(element);}

5553396

JavaScript Maps and Sets

Map: The maps in JavaScript are used to store multiple items in the form of key-value pairs. The keys of a map can be of any datatype.

Set: A set consist of only unique value, a value can be stored only once in a set. It can store any value of any datatype.

Example: The below example will explain the use of both the JavaScript Map and Set practically.

// Maps in JavaScriptconst myMap = new Map([ ["stringKey", 23],  [48, "numberedKey"]]);myMap.set(false, 0);myMap.set(1, true);console.log(myMap.get("stringKey"),  myMap.get(48), myMap.get(false),  myMap.get(1));// Sets in JavaScriptconst mySet =  new Set(["string value", "string value"]);mySet.add(24);mySet.add(24);mySet.add(3);console.log(mySet);

23 numberedKey 0 trueSet(3) { 'string value', 24, 3 }

Promises

JavaScript promises are used to perform the asynchronous tasks, that takes some time to get executed. It combines the synchronous and asynchronous code together.

Example: The below example will show how you can create and implement a promise in JavaScript.

const JSpromise = new Promise((resolve, reject) => { setTimeout(() => { resolve("Promise is Working") }, 2000);});JSpromise.then((value) => {console.log(value)});

Promise is Working

Symbol

Symbol is a type of primitive data type intriduced in ES6. It is used to specify the hidden identifiers that can not be directly accessed by any other code.

Example: The use of the Symbol data type is explained in the below code example.

const gfg = { name: "GeeksforGeeks", desc: "A Computer Science portal for all geeks."}let short_name = Symbol("short_name")gfg.short_name = "GFG";console.log(`${gfg.name}, \n${gfg.desc}`);console.log(`Company's Short Name using gfg.short_name: ${gfg.short_name} `)console.log(`Company's Short Name using gfg[short_name]: ${gfg[short_name]} `)

GeeksforGeeks, A Computer Science portal for all geeks.Company's Short Name using gfg.short_name: GFG Company's Short Name using gfg[short_name]: undefined 

String Methods

• JavaScript startsWith(): This method will return true only if the testing string starts with the passed or specified string.
• JavaScript endsWith(): This mthod will return true, if the string ends with the passes or specified string value.
• JavaScript includes(): It will return true, if the testing string contains the specified or passes value.

Example: The below code example will illustrate the use of all the string methods introduced in ES6.

// String startsWith()const useStart = "This string implements the startsWith() method.";console.log(useStart.startsWith("This string"), useStart.startsWith("This is"));// String endsWith()const useEnd = "This string implements the endsWith() method.";console.log(useEnd.endsWith("clear() method."), useEnd.endsWith("method."));// String includes()const useIncludes = "This string implements the includes() method.";console.log(useIncludes.includes("includes()"), useIncludes.includes("My name"));

true falsefalse truetrue false

Array Methods

• JavaScript Array.from(): It will return a array from any object which is iterable and has the length property associated with it.
• JavaScript Array.keys(): It returns an array of the iterator keys of the array.
• JavaScript Array.find(): It will return the value of the first array element that matches or passes the condition of the passed function.
• JavaScript Array.findIndex(): It will return the index of the first array element that matches or passes the condition of the passed function.

Example: The below code example implements all array methods introduced in ES6.

// Array.from() methodconst newArr = Array.from("GeekdforGeeks");console.log("Implementing Array.from(): ", newArr)// Array.keys() methodconst milkProducts = ["Curd", "Cheese", "Butter", "Ice-Cream"];const arrayKeys = milkProducts.keys();console.log("Implementing Array.keys(): ")for(let key of arrayKeys){ console.log(key)}// Array.find() methodconst findArray = ["clock", "strong", "planet", "earth"];const lessThanSix = (item) => { return item.trim.length < 6;}console.log("Implementing Array.find(): ", findArray.find(lessThanSix));console.log("Implementing Array.findIndex(): ", findArray.findIndex(lessThanSix));

Implementing Array.from(): [ 'G', 'e', 'e', 'k', 'd', 'f', 'o', 'r', 'G', 'e', 'e', 'k', 's']Implementing Array.keys(): 0123Implementing Array.find(): clockImplementing Array.findInd...

Object Enteries

Object.entries() method is used to convert a single valued array into an array object with a key-value pair as array items.

Example: The below example implements the object.entries() method practically.

const myArr =  ["GeeksforGeeks", "A Computer Science Portal for all geeks"];const arr = myArr.entries()for(let item of arr){ console.log(item);}

[ 0, 'GeeksforGeeks' ][ 1, 'A Computer Science Portal for all geeks' ]