ECMAScript 2017
JavaScript Version Numbers
The older versions of ECMAScript were identified by numbers, specifically as ES5 and ES6.
Starting in 2016, the versions are labeled according to the year they are released: ES2016, 2018, 2020, and so on.
New Features in ECMAScript 2017
This section presents the latest additions in ECMAScript 2017.
JavaScript String Padding
In 2017, ECMAScript introduced two new functions for strings in JavaScript: padStart() and padEnd(). These functions help add extra characters at the start or end of a string.
JavaScript Object Entries
In 2017, ECMAScript introduced the Object.entries() method for objects.
Object.entries() gives you an array containing the key/value pairs from an object:
Object.entries() helps easily loop through objects:
Object.entries() also helps easily change objects into maps.
JavaScript Object Values
Object.values() works like Object.entries(), but it gives you an array with just the values of the object.
JavaScript Async Functions
JavaScript Trailing Commas
JavaScript permits the use of trailing commas in any list of values separated by commas.
In arrays and object basics, function actions, inputs, and sharing.
Example
function myFunc(x,,,) {};
const myArr = [1,2,3,4,,,];
const myObj = {fname: John, age:50,,,};
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The padStart() Method</h2>
<p>The padStart() method pads a string from the start.</p>
<p>It adds extra words to a sentence repeatedly until it's a certain length.</p>
<p id="demo"></p>
<script>
let text = "5";
text = text.padStart(4, "0");
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Object Methods</h2>
<p>The Object.entries() method gives back an array showing all the key/value pairs inside an object.</p>
<p id="demo"></p>
<script>
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
let text = Object.entries(person);
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!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>
<!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>
<!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"
};
let text = Object.values(person)
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript async / await</h1>
<h2 id="demo"></h2>
<p>Wait 3 seconds (3000 milliseconds) for this page to change.</p>
<script>
async function myDisplay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() {
resolve("I love You !!");
}, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery