Notes for Behind the Scenes section of Jonas Schmedtmann's course lectures https://udemy.com/course/the-complete-javascript-course/learn/lecture/22648469#overview

JavaScript: Behind the Scenes

==> Can use imperative or declarative paradigms and is very flexible.
==> First-class functions (treat functions as variables, passing a function into another function); 
powerful; allows for functional programming.
==> Dyanmically-type language: no data type definitions, known at runtime and can be automatically changed
==> Concurrency model is JS handling multiple tasks at the same time. 
==> Event Loops manage the Single-Thread (executed one task at a time) by taking long running tasks, 
executing them in the background, then placing them back in the thread when finished. The Event Loop 
prevent non-blocking behavior


Multi-Paradigm
==> Paradigms can be imperative or declarative.
==> Procedural programming is what you do when working with small scripts such as DOM manipulation apps
with few functions in between
==> Functional Programming
==> Object Oriented Programming


Compilation vs Interpretation
==> Interpreted runs through the source code executes it line by line
==> Compilation compiles entire source code ahead of time (converts it into machine code into a portable file 
all at once and then writes it to binary code for the computer to run)
==> Just in Time (JIT) Compilation compiles the entire code into machine code then executes it immediately
(no portable file to execute)


JavaScript Engine & Runtime
==> Engine
  ==> Call Stack: is where the various code is executed also known as Execution Context (EC)
  ==> Heap: is where the objects are stored in memory
==> Parsing: the code into Abstract Syntax Tree (AST) which checks and separates key language syntax from other
==> Compilation: takes AST and compiles it into machine code, creation phase
==> Execution: happens immediately in the Call Stack
==> Optimization: JS compiles 'lose' code in order to get things executed as quickly as 
possible, but then functions and callbacks are optimized, re-compiled, and re-executed as many times as needed
to make the code more efficient, the process occurs in special threads that can't be accessed from the code;
this process helps to make the JS engine run quickly
==> Runtime: container with all things needed to use JS (i.e. browser, node.js) or a JS engine with access to web APIs
  ==> Web APIs: provide functionality to JS engines because its accessible on the window object (i.e. DOM, Fetch, Timers)
  ==> Callback Queue: callback functions from DOM event listeners (i.e. click, timer, data)
==> Event Loop takes callback functions from the Callback Queue and places them in the Call Stack


Call Stack Execution
==> Has been compiled and ready to be executed
==> Global EC: where Top-Level Code outside of functions are executed
==> EC: a single function or method is executed in its own EC (i.e. multiple functions means multiple ECs)
  ==> Variable Environment: makes up EC and contains 'const', 'var', functions, and argument object
  ==> Scope Chain: references to variable located outside of the current function
  ==> 'this' keyword; Arrow Functions don't get arguments object or 'this' keyword
==> one EC function executed at a time, when a function is concluded (returned) it's EC is removed from the call stack
and the previous EC becomes active again
==> Callback functions are waited on and executed lastly


Variable Environment and Scope Chain
==> Scoping controls how variables are organized and accessed, where do variables live
==> Lexical scoping is controlled by placement of functions and blocks and code in relation to one another
==> Scope is the space or environment in which a certain variable is declared
  ==> global is for variable outside of functions, top-level, accessible everywhere
  ==> function is a local scope in which a 'var', 'const', or 'let' variable are accessible inside function
  ==> block is a 'const' or 'let' variable accessible inside curly braces
==> Scope chain: nested scopes access variables in global or parent scopes, one-way preceding variable lookup
  ==> has nothing to do with order in which functions are called


  Hoisting
  ==> some variables accessible in the code before they are declared; lifted to top of their scope
  ==> before execution (during creation phase), the code is scanned for variable declarations and for each 
  variable a property is created in the variable environment object
  ==> 'var' variables creates a property on the window object

                          HOISTED?           INITIAL VALUE           SCOPE
  function          
  declarations              Yes             Actual Function          Block

  'var' variables           Yes               Undefined             Function

  'let' and 'const'                         <unintialized>
  variables                 No          Temporal Dead Zone(TDZ)    Block

  function
  expressions                 Depends if using 'var' or 'let'/'const'
  and arrows


  Temporal Dead Zone
  ==> region of the scope in which the variable is defined, but can't be used in any way until defined
  ==> makes it easier to avoid and catch errors


'this' Keyword
==> special variable created for every EC
==> points to 'owner' of the function
==> not static
==> value assigned when function is called
==> arrow function: lexical 'this' is used and picks up the parent function
==> event listener: points to DOM element handler is attached to


Object Oriented Programming (OOP)
==> Prototype based objects (i.e. Arrays (Array.prototype.push()) contain prototype which allows us to inherit methods)