Note to self: Leer meer over ES6 functions:

ES6 Functions

ES6 heeft veel nieuwe manieren om functions te decladeren:

Arrow Functions / fat arrow

Met => maak je een arrow function. Ze zijn anoniem en zorgen er voor dat 'this' anders gebind wordt in functions Met arrow functions hoeven we niet meer function, return en curly brackets {} te schrijven.

Voorbeelden:

// ES5
var multiplyES5 = function(x, y) {
  return x * y;
};

// ES6
const multiplyES6 = (x, y) => { return x * y };

// ES6 next level
const multiplyES6 = (x, y) => x * y;

Je geeft hier dus als het waarde eerst de variable, zoals normaal, maar dan in plaats van function te schrijven, schrijf je alleen de parameters. Vervolgens typ je de arrow, =>, en schrijf je je expression. Voor de expression hoeven we geen return meer te schrijven. Dit doet de arrow al uit zichzelf. Verder kunnen we de curly brackets ook weglaten. Dit is ook niet meer nodig. Op die manier worden de functions een stuk korter. Het ziet er ingewikkeld uit, maar het valt best mee hoe ingewikkeld het nu echt is.

Wanneer er maar 1 parameter is, hoeven we de () ook niet echt meer te gebruiken. Die laten we dan ook weg.

const phraseSplitterES6 = phrase => phrase.plit(" ");

Maar wanneer er helemaal geen parameters zijn, zijn () nog wel nodig voor de leesbaarheid en de arrow function

var docLogEs6 = () => console.log(document);

Om het verschil te zien tussen een object en een block content, gebruik de {}:

//ES5
var setNameIdsEs5 = function setNameIds(id, name) {
  return {
    id: id,
    name: name
  };
};

// ES6
var setNameIdsEs6 = (id, name) => ({ id: id, name: name });

Wanneer je een object wilt omzetten naar een array, gebruiken we map. In ES6 kan dit ook met de arrow function

const smartPhones = [
  { name:'iphone', price:649 },
  { name:'Galaxy S6', price:576 },
  { name:'Galaxy Note 5', price:489 }
];

// ES5
var prices = smartPhones.map(function(smartPhone) {
  return smartPhone.price;
});
console.log(prices); // [649, 576, 489]

//***************************************

// ES6
const prices = smartPhones.map(smartPhone => smartPhone.price);
console.log(prices); // [649, 576, 489]

Hier gebruiken we dus wel weer de () aangezien we een function (map) gebruiken. De parameter heeft geen () nodig aangezien daar maar 1 van is.

Als laatste hebben we nog de promises. Met promises gebruiken we bijvoorbeeld then en done. Als iets gelukt is, then (doe dan)... Dit kan nu ook korter op 1 regel met behulp van de arrow functions

// ES5
aAsync().then(function() {
  returnbAsync();
}).then(function() {
  returncAsync();
}).done(function() {
  finish();
});

// ES6
aAsync().then(() => bAsync()).then(() => cAsync()).done(() => finish);

Bron

---

Higher order functions

Simpelgezegd zijn higher order functions, functions die in een andere function zitten.

Deze functions kunnen hier volledig in zitten. Zoals

function greaterThan(n) {
  function lesserThan(m){
    return m => m > n;
  }
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true

Een function kan ook een andere bestaande function aanpassen. Dan is deze function die de andere function aanpast, ook een higher function

function noisy(f) {
  return (...args) => {
    console.log("calling with", args);
    let result = f(...args);
    console.log("called with", args, ", returned", result);
    return result;
  };
}
noisy(Math.min)(3, 2, 1);
// → calling with [3, 2, 1]
// → called with [3, 2, 1] , returned 1

Bron: Higher order Functions Bron: Higher-order functions + filter

Loopings

De for loop ken ik al een tijdje sinds Java. Maar er zijn nu ook andere manieren om te loopen. Sinds ES5 is er de forEach loop voor arrays:

myArray.forEach(function (value) {
  console.log(value);
});

Nadeel van de forEach is dat je er niet uit kunt loopen bij een specifieke index. Dit kan dan weer wel bij de for-in loop. Maar die gebruiken we niet! De index wordt omgezet in een string. For-in loop is ontworpen voor oude objects met string keys

for (var index in myArray) {    // don't actually do this
  console.log(myArray[index]);
}

For-in kan dus gebruikt worden als je over object's properties wilt loopen. Of, je kunt de ingebouwde Object.keys() gebruiken:

// dump an object's own enumerable properties to the console
for (var key of Object.keys(someObject)) {
  console.log(key + ": " + someObject[key]);
}

Mocht je daarna nog vastlopen, kun je altijd nog de normale for-loop gebruiken

While

Naast de for-loops, hebben we ook nog de while-loopjes. Zo hebben we de normale:

while (i < 10) {
  text += "The number is " + i;
  i++;
}

Maar ook de do / while:

do {
  // code block to be executed
}
while (condition);

Higher Order Functions Loopings

Voor objects hebben we ook speciale higher order functions loopings. Namelijk map, filter en reduce Bij map loop je over alle items en creeër je gelijk een array met 1 eigenschap van het object. Zo kunnen alle children van de object de eigenschap name. Je kunt dan met map makkelijk een nieuwe array maken waarbij je in de function in de map aangeeft dat je alleen de name-eigenschap meeneemt.

//ES5
let dogs = animals.filter(function(animal){ //call the map and create a function inside map
  return animal.species // specify which property-type should be added to the new array
})

//ES6
let dogs = animals.filter(animal => animal.species)

Bij filter kun je over de array loopen waarbij je gelijk een nieuwe array kan maken. Met de nieuwe array kun je dan aan de hand van filter gelijk aangeven welke eigenschappen wel of niet toegevoegd moeten worden aan de nieuwe array. Dit kan dus, met arrow functions, op 1 rij.

//ES5
let dogs = animals.filter(function(animal){ //call the filter and create a function inside filter
  return animal.species === 'dog' // specify which properties should be added to the new array
})

//ES6
let dogs = animals.filter(animal => animal.species === 'dog')

Bij reduce tja... die snap ik niet echt

let array = animals.reduce(())

Bron1: for Bron2: while Bron3: map Bron4: Higher-order functions + filter