Ga naar hoofdinhoud

7: Arrays

MDN: Array - JavaScript

Tijdens het onderdeel over datatypes hebben we al kort het concept array vermeld. Een array is een geordende lijst van waarden. Elke waarde in een array heeft een vaste plaats, aangeduid met een index, en die index begint altijd bij 0.

Arrays zijn handig wanneer je meerdere gerelateerde gegevens onder één variabele wilt opslaan.

Een array maken​

In JavaScript hoef je geen type of vaste lengte op te geven. Arrays kunnen automatisch groeien wanneer je er elementen aan toevoegt.

Lege array​

let numbers = [];
// of
let numbers = new Array();

Array met beginwaarden​

let numbers = [1, 2, 3, 4, 5];

Let op: In talen zoals Java en C# moet je vooraf de lengte bepalen. In JavaScript is dat niet nodig: arrays zijn dynamisch.

Elementen opvragen met een index​

Met vierkante haakjes [] kun je een element opvragen op een bepaalde positie.

let fruits = ["Banana", "Apple", "Orange"];
console.log(fruits[0]); // Banana
console.log(fruits[1]); // Apple
console.log(fruits[2]); // Orange

Index buiten bereik​

Als je een index opvraagt die niet bestaat, krijg je undefined.

console.log(fruits[3]); // undefined

Elementen aanpassen en toevoegen​

Een element vervangen​

fruits[2] = "Pear";

Een element toevoegen via index​

fruits[3] = "Kiwi";

Als de index nog niet bestond, wordt het element toegevoegd.

Opgelet: Ontstaan er gaten in de index (bijvoorbeeld door index 10 te vullen terwijl 1–9 leeg zijn), dan worden die lege plaatsen gevuld met empty-items. Dit probeer je best te vermijden.

De lengte van een array​

length geeft het aantal elementen terug:

let fruits = ["Banana", "Apple", "Orange"];
console.log(fruits.length); // 3

De lengte is altijd de hoogste index + 1, ook als er lege plaatsen in de array zitten.

Debuggen: array tonen in de console​

console.log(fruits);
// bijvoorbeeld: [ 'Banana', 'Apple', 'Orange' ]

Array manipulaties​

JavaScript biedt verschillende methoden om arrays aan te passen.

Elementen toevoegen​

Achteraan toevoegen met push()​

fruits.push("Kiwi");
  • Voegt het nieuwe element achteraan toe
  • Past de array aan
  • Geeft de nieuwe lengte terug

Vooraan toevoegen met unshift()​

let fruits = ["Banana", "Apple", "Orange"];
fruits.unshift("Pear");

console.log(fruits);
// ["Pear", "Banana", "Apple", "Orange"]
  • Voegt vooraan toe
  • Alle bestaande elementen schuiven op

Elementen verwijderen​

Laatste element verwijderen met pop()​

let lastFruit = fruits.pop();
console.log(lastFruit); // verwijderd element
  • Verwijdert het laatste element
  • Geeft dat verwijderde element terug

Eerste element verwijderen met shift()​

let firstFruit = fruits.shift();
console.log(firstFruit); // verwijderd element
console.log(fruits);
  • Verwijdert het eerste element
  • De rest schuift naar links op

Meerdere (of specifieke) elementen verwijderen met splice()​

Syntax:

splice(startIndex, aantalTeVerwijderen)

Voorbeeld:

let fruits = ["Banana", "Apple", "Orange", "Kiwi", "Pear"];

let removedFruits = fruits.splice(1, 2);

console.log(removedFruits); // ["Apple", "Orange"]
console.log(fruits);        // ["Banana", "Kiwi", "Pear"]
  • Verwijdert één of meerdere elementen
  • Past de array blijvend aan
  • Geeft een array met verwijderde elementen terug

De join() methode​

De .join() methode zet alle elementen van een array om in één string, met een gekozen separator ertussen.

const words = ['Dit', 'is', 'een', 'zin'];
const result = words.join(' ');

console.log(result); // "Dit is een zin"

Belangrijk:

  • .join() verandert de originele array niet
  • Als je geen separator opgeeft, gebruikt JavaScript standaard een komma:
console.log([1, 2, 3].join()); // "1,2,3"

De split() methode​

De .split() methode is het omgekeerde van .join(): het splitst een string op in een array, op basis van een separator.

const zin = "Dit is een zin";
const woorden = zin.split(' ');

console.log(woorden); // ["Dit", "is", "een", "zin"]

Verschillende separators​

Je kunt splitsen op verschillende tekens:

const datum = "14-11-2025";
const delen = datum.split('-');
console.log(delen); // ["14", "11", "2025"]

const email = "naam@voorbeeld.be";
const emailDelen = email.split('@');
console.log(emailDelen); // ["naam", "voorbeeld.be"]

Splitsen per karakter​

Als je een lege string als separator gebruikt, wordt elke letter een apart element:

const woord = "Hello";
const letters = woord.split('');
console.log(letters); // ["H", "e", "l", "l", "o"]

Limiet instellen​

Je kunt een limiet meegeven om maar een bepaald aantal splits te doen:

const tekst = "een-twee-drie-vier";
const beperkt = tekst.split('-', 2);
console.log(beperkt); // ["een", "twee"]

Belangrijk:

  • .split() verandert de originele string niet
  • Het resultaat is altijd een array
  • Als de separator niet voorkomt in de string, krijg je een array met de hele string als enig element

Combinatie van split() en join()​

Je kunt beide methoden combineren om strings te manipuleren:

const zin = "Dit is een test";
const resultaat = zin.split(' ').join('-');
console.log(resultaat); // "Dit-is-een-test"