Arrow vs. Function notation

Arrow-notatie (=>) en functie-notatie (function) in JavaScript kennen enkele belangrijke verschillen:

• Syntax
• Gedrag met betrekking tot het this-keyword
• Gebruik van het arguments-object.
• Constructor functies

• Syntax
  • Function-notation
  • Arrow-notation
• this-keyword
  • Function-notation
  • Arrow-notation
• arguments-keyword
  • Function-notation
  • Arrow-notation
• new-keyword
  • Function-notation
  • Arrow-notation

Syntax

Function-notation

function add(a, b) {
  return a + b;
}

Arrow-notation

const add = (a, b) => {
  return a + b;
};

Tip

Met de arrow-notation kunnen we het return keyword laten vallen. Dit kan door gebruik te maken van ‘ronde haakjes’ () of door geen haakjes te gebruiken. Haakjes weglaten mag enkel wanneer het return-statement op éen lijn kan.

const add = (a, b) => a + b;

// prettier-ignore
const add = (a, b) => (
    a + b
);

this-keyword

Het this-keyword in JavaScript verwijst naar het huidige uitvoeringscontext, met andere woorden, naar het object waartoe de code behoort. De waarde van this hangt af van hoe een functie wordt opgeroepen.

console.log(this); // Verwijst naar het globale object (bijvoorbeeld 'window' in een browser)

Function-notation

Het this-keyword in functies is dynamisch gebonden en verwijst naar het object waarop de functie wordt aangeroepen. Als de functie op het hoogste niveau wordt aangeroepen, kan this verwijzen naar het globale object (bijvoorbeeld window in een browseromgeving).

const person = {
  name: "John",
  greet: function () {
    console.log(`Hallo, ${this.name}!`);
  },
};

person.greet(); // Verwijst naar het 'person'-object

Arrow-notation

Arrow-functies behouden het this-keyword van de omliggende context. Ze hebben geen eigen this-binding, wat betekent dat ze het this-keyword van de omliggende scope overnemen.

const person = {
  name: "John",
  greet: () => {
    console.log(`Hallo, ${this.name}!`);
  },
};

person.greet(); // Verwijst naar het globale object (niet naar 'person')

arguments-keyword

Function-notation

Functies hebben toegang tot het arguments-object,een object dat alle argumenten bevat die aan de functie zijn doorgegeven.

function exampleFunction() {
  console.log(arguments);
}

Arrow-notation

Arrow-functies hebben geen eigen arguments-object. Als toegang tot de argumenten nodig is, moet je de rest parameters gebruiken (...args) in de parameterslijst.

const exampleArrow = (...args) => console.log(args);

new-keyword

Function-notation

Functies die zijn gedefinieerd met function kunnen worden gebruikt als constructorfuncties met het new-keyword om nieuwe objecten te maken.

// Functie-notatie als constructor
function Person(name) {
  this.name = name;
}

const john = new Person("John"); // Werkt zoals verwacht

Arrow-notation

Arrow-functies kunnen niet worden gebruikt als constructorfuncties met het new-keyword. Ze hebben geen eigen this, wat nodig is voor het initialiseren van nieuwe objecten.

// Arrow-notatie kan niet worden gebruikt als constructor
const PersonArrow = (name) => {
  this.name = name; // Dit zal een fout veroorzaken
};

const john = new Person("John"); // Foutmelding