prof3ssorSt3v3 · October 27, 2025 17:03
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MAD9014</title>

    <script src="js/main.js" type="module"></script>
  </head>
  <body>
    <header>
      <h1>execution context, scopes, tasks</h1>
    </header>
  </body>
 </html>
diff --git a/main.js b/main.js
 import { log } from './module.js';
 //module execution context

 function greet(lang) {
  // let lang
  return function (name) {
    // hola miguel
    // hallo sven
    // guten tag olaf
    // hello megan
    log(`${lang} ${name}`);
  };
 }

 const hallo = greet('Hallo');
 const hola = greet('Hola');
 const gutenTag = greet('Guten tag');
 const hello = greet('Hello');
 //we have created 4 closures. This is 4 copies of the returned function
 //each copy has a different value for lang

 hello('Megan'); //Hello Megan
 hallo('Inga'); //Hallo Inga
 gutenTag('Markus'); //Guten tag Markus
 hola('Aymen'); // Hola Aymen

 function f1() {
  //function execution context
  let a = 1;
  let b = [1, 2, 3];

  return function f2() {
    let c = 123;
    log(a, c); //c is local, a comes from function f1
  };
  // f2();
 }

 let closureFunc = f1(); //the execution context for f1 is created here
 //closureFunc is a reference to f2. f2 NEEDS a closure around f1.
 closureFunc = null;
 //now there is no more reference to f2.. so f2 AND f1 can be garbage collected
diff --git a/module.js b/module.js
 /* 
 - execution contexts and garbage collection
 - closures
 - timers
 - async vs sync
 - tasks, microtasks, ui render tasks (Event Loop)
 - tasks: event listeners, timers
 - microtasks: Promises, queueMicrotask(), MutationObserver
 - ui RenderTasks: mostly browser controlled, requestAnimationFrame(func)
 - DOMHighResTimeStamp: performance .now(), .timeOrigin, .mark(name)
 */

 export const log = console.log;

 //Timers
 // id = setTimeout(func, delayMS [, arg1, arg2...])
 // clearTimeout(id);

 // id = setInterval(func, delayMS [, arg1, arg2...])
 // clearInterval(id);

 (function fred() {
  log('A');
  setTimeout(function () {
    log(`I waited at least 1234ms`);
  }, 0);
  log('B');
 })(); //IIFE

 window.addEventListener('load', x); //add x to task queue. wait for load event

 function x() {
  log('X'); //happens last because event listener added x to the task queue last
 }

 //Promises
 log('before');
 let p = new Promise(function (resolve, reject) {
  //resolve and reject are functions
  //we call resolve if we are saying that the Promise worked properly
  //we call reject if we are saying that the Promise task failed
  // resolve('good'); - puts then() function onto Microtask queue
  reject('bad'); // - puts catch() function onto Microtask queue
  log('later'); //only after the log('before') still synchronous here
  //log('later') is happening after the catch function was added to mt queue
 })
  .then(function (val) {
    //runs if Promise resolved
    log(val); //the "good" which was passed to the resolve method
  })
  .catch(function (val) {
    //runs if Promise rejected
    log(val); //the "bad" which was passed to the reject method
  });

 // log(p);

 log('after');
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>MAD9014</title>

	<script src="js/main.js" type="module"></script>
	</head>
	<body>
	<header>
	<h1>execution context, scopes, tasks</h1>
	</header>
	</body>
	</html>
	import { log } from './module.js';
	//module execution context

	function greet(lang) {
	// let lang
	return function (name) {
	// hola miguel
	// hallo sven
	// guten tag olaf
	// hello megan
	log(`${lang} ${name}`);
	};
	}

	const hallo = greet('Hallo');
	const hola = greet('Hola');
	const gutenTag = greet('Guten tag');
	const hello = greet('Hello');
	//we have created 4 closures. This is 4 copies of the returned function
	//each copy has a different value for lang

	hello('Megan'); //Hello Megan
	hallo('Inga'); //Hallo Inga
	gutenTag('Markus'); //Guten tag Markus
	hola('Aymen'); // Hola Aymen

	function f1() {
	//function execution context
	let a = 1;
	let b = [1, 2, 3];

	return function f2() {
	let c = 123;
	log(a, c); //c is local, a comes from function f1
	};
	// f2();
	}

	let closureFunc = f1(); //the execution context for f1 is created here
	//closureFunc is a reference to f2. f2 NEEDS a closure around f1.
	closureFunc = null;
	//now there is no more reference to f2.. so f2 AND f1 can be garbage collected
	/*
	- execution contexts and garbage collection
	- closures
	- timers
	- async vs sync
	- tasks, microtasks, ui render tasks (Event Loop)
	- tasks: event listeners, timers
	- microtasks: Promises, queueMicrotask(), MutationObserver
	- ui RenderTasks: mostly browser controlled, requestAnimationFrame(func)
	- DOMHighResTimeStamp: performance .now(), .timeOrigin, .mark(name)
	*/

	export const log = console.log;

	//Timers
	// id = setTimeout(func, delayMS [, arg1, arg2...])
	// clearTimeout(id);

	// id = setInterval(func, delayMS [, arg1, arg2...])
	// clearInterval(id);

	(function fred() {
	log('A');
	setTimeout(function () {
	log(`I waited at least 1234ms`);
	}, 0);
	log('B');
	})(); //IIFE

	window.addEventListener('load', x); //add x to task queue. wait for load event

	function x() {
	log('X'); //happens last because event listener added x to the task queue last
	}

	//Promises
	log('before');
	let p = new Promise(function (resolve, reject) {
	//resolve and reject are functions
	//we call resolve if we are saying that the Promise worked properly
	//we call reject if we are saying that the Promise task failed
	// resolve('good'); - puts then() function onto Microtask queue
	reject('bad'); // - puts catch() function onto Microtask queue
	log('later'); //only after the log('before') still synchronous here
	//log('later') is happening after the catch function was added to mt queue
	})
	.then(function (val) {
	//runs if Promise resolved
	log(val); //the "good" which was passed to the resolve method
	})
	.catch(function (val) {
	//runs if Promise rejected
	log(val); //the "bad" which was passed to the reject method
	});

	// log(p);

	log('after');