In Juni 2015 is er een grote update geweest met een hoop nieuwe functies in Javascript, waaronder arrow functions, class destruction en template strings. Vandaag gaan we kijken naar de belangrijkste en meest handige functies in deze update.
LET OP oude browsers ondersteunen geen ES6 syntax, om de ES6 syntax te gebruiken moet je gebruik maken van een transpiler die de ES6 syntax omzet in leesbare Javascript code.
De belangrijkste updates
Block-scoped let en const
ES6 introduceerde de keywords let
en const
om variabelen te declareren. Hiervoor maakten wij gebruik van het keyword var
die functioneel scoped beschikbaar is, dit betekent dat wanneer we een var
variabele aanmaken in een function()
deze alleen te gebruiken is binnen onze functie.
Variabelen die aangemaakt zijn met de keyword let
of const
stellen ons in staat om te gebruiken in een block, dit betekent dat deze alleen toegankelijk zijn binnen een block waar ze zijn aangemaakt. Const
is ongeveer hetzelfde, maar de waarde van de variabele kunnen niet meer** gewijzigd worden!
let x = 'Global';
if(x === 'global') {
let x = 'Block-scoped';
console.log(x);
//Output: Block-scoped
}
console.log(x);
//Output: Global
var y = 'Global';
if(y === 'global') {
var y = 'Block-scoped';
console.log(y);
//Output: Block-scoped
}
console.log(y);
//Output: Block-scoped
Er zijn geen specifieke regels wanneer welke keyword je moet gebruiken, maar hier zijn een aantal gedachten over van verschillende developers:
Gebruik standaard const, en let wanneer rebinding nodig is, var zou nooit gebruikt moeten worden in ES6.
Gebruik var voor top-level variabelen die gedeeld worden over meerdere scopes. Gebruik let voor kleinere scopes
Voor meer informatie over het gebruik van variabelen, comments en de console kan je deze handige tutorial bekijken : https://www.devnl.nl/d/325-variabelen-comments-en-de-console-javascript-voor-beginners
Arrow functions
ES6 introduceerde arrows ( => )
als verkorting om functie te declareren. Deze update heeft 3 voordelen :
- De code heeft geen
.bind()
methode meer nodig
- De code is beter te lezen en is korter
- De
return
functie kan geskipt worden
Er zijn een paar gevallen waar je niet de arrow functies wilt gebruiken. Je moet erg goed oppassen wanneer je dit gebruikt met de this
keyword. Waarom? Omdat wanneer deze gezamenlijk gebruikt worden de this
keyword geërfd word van de parent scope.
Hier is een voorbeeld van hoe de arrow functie werkt.
const welcome = (name) => {
console.log(`Welkom ${name}`);
}
Andere updates in ES6
- Additional string methods
- Destructuring
- Array updates
- Symbols
- Promises
- Standaard function arguments, met standaard parameters en values.
- Generator
- Proxies
- Object literal updates
- Sets, Weaksets, Maps en Weakmaps
De belangrijkste updates in ES2016
ECMAScript 2016 of ES7 bracht twee belangrijke updates mee voor ES6 die belangrijk zijn om een moderne Javascript programmeur te zijn.
Array.prototype.includes()
De .includes()
method maakt het makkelijker om een specifieke waarde op te slaan in een array. Hiervoor maakte wij altijd gebruik van de indexOf
en moesten we een nieuwe functie aanmaken. Maar de .include()
method returned true als de array de waarde bevat en false wanneer dit niet zo is. Hierbeneden een voorbeeld van hoe dit in zijn werking gaat :
let array = [1,6,7,9];
console.log(array.includes(6)); //True
console.log(array.includes(8)); //False
Exponential operator
De exponential operator versimpeld de manier van rekenkundige functies in Javascript. Voorheen moest er altijd gebruik gemaakt worden van een loop, recursive functions, of Math.pow()
, wat op den duur behoorlijk rommelig kon worden voor elke concatenation. Dit is hoe we het tegenwoordig kunnen oplossen :
//Oude manier
console.log(Math.pow(2,2));
//Nieuwe manier
console.log(2**2);
De belangrijkste ES2017 updates
Object.entires()
en Object.values()
Dit zijn de twee nieuwe manieren om toegang te krijgen tot bestaande objecten, waarbij enkele beperkingen van Object.keys()
worden opgelost, die alleen maar de key waarde returned van ons object. Object.values()
laat ons nu toestaan om de waarden te returnen als een array en Object.entries()
returned de array met zowel de keys en de values.
const car = {
brand: 'Audi',
type: 'a3',
color: 'black',
}
console.log(Object.values(car));
//["Audi", "a3", "black"]
console.log(Object.entries(car));
//["brand", "Audi"]
//["type", "a3"]
//["color", "black"]
Async en Await
De ES8 update biedt een alternatief voor zogeheten callbacks en Promise en gebruikt veel beheersbare syntax. Met de Async functie kunnen we een asynchone functie definiëren en een Promise returnen. De .await()
operator wacht op een Promise binnen de Async functie.
function myResolveFunction() {
return new Promise(resolve => {
setTimeout(() => {
resolve('Done');
}, 2000)
})
}
async function asyncCall() {
console.log('Calling ...');
const result = await myResolveFunction();
console.log(result);
}
asyncCall();
Laten we de code eens bekijken.
- We maken een async functie aan met de
async
keyword.
- Dit returned een Promise die moet wachten op een waarde.
- De
await
keyword werkt alleen binnenin een async functie. Deze zorgt voor de waarde waar de Promise op wacht.
De belangrijkste ES2018 updates
Rest / Spread voor objecten
Deze functie is gebaseerd op updates van ES6, zodat we rest/spread operatoren kunnen gebruiken voor onze objecten.
Met de spread operator kunnen we een kloon van een object maken, zodat we het originele object gemakkelijker kunnen wijzigen. Deze functie mag aan het einde niet worden gebruikt, anders zal er een fout optreden!
let myObj = {
a: 1,
b: 3,
c: 5,
d: 7,
}
//We gebruiken de rest operator om alle andere waarden de tonen die niet gebruikt zijn.
let {a, b, ...z} = myObj;
console.log(a) // 1
console.log(b) // 3
console.log(z) //{c: 5, d: 7}
//We gebruiken de spread operator om een object te klonen
let clone = { ...myObj }
console.log(clone); // { a: 1, b: 3, c: 5, d: 7 }
myObj.e = 15;
console.log(clone); // { a: 1, b: 3, c: 5, d: 7 }
console.log(myObj); // { a: 1, b: 3, c: 5, d: 7, e: 15 }
Asynchronous iteration
Met de update kunnen we de await
gebruiken om asynchrone lussen te maken als de gegevens afkomsting zijn van een asynchrone functie. We gebruiker de for-await-of
om de iterables om te zetten in een Promise. De documentatie legt uit dat "een asynchrone iterator veel op een iterator lijkt, behalve dat de methode next() een belofte returned door een {value, done} paar". Hieronder een voorbeeld om te kijken hoe de functie werkt
const myArray = [1,2,3];
async function iterateFunction() {
for await (const value of myArray) {
console.log(value);
}
}
iterateFunction();
// 1
// 2
// 3
EINDEEE
Nu je weer een beetje op de hoogte bent van bijna alle Javascript updates van de afgelopen jaren. Valt er nog veel te leren voor de juiste toepassingen van de functionaliteiten en hulpmiddelen, gebruik daarom deze functies om up-to-date te blijven en zorg ervoor dat je ook de nieuwe updates in de gaten houdt!