A Journey Through JavaScript

Analyze and understand JavaScript versions and their notable features

Image by tsmr from Pixabay

If you want to find out how JavaScript works and how it has been able to become the most popular programming language in 2020, you can check out my previous medium post here.

Introduction

We do believe in the saying ‘change is the law of life’. If you’re a programmer, I think you would agree with me, hands down. Every programming language, every technology evolves day by day. Now if you take JavaScript, for example, JavaScript was implemented at first only to make web pages alive and be interactive with the user. Nowadays, JavaScript is used as client-side programming frameworks and as a server-side programming language/framework.

ECMA (European Computer Manufacturers Association) paved the way for JavaScript to be the programming language that has these vast implementations. ECMA implemented new features into javascript since 1997.

When ECMA introduced new features back then, programmers had to wait until browsers implement these new features. They wanted to build a website that can be implemented in any browser thus they were afraid to implement. Then came ‘BABEL’. BABEL is a transcompiler which will convert JavaScript code backward so that the code is compatible with any browser. With the help of BABEL, web developers used new versions of JavaScript right away.

List of JavaScript Versions

• ES1 1997
• ES2 1998
• ES3 1999
• ES4 Abandoned
• ES5 2009
• ES6 2015
• ES7 2016
• ES8 2017
• ES9 2018

ES1 and ES2 did contrast on editorial changes. ES1 and ES2 were the base of JavaScript.

ES3:

In JavaScript version ES3, regular expressions and try-catch blocks were introduced. Through regular expressions, programmers were able to create search patterns. These search patterns were used in form validating.

Eg. 1:- (Regular Expressions)

//defining a regular epression
var pat = /John/i;

/*
John -> Search Pattern
i -> An modifier implying the search pattern to be case insensitive
 */

//using the regular expression to replace
var greet = "Hello John!";
var newGreet = greet.replace(/John/i, 'Amy');
console.log(newGreet);   //Output -> Hello Amy!

Try-catch implementations were used to handle errors, programmers were able to test a block of code for errors with this new feature.

ES4 was abandoned due to disagreements.

ES5 :

ES5 was introduced 10 years after ES3. Feature use strict is a directive that defines a strict mode to execute the code. With this directive, you can’t use undeclared variables in the code.

ES5 also featured these new methods which can be used in an array.

Array.isArray(param) — returns true if the passed object is an array or false if the passed object is not an array.

Array.forEach() — executes a function to every element found in array

Array.map() — creates a new array by mapping every element found in an array

Array.indexOf(param) — returns the index of the first match in array

Along with these methods came, methods such as filter(), reduce(), every() and some(). In my view, ES5’s best feature is JSON support. JSON String was used in servers to transfer data. With JSON Support, programmers were able to handle data with ease. Let’s view this feature with an example.

Eg. 2:- (JSON Support)

//JSON data received from server
var inData = '{"name" : "John", "age" : "30"}';

//Converting that JSON data into Javascript Object
var obj = JSON.parse(inData);

//Altering the Javascript Object
obj.name = 'Amy';
obj.age = '27';

//Converting that object back to a string
var outData = JSON.stringify(obj);

Here I have used *.parse()* method to convert text into a JS Object. Also, I have used the .stringify() **method to convert an object back into a JSON string(text).

ES6 :

There were many new features in the ES6 version which was introduced in 2015. Let’s discuss some main features in ES6.

1. Javascript let and const

Javascript let statement allows you to declare a variable with block scope.

Eg. 3:- (let)

var x = 10;
// Here x is 10
{
    let x = 2;
    // Here x is 2
}
// Here x is 10

In the above example, the original value of variable x will not be changed. JavaScript const statement allows you to declare a constant. Therefore const keyword can be used to declare and refer functions.

Eg. 4:- (const)

const x=2;

x=5; //error

2. JavaScript Arrow Functions

When defining functions you don’t need ‘function ’ keyword, ‘return’ keyword. Declaring functions were much simpler and easy to read with this feature.

// ES5 - traditional function declaration
const x = function(x, y) {
   return x * y;
}

// ES6 - new function declaration
const x = (x, y) => x * y;

3. Class

JavaScript introduced a similar class definition as in java. Similarly class will have a constructor that will call when the class object is initialized. However, in JavaScript, class is a type of function.

//initializing the class 'Person'
class Person{
//initializing the constructor method for class
    constructor(name) {
        this.personName= name;
    }
}
// creating a new class object
myFriend = new Person('Jake');

4. Template Literal Strings

It allowed embedded strings. Therefore the javascript developers were able to get rid of using string concatenation all the time. If you want to use this feature, you need to use backticks (``) around the string.

let name = "John";
let country = "Belgium";

//Before ES6
console.log("Hello! I'm"+name+" from "+country+"."); 
//Using Template Literal Strings
console.log(`Hello! I'm ${name} from ${country}`);

//Both Output-> Hello! I'm Jogn from Belgium

5. Default Parameter

When we are defining arguments to a function, we can assign them default values with this feature.

function introduce(name='Kevin', country="Canada")
{
    console.log(`HELLO! I'm ${name} from ${country}.`);
}

introduce(); //Output -> HELLO! I'm Kevin from Canada.

6. Destructuring

With the destructuring feature, programmers were able to access the properties of a JavaScript object or elements of a JavaScript array with ease.

const obj = {
    name: 'Sahan',
    age: '30',
    hobby: 'reading'
};
//Before ES6
const name = obj.name;
const age = obj.age;
const hobby = obj.hobby;

//With Destructuring
const {name, age, hobby} = obj;

Other features you can find on ES6 version :

• Set, WeakSet, Map, WeakMap
• Generators
• Symbols
• Unicode
• Modules
• Proxies
• Built-ins
• Binary and Octal
• Reflect
• Tail Call Optimization

ES7:

This version only had two additions which gave alternatives to already used functionalities.

.includes() method helps the user to search through an array and check the availability of an element.

const pets = ['cat', 'dog', 'bird'];

pets.includes('dog'); //-> returns true

ES7 also added an *exponential operator (*), this operand raises the power of the first operand to the power of the second operand.

( **2**3 will return `8`** )

ES8 :

.padStart() and .padEnd() are two string methods introduced in this new version. .padStart() can be used to pad a string with another string at the beginning.

//===.padStart()===
let str1='ab';
console.log(str1.padStart(4, '#')); //Output -> ##ab

//===.padEnd()===
let str2='cd';
console.log(str1.padEnd(4, '#')); //Output -> cd##

trailing commas were allowed in Javascript ES8 version. Programmers accidentally add trailing commas when parsing arguments into a method or when adding elements into an array.

ES8 version also introduced new methods that can be applied to a JavaScript object.

Object.entries() — returns an array that contains key-value pairs of a given object.

Object.keys() and Object.values() — .keys() returns an array of keys and .values() returns an array of values to a relevant object

Async/await allowed to work with JavaScript promises in a more comfortable fashion. Let’s understand the behaviour of async-await with an example.

//defining an async function
async function getData()
{
    let response = await fetch('user.json');
    //waiting until the compiler finished fetching data from JSON object
    console.log(response);
}
//calling an async function
getData().then(
    //Do Something
);
//.then() can be used because getData function returns a promise

Keywords like async-await, promise are used to define functions that should run in the background of a program.

JavaScript promise is an object that may produce a single value, sometime in the future. We have used the async keyword to define this function. With that definition, the compiler will understand that this function will always return a promise. We can use the await keyword when we are calling these types of async functions. With that, JavaScript will wait until the promise settles and return its result.

ES9 :

This is the latest javascript ES version.

• Rest Properties

With the (…) notation the last argument set to a function can be converted into an array.

//defining a function with rest properties
function f1(a,b, ...d)
{
    //As the argument d you can pass an array with any length
}

f1(2,3,[4,5,6]);

• Promise.finally()

The .finally() method can also be found in Java. The .finally() statement can be used after the catch block. Inside this statement, we can define a block of code, which will execute regardless of the try-catch result.

• Additions to RegExp

Certain improvements in using regular expressions has been added to Javascript ES9.

When you are using regular expressions you use the ‘.’ symbol to match any characters but there were some implementations where ‘.’ symbol would not recognize the characters. In ES9 the issue was fixed with new notation.

/Lets.Play/.test('Lets\nPlay'); //--> returns false

/Lets.Play/s.test('Lets\nPlay'); //--> returns true
// 's' symbol has been added to the end of regExp

Let’s say I want to get the year, month, and day from a date string.

//Before ES9
const REGEX = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const results = REGEX.exec('2020-04-23');
console.log(results[0]); //2020
console.log(results[1]); //04
console.log(results[2]); //23

After ES9: Now the results will be a JavaScript object. We can access our values using the keys which were defined as the year, month, and day.

//After ES9
const REGEX = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2});
const results = REGEX.exec('2020-04-23');
console.log(results.groups.year); //2020
console.log(results.groups.month); //04
console.log(results.groups.day); //23

• Asynchronous Iterations

We were able to use await in our loop declaration after ES9.

for await (const line of readLines(filePath)) {
  console.log(line);
}

With that final feature, we have discussed all of JavaScript ES versions. We have understood specifications that ECMA has been able to introduce along with these versions.

Let’s wait and see what else do they bring with Javascript ES10. I hope you have gained some knowledge about JavaScript with this article. Looking forward to seeing you with another Medium article.