”;
In this chapter, we will learn how to transpile ES7 features to ES5.
ECMA Script 7 has the following new features added to it −
- Async-Await
- Exponentiation Operator
- Array.prototype.includes()
We will compile them to ES5 using babeljs. Depending on your project requirements, it is also possible to compile the code in any ecma version ie ES7 to ES6 or ES7 to ES5. Since ES5 version is the most stable and works fine on all modern and old browsers, we will compile the code to ES5.
Async-Await
Async is an asynchronous function, which returns an implicit promise. The promise is either resolved or rejected. Async function is same as a normal standard function. The function can have await expression which pauses the execution till it returns a promise and once it gets it, the execution continues. Await will only work if the function is async.
Here is a working example on async and await.
Example
let timer = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
let out = async () => {
let msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();
Output
Promise resolved after 5 seconds hello after await
The await expression is added before the timer function is called. The timer function will return the promise after 5 seconds. So await will halt the execution until the promise on timer function is resolved or rejected and later continue.
Let us now transpile the above code to ES5 using babel.
ES7 – Async-Await
let timer = () => {
return new Promise(resolve => {
setTimeout(() => {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
let out = async () => {
let msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();
command
npx babel asyncawait.js --out-file asyncawait_es5.js
BabelJS – ES5
"use strict";
var timer = function timer() {
return new Promise(function (resolve) {
setTimeout(function () {
resolve("Promise resolved after 5 seconds");
}, 5000);
});
};
var out = async function out() {
var msg = await timer();
console.log(msg);
console.log("hello after await");
};
out();
Babeljs does not compile object or methods; so here promises used will not be transpiled and will be shown as it is. To support promises on old browsers, we need to add code, which will have support for promises. For now, let us install babel-polyfill as follows −
npm install --save babel-polyfill
It should be saved as a dependency and not dev-dependency.
To run the code in the browser, we will use the polyfill file from node_modulesbabel-polyfilldistpolyfill.min.js and call it using the script tag as shown below −
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script src="node_modulesbabel-polyfilldistpolyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="aynscawait_es5.js"></script>
</body>
</html>
When you run the above test page, you will see the output in the console as shown below
Exponentiation Operator
** is the operator used for exponentiation in ES7. Following example shows the working of the same in ES7 and the code is transpiled using babeljs.
Example
let sqr = 9 ** 2; console.log(sqr);
Output
81
ES6 – Exponentiation
let sqr = 9 ** 2; console.log(sqr);
To transpile the exponentiation operator, we need to install a plugin to be installed as follows −
command
npm install --save-dev babel-plugin-transform-exponentiation-operator
Add the plugin details to .babelrc file as follows −
{
"presets":[
"es2015"
],
"plugins": ["transform-exponentiation-operator"]
}
command
npx babel exponeniation.js --out-file exponeniation_es5.js
BabelJS – ES5
"use strict"; var sqr = Math.pow(9, 2); console.log(sqr);
Array.prototype.includes()
This feature gives true if the element passed to it is present in the array and false if otherwise.
Example
let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = [''Siya'', ''Tom'', ''Jerry'', ''Bean'', ''Ben''];
console.log(names.includes(''Tom''));
console.log(names.includes(''Be''));
Output
true true false
We have to use babel-polyfill again here as includes is a method on an array and it will not get transpiled. We need additional step to include polyfill to make it work in older browsers.
ES6 – array.includes
let arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
let names = [''Siya'', ''Tom'', ''Jerry'', ''Bean'', ''Ben''];
console.log(names.includes(''Tom''));
console.log(names.includes(''Be''));
command
npx babel array_include.js --out-file array_include_es5.js
Babel-ES5
''use strict'';
var arr1 = [10, 6, 3, 9, 17];
console.log(arr1.includes(9));
var names = [''Siya'', ''Tom'', ''Jerry'', ''Bean'', ''Ben''];
console.log(names.includes(''Tom''));
console.log(names.includes(''Be''));
To test it in older browser, we need to use polyfill as shown below −
<!DOCTYPE html>
<html>
<head>
<title>BabelJs Testing</title>
</head>
<body>
<script src="node_modulesbabel-polyfilldistpolyfill.min.js" type="text/javascript"></script>
<script type="text/javascript" src="array_include_es5.js"></script>
</body>
</html>
Output
”;