supplement for Event Loop, HOC & Closure, links to course

2. Javascript Foundation/12 - 18.md

@@ -40,4 +40,34 @@ The Web API comes with browsers, all of them have their JavaScript Engine implem
 check if the Call Stack is empty or the Callback Queue has something returned from Web API.
 
 #### Callback Queue
-a place for finished Web API operations. waiting for the call stack to be empty and event loop to transfer.
+a place for finished Web API operations. waiting for the call stack to be empty and event loop to transfer.
+
+##### Microtask and Macrotask
+```javascript
+while (eventLoop.waitForTask()) {
+  const taskQueue = eventLoop.selectTaskQueue()
+  if (taskQueue.hasNextTask()) {
+    taskQueue.processNextTask()
+  }
+  const microtaskQueue = eventLoop.microTaskQueue
+  while (microtaskQueue.hasNextMicrotask()) {
+    microtaskQueue.processNextMicrotask()
+  }
+}
+```
+> .1) takes the contents of the input file, 2) wraps it in a function, 3) associates that function as an event handler that is associated with the “start” or “launch” event of the program; 4) performs other initialization, 5) emits the program start event; 6) the event gets added to the event queue; 7) the Javascript engine pulls that event off the queue and executes the registered handler, and then (finally) 8) our program runs! — **“Asynchronous Programming in Javascript CSCI 5828: Foundations of Software Engineering Lectures 18–10/20/2016” by Kenneth M. Anderson**
+
+So we see the script running is the first macrotask queued.
+
+**The important points are:**
+- Tasks are taken from the Task Queue.
+- Task from the Task Queue is a Macrotask != a Microtask.
+- Microtasks are processed when the current task ends and the microtask queue is cleared before the next macrotask cycle.
+- Microtasks can enqueue other microtasks. All are executed before the next task inline.
+- UI rendering is run after all microtasks execution.
+
+[Microtask and Macrotask: A Hands-on Approach](https://blog.bitsrc.io/microtask-and-macrotask-a-hands-on-approach-5d77050e2168)
+
+[Difference between microtask and macrotask within an event loop context](https://stackoverflow.com/questions/25915634/difference-between-microtask-and-macrotask-within-an-event-loop-context)
+
+[Jake Archibald: In The Loop - JSConf.Asia 2018](https://www.youtube.com/watch?v=cCOL7MC4Pl0)

5. The 2 Pillars Closures and Prototypal Inheritance/1 - 15.md

@@ -0,0 +1,80 @@
+## Functions are Objects (callable objects)
+review: when we define functions, the compiler looks at our code lexically, it determines what variables are available in variable environment. and also add scope chain.
+
+```javascript
+const func = new Function('num', 'return num') // function constructor
+
+func(1)
+``` 
+
+```javascript
+function woho() {
+	console.log('woho')
+}
+woho.yell = 'ahh'
+------------- underneath the hood ---------------
+const specialObj = {
+	name: 'woho',
+	(): console.log('woho'),
+	yell: 'ahh'
+}
+```
+- name (optional). when use IIFE or function expression, no name.
+- piece of code invoking with brackets.
+- properties (call. apply...)
+
+## First Class Citizens
+- function can be assigned to variable or property of object.
+- pass function as argument into another function.
+- return function as value from other function.
+
+## High Order Function
+- a function that can take a function as an argument.
+- a function that returns another function.
+
+hard code data --> when invoke, pass data --> when invoke, not only data, but pass action(function).
+
+> been able to achieve with HOF is this ability to tell the function what to do during invocation, we are able have our code dry and more flexible. breaking things down into small functionalities.
+
+## Closures (lexical scoping)
+is simply that a combination of function and the lexical environment.
+
+Closures allow a function to access variables from an enclosing scope or environment even after it leaves the scope in which it was declared.
+
+imagine closure is a memory box. and lexically analyze child function. variables outside the child function will be keep around if the child function is using it. anything referenced by the child function will be put into the closure box.
+
+- Memory efficient
+```javascript
+function heavyDuty(index) {
+	const bigArray = new Array(10000).fill('A')
+	return bigArray[index]
+}
+
+function heavyDuty2() {
+	const bigArray = new Array(10000).fill('A')
+	return index => bigArray[index]
+}
+```
+
+- Encapsulation
+```javascript
+var makeCounter = function() {
+  var privateCounter = 0
+
+  function changeBy(val) {
+    privateCounter += val
+  }
+
+  return {
+    increment: function() {
+      changeBy(1)
+    },
+    decrement: function() {
+      changeBy(-1)
+    },
+    value: function() {
+      return privateCounter
+    }
+  }
+}
+```

README.md

@@ -1,2 +1,2 @@
 # Advanced-JavaScript-Concepts-notes
-make notes of course Advanced JavaScript Concept
+make notes of [Advanced JavaScript Concept](https://www.udemy.com/advanced-javascript-concepts/)