Javascript

Question 1

Wat is het verschil tussen ‘interpreters’ en ‘compilers’?

Answer 1

Interpreters: lezen de code door.
Compilers: vertalen de code

Question 2

Leesbare menselijke code OF abstracte one liners?

Answer 2

Leesbare menselijke code, want mensen werken met je bestanden. De rest kan een systeem afhandelen.

Question 3

Wat is een ‘call stack’?

Answer 3

Call stack slaat functies op die je aanroept (call) en stapelt ze wanneer je dieper in de functie naar andere functies verwijst. Eenmaal klaar in de diepst liggende functie, dan begint het afbouwen van de call stack.

Question 4

Wat is de Global Execution Context?

Answer 4

Global Execution Context is de eerste functie om een pagina te laden. Ook wel het window object.

Question 5

Wat is een Memory Heap?

Answer 5

Memory Heap is een ruimte in de JS engine die je kan gebruiken om informatie in op te slaan, zoals constante variabelen en functies. Alles wat je definieert.

Question 6

Wat is een goed gebruik met ‘listeners’?

Answer 6

Ze ook weer stoppen

Question 7

Const object = { name: Maik }
Const obj = object
Obj.name = Tess

Wat is de waarde van object.name?

Answer 7

Tess, want je refereert naar een object. Het is een doorgeefluik. De juiste oplossing hier is om er een clone van te maken:

…object

Question 8

Functie in een object method die gebruik maakt van ‘this’, waar refereert die naar?

Answer 8

Het window object, omdat de ‘this’ niet is toegewezen. Tenzij je het volgende doet:

Functienaam.bind(this)

Of

Const self = this

Question 9

Wat gebeurd er als je 5 toewijst aan een constant variable?

Answer 9

Dan voegt JS dit automatisch aan een Number object toe. Hierdoor kun je gebruik maken van de methods die het Number object bezit.

Question 10

Class: een method staat buiten de constructor in een class, waarom?

Answer 10

Bij ‘new’ wordt de constructor iedere keer uitgevoerd vanwege nieuwe data. Terwijl de methode gebruikt wordt door alle instanties van de class. Dit zou extra geheugen in beslag nemen.

Question 11

FP: wat is het voordeel om this.name = name te gebruiken in een Functie?

Answer 11

Je kan dan de name die als parameter aan de Functie wordt meegegeven direct toewijzen aan het ‘new’ object. Waardoor je newObject.name kan doen.

Question 12

Wat is impliciet binding?

Answer 12

Het woord ‘this’ wordt automatisch toegekend aan het object.

Question 13

Wat is expliciet binding?

Answer 13

Bijna hetzelfde als impliciet, maar dan gebruik je .bind() om het object toe te wijzen aan een functie waar het ‘this’ keyword naar moet verwijzen.

Question 14

Waarom wil je mutatie van variabelen en objecten voorkomen?

Answer 14

Omdat het onvoorspelbaar gedrag in de code kan veroorzaken. Je veranderd iets dat een ander doel had.

Advies is ook om nieuwe variabelen te maken of te spreaden in het geval van een object.

Question 15

Wat doet concat()?

Bijvoorbeeld: user.cart = user.cart.concat(item)

Answer 15

Dit is het mergen van arrays. Het maakt een nieuwe array van twee bestaande.

Alleen concat geeft een nieuwe array terug. Als je deze toewijst aan de bestaande array zoals het voorbeeld, dan blijft het oude object intact.

Question 16

Om te voorkomen dat je telkens user.cart hoeft te doen kun je…?

Answer 16

De cart uit user halen:

Const { cart } = user

Question 17

Wat doet Object.assign()?

return Object.assign({}, user, { cart: updateCart });

Answer 17

Dit returnt een nieuw object waarin user wordt toegevoegd en binnen user wordt cart aangepast met updateCart.

Question 18

Wat is memoization?

Answer 18

Dit is een optimalisatie techniek waarbij functie results worden gecacht. Dus wordt de cache result gebruikt als dezelfde input wordt gegeven.

Question 19

Wat doet een callback() functie?

Answer 19

Deze wordt opgeslagen in de cache. En de dependencies zorgen voor nieuwe data in de functie dat resulteert in een andere return waarde. Lees ook memoization.

Question 20

Hoe wil je functioneel programmeren in de basis opstellen?

Answer 20

Zorg dat functies puur blijven. Dus niet muteren of zo min mogelijk.

Question 21

Inheritance of composable programming?

Answer 21

Voorkeur composable omdat je kleine stukjes samenbrengt in een nieuwe functie.

Inheritance begint met een super class die zicht extend in sub classes. Waarbij alles aan een parent class wordt doorgegeven aan de sub classes

Question 22

Why use Promise?

Answer 22

Dit is handig voor async Logic omdat je altijd iets terug krijgt zoals beloofd. Tegelijkertijd kun je andere code uitvoeren. En het error systeem werkt erg goed.

Question 23

Leg try…catch uit

Answer 23

Dit is bedoelt voor error handling voor synchrone code. En werkt alleen met die context. In tegenstelling tot Promise.

Question 24

Waarom Async Await?

Answer 24

1. Het is leesbaarder dan promise.
2. Je kan het flexibeler inzetten zoals:
   Const fetchUsers = Async function() …
3. In de functie kun je een try…catch gebruiken om errors af te vangen.

Question 25

Wat doet dit:

Const { tiger, …rest } = animals

Answer 25

Hier haal je tiger uit animals array. Rest is dan een nieuw object met de overgebleven items van animals.

Question 26

[JS] hoe werkt onderstaande code?

displayCartPageUiExperiment && <Component></Component>

Answer 26

displayCartPageUiExperiment is een boolean.
Buiten het feit dat het true of false kan meekrijgen, kan het o.b.v. de waarde undefined ook een waarde ‘false’ krijgen.

Question 27

[JS] wat is een IIFE?

Answer 27

Een imediatly invoked function expression. (function() {})()

Question 28

[JS] wat zijn de voordelen van module patterns?

Answer 28

1. Het maakt code onafhankelijk van de rest van de code.
2. Het maakt code stabieler.
3. Het maakt code prive en bewust wat je gebruikt en deelt met andere modules.

Question 29

[JS] undefined versus null, wanneer gebruik je wat en waarom?

Answer 29

Undefined gebruik je binnen Javascript als een property van een component niet doorgegeven wordt. Dan kan dit dus undefined zijn.

Null krijg je vaak terug als waarde van de server. Maar ook elders in de applicatie is het verstandig om null aan te geven omdat je dan bewust aangeeft dat de waarde leeg (null) is.

Als je wilt aangeven dat een variabele geen waarde heeft, maar wel gedefinieerd is, gebruik je undefined. Als je wilt aangeven dat een variabele bewust geen waarde heeft of dat een waarde is verwijderd, gebruik je null.

Question 30

[JS] useDebounce, wat is het en wanneer gebruik je het?

Answer 30

debouncen is om te voorkomen dat een WAARDE overschreven wordt in de tijd dat je dit wilt gebruiken. Je vertraagd deze overschrijving.

Dit komt van pas bij een zoekfunctie waarbij je wilt voorkomen dat een zoekwaarde overschreven wordt in de tijd dat de vorige nog verwerkt moest worden door het systeem. Vandaar de delay die je in kan stellen.

Question 31

[JS] als je eenmaal ? Gebruikt in chaining. Wat is dan goed om te doen?

Answer 31

De andere opties in de chaining ook optional te maken. Daardoor bouw je safety nets in. Bij undefined zal deze stoppen en verder gaan naar de volgende regel code.

Question 32

[JS] als je eenmaal ? Gebruikt in chaining. Wat is dan goed om te doen?

Answer 32

De andere opties in de chaining ook optional te maken. Daardoor bouw je safety nets in. Bij undefined zal deze stoppen en verder gaan naar de volgende regel code.

Question 33

[JS] wat is een best practice voor keys in een map functie?

Answer 33

Dat je ze uniek maakt en zo specifiek gericht op het item die je mapped. Bijvoorbeeld ‘string-{product.id}’ en niet index gebruiken omdat de volgorde van de inhoud van de array kan veranderen. En key 1 dan twee verschillende waardes heeft.

Question 34

[JS] Wat doet Object.hasOwn() en wanneer gebruik je het?

Answer 34

Dit checkt of een object een property bevat van ‘prop-x’. Dit zet je in op het moment of je wilt controleren of een object ‘prop-x’ bevat om vervolgens in je logica hiermee te werken.

const object1 = {
prop: ‘exists’,
};

console.log(Object.hasOwn(object1, ‘prop’));
// Expected output: true

console.log(Object.hasOwn(object1, ‘toString’));
// Expected output: false

console.log(Object.hasOwn(object1, ‘undeclaredPropertyValue’));
// Expected output: false

Question 35

Welk type is het meest geheugen efficiënt?

Nummer, string, functie, object of array

Answer 35

1. Array: vast type data
2. Functie: lichtgewicht, tenzij complexe closures.
3. String: efficiënt als immutable, meer geheugen bij veel wijzigingen. —> dit kan dus efficiënt zijn wanneer je stringified.
4. Object: minst efficiënt, door flexibiliteit en overhead)