Flash cards
Review the key moves
What is the main idea behind ECMAScript 2017?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
___ text = "5";Put the learning moves in the order that makes the concept easiest to apply.
New Features in JavaScript 2017
| Feature | Description |
|---|---|
| String padStart() | Pads the beginning of a string |
| String padEnd() | Pads the end of a string |
| Object entries() | Returns an array of the key/value pairs of an object |
| Object values() | Returns an array of the values of an object |
| async and await | Simplifies the handling of promises |
| Trailing Commas | Allows trailing commas where a comma-separated list of values is accepted |
| getOwnProperty Descriptors | Returns an object containing all own property descriptors of an object |
Browser Support
JavaScript 2017 is supported in all modern browsers since September 2017 :
| Chrome 58 | Edge 15 | Firefox 52 | Safari 11 | Opera 45 |
|---|---|---|---|---|
| Apr 2017 | Apr 2017 | Mar 2017 | Sep 2017 | May 2017 |
JavaScript String Padding
ECMAScript 2017 added two string methods to JavaScript: padStart() and padEnd() to support padding at the beginning and at the end of a string.
Examples
let text = "5";
text = text.padStart(4,0);JavaScript Object Entries
ECMAScript 2017 added the Object.entries() method to objects.
Object.entries() returns an array of the key/value pairs in an object:
Example
const person = {
firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.entries(person);Object.entries() makes it simple to use objects in loops:
Example
const fruits = {Bananas:300, Oranges:200, Apples:500};
let text = "";
for (let [fruit, value] of Object.entries(fruits)) {
text += fruit + ": " + value + "<br>";
}Object.entries() also makes it simple to convert objects to maps:
Example
const fruits = {Bananas:300, Oranges:200, Apples:500};
const myMap = new Map(Object.entries(fruits));JavaScript Object Values
Object.values() is similar to Object.entries() , but returns a single dimension array of the object values:
Example
const person = {
firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue"
};
let text = Object.values(person);JavaScript Async Functions
Waiting for a Timeout
async function myDisplay() {
let myPromise = new Promise(function(myResolve, myReject) {
setTimeout(function() { myResolve("I love You !!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
myDisplay();JavaScript Trailing Commas
JavaScript allows trailing commas wherever a comma-separated list of values is accepted.
In Array and Object Literals, Function Calls, Parameters, Imports and Exports.
Example
function myFunc(x,,,) {};
const myArr = [1,2,3,4,,,];
const myObj = {fname: John, age:50,,,};The Object.getOwnPropertyDescriptor() Method
Object.getOwnPropertyDescriptors() returns all own property descriptors of a given object.
Example
const myProp = Object.getOwnPropertyNames(person);Example
const myProp = Object.getOwnPropertyDescriptors(person);A property descriptor is an object that describes all attributes of a property:
- value: The property's value
- writable: true if the property value can be changed
- enumerable: true if the property will show up in loops (for...in, Object.keys())
- configurable: true if the property descriptor can be changed or deleted
- get: Function to get the property value (for accessor properties)
- set: Function to set the property value (for accessor properties)
Object Cloning
The Object.getOwnPropertyDescriptors() is often used to clone objects while preserving getters, setters, and property attributes:
Example
const clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(person));