JS 2017

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: 300
Oranges: 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.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420