JS anno 2016: starten met ES2015

-

Al een flinke tijd is het mogelijk en steeds meer frontenders beginnen er aan: javascript schrijven op de ES2015 manier. Eerder was ES2015 ook wel bekend onder de naam ES6, maar omdat de TC39 groep wil aangeven dat er jaarlijks een update zal gaan komen is er gekozen voor het jaartal in de naam. De grote javascript update is sinds juni 2015 officieel en dat was geen overbodige luxe, want de laatste grote javascript update voor ES2015 dateert uit het jaar 2009.

Hoewel ES2015 al veel gebruikt wordt, ondersteunen nog niet alle browsers deze nieuwe versie van javascript. Maar: waar een wil is, is een weg. Of, in dit geval: waar ES2015 code geschreven is, is er een transformer. Hiervoor zijn er verschillende mogelijkheden, maar de meest bekende is zonder twijfel Babel.
Babel geeft je de mogelijkheid om je javascript op de ES2015 manier te schrijven en vertaalt deze code door naar ‘old fashioned’ javascipt. Win win dus: de developer kan ES2015 schrijven en browsers die geen ES2015 ondersteunen kunnen de javascript ‘gewoon’ uitvoeren. Bovendien kun je Babel toevoegen aan je geautomatiseerde bouw-processen en is het enige wat je nog hoeft te doen ES2015 code te schrijven. Enkele highlights om mee te starten:

Let op: nieuwe variabelen

Het eerste wat opvalt in de meeste ES2015 code is dat je nog maar weinig var voorbij zal zien komen. Het delareren van een variabele wordt in ES2015 gedaan met let en const. Ze lijken erg veel op var met 1 verschil: de block scoping.

Een simpel voorbeeldje geeft je een beter beeld:

for (var i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i); // 10;

Op de var manier kun je ook buiten de for loop i nog aanroepen en zal dit ‘10’ geven.

for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log(i);

Bij de let manier zie je de block scoping in werking. Binnen de for-loop wordt i netjes gelogd, maar het aanroepen van i buiten de for-loop zal een Uncaught Reference error geven met de mededeling dat i nog niet defined is.
Naast met let kunnen er ook variabelen aangemaakt worden met const (wat voor ‘constant’ staat). Deze werkt bijna hetzelfde als let met één uitzondering: wanneer een constant ‘gereserveerd’ is, kan de waarde niet meer aangepast worden. Wanneer het een object bevat, kan er geen object meer aan worden toegevoegd. Is het een array? Dan blijft het een array. Meer details hierover kun je lezen in het artikel van Mathias Bynens. Een simpel voorbeeld van wat een const niet toelaat is:

const color = 'blue';
color = 'red';
console.log(color);

Deze code zal een error geven omdat er al eerder een waarde aan color is gegeven.

Template literals

Naast het gebruik van ‘ en “ quotes kan er bij het creeëren van een string in ES2015 ook gebruik gemaakt worden van ` (backtick) quotes. Deze nieuwe manier zorgt ervoor dat het opbouwen van een string met variabelen een stuk gemakkelijker wordt. Vergeet de + en quote ellende. template literals for the win:

let color= `rood`;
let vehicle = `bus`;
let sentence = `Een ${vehicle} in Londen is ${color}`;
console.log(sentence); // "Een bus in Londen is rood"

Behalve het gemakkelijk gebruik maken van variabelen in een string is er nog een groot voordeel van de template literals, zeker wanneer je de string over meerdere regels wilt laten lopen. ‘Vroeger’ moest dit opgelost worden met \n. In ES2015 kan dit een stuk makkelijker:

let multilineString = `Dit is een string 
over meerdere regels`;
console.log(multilineString);

Deze code zal geen problemen geven en de tekst over meerdere regels tonen.

…Spread operators

De spread operator zorgt ervoor dat je een functie aan kunt roepen waarbij de argumenten mee worden gegeven via een array. In de ‘oude’ JS kon je in veel gevallen gebruik maken van  Function.prototype.apply, maar de spread operator maakt dit weer een stuk makkelijker. Een voorbeeldje:

var numbers = [39, 25, 90, 123];
var max = Math.max(numbers);

Max zal in dit geval een NaN teruggeven omdat de Math.max functie een komma gescheiden lijst met getallen verwacht en dus geen array. De spread verhelpt deze uitdaging:

const numbers = [39, 25, 90, 123];
const max = Math.max(...numbers);

Max zal nu netjes 123 teruggeven. En dat alleen maar door het toevoegen van drie puntjes…
Dit is nog maar een klein voorbeeld van wat de kracht van spread operators is. Alle voordelen hiervan passen in een apart blog, welke ik ook van plan ben om te schrijven. Voor nu, nog één trucje die aangeeft hoe makkelijk het samenvoegen van twee arrays is door het gebruik van de spread operator:

const arrayWithNumbers= [1, 2, 3, 4, 5];
const anotherArray = [6, 7, 8];
const concatArray = [...arrayWithNumbers, ...anotherArray];

De concatArray zal nu de waardes [1, 2, 3, 4, 5, 6, 7, 8] bevatten.

Waarom wachten?

De hierboven genoemde voordelen zijn uiteraard nog maar het topje van de ES2015 ijsberg. ES2015 zorgt voor javascript code die een stuk schoner, efficiënter en beter te lezen is. Ook het werken met modules, waarmee delen code gemakkelijk hergebruikt kunnen worden binnen je applicatie, en de promises die je helpen met asynchrone code zijn zomaar een paar voordelen waarom je nu zou moeten beginnen met het schrijven van je javascript in ES2015 mode met Babel.