What’s new in ES2018?

The up­dated spec­i­fi­ca­tion brings lots of use­ful prop­er­ties, meth­ods and gen­eral im­prove­ments ready to use right in the browser

Web Designer - - Javascript: What’s New? -

In Jan­uary, the fi­nal list of fea­tures for ES2018 was con­firmed. While this means they will form part of the lat­est stan­dard, they will typ­i­cally be im­ple­mented by browser ven­dors at dif­fer­ent times. Here are some of the high­lights of this year’s up­dates.

Spread­ing ob­jects

ES2015 brought ‘rest’ pa­ram­e­ters to Javascript. By us­ing the ‘…’ no­ta­tion on the last pa­ram­e­ter of a func­tion it can cap­ture any fur­ther ar­gu­ments. This can be use­ful for open-ended func­tions that can com­bine any num­ber of passed val­ues. The same no­ta­tion can be used to ex­pand ar­ray val­ues into other places with a tech­nique called ‘spread­ing’. It of­ten gets used to copy or com­bine ar­rays to­gether. const orig­i­nal = { x: 4, y: 5 }; const copy = { …orig­i­nal } In the lat­est spec­i­fi­ca­tion, the same can be ap­plied to ob­jects to make copy­ing shal­low ob­jects eas­ier. This comes in handy when striv­ing for im­mutabil­ity in frame­works like Redux. This fea­ture is avail­able in all the lat­est browsers apart from Edge.

Asyn­chro­nous it­er­a­tion

An­other fea­ture in­tro­duced in ES2015 was the con­cept of an it­er­a­tor. At a higher level, it­er­a­tors are any ob­ject with a ‘next’ method that re­turns both the next value in a se­quence as well as a ‘done’ value to note when there are no more val­ues to it­er­ate. for await (const data of getit­er­able­data()) {

con­sole.log(data);

} The new asyn­chro­nous it­er­a­tors work in a sim­i­lar way, but in­stead of re­turn­ing an ob­ject with the value and a ‘done’ flag, it re­turns a prom­ise that re­solves with those val­ues. By com­bin­ing this with the ‘await’ key­word from ES2017 it’s now pos­si­ble to loop over asyn­chro­nous it­er­able ob­jects. This can be es­pe­cially use­ful when deal­ing with large re­mote files, such as videos. Right now, it’s sup­ported in the lat­est ver­sions of Chrome, Fire­fox and desk­top Sa­fari.

Clean up prom­ises

Prom­ises that suc­ceed can be chained by us­ing the ‘then’ method. If any is­sues arise it jumps to the next use of the ‘catch’ method. To ex­e­cute the same code in both cases, it needs to be du­pli­cated in each block. In ES2018, the ‘fi­nally’ method pro­vides a place to add such logic. showspin­ner(); fetch(“data.json”) .then(/*process json*/) .er­ror(/*process er­ror*/) .fi­nally(() => hidespin­ner()); By plac­ing logic that al­ways has to run in­side ‘fi­nally’ it will run re­gard­less of the state of the prom­ise. This keeps the other blocks clean and well and truly fo­cused on one job. This fea­ture has landed in the lat­est ver­sions of all browsers ex­cept Edge, where it will be re­leased soon.

The new asyn­chro­nous it­er­a­tors work in a sim­i­lar way, but in­stead of re­turn­ing an ob­ject with the value and a ‘done’ flag, it re­turns a prom­ise that re­solves with those val­ues

Newspapers in English

Newspapers from UK

© PressReader. All rights reserved.