The Expedition of JavaScript : Decoding ECMAScript aka ES

Heard of something called ES6 or ESMAScript? Don’t know how is it related to Javascript? Don’t worry lets start this expedition…

What is JavaScript

Slowly steadily the concept of webpages became very famous. But till a very long span of time, the web pages used to be static, with just info displayed inside various tags. With the growth of internet world, there started a new concept of interactive websites. What do that mean? Nothing great! Just be able to modify the content of the website(ie. to modify the DOM object). So, there was a boom in this direction and the DOM (Document Object Model) was easily accessible and modifiable. So this was a duty which was assigned to our lovely scripting language JS.

Definition of JS

Inventor of JS

JS and ECMAScript or ES: a programmatic muddle

In late 90s, ECMA (European Computer Manufacturers Association) International, a standards organization designed a standard specification of scripting language which all the browser vendors could implement, this was called called ECMAScript (ES). To our surprise, this general purpose programming language was developed by Brendan at Netscape. This was then renamed to Mocha, which was further bundled and shipped with Netscape Navigator 2.0 with a new identity ie. LiveScript. This journey continued and the scripting language continued to evolve and finally with the release of BETA 3 of Netscape Navigator 2.0, it was christened as “JavaScript”. Although people tend to confuse it with “JAVA”, it is much different in terms of working, functionality, semantics and syntax.

In the 21st century, when websites were not limited to front-end but required a strong and dynamic backend, there was a rise in usage of multiple backend technologies. Amongst them, JavaScript started becoming one of the most preferable language with the help of the backend JS language — NodeJS. The main reason for this was usage of the same JS language at the front-end as well as the backend, which eradicated the need to learn two different languages for frontend and backend development.

ES Versions

ES logo

Slowly and steadily this ECMAScript started evolving and was released in form of new versions i.e. the ESversions ex. ES5,ES6. The naming convention for this versions was simply ES followed by the version number until 2016 when they started naming it as ECMAScript followed by its year ex. ECMAScript 2016. Till 2021, ES has 12 version with the latest one being ECMAScript 2021. Over the years the ES version were updated to bring in new characteristics like Object Oriented nature, JSON operators etc.

Version-wise Changes

ES1

ES2

ES3

2. RegExp (Regular Expression) Objects
A RegExp object contains a regular expression and the associated flags. RegExp can be used for pattern matching and search and replace functionality.

3. The Date Constructor

When Date is called as part of a new expression, it is a constructor: it initializes the newly created object.
new Date (year, month [, date [, hours [, minutes [, seconds [, ms ] ] ] ] ] )

When Date is called with two to seven arguments, it computes the date from year, month, and (optionally) date, hours, minutes, seconds and ms.

4. Better String Handling

The string Constructor was provided with various methods such as .toString() .charAt() .concat() etc.

ES4

ES5

The Date.now() function return a Number value that is the time value designating the UTC date and time of the occurrence of the call to now.

2. JSON methods

The JSON object contained two method JSON.stringify() and JSON.parse()
a. The stringify function returns a String in JSON format representing an ECMAScript value.
b. The parse function converts the given text into a valid JSON. It should use with caution and proper error handling.

3. ‘use strict’ Directive

The strict mode is a way to opt in to a restricted variant of JavaScript, thereby implicitly opting-out of “sloppy mode”. It eliminates some JavaScript silent errors by changing them to throw errors.

4. forEach(callback())
The forEach() method executes a provided callback function once for each element in the provided object. The problem with foreach is that its iteration can’t be skipped or break, so its runs for all elements uninterruptedly.

ES6

  1. Classes

The JS lacked the usage of classes syntax and need coders to use the long-stretched prototype syntac. This version brought in the true OOPs concept of Classes.

2. The let and const variable

The JS supported only function and global level scope, so each variable was treated as global variable. This may lead to the variable being reassign new value mistakenly. So ES6 brought in const and let.
a. let — This declares the variable for block level scope. Outside the scope the variable is undefined.

b. Const : You can declare a variable as const if its value is to be defined only once in its lifetime. Reassignment will lead to an error.

3. Defaults params
Incase if you pass less or undefined for a parameter with default value defined in the params arg of the function definition, then it is assigned with that default value

4. Promises

A Promise is a dummy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a promise to supply the value at some point in the future.

ECMAScript 2016

2 .includes()

Tells whether an element is existing in the array or not. Returns true/false

3. async/await

Async/Await are used as keyword for asynchronous programming. It is a like a artificial sugar coating for the Callback syntax and also helps to prevent Callback hell (Here it was introduced as apreparation for next Version)

ECMAScript 2017

2. Object.entries
The Object.entries() is really helpful in fetching the key value pairs. This method returns an array of a key/value pairs from provided object.

3. Object.values
The Object.values() is really helpful in fetching the value in a object. This method returns an array of a values from provided object.

ECMAScript 2018

2. .finally method:

Some code needs to be executed irrespective of the resolve, reject ie. reply or error, the n such code needs to be added to the finally method. I was addded to the previous set of promises methods like.then,.catch etc.

ECMAScript 2019

2. Object.fromEntries()

The methods converts a list of keyvalue pairs into a proper js object

ECMAScript 2020

2. BigInt:

It is another primitive data type for storing number beyond the Number.MAX_SAFE_INTEGER. It is created by appending n to the end of an integer literal, or by calling the BigInt() constructor (but without the new operator) and giving it an integer value or string value.

ECMAScript 2021

The replace method in the previous version use to replace only the first instance of the search string in the text. For multiple search you had to provide a regex exp with a global g flag example /searchThisText/g.

Instead you can now use replaceAll(searchstring,replacestring) to replace all the instances of the serach string in the original text.

2. Private Method:
If we want some method in our class to be private, ther wasnt a direct functionality before ECMA2021, now we can use the private method functionality.
If we want to make substract() a private method inside the class Calculator to restrict access outside the scope of the class, add the hash (#) in front of the method like this #substract. Similarly accesor methods can also be made private like this

get accessorname() {} ===> get #accessorname(){}

Know More

Credits and Refernces:
1.https://en.wikipedia.org/wiki/ECMAScript#ES2015

2.https://en.wikipedia.org/wiki/Null_coalescing_operator

3.https://en.wikipedia.org/wiki/Brave_(web_browser)

4.https://www.w3schools.com/js/js_versions.asp

5. https://www-archive.mozilla.org/js/language/E262-3.pdf

6.https://262.ecma-international.org/7.0/

7.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

8.https://dev.to/faithfulojebiyi/new-features-in-ecmascript-2021-with-code-examples-302h

Any doubts ?

Full Stack Developer passionate about Coding and decoding stuff.