JavaScript ES7: A crash course on modern JS

Summary — updated April 2022

Babel

One of the biggest changes from ES5 is that ES7 JavaScript is not able to be compiled directly in browsers. We need to use a transpiler called Babel.js to produce compatible JavaScript that the older browsers can read.

Babel allows you to use ES6 features and syntax in your project and then translates it to ES5 so that you can use it in production.

Read: How to: use Babel once your project is built.

The Most Important ES2017 Updates

• ES7 — Object.entires( ) and Object.values( ): Object.values( ) Object.entries( )
• ES7 — Async and Await: .await( )

• ES7 — latest update: async/await: async await

ES7 — Object.entires( ) and Object.values( )

Object.values( ) enables us to return an array of all the values of our Object, and Object.entries( ) returns an array that contains both keys and values.

These are two new ways of accessing our objects, resolving some of the limitations of Object.keys( ), which return only the keys of the object.

const family = { father: “John Smith”,
mother: “Martha Smith”,
daughter: “Sarah Kent”,
}
console.log(Object.values(family));
console.log(Object.entries(family));
// [“father”, “John Smith”]
// [“mother”, “Martha Smith”]
// [“daughter”, “Sarah Smith”]

ES7 — Async and Await

The .await( ) operator waits for a Promise inside the async function. Take a look at the new way of writing this code.

This ES8 update offers an alternative to callbacks and Promise and uses much more manageable syntax. The Async function allows us to define an asynchronous function and return a Promise.

function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve(‘resolved’);
}, 2000);
});
}

async function asyncCall() {
console.log(‘calling’);
const result = await resolveAfter2Seconds();
console.log(result);
}

asyncCall();

• We make an async function with the async keyword
• This will return a Promise
• If we specify to return non-promise, it returns a value wrapped inside a Promise
• The await keyword only works inside an async function

ES7 — latest update: async/await

Async/await helps with writing completely synchronous-looking code while performing asynchronous tasks.

await is used to wait for a promise to resolve or reject, and can only be used inside an asynchronous function.

// The menu
var menu = [‘Hamburger’, ‘Chicken Soup’, ‘Pasta’];

// The following function returns a promise that resolves if the customer
// orders something from the menu:
function order_food (order) {
let promise = new Promise((resolve, reject) => {
if(menu.includes(order)) {
resolve();
}else {
reject(‘This item is not on the menu.’);
}
});
return promise;
}

// The following function returns a promise that resolves if the customer
// pays 20 or more for the food:
function make_payment (payment) {
let promise = new Promise((resolve, reject) => {
if(payment >= 20) {
resolve();
}else {
reject(‘Your order costs 20.’);
}
});
return promise;
}

// await can only be used inside an async function
async function eat(order, payment){
// waiting for the promises to resolve
try{
await order_food(order);
console.log(“Order received by the customer.”);
console.log(“Collect payment.”);
await make_payment(payment);
console.log(“Payment received.”);
}
// Catching errors or rejected promises
catch (error){
console.log(error)
}
}

// Customer places his/her order and specifies the amount to pay
// Play around with these parameters to fully understand what is going on.
eat(“Hamburger”, 20);