Arrays gebruiken

Declaratie

let list = ["Brendan Eich", "ECMAScript", "Node.js"];

In JavaScript kunnen types zelfs gemengd voorkomen in een array:

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];

Een lege array kun je als volgt aanmaken:

let list = []

Een element uit een array opvragen

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];
console.log(list[0]); // Geeft als uitvoer: 1995

Gaan we met onze index voorbij het laatste element van de array, dan krijgen we in JavaScript geen foutmelding, maar bekomen we als waarde undefined:

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];
console.log(list[99]); // Geeft als uitvoer: undefined

Willen we een element terugvinden in een array, dan kunnen we daarvoor de methode indexOf gebruiken. IndexOf Geeft de index van de gezochte waarde. Komt het gezochte element niet voor in de array, dan retourneert indexOf de waarde -1:

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];
console.log(list.indexOf(1995)); // Geeft als uitvoer: 0
console.log(list.indexOf("Brendan Eich")); // Geeft als uitvoer: 2
console.log(list.indexOf("Brave Browser")); // Geeft als uitvoer: -1

Een element in een array wijzigen

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];
list[0] = "Netscape";
console.log(list); // Geeft als uitvoer: [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"]

De lengte van een array opvragen

let list = [1995, true, "Brendan Eich", 10, "ECMAScript", "Node.js"];
console.log(list.length); // Geeft als uitvoer: 6

Elementen toevoegen en verwijderen

Een element toevoegen aan het einde van een array:

let list = [1995];
list.push("Electron");
console.log(list); // Geeft als uitvoer: [1995, "Electron"]

Een element verwijderen aan het einde van een array:

let list = [1995, "Electron"];
list.pop();
console.log(list); // Geeft als uitvoer: [1995]

Een element verwijderen aan het begin van een array:

let list = [1995, "Electron"];
list.shift();
console.log(list); // Geeft als uitvoer: ["Electron"]

Een element toevoegen aan het begin van een array:

let list = [1995, "Electron"];
list.unshift("JavaScript is not Java");
console.log(list); // Geeft als uitvoer: ["JavaScript is not Java", 1995, "Electron"]

Over alle elementen van een array loopen

let list = [1995, "Electron"];
let text;
for (var i in list) {
  text += list[i]
}
console.log(text); // Geeft als uitvoer: 1995Electron

Overzicht

Functie	Code
Array declareren	`let list = ["waarde0", "waarde1"];`
Element opvragen	`list[0]`
Index zoeken	`list.indexOf("waarde")`
Element wijzigen	`list[0] = "waarde"`
Lengte van array	`list.length`
Toevoegen achteraan	`list.push("waarde")`
Verwijderen achteraan	`list.pop()`
Verwijderen vooraan	`list.shift()`
Toevoegen vooraan	`list.unshift("waarde")`
Over array loopen	`for (var i in list)`

Oefeningen

Oefening 1: Kennismaken met arrays

Maak een array met drie fruitsoorten.
Print de array naar de console.
Print het 2e element naar de console.
Print het laatste element maar de console.
Voeg vooraan een element toe.
Verander het laatste element en print dit naar de console.
Maak een webpagina die alle elementen van de array print in een genummerde lijst.

Oefening 2: Geavanceerde pagina met arrays

Tijdens deze oefening gaan we een lijst laten groeien en krimpen vanuit JavaScript

www x

Start met deze code:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>

   <!-- formulier -->
   <form>
      <label>Toe te voegen element:</label>
      <input type="text" id="textID" placeholder="Nieuw element" />
   </form>

   <!-- knoppen -->
   <br>
   <a href="#">Voeg toe <strong>onderaan</strong> de lijst</a><br>
   <a href="#">Voeg toe <strong>bovenaan</strong> de lijst</a><br>
   <br>
   <a href="#">Verwijder het <strong>onderste</strong> element</a><br>
   <a href="#">Verwijder het <strong>bovenste</strong> element</a><br>
   <br>

   <!-- lijst -->
   De lijst:
   <ul id="lijstID"></ul>

</body>
</html>

Last edited: 23/05/2025
Created: 23/05/2025