Comparison Between ECMAScript 5 And ECMAScript 6 Versions Of JavaScript

Introduction

The ES is short for ECMAScript, where ECMA stands for European Computer Manufacturer's Association. ECMAScript is basically a standard; it is a description of a scripting language. Scripting languages such as JavaScript are an implementation of that standard.

Various editions of ECMAScript

Edition	Official name	Date published
ES1	ES1	June 1997
ES2	ES2	June 1998
ES3	ES3	December 1999
ES4	ES4	Abandoned
ES5	ES5	December 2009
ES5.1	ES5.1	June 2011
ES6	ES2015	June 2015
ES7	ES2016	June 2016
ES8	ES2017	June 2017
ES9	ES2018	June 2018
ES10	ES2019	Summer 2019

The most common and important standards that are being used in the software development industry are ES5 (also known as ECMAScript 2009) and ES6 (also known as ECMAScript 2015).

In this article, we will understand the different features of ES5 and ES6 versions of JavaScript. We will discuss problems that were found in ECMAScript 2009 and changes that have been made in ECMAScript 2015 to overcome the limitations of ES5 and further improve JavaScript language.

The var vs let keyword

The var Keyword

In ECMAScript 5 and earlier versions of JavaScript, the var statement is used to declare variables.

Here is an example that demonstrates how to create function-scoped variables:

<!DOCTYPE html>
<html>
<head>
<script>
var x = 11; // can be accessed globally
function myFunction()
{
console.log(x);
var y = 12; //can be accessed throughout function
if(true)
{
var z = 13; //can be accessed throughout function
console.log(y);
}
console.log(z);
}
myFunction();
</script>
</head>
<body></body>
</html>

Here, as you can see, the z variable is accessible outside the if statement, but that is not the case with other programming languages. Programmers coming from other language backgrounds would expect the z variable to be undefined outside the if statement, but that's not the case. Therefore, ES6 had introduced the let keyword, which can be used for creating variables that are block-scoped.

The let keyword

The let keyword is used for declaring block-scoped variables. As earlier versions of JavaScript do not support block-scoped variables, and nearly each and every programming language supports block-scoped variables due to this limitation, the let keyword is introduced in ES6.

Variables declared using the let keyword are called block-scoped variables. When the block-scoped variables are declared inside a block, then they are accessible inside the block that they are defined in (and also any sub-blocks) but not outside the block.

<!DOCTYPE html>
<html>
<head>
<script>
let x = 13; //can be accessed globally
function myFunction()
{
console.log(x);
let y = 14; //can be accessed throughout function
if(true)
{
let z = 14; //cannot be accessed outside of the "if" statement
console.log(y);
}
console.log(z);
}
myFunction();
</script>
</head>
<body>
</body>
</html>

The above code throws Uncaught ReferenceError: z is not defined

Now, the output is as expected by a programmer who is used to another programming language. Here variables are declared using let keyword inside the {} block and cannot be accessed from outside.

The const keyword

The const keyword of ES6 is used to declare the read-only variables, whose values cannot be changed.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
const pi = 3.14;
var r = 4;
console.log(pi * r * r); //output "50.24"
pi = 12;
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

It throws an Uncaught TypeError: Assignment to constant variable, because variables declared using const keyword cannot be modified.

The arrow functions

In ECMAScript 5, a JavaScript function is defined using function keyword followed by name and parentheses ().

Here is an example,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
const add1 = function(a,b)
{
return a+b;
}
console.log(add1(60,20));
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

In ECMAScript 6, functions can be created using => operator. These functions with => operator are called arrow functions. With arrow functions, we can write shorter function syntax. If function is having only one statement and that statement is returning a value, then the brackets {} and return keyword can be removed from the function definition.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
const add1 = (a,b) => a+b;
console.log(add1(50,20));
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

Object oriented programming concept

Earlier versions of JavaScript did not have true object inheritance, they had prototype inheritance. Therefore ES6 has provided a feature called classes to help us organize our code in a better way and to make it more legible.

Object creation in ES5 version of JavaScript is as follows,

<!DOCTYPE html>
<html lang="en">
<head>
<script>
function Car(options){
this.title = options.title;
}
Car.prototype.drive = function(){
return 'vroom';
};
function Toyota(options){
Car.call(this,options);
this.color = options.color;
}
Toyota.prototype = Object.create(Car.prototype);
ToyotaToyota.prototype.constructor = Toyota;
Toyota.prototype.honk = function(){
return 'beep';
}
const toyota = new Toyota({color:"red",title:"Daily Driver"});
document.getElementById("demo").innerHTML = toyota.drive();
document.getElementById("demo1").innerHTML = toyota.title;
document.getElementById("demo2").innerHTML = toyota.honk();
document.getElementById("demo3").innerHTML = toyota.color;
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
</body>
</html>

From the above code, we can see that constructor object creation and prototype inheritance is very complicated.

Therefore to organize our code in a better way and to make it much easier to read and understand, ES6 has provided a feature called class. We can use classes for setting up some level of inheritance as well as to create objects to make code more legible.

Using class declaration for object creation and inheritance in ES6 version of JavaScript

Declare a class using class keyword and add constructor() method to it.

<!DOCTYPE html>
<html>
<head>
<script>
class Car {
constructor(brand)
{
this.title=brand;
}
drive() {
return 'i have a '+this.title;
}
}
class Toyota extends Car{
constructor(brand,color){
super(brand);
this.color=color;
}
honk()
{
return this.drive()+',its a '+this.color;
}
}
const toyota = new Toyota("Ford","red");
document.getElementById("demo2").innerHTML = toyota.honk();
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>JavaScript Class</h2>
<p id="demo"></p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p id="demo4"></p>
</body>
</html>

Above code defines a class named ‘Car’ which is having its own constructor and method. Another class ‘Toyota’ is inheriting ‘Car’ constructor and method with the help of extends keyword.

Improved Array capabilities

While ECMAScript 5 introduced lots of methods in order to make arrays easier to use, ECMAScript 6 has added lot more functionality to improve array performance such as new methods for creating arrays and functionality to create typed arrays.

In ECMAScript 5 and earlier versions of JavaScript, there were two ways to create arrays such as creating arrays using array constructor and array literal syntax.

Creating arrays using array constructor,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
let items = new Array(2);
console.log(items.length); // 2
console.log(items[0]); // undefined
console.log(items[1]); // undefined
items1 = new Array("2");
console.log(items1.length); // 1
console.log(items1[0]); // "2"
items2 = new Array(1, 2);
console.log(items2.length); // 2
console.log(items2[0]); // 1
console.log(items2[1]); // 2
items3 = new Array(3, "2");
console.log(items3.length); // 2
console.log(items3[0]); // 3
console.log(items3[1]);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

As we can see from the above example, on passing a single numerical value to the array constructor, the length property of that array is set to that value and it would be an empty array. On passing a single non-numeric value, the length property is set to one. If multiple values are being passed (whether numeric or not) to the array, those values become items in the array.

This behavior is confusing and risky because we might not always be aware of the type of data being passed.

Solution provided in ECMAScript 6 version of JavaScript is as follows,

The Array.of() method

In order to solve the problem of a single argument being passed in an array constructor, the ECMAScript 6 version of JavaScript introduced the Array.of() method.

The Array.of() method is similar to an array constructor approach for creating arrays but unlike array constructor, it has no special case regarding single numerical value. No matter how many arguments are provided to the Array.of() method, it will always create an array of those arguments.

Here is an example showing the use of Array.of() method,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
let items4 = Array.of(1, 2);
console.log(items4.length); // 2
console.log(items4[0]); // 1
console.log(items4[1]); // 2
items5 = Array.of(2);
console.log(items5.length); // 1
console.log(items5[0]); // 2
Items6 = Array.of("2");
console.log(items6.length); // 1
console.log(items6[0]); // "2"
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

Converting non-array objects into actual arrays

Converting a nonarray object to an array has always been complicated, prior to ECMAScript 6 version of JavaScript. For instance, if we are having an argument object and we want to use it as an array, then we have to convert it to an array first.

In ECMAScript 5 version of JavaScript, in order to convert an array like object to an array, we have to write a function like in the below code,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
function createArray(arr) {
var result = [];
for (var i = 0, len = arr.length; i < len; i++) {
result.push(arr[i]);
}
return result;
}
var args = createArray("ABCDEFGHIJKL");
console.log(args);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

Even though this approach of converting an array like object to an array works fine, it is taking a lot of code to perform a simple task.

The Array.from() method

Therefore in order to reduce the amount of code, ECMAScript 6 version of JavaScript introduced Array.from() method. The Array.from() method creates a new array on the basis of items provided as arguments during the function call.

For example let's consider the following example,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var arg = Array.from("ABCDEFGHIJKLMNO");
console.log(arg);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

In the above code, the Array.from() method creates an array from string provided as an argument.

New methods for array

Before ECMAScript 5, searching in an array was a complicated process because there were no built in functions provided to perform this task. Therefore ECMAScript 5 introduced indexOf() and lastIndexOf() methods to search for a particular value in an array.

The indexOf() method,

<!DOCTYPE html>
<html>
<head>
<script>
var languages = ["C#", "JavaScript", "Java", "Python"];
var x = languages.indexOf("Java");
console.log(x);
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>

The lastIndexOf() methods,

<!DOCTYPE html>
<html>
<head>
<script>
var languages = ["C#", "JavaScript", "Java", "Python","C#"];
var x = languages.lastIndexOf("C#");
console.log(x);
</script>
</head>
<body>
<p id="demo"></p>
</body>
</html>

These two methods work fine, but their functionality was still limited as they can search for only one value at a time and just return their position.

Suppose, we want to find the first even number in an array of numbers, then we have to write our own code as there are no inbuilt functions available to perform this task in the ECMAScript 5 version of JavaScript. The ECMAScript 6 version of JavaScript solved this problem by introducing find() and findIndex() methods.

The Array.find() and Array.findIndex() function

The array.find() method returns the value of the first array element which satisfies the given test (provided as a function). The find() method takes two arguments as follows:-

Array.find (function(value, index, array),thisValue).

The Array.findIndex() method is similar to the find() method. The findIndex() method returns the index of the satisfying array element.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
let numbers = [25, 30, 35, 40, 45];
console.log(numbers.find(n => n % 2 ==0 ));
console.log(numbers.findIndex(n => n % 2 ==0));
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

Sets and Maps

In ES5, sets and maps objects can be created using Object.create() as follows,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var set = Object.create(null);
set.firstname = "Krysten";
set.lastname = "Calvin";
console.log(set.firstname);
console.log(set.lastname);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

In this example, the object set is having a null prototype, to ensure that the object does not have any inherited properties.

Using objects assets and maps works fine in simple situations. But this approach can cause problems, when we want to use strings and numbers as keys because all object properties are strings by default, therefore strings and numbers will be treated as the same property, and two keys cannot evaluate the same string.

For example, let's consider the following code,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var map = Object.create(null);
map[2] = "hello";
console.log(map["2"]);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

In this example, the numeric key of 2 is assigned a string value “hello" as all object properties are strings by default. The numeric value 2 is converted to a string, therefore map["2"] and map[2] actually reference the same property.

ECMAScript 6 introduced sets and maps in JavaScript

Sets

A set is an ordered list of elements that cannot contain duplicate values. A set object is created using a new Set(), and items are added to a set by calling the add() method.

You can see how many items are in a set by checking the size property,

Lets consider the following code,

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
let set = new Set();
set.add(10);
set.add(20);
set.add(30);
set.add(40);
console.log(set);
console.log(set.size);
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>

Here size property returns the number of elements in the Set. And add method adds the new element with a specified value at the end of the Set object.

Maps

A map is a collection of elements that contains elements as key, value pair. Each value can be retrieved by specifying the key for that value. The ECMAScript 6 Map type is an ordered list of key-value pairs, where the key and the value can be any type.

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
let map = new Map();
map.set("firstname", "Shan");
map.set("lastname", "Tavera");
console.log(map.get("firstname"));
console.log(map.get("lastname"));
</script>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
</html>

Functions with default parameters in JavaScript

JavaScript functions have different functionalities in comparison to other programming languages such that any number of parameters are allowed to be passed in spite of the number of parameters declared in the function definition. Therefore, functions can be defined that are allowed to handle any number of parameters just by passing in default values when there are no parameters provided.

Default parameters in ECMAScript 5

Now we are going to discuss, how to function default parameters would be handled in ECMAScript 5 and earlier versions of ECMAScript. JavaScript does not support the concept of default parameters in ECMAScript 5, but with the help of logical OR operator (||) inside a function definition, the concept of default parameters can be applied.

To create functions with default parameters in ECMAScipt 5, the following syntax would be used,

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function calculate(a, b) {
aa = a || 30;
bb = b || 40;
console.log(a, b);
}
calculate(10,20); // 10 20
calculate(10); // 10 40
calculate(); // 30 40
</script>
</body>
</html>

Inside function definition, missing arguments are automatically set to undefined. We can use logical OR (||) operator in order to detect missing values and set default values. The OR operator looks for the first argument, if it is true, the operator returns it, and if not, the operator returns the second argument.

Default parameters in ECMAScript 6

ECMAScript 6, allows default parameter values to be put inside the function declaration. Here we are initializing default values inside function declaration which is used when parameters are not provided during the function call.

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function calculate(a=30, b=40) {
console.log(a, b);
}
calculate(10,20); // 10 20
calculate(10); // 10 40
calculate(); // 30 40
</script>
</body>
</html>

Summary

In this article, we have discussed briefly, the differences between ES5 and ES6 versions of JavaScript as well as some of the new features introduced in each of these versions. Each and every feature has been explained with proper coding examples. We studied some of the limitations of the ES5 version of JavaScript and what solutions were offered by the ES6 version to overcome those limitations and further improve the JavaScript language.