Modern JavaScript Tutorial [ ES6 | ES7 | ES8 ]

In this Modern JavaScript Tutorial [ ES6 | ES7 | ES8 ] we want to learn about different

new features in JavaScript ES6,ES7 and ES8. so this you can check the table of content 

for this tutorial in the below.

 

 

 

 

What is JavaScript ?

JavaScript often abbreviated as JS  is a scripting or programming language that allows

you to implement complex features on web pages. JavaScript is high-level, often just-in-time

compiled, and multi-paradigm. also using JavaScript you can create dynamically updating

content, control multimedia, animate images, and pretty much everything else.

in this Modern JavaScript Tutorial [ ES6 | ES7 | ES8 ] tutorial we want to learn about

different features that on ES6,ES7 and ES8.

 

 

 

 

What is ES ?

In the year 1996, a standards organization called ECMA (European Computer

Manufacturers Association) International carved out standard specification called

ECMAScript (ES) which all browser vendors could implement. And Javascript is the

most well-known implementations of ES.

 

 

 

What are Versions of ES ?

Name Year Description
ES1 1997  It was the first edition of Modern JavaScript
ES2 1998  Editorial changes only
ES3 1999  Regular expressions and try/catch added
ES4 Null This version was not released because of some issues.
ES5 2009 Added some new features like use strict, isArray, foreach, map, filter, reduce and some more.
ES6 2015 Some new features has been added, that we will talk about this.
ES7 2016  Some new features has been added, that we will talk about this.
ES8 2017 Some new features has been added, that we will talk about this.
ES9 2018 Changes in RegEx and Rest or Spread Properties
ES10 2019 Some new features has been added
ES11 2020 Some new features has been added

 

 

 

JavaScript ES6

ES6 was one of the best progress of JavaScript in recent years. after introducing ES6,

the modern programming was introduced in JavaScript.

 

 

Let & Const in JavaScript ES6

Before this in JavaScript we had function and global scope, after introduction let and

const now JS has block scope, and it was a feature in JavaScript ES6.

 

 

Template Literal in JavaScript ES6

Template literals are an improvement on string concatenation that you should rarely

ever combine strings with traditional concatenation.

 

 

 

REST Operator in JavaScript ES6

It is used to handle function parameters, you can use three dot (…) for this. Rest operator

signify that parameter is a placeholder for any number of arguments. and rest operator is

used for handling function parameters. the best thing is this that the rest parameter is of

Array type.

 

 

Spread Operator in JavaScript ES6

Spread Operator is used with arrays and its syntax is exactly the same as that of Rest

Operator. and it is used to split the content of an array.

 

some time we need to convert a string in to list of characters,  than we can use spread

operator.

 

you can use spread operator with the objects.

 

 

Default Parameter in JavaScript ES6

It is used for adding default values to function parameters if no value or undefined

is passed.

 

 

For .. of loop in JavaScript ES6

for .. of is an enhanced version of for .. in  and forEach loops.

 

 

Symbols in JavaScript ES6

A new primitive type for JavaScript, it does not have a literal form, symbols are unique

identifier.  or we can say symbols are token that serves as unique id.

 

 

Arrow Functions in ES6

Arrow functions are also called fat arrow functions, they are one line functions and are

much like Lambda functions in programming languages like Java  and Python.

 

 

Destructuring in JavaScript ES6

Destructuring helps in unpacking values from an array or an object. you can use with

object and arrays.

 

with object:

 

with array:

 

 

Set & Maps in JavaScript ES6

Before this in JavaScript we had just object and arrays collection, but now you can use

set and map in JavaScript. Map holds key value pair.

 

Sets are like arrays, but it stores unique values, we can not add duplicate values

in the set.

 

 

Classes in JavaScript ES6

In ES6 the keyword class was introduced,  a class is a type of function, but instead

of using the keyword function to initiate it, we use the keyword class.

 

 

Add functions in your class

 

 

Class inheritance

 

 

 

Promises in JavaScript ES6

promises was introduced in JavaScript ES6, and it is used for asynchronous programming

in JavaScript. before Promises, async calls were handled by Callbacks. Promises resolved

the Call Back Hell. a Promise is basically created when we are unsure  that the assigned

task will be completed or not. the Promise object represents the completion (or failure)

of an async operation and its resulting value. there are different stats for a promise.

 

Pending :  If an asynchronous function has not completed its task, the promise it

returned will be in the pending  state.

Resolved : Whenever the asynchronous function completes successfully, it will set

the promise into the resolved state.

Error: If an asynchronous function finishes with an error, then it sets the promise

into the rejected state.

and there are two callbacks that are the part of promises in a chain.

then() function is used to receive and process the data.

catch() function is used to receive and process an error.

 

 

 

JavaScript ES7

JavaScript ES7 was introduced in 2016, and added some new features in JavaScript.

 

Exponentiation Operator in JavaScript ES7

This operator raises the first operand to the power second operand.

 

 

Includes() Function in JavaScript ES7

Returns true if an array includes a value, if not returns false.

 

 

JavaScript ES8

JavaScript ES8 was introduced in 2017, and added some new features in JavaScript.

 

padStart in JavaScript ES8

This method pads a string with another string at the beginning.

 

 

padEnd in JavaScript ES8

This method pads a string with another string.

 

 

Object.entries() in JavaScript ES8

It is used for making a key value pair of a given object and it returns an array.

 

 

Object.values() in JavaScript ES8

It is used for getting object property values.

 

 

Trailing Commas in JavaScript ES8

Trailing commas comes at the end of the last item in a list.

 

 

Async/Await in JavaScript ES8

ES8 came up with async and await keywords which can be used for asynchronous

functionality in JavaScript. when an async function is called, it returns a Promise, 

when the async function returns a value, the Promise will be  resolved with the returned

value. When the async function  throws an exception , the Promise will be rejected with

the thrown value.  It is important to mention that async function works on top of  promises.

they use promises to return the results. and also you need to remember that async function

and await  works together. you can use await only inside async function. using it outside

will throw an error. and await allows you to pause execution of async function and wait

until promise is  resolved, either as fulfilled or rejected.

 

 

Multiple await

 

 

Once all await are resolved in an async function, it will be considered as completed.

the first async function may have a promise or could be using a promise object and the

rest will simply await till the previous one is resolved. see the example below of a promise

chain.

 

now in here using await we are going to tell that wait for a promise to resolve or reject.

It can only be used  inside an async function.

 

 

When you have multiple steps you will see the power of async or await.

 

 

Practical example

 

Thank you for visiting my website! If you enjoyed the free courses, please consider supporting my works on Patreon.

Leave a Comment