JS Tutorial
JS Version
JS Objects
JS Function
JS Classes
JS Async
JS HTML DOM
JS Browser BOM
JS Web API
JS AJAX
JS JSON
JS vs JQUERY
JS Graphics
ECMAScript 2017
The JavaScript naming convention started with ES1, ES2, ES3, ES5, and ES6.
But, ECMAScript 2016 and 2017 were not called ES7 and ES8.
Since 2016 new versions are named by year (ECMAScript 2016 / 2017 / 2018).
New Features in ECMAScript 2017
- JavaScript String padding
- JavaScript Object.entries
- JavaScript Object.values
- JavaScript async functions
- JavaScript shared memory
- JavaScript String Padding
JavaScript String Padding
Two methods were added in ECMAScript 2017 namely: padStart and padEnd to support padding at the beginning and at the end of a string.
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The padStart() method pads a string with another string:</p>
<p id=”demo”></p>
<script>
let text = “5”;
document.getElementById(“demo”).innerHTML = text.padStart(4,”0″);
</script>
</body>
</html>
Output
JavaScript String Methods
The padStart() method pads a string with another string:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The padEnd() method pads a string with another string:</p>
<p id=”demo”></p>
<script>
let text = “5”;
document.getElementById(“demo”).innerHTML = text.padEnd(4,”0″);
</script>
</body>
</html>
Output
JavaScript String Methods
The padEnd() method pads a string with another string:
5000
JavaScript Object Entries
ECMAScript 2017 added a new Object.entries method to objects.
The Object.entries() method is used to return an array of the key/value pairs in an object:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>The Object.entries() method returns an array of the key/value pairs in an object:</p>
<p id=”demo”></p>
<script>
const person = {
firstName : “John”,
lastName : “Doe”,
age : 50,
eyeColor : “blue”
};
document.getElementById(“demo”).innerHTML = Object.entries(person);
</script>
</body>
</html>
Output
JavaScript Object Methods
The Object.entries() method returns an array of the key/value pairs in an object:
firstName,John,lastName,Doe,age,50,eyeColor,blue
Object.entries() makes it simple to use objects in loops:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>Object.entries() makes it simple to use objects in loops:</p>
<p id=”demo”></p>
<script>
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = “”;
for (let [fruit, amount] of Object.entries(fruits)) {
text += fruit + “: ” + amount + “<br>”;
}
document.getElementById(“demo”).innerHTML = text;
</script>
</body>
</html>
Output
JavaScript Object Methods
Object.entries() makes it simple to use objects in loops:
Bananas: 300Oranges: 200
Apples: 500
Object.entries() also makes it simple to convert objects to maps:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>Object.entries() makes it simple to convert Object to Map:</p>
<p id=”demo”></p>
<script>
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));
document.getElementById(“demo”).innerHTML = myMap;
</script>
</body>
</html>
Output
JavaScript Object Methods
Object.entries() makes it simple to convert Object to Map:
[object Map]
JavaScript Object Values
Object.values are similar to Object.entries, but returns a single dimension array of the object values:
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>The Object.values() method returns an array of values from an object:</p>
<p id=”demo”></p>
<script>
const person = {
firstName : “John”,
lastName : “Doe”,
age : 50,
eyeColor : “blue”
};
document.getElementById(“demo”).innerHTML = Object.values(person);
</script>
</body>
</html>
Output
JavaScript Object Methods
The Object.values() method returns an array of values from an object:
John,Doe,50,blue
JavaScript Async Functions
Waiting for a Timeout
Example
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript async / await</h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<h1 id=”demo”></h1>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {resolve(“Amazing !!”);}, 3000);
});
document.getElementById(“demo”).innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
Output
JavaScript async / await
Wait 3 seconds (3000 milliseconds) for this page to change.