What the difference between ES5 and ES6?

What the difference between ES5 and ES6?

Let’s take a look at the main differences features between ECMAScript 5 (ES5) and ECMAScript 6 (ES6) versions of JavaScript

Introduction

ECMAScript (ES) is a standardised scripting language for JavaScript (JS). The current ES version supported in modern browsers is ES5. However, ES6 tackles a lot of the limitations of the core language, making it easier for devs to code.

This is image title

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. 

1. 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.

2. 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.

3. The arrow functions

In ECMAScript 5, 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>   

4. 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.

5. 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.

6. 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,

7. The Array.of() method

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

The Array.of() method is similar to 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>  

8. Converting non-array objects into actual arrays

Converting a non array object to an array has always been complicated, prior to ECMAScript 6 version of JavaScript. For instance, if we are having an arguments object and we want to use it like 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.

9. 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 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.

10. 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.

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

The array.find() method returns the value of 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 satisfied 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>  

12. 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 as sets 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 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.

13. ECMAScript 6 introduced sets and maps in JavaScript

Sets

A set is an ordered list of elements that cannot contain duplicate values. Set object is created using 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>  

14. 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 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 function default parameters would be handled in ECMAScript 5 and earlier versions of ECMAScipt. JavaScript does not support the concept of default parameters in ECMAScript 5, but with the help of logical OR operator (||) inside 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 function calling.

<!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.

I hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others. Thank you so much!

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Difference between Regular and Arrow Functions in JavaScript

This article discusses the major differences between the ES5 regular functions and the ES6 arrow functions in JavaScript

Java vs. JavaScript: Know The Difference

Java vs. JavaScript: Know the Difference, Java vs. JavaScript: What's the Difference? Java vs. JavaScript: Major Similarities and Differences. pros and cons of JavaScript and Java.

JavaScript ES6 Classes

An exciting new construct that was introduced in the ES6 specification is the ES6 classes. If you're a Javascript developer, you will be aware that Javascript follows prototypal inheritance and sometimes it can get a little messy. However, with ES6 classes the syntax is simpler and much more intuitive.