16 KiB

Raw Blame History

JavaScript Basis: Arrays en Lussen

Sketchnote door Tomomi Imura

Quiz voor de les

Heb je je ooit afgevraagd hoe websites bijhouden wat er in je winkelwagentje zit of je vriendenlijst weergeven? Dat is waar arrays en lussen van pas komen. Arrays zijn als digitale containers die meerdere stukjes informatie kunnen bevatten, terwijl lussen je in staat stellen om efficiënt met al die data te werken zonder herhalende code.

Samen vormen deze twee concepten de basis voor het verwerken van informatie in je programma's. Je leert hoe je van het handmatig uitschrijven van elke stap kunt overstappen naar het maken van slimme, efficiënte code die honderden of zelfs duizenden items snel kan verwerken.

Aan het einde van deze les begrijp je hoe je complexe datataken kunt uitvoeren met slechts een paar regels code. Laten we deze essentiële programmeerconcepten verkennen.

🎥 Klik op de afbeeldingen hierboven voor video's over arrays en lussen.

Je kunt deze les volgen op Microsoft Learn!

Arrays

Denk aan arrays als een digitale archiefkast - in plaats van één document per lade op te slaan, kun je meerdere gerelateerde items organiseren in één gestructureerde container. In programmeertermen stellen arrays je in staat om meerdere stukjes informatie in één georganiseerd pakket op te slaan.

Of je nu een fotogalerij bouwt, een takenlijst beheert of de topscores in een spel bijhoudt, arrays vormen de basis voor dataorganisatie. Laten we eens kijken hoe ze werken.

✅ Arrays zijn overal om ons heen! Kun je een voorbeeld bedenken van een array in het echte leven, zoals een zonnepaneelarray?

Arrays maken

Een array maken is super eenvoudig - gebruik gewoon vierkante haken!

// Empty array - like an empty shopping cart waiting for items
const myArray = [];

Wat gebeurt hier? Je hebt net een lege container gemaakt met die vierkante haken []. Denk eraan als een lege boekenplank - klaar om te vullen met de boeken die je wilt organiseren.

Je kunt je array ook meteen vullen met beginwaarden:

// Your ice cream shop's flavor menu
const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// A user's profile info (mixing different types of data)
const userData = ["John", 25, true, "developer"];

// Test scores for your favorite class
const scores = [95, 87, 92, 78, 85];

Interessante dingen om op te merken:

Je kunt tekst, getallen of zelfs true/false-waarden in dezelfde array opslaan
Scheid elk item gewoon met een komma - simpel!
Arrays zijn perfect om gerelateerde informatie bij elkaar te houden

Indexering van arrays

Hier is iets dat in het begin misschien ongebruikelijk lijkt: arrays nummeren hun items vanaf 0, niet vanaf 1. Deze nul-gebaseerde indexering heeft zijn oorsprong in hoe computergeheugen werkt - het is een programmeerconventie sinds de vroege dagen van computertalen zoals C. Elke plek in de array krijgt een eigen adresnummer, een index genoemd.

Index	Waarde	Beschrijving
0	"Chocolade"	Eerste element
1	"Aardbei"	Tweede element
2	"Vanille"	Derde element
3	"Pistache"	Vierde element
4	"Rocky Road"	Vijfde element

✅ Verrast het je dat arrays beginnen bij index nul? In sommige programmeertalen beginnen indexen bij 1. Er is een interessante geschiedenis hierover, die je kunt lezen op Wikipedia.

Toegang tot array-elementen:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Access individual elements using bracket notation
console.log(iceCreamFlavors[0]); // "Chocolate" - first element
console.log(iceCreamFlavors[2]); // "Vanilla" - third element
console.log(iceCreamFlavors[4]); // "Rocky Road" - last element

Wat gebeurt hier precies:

Gebruikt vierkante haaknotatie met het indexnummer om elementen te benaderen
Geeft de waarde terug die op die specifieke positie in de array is opgeslagen
Begint te tellen vanaf 0, waardoor het eerste element index 0 heeft

Array-elementen wijzigen:

// Change an existing value
iceCreamFlavors[4] = "Butter Pecan";
console.log(iceCreamFlavors[4]); // "Butter Pecan"

// Add a new element at the end
iceCreamFlavors[5] = "Cookie Dough";
console.log(iceCreamFlavors[5]); // "Cookie Dough"

In het bovenstaande hebben we:

Gewijzigd het element op index 4 van "Rocky Road" naar "Butter Pecan"
Toegevoegd een nieuw element "Cookie Dough" op index 5
Automatisch uitgebreid de lengte van de array bij het toevoegen buiten de huidige grenzen

Lengte van arrays en veelgebruikte methoden

Arrays hebben ingebouwde eigenschappen en methoden die het werken met data veel eenvoudiger maken.

Lengte van een array vinden:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
console.log(iceCreamFlavors.length); // 5

// Length updates automatically as array changes
iceCreamFlavors.push("Mint Chip");
console.log(iceCreamFlavors.length); // 6

Belangrijke punten om te onthouden:

Geeft het totale aantal elementen in de array terug
Wordt automatisch bijgewerkt wanneer elementen worden toegevoegd of verwijderd
Biedt een dynamische telling die handig is voor lussen en validatie

Essentiële array-methoden:

const fruits = ["apple", "banana", "orange"];

// Add elements
fruits.push("grape");           // Adds to end: ["apple", "banana", "orange", "grape"]
fruits.unshift("strawberry");   // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"]

// Remove elements
const lastFruit = fruits.pop();        // Removes and returns "grape"
const firstFruit = fruits.shift();     // Removes and returns "strawberry"

// Find elements
const index = fruits.indexOf("banana"); // Returns 1 (position of "banana")
const hasApple = fruits.includes("apple"); // Returns true

Begrijp deze methoden:

Voegt elementen toe met push() (einde) en unshift() (begin)
Verwijdert elementen met pop() (einde) en shift() (begin)
Vindt elementen met indexOf() en controleert bestaan met includes()
Geeft nuttige waarden terug zoals verwijderde elementen of positie-indexen

✅ Probeer het zelf! Gebruik de console van je browser om een array te maken en te manipuleren die je zelf hebt bedacht.

Lussen

Denk aan de beroemde straf uit Charles Dickens' romans waarin studenten herhaaldelijk zinnen op een lei moesten schrijven. Stel je voor dat je iemand gewoon kunt instrueren om "schrijf deze zin 100 keer" en dat het automatisch wordt gedaan. Dat is precies wat lussen doen voor je code.

Lussen zijn als een onvermoeibare assistent die taken zonder fouten kan herhalen. Of je nu elk item in een winkelwagentje moet controleren of alle foto's in een album moet weergeven, lussen verwerken de herhaling efficiënt.

JavaScript biedt verschillende soorten lussen om uit te kiezen. Laten we ze elk bekijken en begrijpen wanneer je ze moet gebruiken.

For-lus

De for-lus is als het instellen van een timer - je weet precies hoe vaak je wilt dat iets gebeurt. Het is super georganiseerd en voorspelbaar, wat het perfect maakt wanneer je met arrays werkt of dingen moet tellen.

Structuur van een for-lus:

Component	Doel	Voorbeeld
Initialisatie	Stelt beginpunt in	`let i = 0`
Voorwaarde	Wanneer doorgaan	`i < 10`
Increment	Hoe bijwerken	`i++`

// Counting from 0 to 9
for (let i = 0; i < 10; i++) {
  console.log(`Count: ${i}`);
}

// More practical example: processing scores
const testScores = [85, 92, 78, 96, 88];
for (let i = 0; i < testScores.length; i++) {
  console.log(`Student ${i + 1}: ${testScores[i]}%`);
}

Stap voor stap, wat gebeurt er:

Initialiseert de teller-variabele i op 0 aan het begin
Controleert de voorwaarde i < 10 vóór elke iteratie
Voert de codeblok uit wanneer de voorwaarde waar is
Verhoogt i met 1 na elke iteratie met i++
Stopt wanneer de voorwaarde onwaar wordt (wanneer i 10 bereikt)

✅ Voer deze code uit in een browserconsole. Wat gebeurt er als je kleine wijzigingen aanbrengt in de teller, voorwaarde of iteratie-uitdrukking? Kun je het achteruit laten lopen, een aftelling maken?

While-lus

De while-lus is als zeggen "blijf dit doen totdat..." - je weet misschien niet precies hoe vaak het zal draaien, maar je weet wanneer je moet stoppen. Het is perfect voor dingen zoals een gebruiker om input vragen totdat ze je geven wat je nodig hebt, of door data zoeken totdat je vindt wat je zoekt.

Kenmerken van een while-lus:

Blijft uitvoeren zolang de voorwaarde waar is
Vereist handmatig beheer van eventuele teller-variabelen
Controleert de voorwaarde vóór elke iteratie
Risico op oneindige lussen als de voorwaarde nooit onwaar wordt

// Basic counting example
let i = 0;
while (i < 10) {
  console.log(`While count: ${i}`);
  i++; // Don't forget to increment!
}

// More practical example: processing user input
let userInput = "";
let attempts = 0;
const maxAttempts = 3;

while (userInput !== "quit" && attempts < maxAttempts) {
  userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`);
  attempts++;
}

if (attempts >= maxAttempts) {
  console.log("Maximum attempts reached!");
}

Begrijp deze voorbeelden:

Beheert de teller-variabele i handmatig binnen de lus
Verhoogt de teller om oneindige lussen te voorkomen
Toont een praktisch gebruik met gebruikersinput en poginglimieten
Bevat veiligheidsmechanismen om eindeloze uitvoering te voorkomen

Moderne lusalternatieven

JavaScript biedt moderne lus-syntaxis die je code leesbaarder en minder foutgevoelig kan maken.

For...of-lus (ES6+):

const colors = ["red", "green", "blue", "yellow"];

// Modern approach - cleaner and safer
for (const color of colors) {
  console.log(`Color: ${color}`);
}

// Compare with traditional for loop
for (let i = 0; i < colors.length; i++) {
  console.log(`Color: ${colors[i]}`);
}

Belangrijke voordelen van for...of:

Elimineert indexbeheer en mogelijke off-by-one fouten
Biedt directe toegang tot array-elementen
Verbetert de leesbaarheid van code en vermindert syntaxiscomplexiteit

forEach-methode:

const prices = [9.99, 15.50, 22.75, 8.25];

// Using forEach for functional programming style
prices.forEach((price, index) => {
  console.log(`Item ${index + 1}: $${price.toFixed(2)}`);
});

// forEach with arrow functions for simple operations
prices.forEach(price => console.log(`Price: $${price}`));

Wat je moet weten over forEach:

Voert een functie uit voor elk array-element
Biedt zowel elementwaarde als index als parameters
Kan niet vroegtijdig worden gestopt (in tegenstelling tot traditionele lussen)
Geeft undefined terug (maakt geen nieuwe array)

✅ Waarom zou je kiezen voor een for-lus versus een while-lus? 17K kijkers hadden dezelfde vraag op StackOverflow, en sommige van de meningen kunnen interessant voor je zijn.

Lussen en Arrays

Het combineren van arrays met lussen creëert krachtige dataverwerkingsmogelijkheden. Deze combinatie is fundamenteel voor veel programmeertaken, van het weergeven van lijsten tot het berekenen van statistieken.

Traditionele arrayverwerking:

const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

// Classic for loop approach
for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`);
}

// Modern for...of approach
for (const flavor of iceCreamFlavors) {
  console.log(`Available flavor: ${flavor}`);
}

Laten we elke aanpak begrijpen:

Gebruikt de eigenschap arraylengte om de lusgrens te bepalen
Benadert elementen via index in traditionele for-lussen
Biedt directe toegang tot elementen in for...of-lussen
Verwerkt elk array-element precies één keer

Praktisch voorbeeld van dataverwerking:

const studentGrades = [85, 92, 78, 96, 88, 73, 89];
let total = 0;
let highestGrade = studentGrades[0];
let lowestGrade = studentGrades[0];

// Process all grades with a single loop
for (let i = 0; i < studentGrades.length; i++) {
  const grade = studentGrades[i];
  total += grade;
  
  if (grade > highestGrade) {
    highestGrade = grade;
  }
  
  if (grade < lowestGrade) {
    lowestGrade = grade;
  }
}

const average = total / studentGrades.length;
console.log(`Average: ${average.toFixed(1)}`);
console.log(`Highest: ${highestGrade}`);
console.log(`Lowest: ${lowestGrade}`);

Zo werkt deze code:

Initialiseert tracking-variabelen voor som en extremen
Verwerkt elke score met een enkele efficiënte lus
Accumulateert het totaal voor gemiddelde berekening
Volgt hoogste en laagste waarden tijdens iteratie
Berekent eindstatistieken na voltooiing van de lus

✅ Experimenteer met het doorlopen van een array die je zelf hebt gemaakt in de console van je browser.

GitHub Copilot Agent Challenge 🚀

Gebruik de Agent-modus om de volgende uitdaging te voltooien:

Beschrijving: Bouw een uitgebreide dataverwerkingsfunctie die arrays en lussen combineert om een dataset te analyseren en zinvolle inzichten te genereren.

Prompt: Maak een functie genaamd analyzeGrades die een array van studentcijferobjecten (elk met name- en score-eigenschappen) neemt en een object retourneert met statistieken, waaronder de hoogste score, laagste score, gemiddelde score, aantal studenten die geslaagd zijn (score >= 70), en een array van studentnamen die boven gemiddeld scoorden. Gebruik minstens twee verschillende lussoorten in je oplossing.

Lees meer over agent-modus hier.

🚀 Uitdaging

JavaScript biedt verschillende moderne array-methoden die traditionele lussen kunnen vervangen voor specifieke taken. Verken forEach, for-of, map, filter, en reduce.

Jouw uitdaging: Herstructureer het voorbeeld van de studentcijfers met behulp van minstens drie verschillende array-methoden. Merk op hoe veel schoner en leesbaarder de code wordt met moderne JavaScript-syntaxis.

Quiz na de les

Herhaling & Zelfstudie

Arrays in JavaScript hebben veel methoden die erg handig zijn voor datamanipulatie. Lees meer over deze methoden en probeer er een paar uit (zoals push, pop, slice en splice) op een array die je zelf hebt gemaakt.

Opdracht

Loop een Array

Disclaimer:
Dit document is vertaald met behulp van de AI-vertalingsservice Co-op Translator. Hoewel we streven naar nauwkeurigheid, dient u zich ervan bewust te zijn dat geautomatiseerde vertalingen fouten of onnauwkeurigheden kunnen bevatten. Het originele document in de oorspronkelijke taal moet worden beschouwd als de gezaghebbende bron. Voor kritieke informatie wordt professionele menselijke vertaling aanbevolen. Wij zijn niet aansprakelijk voor eventuele misverstanden of verkeerde interpretaties die voortvloeien uit het gebruik van deze vertaling.

16 KiB Raw Blame History