Array

Een Array of geïndexeerde collectie is een geordende verzameling van waarden waarnaar we refereren met een naam en een index. We kunnen bijvoorbeeld een array genaamd students definiëren dat een lijst van studenten bevat. De eerste student kan opgevraagd worden via students[0] de tweede student via students[1]…

Net zoals alle andere objecten bevat een array een reeks van eigenschappen (lengte …) en methoden (filteren, zoeken, omkeren …)

Aanmaak van een array

Een array kan aangemaakt worden op drie manieren:

const arr1 = new Array(element0, element1 …, elementN);
const arr2 = Array(element0, element1 …, elementN);
const arr3 = [element0, element1 …, elementN];

element0, element1 …, elementN is een lijst van waarden voor de elementen uit de array. De lengte van een array is gelijk aan het aantal aanwezige elementen in deze array. De lengte van een array kan opgevraagd worden via de eigenschap arrayName.length. De bracket ([…] notatie, ook gekend als een array literal of array initalizer, heeft de voorkeur op de andere notaties.

Om een lege (zonder elementen) array met een bepaalde lengte (positief geheel getal) te maken kunnen we het volgende implementeren:

const arrayLength = 6;
const arr1 = new Array(arrayLength);
const arr2 = Array(arrayLength);
const arr3 = [];
arr3.length = arrayLength;

Al deze arrays bevatten de volgende elementen [undefined, undefined, undefined, undefined, undefined, undefined]. Lege elementen (undefined) worden niet weergegeven in een for…in-lus. Indien een array lengte wordt gedefinieerd met een floating point waarde bijv. Array(78.9) dan resulteert dit in de foutboodschap Uncaught RangeError: Invalid array length.

Array.of() laat toe om een array aan te maken bestaande uit één element, bijv. const arr1 = Array.of('John');.

Bevolken van een array

Een array bevolken (Eng. populating) kan op verschillend manieren gebeuren. We kunnen een lege array bevolken door waarden toe te kennen op een specifieke index.

const persons = [];
persons[0] = 'Philippe';
persons[1] = 'Evelien';
persons[2] = 'Olivier';
console.log(persons); // Output: ["Philippe", "Evelien", "Olivier"]

Definiëren we een legen array en kennen we vervolgens een waarde toe aan een element op index 99 dan resulteert dit in een array met een lengte van 100 elementen. De elementen voor dit element bevatten de waarde undefined.

const persons = [];
persons[99] = 'Philippe';
console.log(persons.length);

Definiëren we een index met een decimaal getal (Eng. floating point number), dan zal dit getal gezien worden als een eigenschap van de array, en dus geen element.

const persons = [];
persons[8.4] = 'Philippe';
console.log(persons.length); // Outpunt: 0
console.log(persons.hasOwnProperty(8.4)); // Output: true

Opgelet

Door de lengte van de array op 0 in te snellen, verwijderen we alle aanwezige elementen.

const cats = ['Dusty', 'Misty', 'Twiggy'];
console.log(cats.length); // Output: 3
cats.length = 0;
console.log(cats); // Output: []

Met de methoden push, unshift, splice en concat kan de array ook uitgebreid worden met elementen.

Met de push methode kunnen we één of meerdere elementen toevoegen op het einde van de array. De push methode geeft de lengte van de aangepaste array terug.

let fruit = ['Apple', 'Banana', 'Grape'];
fruit.push('Pear'); // Array fruit is now ['Apple', 'Banana', 'Grape', 'Pear']

Met de unshift methode kunnen we één of meerdere elementen toevoegen aan het begin van de array. De unshift methode geeft de lengte van de aangepaste array terug.

let weather = ['Wind', 'Rain', 'Fire'];
weather.unshift('Snow', 'Hail'); // Array fruit is now ['Snow', 'Hail', 'Wind', 'Rain', 'Fire']

Met de splice (opens new window) methode kunnen we één of meerdere elementen toevoegen binnen een opgegeven positie uit de array. De splice methode laat ook toe om elementen te verwijderen uit de array. De splice methode geeft een array terug van verwijderde elementen.

let myArray = new Array('1', '2', '3', '4', '5');
myArray.splice(1, 0, 'a', 'b', 'c', 'd'); // Array myArray contains ['1', 'a', 'b', 'c', 'd', '2', '3', '4', '5']

Met het eerste element bepalen we de plaats (index) in de array waarna we elementen zullen toevoegen. Het tweede argument met de waarde 0 betekent dat we geen elementen zullen verwijderen uit de array.

let myArray = new Array('1', '2', '3', '4', '5');
myArray.splice(1, 3); // Array myArray contains ['1', '5']

Met de concat (opens new window) methode kunnen we meerdere arrays met elkaar te verbinden to één array. De concat methode geeft de resulterende array terug.

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
let arrayResult = array1.concat(array2); // Array arrayResult contains ['a', 'b', 'c', 'd', 'e', 'f']

Meerdere arrays kunnen verbonden worden:

const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = [7, 8, 9];

const numbers = num1.concat(num2, num3);

console.log(numbers); // Output: [1, 2, 3, 4, 5, 6, 7, 8, 9]

Itereren over een array

Een array kan doorlopen worden met een for lus:

const colors = ['red', 'green', 'blue'];
for (let i = 0; i < colors.length; i++) {
  const currentColor = colors[i];
  console.log(currentColor);
}

Een element kan binnen de lus opgevraagd worden door de index the specificeren bijv. const currentColor = colors[i];. De index van een geïndexeerde collectie begint altijd vanaf 0.

Het for…of statement creëert een lus die itereert over iterabele objects (zoals: Array, Map, Set …) en roept vervolgens een variabele aan met een waarde die kan verschillen bij iedere iteratie.

const colors = ['red', 'green', 'blue'];
for (let element of colors) {
  const currentColor = element;
  console.log(currentColor);
}

Hebben we de index van een element nodig binnenin een for...of lus, dan moeten we gebruik maken van de entries() (opens new window) methode uit een Array object.

const colors = ['red', 'green', 'blue'];
for (let [index, element] of colors.entries()) {
  const currentColor = element;
  console.log(`Index ${index} with color ${currentColor}`);
}

Met de forEach() (opens new window) methode van een array kunnen we eveneens itereren over een array:

const colors = ['red', 'green', 'blue'];
colors.forEach(function(currentColor) {
  console.log(currentColor);
});

We kunnen deze code nog korter schrijven door gebruik te maken van een arrow function:

const colors = ['red', 'green', 'blue'];
colors.forEach((currentColor) => console.log(currentColor););

De functie als argument in de forEach methode wordt bij iedere iteratie uitgevoerd. Deze functie bevat zelf een argument, namelijk het huidige element uit de array. Niet-toegewezen (Eng. unassigned) waarden worden niet geïtereerd:

const colors = ['red', 'green', , 'blue'];
color.forEach((currentColor) => console.log(currentColor););
// red
// green
// blue

Opgelet

Gebruik de for…in-lus niet om te itereren over de elementen uit de array, want deze lus lijst ook alle eigenschappen op.

Multidimensionale array

Arrays kunnen genest worden, wat betekent dat een array een andere array kan bevatten als element.

De volgende code creëert een tweedimensionale array:

const a = new Array(4);
for (i = 0; i < 4; i++) {
  a[i] = new Array(4);
  for (j = 0; j < 4; j++) {
    a[i][j] = '[' + i + ', ' + j + ']';
  }
}

Genereert de volgende array inhoud:

Row 0: [0, 0] [0, 1] [0, 2] [0, 3]
Row 1: [1, 0] [1, 1] [1, 2] [1, 3]
Row 2: [2, 0] [2, 1] [2, 2] [2, 3]
Row 3: [3, 0] [3, 1] [3, 2] [3, 3]

Het volgende voorbeeld bevat een array van auto’s. Een auto is een array bestaanden uit 3 elementen, namelijk type, stock en sold. De code is als volgt:

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.`)
});

Array methoden

We hebben reeds elementen aan een bestaande array kunnen toevoegen via de methoden push, unshift, splice en concat. Er zijn nog een hele reeks andere methoden die nuttig kunnen zijn.

Met de pop methode kunnen we het laatste element uit een array verwijderen. De return waarde van deze methode is het verwijderd element of undefined (indien de array leeg was).

const fruit = ['Apple', 'Banana', 'Grape'];
const removedElement = fruit.pop(); // Contains "Grape"
console.log(fruit.length); // Output: 2

Met de shift (opens new window) methode kunnen we het eerste element uit een array verwijderen. De return waarde van deze methode is het verwijderd element of undefined (indien de array leeg was).

const fruit = ['Apple', 'Banana', 'Grape'];
const removedElement = fruit.shift(); // Contains "Apple"
console.log(fruit.length); // Output: 2

Met de slice (opens new window) methode kunnen we een portie van een array selecteren om daarmee een nieuwe array te maken startend van een bepaalde index (begin) en eindigend op een bepaalde index (end). Het element op deze laatste index maakt geen deel uit van de nieuwe gegenereerde array. De originele array wordt door de slice methode niet aangepast.

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
const selectedAnimals = animals.slice(2, 4); // The array selectedAnimals contains ['camel', 'duck']
console.log(animals.length); // Output: 5

Met de join (opens new window) methode kunnen we alle elementen uit de array verbinden met elkaar tot een resulterende string waarin de elementen worden gescheiden door een komma (,). We kunnen als alternatief een eigen scheidingsteken (Eng. delimiter, separator).

const arr = ['macOs', 'Windows', 'Linux'];
const arrAsStr = arr.join();
console.log(arrAsStr); // Output "macOs,Windows,Linux"

Of met een eigen gedefinieerd scheidingsteken:

const arr = ['macOs', 'Windows', 'Linux'];
const arrAsStr = arr.join(' | ');
console.log(arrAsStr); // Output "macOs | Windows | Linux"

Opgelet

Indien een element de waarde: undefined, null of een lege array [] bevat, dan zullen deze waarden geconverteerd worden naar een lege string. Indien een element een custom object is, dan voorzie je best een toString methode binnen dit object, zoniet resulteert dit in een string [object Object].

Met de reverse (opens new window) methode kunnen we de plaatse van elementen in de array verwisselen. Het eerste element wordt de laatste, het tweede element wordt de voorlaatste … Bevat als return waarde de omgekeerde array. De originele array wordt ook beïnvloed!

const arr = ['one', 'two', 'three'];
const reversedArray = arr.reverse();
console.log(arr); // Output: ['three', 'two', 'one']
console.log(reversedArray); // Output: ['three', 'two', 'one']

De toReversed (opens new window) methode doet hetzelfde als reverse, maar geeft een nieuwe array (kopie) terug in plaats van de originele array te wijzigen.

const arr = ['one', 'two', 'three'];
const reversedArray = arr.toReversed();
console.log(arr); // Output: ['one', 'two', 'three']
console.log(reversedArray); // Output: ['three', 'two', 'one']

De sort (opens new window) methode sorteert de elementen van een array. De standaard sorteerorde werkt op basis “van geconverteerde elementen als een stringwaarde”. De sort methode kan ook een callback function bevatten om de sorteerorde te manipuleren.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months); // Output: ["Dec", "Feb", "Jan", "March"]

Met numerieke waarden:

const numbers = [1, 30, 4, 21, 100000];
numbers.sort();
console.log(numbers); // Output: [1, 100000, 21, 30, 4]

De sort methode kan ook een callback function bevatten om te bepalen hoe de elementen in de array worden vergeleken met elkaar. Dit soort callback functies zijn beter gekend als iteratieve methoden, omdat ze itereren over alle elementen in de array.

const myArray = new Array('Wind', 'Rain', 'Fire');
myArray.sort(function (a, b) {
  if (a[a.length - 1] < b[b.length - 1]) return -1;
  if (a[a.length - 1] > b[b.length - 1]) return 1;
  if (a[a.length - 1] == b[b.length - 1]) return 0;
});
myArray.sort(sortFn); // sorts the array so that myArray = ["Wind","Fire","Rain"]

• als a kleiner is dan b dan geeft de functie de waarde -1 terug
• als a groter is dan b dan geeft de functie de waarde 1 terug
• als a en b gelijk zijn dan geeft de de functie de waarde 0 terug

De toSorted (opens new window) methode doet hetzelfde als sort, maar geeft een nieuwe array (kopie) terug in plaats van de originele array te wijzigen.

const numbers = [1, 30, 4, 21, 100000];
const sortedNumbers = numbers.toSorted();
console.log(numbers); // Output: [1, 30, 4, 21, 100000]
console.log(sortedNumbers); // Output: [1, 100000, 21, 30, 4]

De map (opens new window) methode voert voor elke element een callback functie uit en construeert hiermee een nieuwe array.

De volgende code bevat een array van numerieke waarde en creeert een nieuwe array bestaande uit de vierkantswortel van de numerieke waarden uit de eerste array.

const numbers = [1, 4, 9];
const roots = numbers.map(function (num) {
  return Math.sqrt(num);
});
console.log(roots); // Output: [1, 2, 3]

De volgende code bevat een array van numerieke waarde en creeert een nieuwe array bestaande uit objecten met als key de index en als value het kwadraat van de corresponderende numerieke waarde uit de eerste array.

const numbers = [1, 4, 9];
const pows = numbers.map(function (num, index) {
  return { key: index, value: num**2};
});
console.log(pows);

We kunnen deze code herschrijven met arrow functions:

const numbers = [1, 4, 9];
const pows = numbers.map((num, index) => ({ key: index, value: num**2 }));
console.log(pows);

De filter (opens new window) methode creeert een nieuwe array van elementen die een test doorstaan via de callback function.

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const filteredWords = words.filter(word => word.length > 6);
console.log(result); //Output: ["exuberant", "destruction", "present"]

Het Array object bevat nog heel wat andere nuttige methoden, zoals: reduce (opens new window), reduceRight (opens new window), every (opens new window), flat (opens new window) …

Voorbeeldoefening

Schrijf een functie om de waarden van een array door elkaar te halen.

let myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(shuffle(myArray)); // example:  [ 4, 7, 1, 6, 5, 2, 9, 8, 0, 3 ]

Oplossing

function shuffle(array1) {
    let ctr = array1.length;
    let temp;
    let index;

// While there are elements in the array
    while (ctr > 0) {
// Pick a random index
        index = Math.floor(Math.random() * ctr);
// Decrease ctr by 1
        ctr--;
// And swap the last element with it
        temp = array1[ctr];
        array1[ctr] = array1[index];
        array1[index] = temp;
    }
    return array1;
}
let myArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(shuffle(myArray)); // example:  [ 4, 7, 1, 6, 5, 2, 9, 8, 0, 3 ]