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!