Web Technologies

ES6 vs ES5

ECMAScript (ES) is a standardized scripting language for JavaScript (JS). The first edition of the ECMA Script was published in June 1997. The sixth version of ECMA Script6 is known as ES6 (it is also called as ECMA Script 2015). ES6 vs ES5 are two of the important scripting languages in the Software Development industry. Both ES5 vs ES6 have some similarities in nature but at the same time, there are also many difference between each other. Here, we will have discussion on ES6 vs ES5.

Exporting & Importing Modules

Exporting and importing module syntax changed introduction of ES6 specification.

Here is the exporting and Importing syntax,

var sampleModule= { x: 1, y: function(){ console.log('This is ES5') }}

// ES5 Export
module.exports =  sampleModule; 

// ES6 Export 
export default sampleModule; 

// ES5 Import
var sampleModule = require('./sampleModule'); 

// ES6 import
import sampleModule from './sampleModule';

Spread operator (…)

Spread Operator is introduced in ES6, merging the objects and arrays made easier by this.

Follows the spread operator usage/syntax,

var obj1 = { x: 1, y: 2 };
var obj2 = { c: 3, d: 4 };

// ES5
var obj3 = Object.assign(obj1, obj2);

// ES6
var obj3 = { ...obj1, ...obj2 };

Template Literal (`)

Template Literals are a new ES2015 / ES6 feature that allows you to work with strings. Template literals provide an easy way to interpolate variables and expressions into strings.
You do so by using the ${...} syntax.,

const myVariable = 'test'
const newVariable = `something ${myVariable}`;

Arrow Function (=>)

Arrow functions is also called as “fat arrow” functions. Arrow functions make our code more concise, simplify function scoping.

// ES5
var multiply = function(x, y) {
  return x * y;
};

// ES6
const multiply = (x, y) => { return x * y };

Promises and Callbacks

Javascript is an Async language we all know that. This feature gives developers to code freely, meanwhile all often contains a lots of function and return keywords. When using promises, these function expressions will be used for chaining. ES6 code is quite simplified.

// ES5
aAsync().then(function() {
  return bAsync();
}).then(function() {
  return cAsync();
}).done(function() {
  finish();
});

// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Performance and Support

With the help of newly implemented features and shorthand storage implementation, ES6 scores a higher performance rank than ES5, whereas ES5 has larger range of community supports than ES6.

Author


Avatar