🟣 Sprint 14 - Annevd/js-fundamentals GitHub Wiki

Array forEach

Als je over items in een array wil loopen of itereren kun je dit doet met een forEach loop:

const grades = [10, 8, 13];

grades.forEach(function(grade) {
    // do something with individual grade
    console.log(grade);
});

De .forEach(callback) method geeft je de mogenlijkheid om de callback functie te runnen voor elk item in die array. Een callback is een functie definitie die doorgegeven wordt als een parameter naar een andere functie.

Bijvoorbeeld:

function(grade) {
    // do something with individual grade
    console.log(grade);
}

Deze callback functie krijgt een 'grade' en logs het naar de console. Dit is een functie definitie omdat het niet uitgevoerd word. Het definieert alleen het gedrag van de functie. Echter is deze functie definitie doorgegeven als een argument naar de .forEach() method:

grades.forEach(insert_callback_here);

Wanneer je de twee combineerd, als in, de functie definitie doorgeven als argument naar de .forEach() method, dan krijg je:

grades.forEach(function(grade) {
    // do something with individual grade
    console.log(grade);
});

En deze code zal elke grade van de grades array loggen naar de console. Dan krijg je:

10
8
13

Dus zo kan je de functie calls visualiseren:

// this is the callback
function(grade) {
    console.log(grade);
}
// call the callback with grade = 10 (grades[0])
console.log(grade); // will log 10
// call the callback with grade = 8 (grades[1])
console.log(grade); // will log 8
// call the callback with grade = 13 (grades[2])
console.log(grade); // will log 13

Zie hoe de functie definitie gecalled wordt voor elk item in de array!

Maar wie called het en verzorgd de verschillende values? Nou, dat doet Javascript! Jij verzorgt de callback (function definition) en geeft het door naar de .forEach() en Javascript doet de rest!

Return confusion

Naming variables

Variabelen een duidelijke naam geven maakt het voor jou en anderen veel makkelijker om de code te begrijpen. Vooral met itereren.

Het is dus altijd een goed idee om meervoud voor de array te gebruiken, en enkelvoud voor een item van de array.

Bijvoorbeeld:

• grades => item is grade
• people => item is person

Hier is een code voorbeeld:

const grades = [10, 14, 15]; // array (plural)
grades.forEach(function(grade) { // array item (singular)
    console.log(grade);
});


const people = ["Sam", "Alex"]; // array (plural)
people.forEach(function(person) { // array item (singular)
    console.log(person);
});

Returning from loop

Er is een vaak gemaakte fout die voorkoomt wanneer je een return probeert vanuit een functie die een forEach call bevat. Dat is omdat er 2 functies zijn. Laten we zeggen dat je deze functie hebt:

function logUserIds(userIds) {
    userIds.forEach(function(userId) {
        console.log(userId);
    });
}

En je wilt dat deze functie 'true' teruggeeft wanneer het klaar is. Waar plaats je de return true?

Het return keyword geeft terug van zijn eigen functie. Dit is dus het antwoord:

function logUserIds(userIds) {
    userIds.forEach(function(userId) {
        console.log(userId);
    });
    return true; // ✅ return from the logUserIds function
}

Nog een voorbeeld:

function logGrades(grades) {
    grades.forEach(function(grade) {
        console.log(grade);
        return 10;
    });
    return 20;
}

Zal de functie 10 of 20 returnen?:

De functie zal 20 returnen omdat het returned vanuit de buitenste functie.