2. Arrow functions, Arrays & Sets

27-07-2023Ongeveer 21 minutenOngeveer 3116 woorden

2. Arrow functions, Arrays & Sets

Tijdens deze les oefen je op:

Het gebruik van arrow functies
Het aanmaken, manipuleren en doorlopen van arrays en sets

Oefening 1

Definieer een nieuwe array met de namen van 5 personen. Voer daarna volgende operaties uit op de array:

a. Schrijf het aantal elementen in de array naar de console.
b. Schrijf het eerste, derde en vijfde element van de array naar de console.
c. Sorteer de array op alfabetische volgorde en schrijf de gesorteerde array naar de console.
d. Vraag de gebruiker om een extra naam in te geven en voeg deze achteraan toe aan de array. Schrijf de nieuwe array naar de console.
e. Voeg de elementen in de array samen tot een nieuwe string waarin de elementen gescheiden zijn door puntkomma.

a.  5

b.
  Eerste element: Alan Turing
  Derde element: Charles Babbage
  Vijfde element: Grace Hopper

c.  [ "Ada Lovelace", "Alan Turing", "Charles Babbage", "Donald Knuth", "Grace Hopper" ]
Geen een extra naam op:  Edsger Dijkstra

d.  [ "Ada Lovelace", "Alan Turing", "Charles Babbage", "Donald Knuth", "Grace Hopper", "Edsger Dijkstra" ]

e.  Ada Lovelace;Alan Turing;Charles Babbage;Donald Knuth;Grace Hopper;Edsger Dijkstra

Oefening 2

Vraag de gebruiken om een reeks getallen in te geven, zolang de gebruiker geen lege string invoert, blijft het programma naar input vragen. Als de gebruiker een geldig getal invoert moet dit getal toegevoegd worden aan een array, anders wordt het genegeerd. Om te controleren of een ingegeven waarde een geldig getal is, kan je de Number.isNaN functie gebruiken.

Zodra de gebruiker een lege string invoert, moet je alle ingegeven getallen gebruiken om de kleinste waarde, de grootste waarde, het gemiddelde en som van alle getallen te berekenen. Schrijf deze waarden naar de console.

Gebruik een for lus om het minimum en maximum te berekenen, en gebruik de reduce methode om de som te berekenen. Bepaal zelf hoe je het gemiddelde berekent.

Geef een getal in, of druk op enter om te stoppen: [] 34
Geef een getal in, of druk op enter om te stoppen: [] 29f
Geef een getal in, of druk op enter om te stoppen: [] 49
Geef een getal in, of druk op enter om te stoppen: [] 230
Geef een getal in, of druk op enter om te stoppen: [] gjoej
Geef een getal in, of druk op enter om te stoppen: [] 234
Geef een getal in, of druk op enter om te stoppen: [] 13
Geef een getal in, of druk op enter om te stoppen: [] 3°9
Geef een getal in, of druk op enter om te stoppen: [] 34
Geef een getal in, of druk op enter om te stoppen: [] 
Je hebt volgende getallen ingegeven: [ 34, 49, 230, 234, 13, 34 ]
Het kleinste getal is: 13
Het grootste getal is: 234
De som van de getallen is: 594
Het gemiddelde van de getallen is: 99

Oefening 3

Breid de vorige oefening uit zodat je ook de mediaan van de ingegeven getallen berekent. Dit is het getal dat in het midden van de gesorteerde reeks getallen staat, of het gemiddelde van de twee middelste getallen als er een even aantal getallen is.

Om de mediaan te berekenen, moet je de array van getallen sorteren, zoals in de les besproken kan de sort methode hier niet zomaar voor gebruikt worden omdat deze methode per default sorteert op basis van de ASCII tabel.

De sort functie kan opgeroepen worden met een optionele parameter, hieraan kan je een functie meegeven die twee elementen uit de array binnen krijgt als parameter en bepaald welk element het kleinst is. Stel dat de twee parameters van de functie a en b zijn, dan moet de functie een negatief getal teruggeven als a kleiner is dan b, een positief getal als a groter is dan b en 0 als a en b gelijk zijn. Meer informatie kan je vinden in de MDN Web Docs.

Even aantal getallen

Geef een getal in, of druk op enter om te stoppen: [] 49 
Geef een getal in, of druk op enter om te stoppen: [] 48
Geef een getal in, of druk op enter om te stoppen: [] 11
Geef een getal in, of druk op enter om te stoppen: [] 1
Geef een getal in, of druk op enter om te stoppen: [] 100
Geef een getal in, of druk op enter om te stoppen: [] 478
Geef een getal in, of druk op enter om te stoppen: [] 
Je hebt volgende getallen ingegeven: [ 1, 11, 48, 49, 100, 478 ]
Het kleinste getal is: 1
Het grootste getal is: 478
De som van de getallen is: 687
Het gemiddelde van de getallen is: 114.5
De mediaan van de getallen is: 48.5

Oneven aantal getallen

Je hebt volgende getallen ingegeven: [ 1, 1, 11, 48, 49, 100, 478 ]
Het kleinste getal is: 1
Het grootste getal is: 478
De som van de getallen is: 688
Het gemiddelde van de getallen is: 98.28571428571429
De mediaan van de getallen is: 48

Oefening 4

Schrijf een programma dat de gebruiker vraagt om groenten en fruit in te geven. Als de gebruiker de string "g bloemkool" ingeeft moet je de string "bloemkool" toevoegen aan een array met groenten, als de gebruiker de string "f appel" ingeeft moet je de string "appel" toevoegen aan een array met fruit. Dit moet natuurlijk werken voor alle soorten groenten en fruit. Ongeldige invoer mag genegeerd worden.

Als de gebruiker een lege string ingeeft, moet je de inhoud van de arrays naar de console schrijven.

Geef een fruit of groente in, of druk op enter om te stoppen: [] g bloemkool
Geef een fruit of groente in, of druk op enter om te stoppen: [] f appel
Geef een fruit of groente in, of druk op enter om te stoppen: [] f f appel
Geef een fruit of groente in, of druk op enter om te stoppen: [] g bloembool
Geef een fruit of groente in, of druk op enter om te stoppen: [] qdgq
Geef een fruit of groente in, of druk op enter om te stoppen: [] f peer
Geef een fruit of groente in, of druk op enter om te stoppen: [] f mango
Geef een fruit of groente in, of druk op enter om te stoppen: [] g sla
Geef een fruit of groente in, of druk op enter om te stoppen: [] g prij
Geef een fruit of groente in, of druk op enter om te stoppen: [] 
Groenten: [ "bloemkool", "bloembool", "sla", "prij" ]
Fruit: [ "appel", "peer", "mango" ]

Oefening 5

Herschrijf de vorige oefening zodat je er geen duplicaten in de uitvoer voorkomen.

Geef een fruit of groente in, of druk op enter om te stoppen: [] g bloemkool
Geef een fruit of groente in, of druk op enter om te stoppen: [] f appel
Geef een fruit of groente in, of druk op enter om te stoppen: [] f f appel
Geef een fruit of groente in, of druk op enter om te stoppen: [] g bloemkool
Geef een fruit of groente in, of druk op enter om te stoppen: [] qdgq
Geef een fruit of groente in, of druk op enter om te stoppen: [] f peer
Geef een fruit of groente in, of druk op enter om te stoppen: [] f mango
Geef een fruit of groente in, of druk op enter om te stoppen: [] g sla
Geef een fruit of groente in, of druk op enter om te stoppen: [] f prij
Geef een fruit of groente in, of druk op enter om te stoppen: [] 
Groenten: Set(2) {
  "bloemkool",
  "sla",
}
Fruit: Set(4) {
  "appel",
  "peer",
  "mango",
  "prij",
}

Oefening 6

Definieer een hardgecodeerde arrays met enkele willekeurige getallen in. Schrijf vervolgens een functie die gebruikt kan worden om de doorsnede (gemeenschappelijke elementen) van de twee arrays te bepalen.

Los het probleem op twee manieren op, één keer via arrays-methodes en één keer via set-methodes. Je kan een array converteren naar een set via new Set(array), en een set naar een array via Array.from(set).

Array 1: [ 1, 2, 3, 4, 5 ]
Array 2: [ 4, 5, 6, 7, 8 ]
Gemeenschappelijke elementen (array): [ 4, 5 ]
Gemeenschappelijke elementen (set): [ 4, 5 ]

Oefening 7

Schrijf een programma dat de gebruiker vraagt om een reeks getallen in te geven, gescheiden door komma's. Vervolgens moet je controleren of de ingegeven reeks getallen een palindroom is (een palindroom is een reeks/woord dat hetzelfde is als je het van voor naar achter leest als van achter naar voor).

Schrijf het resultaat naar de console.

bun exercise07.js
Geef een array in, gescheiden door komma's: 1, 2, 3, 4, 5, 6
De array is geen palindroom.

bun exercise07.js
Geef een array in, gescheiden door komma's: 1, 2, 4, 2, 1
De array is een palindroom.

bun exercise07.js
Geef een array in, gescheiden door komma's: 1, 2, 4, 4, 2, 1
De array is een palindroom.

Oefening 8

Definieer twee hardgecodeerde arrays met enkele willekeurige getallen tussen 0 en 100 (inclusief). Gebruik de map methode om de punten om te zetten naar een score op 20 en de filter methode om de geslaagde en gebuisde studenten te scheiden in twee arrays.

Originele cijfers: [ 23, 45, 5, 39, 48, 59, 76, 49, 57, 89, 60, 82 ]
Op 20: [ 4.6, 9, 1, 7.8, 9.6, 11.8, 15.2, 9.8, 11.4, 17.8, 12, 16.4 ]
Er zijn 6 geslaagde studenten: [ 59, 76, 57, 89, 60, 82 ]
Er zijn 6 gebuisde studenten: [ 23, 45, 5, 39, 48, 49 ]

Oefening 9

Het Caesarcijfer is een eenvoudige vorm van encryptie waarbij elke letter in een tekst vervangen wordt door een letter die 3 plaatsen verder in het alphabet staat. De letter 'a' wordt vervangen door de letter 'd', de letter 'b' door de letter 'e', enzovoort. De naam van het Caesarcijfer komt van Julius Caesar, die deze techniek gebruikte om geheime boodschappen te versturen.

Schrijf een programma waarin de gebruiken een zin kan ingeven (in kleine letters) en waarbij de geëncrypteerde tekst teruggegeven wordt. Om een string op te splitsen in een array, kan je de split methode gebruiken met een lege string als argument.

Geef een zin in: dit is een voorbeeld
Rot3 (Caesarcijfer) encoded tekst: glw lv hhq yrruehhog

Optioneel & uitdagend Oefening 10

De zeef van Eratosthenes is een algoritme om alle priemgetallen tot een opgegeven limiet te vinden.

Implementeer een programma dat de gebruiker vraagt om een positief geheel getal in te geven als limiet en vervolgens de zeef gebruikt om alle priemgetallen tot die limiet te vinden.

Het algoritme werkt als volgt:

Maak een array die even groot is als de limiet + 1 en vul deze met true waarden, behalve waar het getal gegarandeerd niet priem is (0, 1 en alle even getallen groter dan 2). De indexen van de array vertegenwoordigen de getallen van 0 tot de limiet.
Itereer door de array, vanaf positie 3 en voer voor elk element $p$ het volgende uit:
a. Itereer over elk getal vanaf $p \cdot p$ tot de limiet, met een stapgrootte van $2p$ en markeer elk van die elementen als false (niet priem).
Alle elementen die nu nog overblijven en als true gemarkeerd zijn, zijn priemgetallen.

Het programma moet de priemgetallen uitprinten in tabelvorm, met 20 getallen per rij. Zorg ervoor dat de getallen mooi gealigneerd zijn, zoals in onderstaand voorbeeld.

Uitvoer voor limiet 100

Up until which number do you want to find all prime numbers? 100

2  3  5  7  11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71
73 79 83 89 97

Uitvoer voor limiet 2500

Up until which number do you want to find all prime numbers? 2500

2    3    5    7    11   13   17   19   23   29   31   37   41   43   47   53   59   61   67   71  
73   79   83   89   97   101  103  107  109  113  127  131  137  139  149  151  157  163  167  173 
179  181  191  193  197  199  211  223  227  229  233  239  241  251  257  263  269  271  277  281 
283  293  307  311  313  317  331  337  347  349  353  359  367  373  379  383  389  397  401  409 
419  421  431  433  439  443  449  457  461  463  467  479  487  491  499  503  509  521  523  541 
547  557  563  569  571  577  587  593  599  601  607  613  617  619  631  641  643  647  653  659 
661  673  677  683  691  701  709  719  727  733  739  743  751  757  761  769  773  787  797  809 
811  821  823  827  829  839  853  857  859  863  877  881  883  887  907  911  919  929  937  941 
947  953  967  971  977  983  991  997  1009 1013 1019 1021 1031 1033 1039 1049 1051 1061 1063 1069
1087 1091 1093 1097 1103 1109 1117 1123 1129 1151 1153 1163 1171 1181 1187 1193 1201 1213 1217 1223
1229 1231 1237 1249 1259 1277 1279 1283 1289 1291 1297 1301 1303 1307 1319 1321 1327 1361 1367 1373
1381 1399 1409 1423 1427 1429 1433 1439 1447 1451 1453 1459 1471 1481 1483 1487 1489 1493 1499 1511
1523 1531 1543 1549 1553 1559 1567 1571 1579 1583 1597 1601 1607 1609 1613 1619 1621 1627 1637 1657
1663 1667 1669 1693 1697 1699 1709 1721 1723 1733 1741 1747 1753 1759 1777 1783 1787 1789 1801 1811
1823 1831 1847 1861 1867 1871 1873 1877 1879 1889 1901 1907 1913 1931 1933 1949 1951 1973 1979 1987
1993 1997 1999 2003 2011 2017 2027 2029 2039 2053 2063 2069 2081 2083 2087 2089 2099 2111 2113 2129
2131 2137 2141 2143 2153 2161 2179 2203 2207 2213 2221 2237 2239 2243 2251 2267 2269 2273 2281 2287
2293 2297 2309 2311 2333 2339 2341 2347 2351 2357 2371 2377 2381 2383 2389 2393 2399 2411 2417 2423
2437 2441 2447 2459 2467 2473 2477

Oefening 11

Hieronder zie je een drie-dimensionale array die vier Tic-tac-toe borden bevat. In deze array hebben de dimensies volgende betekenis:

Een bord
Een rij op het bord
Een kolom in de rij

const boards = [
  [
    ['X', 'O', 'X'],
    ['O', 'X', 'O'],
    ['O', 'X', 'X'],
  ],
  [
    ['X', 'O', 'X'],
    ['O', 'X', 'O'],
    ['O', 'X', 'O'],
  ],
  [
    ['X', 'O', 'X'],
    ['O', 'O', 'O'],
    ['O', 'X', 'X'],
  ],
  [
    ['X', 'O', 'X'],
    ['O', 'O', 'X'],
    ['X', 'X', 'O'],
  ],
]

Schrijf een programma dat door elk van deze borden itereert en controleert of er een winnaar is. Voor elk bord moet je naar de console schrijven of er een winnaar is, en zo ja, wie de winnaar is (X of O).

Daarnaast markeer je de winnende combinatie op het bord door deze in het vet en groen uit te printen. Hiervoor moet je gebruik maken van ANSI escape codes. Je moet volgende structuur gebruiken om een tekst vet en groen te maken:

console.log('\x1b[1;32mTEXT\x1b[0m')

Hier hebben de characters volgende betekenis:

\x1b[ : Dit is de escape character dat aangeeft dat er een speciale opmaakcode volgt.
1;32m : Dit zijn de opmaakcodes, waarbij 1 staat voor vetgedrukt en 32 voor groene tekst. De m geeft aan dat het voorgaande styling definieert.
TEXT : Dit is de tekst die je wilt opmaken.
\x1b[0m : Dit reset de opmaak naar de standaardinstellingen, zodat de volgende tekst terug de normale opmaak heeft.

Het resultaat van je programma zou er als volgt moeten uitzien (hierbij is gebruik gemaakt van de console.table methode:

De X speler heeft gewonnen in onderstaand bord:
┌───┬───┬───┬───┐
│   │ 0 │ 1 │ 2 │
├───┼───┼───┼───┤
│ 0 │ X │ O │ X │
│ 1 │ O │ X │ O │
│ 2 │ O │ X │ X │
└───┴───┴───┴───┘
Er is geen winnaar in onderstaand bord:
┌───┬───┬───┬───┐
│   │ 0 │ 1 │ 2 │
├───┼───┼───┼───┤
│ 0 │ X │ O │ X │
│ 1 │ O │ X │ O │
│ 2 │ O │ X │ O │
└───┴───┴───┴───┘
De O speler heeft gewonnen in onderstaand bord:
┌───┬───┬───┬───┐
│   │ 0 │ 1 │ 2 │
├───┼───┼───┼───┤
│ 0 │ X │ O │ X │
│ 1 │ O │ O │ O │
│ 2 │ O │ X │ X │
└───┴───┴───┴───┘
Er is geen winnaar in onderstaand bord:
┌───┬───┬───┬───┐
│   │ 0 │ 1 │ 2 │
├───┼───┼───┼───┤
│ 0 │ X │ O │ X │
│ 1 │ O │ O │ X │
│ 2 │ X │ X │ O │
└───┴───┴───┴───┘

Optioneel & uitdagend Oefening 12

Vorige oefeningenreeks hebben we de een recursieve aanpak besproken om de Fibonacci rij te berekenen. Zoals toen vermeld, is deze aanpak verre van efficiënt. Dit komt doordat we dezelfde functie, met hetzelfde argument herhaaldelijk aanroepen (fib(n) roep fib(n-1) en fib(n-2) aan, en fib(n-1) roept op zijn beurt weer fib(n-2) en fib(n-3) aan, enzovoort).

Nu we arrays besproken hebben, kunnen we gebruik maken van dynamic programming om een array bij te houden met reeds berekende Fibonacci getallen. Op die manier hoeven we een Fibonacci getal maar één keer te berekenen, en kunnen we het resultaat hergebruiken wanneer we het later nog eens nodig hebben.

Begin aan het begin van je programma om een array te definiëren met $n+1$ elementen, waarbij $n$ het Fibonacci getal is dat je wil berekenen. Vul deze array op met null waarden, telkens je een Fibonacci getal berekent, hebt, sla je dit op in de array (en vervang je de null waarde).

Als je een hoger Fibonacci getal wilt berekenen (bijvoorbeeld 80), zal je zien dat het resultaat bijna onmiddellijk teruggegeven wordt, terwijl de recursieve aanpak hier uren voor nodig had. Het resultaat is echter nog niet 100% correct (je kan bijvoorbeeld gebruik maken van WolframAlpha om het correcte resultaat te vinden).

De reden voor deze afwijking is dat de Fibonacci getallen snel heel groot worden, zo groot dat ze niet meer correct gerepresenteerd kunnen worden door een standaard JavaScript number type (de maximale waarde is gedefinieerd in Number.MAX_SAFE_INTEGER). Om dit probleem op te lossen, kan je gebruik maken van het BigInt type. Ga in de documentatie op zoek naar hoe je de basisgevallen (het nulde en eerste Fibonacci getal) als BigInt kunt definiëren. Eens deze basisgevallen correct zijn, zullen alle dingen die daaruit berekend worden ook automatisch als BigInt gerepresenteerd worden.

Zoek tenslotte hoe je een BigInt geformatteerd naar de console kunt schrijven in het Belgische getallenformaat (met punten als duizendtallen scheidingsteken).

Uitvoer voor

n = 20

Welk Fibonacci-getal wil je berekenen? 20
6.765

Uitvoer voor

n = 50

Welk Fibonacci-getal wil je berekenen? 50
12.586.269.025

Uitvoer voor

n = 250

Welk Fibonacci-getal wil je berekenen? 250
7.896.325.826.131.730.509.282.738.943.634.332.893.686.268.675.876.375

Je kan de Fibonacci reeks ook berekenen via een iteratieve aanpak die nog efficiënter is (op vlak van geheugen), de code vind je in de oplossingen.