ES5 vs ES6

Hello there,

In this blog we are going to look, what is actually ES5 and ES6 and the difference between them. Before move into the core plot, we need to know what is ECMAScript and what is the difference between ECMA Script and JavaScript?

What is ECMAScript (European Computer Manufacturers Association Script)?

The ECMAScript specification is a blueprint for creating a scripting language that is defined by ECMA International. ECMAScript specifies the core features that a scripting language should provide and how those features should be implemented. The ES scripting language has many implementations, and the popular one is JavaScript.

ES5 (ECMAScript 5)

ES5 is an abbreviation of ECMAScript 5 and also known as ECMAScript 2009 as it is released in 2009 and this is the 5th edition of scripting language specification defined by ECMA international.

ES6 (ECMAScript 6)

ES6 is also known as ECMAScript 2015 as it is released in 2015 which was released by ECMA international as the sixth edition.

Now let’s focus on the differences between ES5 and ES6 by consider on JavaScript.

ES5 vs ES6 in JavaScript

• Primitive Data Types

ES5 supports primitive data types that are string, number, boolean, null, and undefined.

In ES6, It introduced a new primitive data type ‘symbol’ for supporting unique values.

• Variables

ES5: There is only one way to define the variables by using the var keyword.

ES6: There are two new ways to define variables that are let and const.

The reason why "let” keyword was introduced to the language was function scope is confusing and was one of the main sources of bugs in JavaScript.

While variables declared with “var” keyword are hoisted (initialized with undefined before the code is run) which means they are accessible in their enclosing scope even before they are declared.

In strict mode, “var” will let you re-declare the same variable in the same scope while "let” raises a SyntaxError.

• Define Objects

ES6 uses a shorthand syntax to define objects when the keys and the variable names are same. We can construct an object literal by local variables as shown below.

• Object Destructuring

ES6 provides to extract the object values in a single line when the keys and the variable names are same.

• Merge Objects

Spread operator is introduced in ES6, which makes it easy to merge arrays and objects. But in ES5 Object.assign() method is used to merge objects which change the target variable, while the spread operator does not.

• Interpolation of String

In ES5, we used concatenation operator (+) to join string values. But in ES6, they introduced Template Literal (`).

• Arrow Functions

In ES5, both function and return keywords are used to define a function. An arrow function is a new feature introduced in ES6 by which we don’t require the function keyword to define the function.

They allow us to write smaller function syntax. Arrow functions make our code more readable and structured.

• Promises and Callbacks

Using the ES6 Promise, will simply avoid all the problems associated with the callback. In complex cases, every callback adds a level of nesting which can make your code really messy and hard to understand. In simple words, having multiple callbacks in the code increases the complexity of the code in terms of readability, executability, and many other terms. This excessive nesting of callbacks is often termed “Callback Hell”.

• Import and Export Modules

ES5 uses require keyword while ES6 uses import keyword and ES6 allows us to import child modules too.

Rather than just exporting a module, ES6 allows to export the variables as well.

• Loops

In ES5, there is a use of for loop to iterate over elements. ES6 introduced the concept of for…of loop to perform an iteration over the values of the iterable objects.

• Performance

As ES5 is prior to ES6, there is a non-presence of some features, so it has a lower performance than ES6.

Due to destructuring and speed operators, object manipulation can be processed more smoothly in ES6. But ES5 is time-consuming than ES6.

This is all about the ES5 and ES6. In this same approach we can differentiate ES5 vs ES6 in any other scripting languages like PHP, PERL, VB etc.

THANK YOU!