Array Methodes

Array-methoden zijn ingebouwde functies in JavaScript die worden gebruikt om bewerkingen op arrays uit te voeren.

• Datastructuren
  • Queue
  • Stack
• Methodes
  • Einde van een array
    • Pop
    • Push
  • Start van een array
  • Shift
  • Unshift
  • At
  • Map
  • Join
  • Filter
  • Every en some
    • Every
    • Some
• Geavanceerde methodes
  • FlatMap
  • Sort
  • Reduce
  • Slice vs Splice
    • Slice
    • Splice

Datastructuren

Arrays in JavaScript kunnen zowel als wachtrij als stapel werken. Ze staan toe dat je elementen toevoegt/verwijdert, zowel aan/van het begin als aan/van het einde.

In computerwetenschappen wordt de datastructuur die dit mogelijk maakt, een deque (opens new window) genoemd.

Queue

Een wachtrij of queue is een van de meest voorkomende toepassingen van een array. Een queue past het FIFO-principe (First-In-First-Out) toe en ondersteunt twee bewerkingen:

• push (toevoegen): Voegt een element toe aan het einde van de wachtrij.
• shift (verkrijgen): Haalt een element op vanaf het begin, waardoor de wachtrij wordt doorgeschoven, zodat het 2e element het 1e wordt.

In de praktijk hebben we dit vaak nodig. Bijvoorbeeld, een wachtrij van berichten die op het scherm moeten worden getoond.

Stack

Er is nog een ander gebruik van arrays: de datastructuur genaamd stack (stapel). Een stack past het LIFO-principe (Last-In-First-Out) toe en ondersteunt twee bewerkingen:

• push (toevoegen): Voegt een element toe aan het einde.
• pop (verkrijgen): Haalt een element vanaf het einde.

Nieuwe elementen worden altijd toegevoegd of verwijderd vanaf het “einde”.

Arrays in JavaScript kunnen zowel als wachtrij als stapel werken. Ze staan toe dat je elementen toevoegt/verwijdert, zowel aan/van het begin als aan/van het einde.

Methodes

Einde van een array

De pop- en push-methode werken aan het eind van een array.

Pop

Verwijdert het laatste element van een array en zal de bestaande array ook aanpassen.

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

alert(fruits.pop()); // remove "Pear" and alert it

alert(fruits); // Apple, Orange

Push

Voegt een element toe aan het eind van de array en zal de bestaande array ook aanpassen.

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

fruits.push("Pear");

alert(fruits); // Apple, Orange, Pear

Je kan meerdere elementen toevoegen door meer argumenten te geven aan de methode.

let fruits = ["Apple"];

fruits.push("Orange", "Peach");

// ["Apple", "Orange", "Peach"]
alert(fruits);

Start van een array

Shift

Verwijdert het eerste element van een array en zal de bestaande array ook aanpassen.

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

alert(fruits.shift()); // remove Apple and alert it

alert(fruits); // Orange, Pear

Geheugensteuntje 💩

Denk de ‘f’ weg van shift of unshift. Wanneer we shitten verwijderen we ook iets dat aan de start zit. 😅

Unshift

Voegt een element toe aan het begin van de array en zal de bestaande array ook aanpassen…

let fruits = ["Orange", "Pear"];

fruits.unshift("Apple");

alert(fruits); // Apple, Orange, Pear

Je kan meerdere elementen toevoegen door meer argumenten te geven aan de methode.

let fruits = ["Apple"];

fruits.push("Pineapple", "Lemon");

// ["Pineapple", "Lemon", "Apple"]
alert(fruits);

At

In sommige programmeertalen kun je negatieve indices gebruiken om het laatste element van een array op te halen, zoals fruits[-1]. Maar in JavaScript werkt dit niet zoals verwacht. De uitkomst zal undefined zijn.

Om het laatste element van een array in JavaScript op te halen, kun je de methode gebruiken die je hebt genoemd: fruits[fruits.length - 1].

let fruits = ["Apple", "Orange", "Banana", "Mango"];
let lastFruit = fruits[fruits.length - 1];
// lastFruit is 'Mango'

Dit patroon is handig om het laatste element van een array te benaderen, vooral als je de lengte van de array niet precies kent. Het zorgt ervoor dat je altijd het laatste element kunt verkrijgen, ongeacht de grootte van de array.

Er is een kortere syntax om hetzelfde te bereiken zonder de variabele naam twee maal te gebruiken: arr.at(i).

• Dit doet exact hetzelfde als arr[i] (als i >= 0)
• Wanneer i < 0, dan zal hij tellen vanaf het einde van de array.

let fruits = ["Apple", "Orange", "Plum"];
// same as fruits[fruits.length-1]
alert(fruits.at(1)); // Orange
alert(fruits.at(-1)); // Plum

Opmerking

Dit is een relatief nieuwe mogelijkheid en werkt mogelijk niet in erg oude browsers.

Map

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 creëert 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);

Join

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). voorzien.

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].

Filter

De filter (opens new window) methode creëert 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"]

Every en some

Every

De every() (opens new window) methode van een array wordt gebruikt om te testen of alle elementen een conditie doorstaan d.w.v. een functie. Het resultaat van deze methode is een boolean.

const isBelowThreshold = (currentValue) => currentValue < 40;
const arr = [1, 30, 39, 29, 10, 13];
console.log(arr.every(isBelowThreshold)); // true

Some

De some() (opens new window) methode van een array wordt gebruikt om te testen of minstens éen element een conditie doorstaat d.w.v. een functie. Het resultaat van deze methode is een boolean.

function isBiggerThan10(element, index) {
  return element > 10;
}
const arr = [20, 5, 8, 1, 4];
console.log(arr.some(isBiggerThan10)); // true

Kan ook met een arrow functie:

const arr = [20, 5, 8, 1, 4];
console.log(arr.some((elem) => elem > 10)); // true

Nagaan of een array een bepaalde waarde bevat:

const fruits = ['apple', 'banana', 'mango', 'guava'];

function checkAvailability(arr, val) {
  return arr.some(elem => elem === val);
}
console.log(checkAvailability(fruits, 'kela')); // false
console.log(checkAvailability(fruits, 'banana')); // true

### Flat

Mat de `flat()` methode kunnen we in een array alle sub-arrays aan elkaar verbinden zodat ze deel uit maken van de orginele array. Een nieuwe array wordt aanmaakt door deze methode uit te voeren.

```js
let arr = [0, 1, 2, [3, 4]];
arr = arr.flat();
console.log(arr); // [0, 1, 2, 3, 4]
arr = [0, 1, 2, [[3, 4]]];
arr = arr.flat(2);
console.log(arr); // [0, 1, 2, 3, 4]
arr = [1, 2, [3, 4, [5, 6]]];
arr = arr.flat(2);
console.log(arr); // [1, 2, 3, 4, 5, 6]
// [1, 2, 3, 4, 5, 6]
arr = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr = arr.flat(Infinity);
console.log(arr); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

De flat() methode verzijdert ook lege elementen in een array:

let arr = [0, 1, , [3, 4]];
arr = arr.flat(2);
console.log(arr); // [0, 1, 3, 4]

Geavanceerde methodes

FlatMap

De flatMap() (opens new window) is een combinatie van een map() methode gevolgd door een flat() methode van diepte 1. De flatMap() methode bevat maximaal twee parameters waarbij de eerste paramter de callback methode die bij iedere iteratie wordt uitgevoerd. De tweede parameter is optioneel en wordt gebruikt om de variabele te definieren die gebruikt wordt door this.

let arr;
arr = ["it's Sunny in", "", "California"];
arr = arr.map((e) => e.split(" "));
console.log(arr); // [["it's", "Sunny", "in"], [""], ["California"]]
arr = arr.flat(1);
console.log(arr); // ["it's", "Sunny", "in", "", "California"]

Combinatie van een map() en flat() methode in een flatMap methode:

let arr;
arr = ["it's Sunny in", "", "California"];
arr.flatMap((e) => e.split(" "));
console.log(arr);

De flatMap() kan gebruikt worden als een filter:

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

numbers = numbers.flatMap((number) => {
  return number < 0 ? [] : [number];
});
console.log(numbers); // [1, 2, 5]

Alle tags opvragen van all gebruikers:

const users = [
  { userId: 1, username: "Tom", tags: ["Nice", "Cute"] },
  { userId: 2, username: "Mike", tags: ["Lovely, Cute"] },
];
const tags = users.flatMap((x) => x.tags);
console.log(tags); // ["Nice", "Cute", "Lovely, Cute"]

Unieke tags:

const uniqueTags = [...new Set(users.flatMap((x) => x.tags))];
console.log(uniqueTags);

Sort

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 waarede -1 terug
• als a groter is dan b dan geeft de functie de waarede 1 terug
• als a en b gelijk zijn dan geeft de de functie de waarde 0 terug

Reduce

Denk aan de reduce methode als volgt: “I want to reduce my array to just a single value”. De syntax voor een array reduce is als volgt:

const reducedValue = array.reduce((prev, next, index, array) => {...}, initialValue);

• prev is het voorgaande element
• next is het huidige element
• index is de index van het huidige element
• array is de array waarin we itereren
• teruggeven {...} van een expressie die uitgevoerd wordt bij iedere iteratie
• initalValue is de initiele waarde voordat de lus begint te lopen

const reduced = [1, 2, 3, 4, 5].reduce((prev, next) => prev + next, 0);
console.log(reduced); // 15

callback iteration	previousValue	currentValue	currentIndex	array	return value
first call	0	15	0	[15, 16, 17, 18, 19]	15
second call	15	16	1	[15, 16, 17, 18, 19]	31
third call	31	17	2	[15, 16, 17, 18, 19]	48
fourth call	48	18	3	[15, 16, 17, 18, 19]	66
fifth call	66	19	4	[15, 16, 17, 18, 19]	85

const reduced = [1, 2, 3, 4, 5].reduce((prev, next) => {
  console.log(prev, next);
  return prev + next;
}, 0);
console.log(reduced); // 15

Outputs in console:

0   1   // 0  = initial value,             1 = first array item
1   2   // 1  = previous result (0 + 1)    2 = second array item
3   3   // 3  = previous result (1 + 2)    3 = third array item
6   4   // 6  = previous result (3 + 3)    4 = fourth array item
10  5   // 10 = previous result (6 + 4)    5 = fifth array item

Array reduce

const items = [
  { id: "🍔", name: "Super Burger", price: 3.99 },
  { id: "🍟", name: "Jumbo Fries", price: 1.99 },
  { id: "🥤", name: "Big Slurp", price: 2.99 },
];

Total price:

const totalPrice = items
  .map((item) => item.price)
  .reduce((prev, next) => prev + next);

console.log(totalPrice); // Total: 8.97

Zonder map functie:

const totalPrice = items.reduce((prev, next) => prev + next.price, 0);

console.log(totalPrice); // Total: 8.97

Gegeven het volgende winkelmandje:

const shoppingBasket = [
  { name: "Smartphone", qty: 2, price: 500, freeOfCharge: false },
  { name: "Screen Protector", qty: 2, price: 5, freeOfCharge: true },
  { name: "Tablet", qty: 1, price: 800, freeOfCharge: false },
];

Bereken de volledige prijs van het winkelmandje. De prijs mag enkel in rekening worden gebracht in de eigenschap freeOfCharge de waarde false bevat.

const totalPrice = shoppingBasket.reduce((sum, item) => {
  if (!item.freeOfCharge) {
    sum += item.price * item.qty;
  }
  return sum;
}, 0);
console.log(`The total price of the shopping basket is $${totalPrice}`);

Slice vs Splice

Het verschil tussen slice en splice in JavaScript zit voornamelijk in hun functionaliteit en hoe ze het originele array beïnvloeden.

Slice

slice wordt gebruikt om een deel van een array te extraheren en een nieuw array te maken zonder het originele array te wijzigen.

array.slice(start, end);

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

Splice

splice wordt gebruikt om elementen toe te voegen, te verwijderen of te vervangen in een array en wijzigt het originele array.

array.splice(start, deleteCount, item1, item2, ...)

Met de splice (opens new window) methode kunnen we elementen verwijderen vanaf een bepaalde index (begin). De originele array zal door de splice methode wel worden aangepast.

const animals = ["ant", "bison", "camel", "duck", "elephant"];

// Using splice to remove elements starting from index 2 (inclusive) and removing 2 elements
const removedAnimals = animals.splice(2, 2);

console.log(removedAnimals); // Output: ['camel', 'duck']
console.log(animals); // Output: ['ant', 'bison', 'elephant']
console.log(animals.length); // Output: 3