JavaScript-update ES6

18 mei 2017 Inzichten / JavaScript-update ES6

JavaScript is nog altijd een van de belangrijkste scripttalen in webdevelopment. De nieuwe versie van JavaScript - met de naam ES6 of ES2015 - is de grootste update sinds de release. In deze technische blogpost gaan we dieper in op enkele interessante features in die update.

Wat is ES6?

ES6 is de zesde en grootste update van JavaScript sinds de initiële release. De naam van de release is later veranderd naar ES2015 om aan te geven in welk jaar de release gestandaardiseerd werd. Helaas worden ES6 en ES2015 vaak door elkaar gebruikt, maar het gaat dus wel degelijk om dezelfde release. Omdat ES6 de meest bekende naam is, gebruiken we die verder in deze blogpost.

Wat is nieuw in ES6?

ES6 biedt een aantal interessante nieuwigheden. We belichten hier enkele nieuwe features.

Variabelen declareren

Er zijn 3 nieuwe manieren om variabelen te declareren in JavaScript, namelijk var, let en const. Let en const zijn nieuw in ES6 en hebben een aantal eigenschappen die het interessant maken om ze te gebruiken. Om het verschil beter te kunnen uitleggen kijken we even kort naar var. Var kan opnieuw geïnitialiseerd en gedeclareerd worden.

var width = 200;
console.log(width); // 200

// opnieuw initialiseren
width = 300;
console.log(width); // 300

// opnieuw declareren
var width = 400;
console.log(width); // 400

Het opnieuw declareren van een variabele is niet iets wat je normaal zou doen, maar het kan gebeuren dat je geen inspiratie meer hebt voor nieuwe namen en per ongeluk dezelfde opnieuw gebruikt. Dat kan zorgen voor vreemde errors en verloren tijd. Een andere eigenschap waar we rekening mee moeten houden is hoe de variabele gescopet is. De scope van een variabele is waar de variabele beschikbaar is. Variabelen zijn gescopet naar een functie, dat wil zeggen dat de variabele enkel beschikbaar zal zijn binnen de functie waar hij gedefinieerd is. Als een variabele niet binnen een functie is gedefinieerd is hij gescopet naar de globale scope ‘window’.

var height = 300;
  
function bar() {
  var width = 200;
  console.log(width); // 200
}
bar();

console.log(width); // undefined
console.log(height); // 300

Buiten de functie is width niet beschikbaar. Je kan de curly brackets vergelijken met poorten. De variabele is niet beschikbaar buiten de poorten. Dat brengt ons tot het grootste verschil tussen let, const en var. Let en const zijn block scopet, een block wordt gedefinieerd door curly brackets. De let en const variabelen zijn enkel beschikbaar binnen de block waarin ze gedefinieerd zijn. Let en const zijn dus nooit beschikbaar buiten de scope waarin ze gedefinieerd zijn en zijn daardoor veiliger om te gebruiken. Verder kunnen we let en const maar 1 keer declareren binnen dezelfde scope. Het enige verschil tussen let en const is dat let geüpdatet kan worden, terwijl const niet kan veranderen.

let width = 200;
width = 300;

const sleutel = 'abc123';
sleutel = 'abc1234'; // TypeError 

Er zijn verschillende theorieën over welk type je het best zou gebruiken. Het meest logisch volgens ons is als volgt:

  • Gebruik altijd const
  • Gebruik let enkel als de variabele geüpdatet moet worden
  • Nooit var gebruiken

Verbeteringen van function in ES6

ES6 laat het toe om functies veel korter te schrijven met de ‘fat arrow’.

function telop(nummer1, nummer2) {
  return nummer1 + nummer2;
}

let telop = (nummer1, nummer2) => {
  return nummer1 + nummer2;
}

Hier zie je een voorbeeld met maar 1 lijn code die direct een actie uitvoert en returnt, dat kunnen we nog korter schrijven met een impliciete return.

let telop = (nummer1, nummer2) => nummer1 + nummer2;

Bij een impliciete return schrijven laten we het return keyword vallen, zo kan een functie op een compactere manier geschreven worden.

Een andere verbetering van functies is default parameters. Het was vroeger behoorlijk vervelend om telkens te checken of je variabele werd meegegeven en zo niet om ze te declareren. Je code zag er misschien zo uit.

function bar(parameter1, parameter2, parameter3) {
  if(parameter1 === undefined) {
    parameter1 = 'a';
  }
  if(parameter2 === undefined) {
    parameter2 = 'b';
  }
  if(parameter3 === undefined) {
    parameter3 = 'c';
  }
  ...
}

Dit zou er in ES6 zo uit zien

function bar(parameter1 = 'a', parameter2 = 'b', parameter3 = 'c') {
  ...
}

Je vraagt je misschien al af hoe het mogelijk is om parameter1 en 3 mee te geven en parameter2 default te laten?

bar('d', undefined, 'e');

Door undefined mee te geven wordt de default waarde gebruikt.

Nieuwigheden op vlak van classes

Er zijn 2 manieren om een class te maken, de ‘class declaration’ en ‘class expression’.

//class declaration
class Hond {}

//class expression
const Hond = class {}

De meest gebruikte manier om een class aan te maken is de class declaration. 

Een class heeft een constructor, die wordt uitgevoerd als er een nieuwe instantie wordt aangemaakt van die class.

class Hond {
  constructor(ras, geslacht) {
    this.ras = ras;
    this.geslacht = geslacht;
  }
}

const persoon = new Persoon(24, '180');

classes kunnen getters en setters hebben.

class Persoon {
  get bijnaam() {
    return this.bijnaam;
  }

  set bijnaam(value) {
    this.bijnaam = value;
  }
}

classes kunnen overerven van elkaar via super. Dus alle eigenschappen die moeten doorgegeven worden aan de parent worden doorgegeven via super().

class Dier {
  constructor(naam) {
    this.naam = naam; 
  }
}

class Hond extends Dier {
  constructor(naam, ras) {
    super(naam);
    this.ras = ras;
  }
}

ES6 modules.

Een van de meest interessante features voor ES6 zijn de modules. ES6 laat toe om eigen modules te schrijven en die te importeren en te exporteren. Zo kan je de logica van je app opsplitsen in verschillende modules en die dan inladen als ze nodig zijn. Een module exporteren kan er zo uitzien.

export function helloWorld(string) {
  console.log(string);
}

Er bestaan verschillende manieren om modules te exporteren, hiervoor verwijzen we graag naar de documentatie van MDN.

Modules importeren die je zelf geschreven hebt of van een externe plugin zou er zo kunnen uitzien.

import $ from 'jquery';

Er zijn verschillende manieren om modules te importeren, ook hier verwijzen we naar de documentatie van MDN.

Jammer genoeg worden ES6 modules nog niet ondersteund door de meeste browsers. We hebben dus een oplossing nodig die de modules kan inladen en bundelen. Webpack is een heel populaire tool hiervoor, maar het vergt een beetje configuratiewerk. Het principe is vrij eenvoudig. Je definieert een entry file - bv app.js - en een output file - bv bundle.js. Webpack gaat zo alle modules bundelen in bundle.js.

Object georiënteerd vs functioneel programmeren

Om javascript beter te begrijpen, is het belangrijk te weten wat functioneel programmeren precies inhoudt. We vergelijken het hier met object georiënteerd programmeren om het duidelijk te maken. 

Object georiënteerd programmeren focust zich op het definiëren van objecten. Je definieert de objecten op basis van wat een object is. Laten we als voorbeeld een object definiëren.

let Dog = {}

Het object kan een aantal eigenschappen hebben, zoals lengte, leeftijd, geslacht. Die eigenschappen bevatten de data van het object.

let Hond = {
  ras: 'beagle',
  geslacht: 'man'
}

Verder kunnen we ook een methode definiëren, zoals stappen, eten, slapen. Deze methodes bepalen de functionaliteit van het object. 

let Hond = {
  ras: 'beagle',
  geslacht: 'man',
  stappen: function() {},
  eten: function() {}
  slapen: function() {}
}

De data wordt dus opgesplitst in logische objecten.

Bij functioneel programmeren denk je meer in de vorm van wat de code moet doen, je definieert een flow voor de data en de kunst is om de functies zo te definiëren dat ze verantwoordelijk zijn voor 1 taak. Zo kan bijvoorbeeld de functie stapNaar bestaan.

function stapNaar(Hond, einde) {
  // zet de positie van de persoon naar eindpositie.
}

Deze functie is enkel verantwoordelijk om een persoon te brengen naar de eindpositie, zo kunnen we alle logica van het programma opsplitsen in verschillende functies. Door het opsplitsen van de logica in allemaal functies die verantwoordelijk zijn voor een bepaalde taak wordt je code heel overzichtelijk en veel beter te onderhouden. JavaScript code functioneel programmeren maakt dat de JavaScript-files veel kleine worden waardoor ze overzichtelijker en makkelijker te onderhouden zijn.

ES6 ondersteuning

Nog niet alle features van ES6 worden ondersteund door alle browsers, maar laat dat je vooral niet tegenhouden om het te gebruiken. Om ervoor te zorgen dat alle browsers onze JavaScript begrijpen, kunnen we de code ‘transpilen’. Dat betekent dat we de gloednieuwe ES6-code gaan vertalen naar oudere ES5-syntax die wel ondersteund wordt door de browsers. Een voorbeeld van zo’n transpiler is Babel. Babel werkt ook goed samen met Webpack.

Conclusie

Met de opkomst van ES6 is javascript als technologie veel aantrekkelijker geworden. Door ES6 kunnen we nieuwe javascript-applicaties schrijven die heel modulair en snel zijn. De code zal bovendien makkelijker te onderhouden worden. Heel veel argumenten dus om ES6 volop te gebruiken.

Ook een passie voor webtechnologie? Maak eens een afspraak.

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!