js_the_new_hard_parts.md

JavaScript: The New Hard Parts (Will Sentance)

JS Code Execution:

What happen when JS executes my code?

2 Parts:

1. The thread of execution: Walking through the code
2. A place to store the bits of data (variiable storage)

After a function is done running, its memory gets garbage collected (except for closures)

JS thread is singular - It can do one thing at a time. It is syncronous, it goes in order from top to bottom.

Call Stack

• Global is at the bottom of the stack
• Any time a function is called that function is added on top of the stack
• As soon as the function is finished running that function pops off the stack and any remaining "execution contenxts" / or functions run until global is reached

Async calls when finished go into a "Task Queue", when the call stack is empty and all the global code has finished running. You could have an infinite while loop in your JS and the async coode when not get called. Event Loop: A continous loops that manages and checks to see if there is something in the queue or if something is in the call stack.

Core Parts of Async JS

1. Memory (variables)
2. Thread of Execution (Single threaded JS code)
3. Call Stack (Holds and JS functions / global always at the bottom)
4. Web Browser Features (setTimeout)
5. Task Queue (Holds web browser finished tasks)
6. Event Loop (Manages if there is anything in the task queue and if the call stack is empty)

Promises

• Special objects built into JS that get returned immediately when we make a call to a web browser AP/Feature (i.e fetch).
• Promises do two things: initiaite background web browser work outside of JS and return a initial placeholder object immediatley in JS
• Promises act as a placeholder for the data we hope to get back from the web browser features's background work.
• We also attach the functionality we want to defer running until the background work (async) is done (Usually the .then method). Resolved promises will automatically trigger this functionality

function display(data){
  console.log(data)
}

const futureData = fetch("https://twitter.com/will/tweets/1")\
// future data immediatley returns a promise object with a empty value property
// {
//   value: undefined,
//   onFulfillment: [] // Under the hood onFulfillment runs when the value property has been populated
//  }
// Fetch sets this placeholder object and triggers a web browser feature (XHR)
// When the XHR Web browser feature is triggered is runs the request and when the value is returned it sets the value property in fetch data to data

futureData.then(display)
// .then on future data lets us put a function inside of the onfulfillment array in the promise object
// onfulfillment is then ran after the value property is populated inside of the promise object
// giving us the data in the argument of the display function

// This log runs before the future data is logged
console.log("Me first!")

// When value gets returned from XHR request it populates the value, which triggers onfullFillment, which then runs the functions inside of onfullFillment, which in our case is display()
// returned data is logged to the console

Promises, Web API's, the Callback & Microtask Queues and Event Loop allow us to defer our actions until the "work" (An api request, timer etc) is completed and continue running our code line by line in the meantime

Asyn JS is the backbone of the modern web - letting us build fast 'non-blocking' applications

Asycnc Proccess: https://docs.google.com/presentation/d/1sJmn-3T3nF2wVZaVM02AEhC7koxfnnYmair8LhOEUZ0/edit?usp=sharing

Iterators