Begrippen

Scope - waar variabelen zich bevinden en waar kan je ze benaderen/aanspreken

block-scope (in bijv een if statement)

if(true){

  const state = 'waar'

}
 state is hier niet beschikbar

Global scope is alle scripts bij elkaar.

hoe browsers client side js handelen

1. HTML wordt ingeladen
2. JS bestanden worden gedownload en uitgevoerd (async of defer) JS is render blocking, dus dan wordt eerst de JS ingeladen en dan kent ie nog niet de HTML
3. variabelen en functions worden opgeslagen in het geheugen (memory) - hier worden referencies naar opgeslagen
4. web API's en Promises worden gepland
5. Event loop
6. DOM aangepast

Event loop

Synchrone(1) en Asynchrone(2) code afhandelen Als de code een async code tegen komt (bijvoorbeeld een event listener), pauseert hij deze, daarna worden async functies uitgevoerd

De event loop heeftg een call stack nodig waarin functies worden opgestapeld

Promise

promise.resolve

SetTimeout functie

als je een timeout maakt van 0ms komt deze na alle synchrone functies

Als de synchrone functies zijn uitgevoerd komen de asynchrone functies op de stack

Je hebt een micro queue en een macro queue.

Promise komt op de micro queue Timeout komt op de macro queue

Stel je hebt een settiemout van 0ms die iets doet, een promise die gelijk resolved wordt (promise.resolve()) en een normale functie

Eerst de normale functie, dan de microqueue, en dan de macroqueue

callback is een link naar een functie die nog niet uitgevoerd wordt.

Bijvoorbeeld:

setTimeout(walk, 1000);

Promise

een js object dat een state bijhoud over iets dat in de toekomst gaat gebeuren

dit kan zijn: pending,fulfilled en rejected

Als de state fulfilled is (als het lukt), het resultaat komt in de then

loader = true
then(result){
fetch aan de hand van result
fetch(result).then(result 2)

.catch(error) //als er iets fout gaat
.finally(){
loader = false
}

met een debugger in je code kan je de debugger pauzeren om inhoud van alle vars te zien