Codementor Events

Why ES6 is different than ES5?

Published Sep 21, 2019
Why ES6 is different than ES5?

ES6-ECMAScript6 With all features
ES is ECMAScript, ECMAScript 6 is also known as ES6 and ECMAScript 2015, that will be different and with many features such as, arrow functions, const, Promises,Modules Import/Export.. lets talk about some most important features to clear why ES6 is different than ES5.

Here are some key Features of ES6:
Constants:
Constant also know as const, that are immutable variables which value can’t be change, while mutable variable are those which value will be change.
Example:

const PI = 3.141593

— — — — — — — — — — — — — — — — — — — — — — — — — —
Scoping:
Each function creates a new scope.
Scope determines the accessibility (visibility) of these variables.
Variables defined inside a function are not accessible (visible) from outside the function.
In ES6 there are two types of scope:
1- Variables Scoping
2 -Functions Scoping
— — — — — — — — — — — — — — — — — — — — — — — — — —
Arrow Functions:
Fat arrow or arrow functions, surveys show that must popular feature in ES6 is arrow functions. They save developers time and simplify function scope.
Example:
const multiplyES6 = (x, y) => { return x * y };
— — — — — — — — — — — — — — — — — — — — — — — — — —
Modules:
Module uses normal JavaScript to create functions, objects, constants, and any other JavaScript type. we can import and export modules.
Example:

// import my module
var myModule = require(“resource://path/to/my/module.js”);
// var exports = module.exports = {};
exports.sayHelloInEnglish = function() {
return “HELLO”;
};

— — — — — — — — — — — — — — — — — — — — — — — — — —
Classes
One way to define a class is using a class declaration. To declare a class, you use the class keyword with the name of the class
Example:

class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
}

— — — — — — — — — — — — — — — — — — — — — — — — — —
Promises
It allows you to associate handlers with an asynchronous action’s eventual success value or failure reason.
A Promise is in one of these states:
pending: initial state, neither fulfilled nor rejected.
fulfilled: meaning that the operation completed successfully.
rejected: meaning that the operation failed.
Example:

**To provide a function with promise functionality, simply have it return a promise:**
function myAsyncFunction(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(“GET”, url);
xhr.onload = () => resolve(xhr.responseText);
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
}

— — — — — — — — — — — — — — — — — — — — — — — — — —
Here is other features of ES6:
Extended Parameter Handling
Template Literals
Extended Literals
Enhanced Regular Expression
Enhanced Object Properties
Destructuring Assignment
Symbol Type
Iterators
Generators
Map/Set & WeakMap/WeakSet
Typed Arrays

Thanks for reading, if like please comments and share and hit like,
thanks Rizwan
😃

Discover and read more posts from Mr. Rizwan
get started