Array methods

Question 1

Wat is de output van de volgende regels:

const arr = new Array(7)
console.log(arr);

Answer 1

(7) [empty x 7]

Question 2

Wat is de output van de volgende regels:

const arr = new Array(7)
arr.fill(1);
console.log(arr);

Answer 2

(7) [1,1,1,1,1,1,1]

Question 3

Wat is de output van de volgende regels:

const arr = new Array(7)
arr.fill(1, 3);
console.log(arr);

Answer 3

(7) [empty x 3, 1, 1, 1, 1]

Question 4

Wat is de output van de volgende regels:

const arr = new Array(7)
arr.fill(1, 3, 5);
console.log(arr);

Answer 4

(7) [empty x 3, 1, 1, empty x 2]

Question 5

Geef aan hoe je een array van 7 cellen groot kan aanmaken en vullen met de getallen 1 tot 7 door gebruik te maken van de Array.from methode.

Answer 5

const arr = Array.from({ length: 7 }, (_, i) => i + 1);

Normaal is de eerste parameter van de callback functie de huidige waarde van de array. Omdat we deze waarde niet gebruiken noteren we dit met een underscore. Dergelijk variabele wordt een ‘throw away’ variabele genoemd.

Question 6

1. Hoe kunnen we elementen toevoegen aan het einde van een array?
2. Hoe kunnen we elementen toevoegen aan het begin van een array?
3. Hoe kunnen we elementen toevoegen op een bepaalde plaats in een array?
4. Gaan de gebruikte methoden de array muteren of niet?
5. Wat is de return waarde van de methoden?

Answer 6

1. arr.push(5, 6);
2. arr.unshift(1, 2);
3. Volgende regel code gaat een element toevoegen op index 3 van de array:
   arr.splice(3, 0, 4, 5); /splice(startIndex, elementsToDelete, ListOfElementsToAdd)

Merk op dat de tweede parameter van de methode aangeeft hoeveel elementen er verwijdert moeten worden. Dit wilt zeggen dat de splice methode ook gebruikt kan worden om elementen uit een array te verwijderen. Omdat we in dit voorbeeld enkel elementen toevoegen, is dit argument 0.

4. Ja
5. push en unshift geven de nieuwe lengte terug van de array (na toevoeging over verwijdering van element).

De splice methode zal een array teruggeven die de verwijderde elementen bevat. Dit wilt zeggen dat als de methode enkel gebruikt wordt om elementen aan een array toe te voegen, dat een lege array zal worden teruggegeven.

Question 7

1. Hoe kan je een element achteraan de array verwijderen?
2. Hoe kan je een element vooraan een array verwijderen?
3. Hoe kan je een element dat zich bevindt op een bepaalde positie uit een array verwijderen?
4. Gaan de methoden de array muteren of niet?
5. Wat is de return waarde van de methoden?

Answer 7

1. arr.pop();
2. arr.shift();
3. Volgende regel code gaat vanaf index 2, 1 element verwijderen:
   arr.splice(2, 1); // splice(startIndex, numberOfElementsToDelete)
4. Ja
5. De pop en shift methoden zullen het verwijderede element teruggeven.

De splice methode zal een array teruggeven die de verwijderde elementen bevat. Dit wilt zeggen dat als de methode enkel gebruikt wordt om elementen aan een array toe te voegen, dat een lege array zal worden teruggegeven.

Question 8

Hoe kunnen we een array ledigen?

Answer 8

arr.length = 0;

Question 9

1. Welke methoden kan je gebruiken om de index te verkrijgen van het eerste voorkomen of laatste voorkomen van een bepaalde primitieve waarde in een array?
2. Wat is de returnwaarde indien het gezochte element niet gevonden wordt?

Answer 9

1. geeft de index terug van het eerste voorkomen van het element in de array:
   arr.indexOf(‘a’);

zal pas beginnen zoeken naar a vanaf index 2:
arr.indexOf(‘a’, 2);

zal pas beginnen zoeken naar 1 vanaf index 2:
numbers.indexOf(1, 2);

geeft de index terug van het laatste voorkomen van het element in de array:
arr.lastIndexOf(‘a’);

2. Als het element niet gevonden wordt dan wordt -1 teruggegeven.

Question 10

Hoe kan je nagaan of een primitive waarde zich in een array bevindt?
(tip: de returnwaarde moet true/false zijn)

Answer 10

arr.includes(‘a’);

Question 11

Gegeven:

const courses = [
{ id: 1, name: “a” },
{ id: 2, name: “b” },
{ id: 3, name: “c” },
];

1. Waarom levert de volgende regel false op:
   courses.includes({ id: 1, name: “a” });
2. Welke methode moeten we dan wel gebruiken om het object terug te vinden in de array?
3. Wat is de returnwaarde van deze methode?
4. Welke methode gebruik je indien je de index wilt verkrijgen van het gezochte object in de array? Wat geeft deze methode terug als het object niet gevonden wordt?

Answer 11

1. Omdat het object dat we als argument meegeven wordt meegegeven by reference. Dit wilt zeggen dat niet het object zelf maar zijn adres wordt meegegeven. De methode include gaat daarom na of dat adres zich in de array bevindt. Omdat beide objecten (het object dat als argument dient en het object dat in de array staat) twee objecten zijn met een verschillend adres, zal includes false teruggegeven.
2. Als we een referentie element willen terugvinden in een array, dan moeten we gebruik maken van de find methode. Deze methode neemt een callback functie mee als parameter.
   De callback functie zelf kan ook een parameter meekrijgen die het referentie element voorsteld. We kunnen dan als volgt de array doorzoeken:

courses.find(function (course) {
return course.name === “a”;
});

3. Als het object gevonden wordt dan zal find het gevonden object teruggeven, anders zal undefined teruggegeven worden.
4. In dat geval gebruik je:

courses.findIndex(function (course) {
return course.name === “c”;
});

Als het object niet wordt teruggevonden dan wordt -1 teruggeven.

Question 12

Gegeven:

const first = [1, 2, 3];
const second = [4, 5, 6];

Hoe kunnen we deze twee arrays samenvoegen?

Answer 12

Er zijn twee manieren om arrays samen te voegen:

1. Met de concat methode:
   const third = first.concat(second);

Merk op dat de concat methode een nieuwe array teruggeeft.

2. Met de spread operator:

const third = […first, …second];

Question 13

Hoe kunnen we een stuk uit een array kopieren?

Answer 13

// slice( startIndex, endIndex);
const newArr= arr.slice(2, 4);

Merk op dat
- Het kopie het element op het eindindex niet zal bevatten.
- Het niet verplicht is om een eind index mee te geven. Indien enkel een startindex wordt meegegeven zal slice bestaan uit het deel dat begint vanaf de startindex, tot het einde van de array.
- Het niet eens nodig is om argumenten mee te geven. In dit geval is het resultaat gewoonweg een kopie van de derde array.

Question 14

Hoe kan je een functie toepassen op de elementen van de array waarbij de array ook daadwerklijk wordt gemuteerd?

Answer 14

Door gebruik te maken van de forEach methode:

arr.forEach((el, i, arr) => (arr[i] = el * 2));

Question 15

1. Is het mogelijk om de continue en break statements te gebruiken in de forEach methode?
2. Kan de forEach methode ook gebruikt worden voor maps en sets?
3. Wat is het verschil tussen de forEach methode en de map methode?

Answer 15

1. Neen
2. Ja
3. De forEach methode zal de array muteren terwijl de map methode een nieuwe array zal teruggeven.

Question 16

Hoe kan je een functie toevoegen op de elementen van een array waarbij het resultaat wordt teruggegeven in een nieuwe array?

Answer 16

Door gebruik te maken van de map methode:

arr.map(function (el, index, arr) {
console.log(index, el, arr);
});

Question 17

1. Stel dat we a.d.h.v de map methode de elementen van een array willen mappen naar een object. Hoe doen we dit dan?
2. Waar moeten we op letten indien we de callback functie in het bovenstaande geval zouden schrijven als een arrow functie?

Answer 17

1. We doen dit bijvoorbeeld als volgt:

const objects = languages.map(function (language) {
return { programmingLanguage: language };
});

2. In dit geval is het belangrijk om het object dat wordt teruggegeven tussen ronde haken te plaatsen, namelijk:

const objects = languages.map((language) => ({
programmingLanguage: language,
}));

Question 18

Hoe kan je elementen van een array samenvoegen in een string waarbij de elementen gescheiden zijn door een gegeven karakter.

Answer 18

We kunnen de elementen van een array samenvoegen in een string door ze te scheiden door een bepaalde karakter of iets anders. Bijvoorbeeld:

const numbers = [1,2,3]
// join()
const joined = numbers.join(“$”);

Als we joined nu zouden printen dan krijgen we de string: ‘1$2$3’

Indien we de join methode zonder argumenten gebruiken dan zal er standaard een komma gebruikt worden om de elementen in de string te scheiden:

const joined = numbers.join();

Als we joined nu zouden printen dan krijgen we de string: ‘1,2,3’

Question 19

Gegeven:

arr.join()

Welke methode doet net hetzelfde als de join methode in dit voorbeeld?

Answer 19

arr.toString();

Question 20

gegeven:

const numbers = [2, 3, 1];

1. Hoe kan je deze array sorteren van klein naar groot?
2. Hoe kan je deze array in omgekeerde volgorde sorteren?
3. Passen beide methoden de oorspronkelijke array aan of niet?

Answer 20

1. arr.sort()
2. arr.reverse()
3. Ja

Question 21

Gegegeven:

const courses = [
{ id: 1, name: “Node.js” },
{ id: 2, name: “Javascript” },
];

Hoe kan je deze array van objecten alfabetisch op naam sorteren?

Answer 21

courses.sort(function (a, b) {
const nameA = a.name.toUpperCase();
const nameB = b.name.toUpperCase();
if (nameA < nameB) return -1;
if (nameA > nameB) return 1;
return 0;
});

Question 22

Gegeven:

const numbers = [1, 2, -1, 3];

1. Hoe kan je nagaan of alle elementen in deze array positief zijn?
2. Hoe kan je nagaan of er minsten 1 positief element in de array is?
3. Wat is de output van beide methoden dat je hebt gebruikt om te antwoorden op vraag 1 en 2?

Answer 22

1. Dit kan je doen met de every methode:

numbers.every(function (value) {
return value >= 0;
});

2. Dit kan met de some methode:

numbers.some(function (value) {
return value >= 0;
});

3. true/false

Question 23

Gegeven:

const numbers = [1, -1, 2, 3];

1. Filter de positieve waarden uit deze array.
2. Zal deze methode de originele array aanpassen?

Answer 23

1. DIt kan met de filter methode:

const filtered = numbers.filter(function (value) {
return value >= 0;
});

2. Neen

Question 24

Gegeven:

const numbers = [1, 5, 3, -7, 5, 6];

1. Er bestaat een methode die alle elementen van een array gaat reduceren tot 1 waarde. Hoe noemt deze methode.
2. Hoe kan je de som berekenen voor alle elementen van de bovenstaande array met deze methode?

Answer 24

1. De reduce methode
2. Je kan de som als volgt berekenen:

const sum = numbers.reduce(function (acc, val) {
return acc + val;
}, 0);

Merk op dat de reduce methode twee parameters neemt:
- Een callback functie dat zal opgeroepen worden voor elke waarde in de array. Het is belangrijk dat deze callback functie een getal teruggeeft.
- een begin waarde voor de accumulator. Het is echter niet verplicht om deze tweede parameter mee te geven. Als het niet wordt meegegeven dan zal de accumulator automatisch geïnitialiseerd worden met de eerste waarde in de array.

De callback functie neemt zelf ook 2 parameters:
- De accumulator: de variabele dat het resultaat accumuleert in elke iteratiestap
- current value: de huidige waarde van het element.
- de array zelf indien nodig.

Question 25

1. Wat doen de flat methode?
2. Wat doet de flatMap methode?

Answer 25

1. De flat methode zal de dimensie van een array met 1 reduceren. bijvoorbeeld:

const arr = [[1, 2, 3], [4, 5, 6], 7, 8];
arr.flat(); // geeft [1,2,3,4,5,6,7,8]

of

const arr = [[[1, 2], 3], [4, [5, 6]], 7, 8];
arr.flat(); // geeft [[1,2],3,4,[5,6],7,8]

Indien we een array meer dan 1 nivuea willen reduceren dan moeten we dit aangeven met een waarde:, bijvoorbeeld:

const arr = [[[1, 2], 3], [4, [5, 6]], 7, 8];
arr.flat(2); // geeft [1,2,3,4,5,6,7,8]

2. Met de flatMap methode kunnen we de map methode en de flat methode in 1 methode combineren. bijvoorbeeld:

// gaat eerst overal 1 bij optellen en dan pas de flat method
// toepassen. Het resultaat is dan [ ‘1,2,3’, ‘4,5,6’, 8, 9]
arr.flatMap(function (el) {
return el + 1;
});

Merk op dat flatMap enkel 1 level diep gaat. Indien je toch dieper moet dan moet je de map en flat methodes apart gebruiken.