Introduction to ES6
ES6 or ECMAScript 2015 is the 6th 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.
Table of Content
- const
- let
- Arrow functions
- Template literal
- Object and Array Desctructuring
- Default Parameters
- Classes
- Rest parameter and spread operator
- for/of Loop
- JavaScript Maps and Sets
- Promises
- Symbol
- String Methods
- Array Methods
- Object Enteries
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.
javascript
// Const const name = 'Mukul' ; console.log(name); // Will print 'Mukul' to the console. // Trying to reassign a const variable name = 'Rahul' ; console.log(name); // Will give TypeError. // Trying to declare const variable first // and then initialise in another line const org_name; org_name = "w3wiki" ; 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.
javascript
// let let name = 'Mukul' ; console.log(name); // Prints Mukul name = 'Rahul' ; console.log(name); // Prints Rahul // Trying to declare let variable first and then initialise in another line let org_name; org_name = "w3wiki" ; console.log(org_name); // Prints w3wiki |
Mukul Rahul w3wiki
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.
javascript
// Function declaration using function keyword function simpleFunc(){ console.log( "Declared using the function keyword" ); } simpleFunc(); // Function declared using arrow functions const arrowFunc = () => { console.log( "Declared using the arrow functions" ); } arrowFunc(); |
Declared using the function keyword Declared 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.
javascript
// Without Template Literal var name = 'w3wiki' ; console.log( 'Printed without using Template Literal' ); console.log( 'My name is ' + name); // With Template Literal const name1 = 'w3wiki' ; console.log( 'Printed by using Template Literal' ); console.log(`My name is ${name1}`); |
Printed without using Template Literal My name is w3wiki Printed by using Template Literal My name is w3wiki
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.
javascript
// Object Destructuring const college = { name : 'DTU' , est : '1941' , isPvt : false }; let {name, est, isPvt} = college; console.log(name, est, isPvt); // Array Destructuring const arr = [ 'lionel' , 'messi' , 'barcelona' ]; let[value1,value2,value3] = arr; console.log(value1, value2, value3); |
DTU 1941 false lionel 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.
javascript
function fun(a, b=1){ return a + b; } console.log(fun(5,2)); console.log(fun(3)); |
7 4
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.
javascript
// classes in ES6 class 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-10R console.log(bike2.name); // Duke |
Ninja ZX-10R Duke
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.
javascript
// ES6 rest parameter function fun(...input){ let sum = 0; for (let i of input){ sum += i; } return sum; } console.log(fun(1,2)); // 3 console.log(fun(1,2,3)); // 6 console.log(fun(1,2,3,4,5)); // 15 |
3 6 15
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.
javascript
// Spread operator let arr = [1,2,3,-1]; console.log(...arr); console.log(Math.max(...arr)); // -1 |
1 2 3 -1 3
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.
Javascript
const myArr = [5, 55, 33, 9, 6] for (let element of myArr){ console.log(element); } |
5 55 33 9 6
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.
Javascript
// Maps in JavaScript const 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 JavaScript const mySet = new Set([ "string value" , "string value" ]); mySet.add(24); mySet.add(24); mySet.add(3); console.log(mySet); |
23 numberedKey 0 true Set(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.
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.
Javascript
const gfg = { name: "w3wiki" , desc: "A Computer Science portal for all Beginner." } 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]} `) |
w3wiki, A Computer Science portal for all Beginner. 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.
Javascript
// 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 false false true true 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.
Javascript
// Array.from() method const newArr = Array.from( "GeekdforBeginner" ); console.log( "Implementing Array.from(): " , newArr) // Array.keys() method const 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() method const 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(): 0 1 2 3 Implementing Array.find(): clock Implementing 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.
Javascript
const myArr = [ "w3wiki" , "A Computer Science Portal for all Beginner" ]; const arr = myArr.entries() for (let item of arr){ console.log(item); } |
[ 0, 'w3wiki' ] [ 1, 'A Computer Science Portal for all Beginner' ]