⚪ Sprint 17 - Annevd/js-fundamentals GitHub Wiki

Arrays II & Callbacks

Array find

Wanneer je de .find(callback) method op een array aanroept, krijg je het eerste item terug dat overeenkomt met de door jou opgegeven voorwaarde. Als er geen items zijn gevonden, krijg je undefined terug.

Voorbeeld:

const names = ["Sam", "Alex", "Charlie"];

const result = names.find(function(name) {
  return name === "Alex";
});
console.log(result); // "Alex"

De callback controleert of name === "Alex" is. Bij het eerste item dat voldoet ("Alex") stopt .find() met zoeken en retourneert dit item.

Voorbeeld met getallen:

const numbers = [9, 5, 14, 3, 11];

const firstNumberAboveTen = numbers.find(function(number) {
  return number > 10;
});
console.log(firstNumberAboveTen); // 14

Hier voldoet 14 als eerste aan de conditie number > 10, dus stopt .find() met zoeken.

Verschil tussen `.filter() en` .find()

.filter() retourneert altijd een array, zelfs als geen enkel item voldoet (de array is dan leeg).
.find() retourneert alleen het eerste item dat aan de conditie voldoet, of undefined als er geen match is.

Bijvoorbeeld:

const numbers = [9, 5, 14, 3, 11];

// .filter() retourneert een array
console.log(numbers.filter(function(number) {
  return number >= 12;
})); // [14]

// .find() retourneert het eerste matchende item
console.log(numbers.find(function(number) {
  return number >= 12;
})); // 14

Als geen enkel item voldoet:

const numbers = [9, 5, 14, 3, 11];

// .filter() retourneert een lege array
console.log(numbers.filter(function(number) {
  return number >= 15;
})); // []

// .find() retourneert undefined
console.log(numbers.find(function(number) {
  return number >= 15;
})); // undefined

Belangrijkste verschillen:

Returns:

.filter(): altijd een array.
.find(): het eerste matchende item of undefined.

Zoekproces:

.find() stopt zodra een match is gevonden.
.filter() controleert alle items en verzamelt alle matches in een array.

More array methods

Array map

De .map(callback)-methode stelt je in staat om een array te transformeren naar een andere array.

Voorbeelden:

[4, 2, 5, 8] getransformeerd naar [8, 4, 10, 16]. We hebben elk item in de originele array verdubbeld.
["sam", "Alex"] getransformeerd naar ["SAM", "ALEX"]. We hebben elk item in de originele array naar hoofdletters omgezet. Let op dat je altijd een array terugkrijgt met hetzelfde aantal items als de originele array, maar elk item is hoogstwaarschijnlijk op een of andere manier getransformeerd.

In het eerste voorbeeld is de transformatie dat we elk getal vermenigvuldigen met 2. In het tweede voorbeeld is de transformatie dat we .toUpperCase() aanroepen op elk item.

Laten we eens kijken hoe we deze transformaties kunnen implementeren:

const numbers = [4, 2, 5, 8];

const doubled = numbers.map(function(number) {
    return number * 2;
});
console.log(doubled); // [8, 4, 10, 16]

const names = ["sam", "Alex"];
const upperNames = names.map(function(name) {
    return name.toUpperCase();
});

Als je vergeet om iets te returnen binnen de callback-functie, eindig je met de volgende array: [undefined, undefined]. Dit komt omdat je voor elk item in de originele array (["sam", "Alex"]) undefined returnt, waardoor het eindresultaat [undefined, undefined] wordt.

Zodra je deze fout een paar keer maakt, wordt het een duidelijke aanwijzing dat je het return-keyword bent vergeten.

Array includes(item)

De array-methode .includes(item) is een van de eenvoudigste array-methodes, omdat deze een item accepteert in plaats van een callback. De methode retourneert true als dat item in de array aanwezig is, en anders false.

Voorbeeld:

const groceries = ["Apple", "Peach", "Tomato"];

groceries.includes("Tomato"); // true
groceries.includes("Bread");  // false

Array join(glue)

Wanneer je een array hebt en deze weergeeft op een webpagina, wordt de array automatisch omgezet in een string. JavaScript roept automatisch de .toString()-methode van de array aan, die een string retourneert met de array-elementen gescheiden door komma's.