Arrays

Vaak hebben we behoefte aan een geordende verzameling. Hierin zullen we elementen kunnen opslaan in een zekere volgorde. We zullen met de Array gegevensstructuur een lijst kunnen opslaan. Denk aan een lijst van gebruikers, blogposts, …

• Declaratie
• Eigenschappen
• Arrays vergelijken.
  • Methode 1: JSON.stringify()
  • Methode 2: Loopconstructie
• Multi-dimensionele array

Declaratie

Er zijn drie manieren om een lege array aan te maken:

let arr = new Array();
let arr = Array();
let arr = []; // Deze schrijfwijze of syntax wordt het vaakst gebruikt.

Je kan items toevoegen aan een array door deze te noteren in de vierkante haakjes en de items te scheiden met een komma.

let fruits = ["Apple", "Orange", "Plum"];

Array elementen zijn genummerd, we starten de nummering met nul. Je kan elementen ophalen met hun plaatsnummer of index. Hiervoor gebruiken we ook vierkante haakjes.

let fruits = ["Apple", "Orange", "Plum"];

alert(fruits[0]); // Apple
alert(fruits[1]); // Orange
alert(fruits[2]); // Plum

Bovendien kan je elementen ook vervangen door een nieuwe waarde toe te kennen aan het element met een zekere index.

fruits[2] = "Pear"; // now ["Apple", "Orange", "Pear"]

Of je kan zelf aan nieuwe item toevoegen aan de hand van de index.

fruits[3] = "Lemon"; // now ["Apple", "Orange", "Pear", "Lemon"]

Een array kan elementen opslaan van eender welk datatype. Zo kan je niet enkel strings, maar ook Booleans, nummers, objecten, functies, … toevoegen aan je geordende verzameling.

// mix of values
let arr = [
  "Apple",
  { name: "John" },
  true,
  function () {
    alert("hello");
  },
];

// get the object at index 1 and then show its name
alert(arr[1].name); // John

// get the function at index 3 and run it
arr[3](); // hello

Eigenschappen

Je kan de lengte van een array ophalen met de length-eigenschap. Dit geeft terug hoeveel elementen er in je geordende lijst zijn opgeslagen.

let fruits = ["Apple", "Orange", "Plum"];

alert(fruits.length); // 3

Opmerking

De length-eigenschap geeft niet persé het aantal items weer in een array. Het aantal waarden in een array wordt eigenlijk bepaald door de hoogste numerieke index plus één.

let fruits = [];
fruits[123] = "Apple";

alert(fruits.length); // 124

We kunnen de lengte van een array ook aanpassen. Wanneer we een de lengte van de lijst verminderen zullen er items verwijderd worden uit onze array. Het verwijderen van items uit een array door de lengte aan te passen is onomkeerbaar.

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

arr.length = 2; // truncate to 2 elements
alert(arr); // [1, 2]

arr.length = 5; // return length back
alert(arr[3]); // undefined: the values do not return

Tip

De makkelijkste manier om een array leeg te maken is: arr.length = 0;

Arrays vergelijken.

Arrays zijn een reference type. Gebruik dus niet == om arrays te vergelijken. Niet-primitieve waarden zijn pas gelijk wanneer ze refereren naar hetzelfde object in de heap.

alert([] == []); // false
alert([0] == [0]); // false

De arrays in bovenstaand voorbeeld zijn verschillende objecten en verwijzen dus niet naar dezelfde waarde.

Hoe moet je dan wel een array vergelijken? We kunnen een array omzetten naar een string of gebruik maken van een loop.

Methode 1: JSON.stringify()

JSON is een ingebouwd Javascript object dat methodes heeft om:

• Waarden om te zetten naar het JavaScript Object Notation (JSON) formaat. JSON.parse();
• Waarden in het JSON formaat om te zetten naar een string. JSON.stringify()

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

const areEqual = JSON.stringify(array1) === JSON.stringify(array2);

console.log(areEqual); // true

Opgelet

Let op: Deze methode werkt alleen als de volgorde van de elementen in beide arrays hetzelfde is.

Methode 2: Loopconstructie

Deze methode vergelijkt de elementen één voor één en controleert of de lengte van beide arrays gelijk is. Als de lengte en alle elementen overeenkomen, worden de arrays als gelijk beschouwd.

function areArraysEqual(arr1, arr2) {
  if (arr1.length !== arr2.length) {
    return false;
  }

  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  }

  return true;
}

const array1 = [1, 2, 3];
const array2 = [1, 2, 3];

const areEqual = areArraysEqual(array1, array2);

console.log(areEqual); // true

Multi-dimensionele array

Een multi-dimensionele array is een array van arrays.

const cars = [
  ["Volvo", 22, 18],
  ["BMW", 15, 13],
  ["Saab", 5, 2],
  ["Land Rover", 17, 15],
];

cars.forEach(function (car) {
  console.log(`${car[0]}: ${car[1]} in stock and ${car[2]} sold.`);
});

Multi-dimensionele arrays kunnen gegevens opslaan in een tabellenstructuur met rijen en kolommen. Hierdoor kunnen we complexere gegevensstructuren modelleren, zoals matrices.

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];

We gebruiken multi-dimensionele arrays voor:

• Datastructurering: Ze zijn handig om gegevens te organiseren en structureren in complexe vormen, zoals een tabel of een matrix.
• Wiskundige modellering: Voor wiskundige operaties, zoals matrices in lineaire algebra, zijn multi-dimensionele arrays essentieel.
• Rastergegevens: In grafische programma’s worden multi-dimensionele arrays vaak gebruikt om pixelinformatie op te slaan.

// Een 2D-array die een eenvoudig spelbord voorstelt
const gameBoard = [
  ["X", "O", "X"],
  ["O", "X", "O"],
  ["X", "O", "X"],
];