Table of Contents
JavaScript : Behind the Scenes + Extra Concepts
- JavaScript Versions
- Mini Reference
-
JavaScript Code Execution
- How Code is executed
- Execution Context & Stack
-
Execution Context in Detail
- Variable Object, Scope Chain & 'this' Variable
- Asynchronous JS Working
-
Extra Concepts
- Refactoring, Debugging Code
- Planning Projects
- Event Delegation
JavaScript : Behind the Scenes + Extra Concepts
This Sheet Explains some of the Behind the scenes working of JavaScript , how our code is executed and how Asynchronous JS works, it also contains some additional Concepts that can help to code your projects easily.
To get this Sheet in Markdown : Github Repo
To Study JavaScript From Beginning : JavaScript Roadmap
JavaScript Versions
- 2009 (ES5) : major update, browsers started integrating JS (Fully supported in all browsers)
- ES6/ES2015 : biggest update to language , after this annual release cycle started
- now on ES2016 / ES2017 / ES2018 / ES2019 ...
Mini Reference
- Function Declaration:
function add() {/* code here */}
- Function Expression:
var add = function () { /* code here */ }
JavaScript Code Execution
-
How Code is executed
- Our code -> JS engine (V8) -> Parser ->
- Abstract syntax Tree -> Machine Code -> Code Runs
-
Execution Context & Stack
- Global Execution Context
- Code that is not inside any block (like function)
- it is Associated with the global object , in browser its the window object
var lastName === window.lastName
- Each time a function is called new Execution Context Object is added
- Execution stack has global context as base , then adds the function context to the stack and removes them from stack when function is returned
-
Execution Context in Detail
- Execution Context Object consists of
- Variable Object
- Scope Chain
- "This" Variable Pointer
-
Creation Phase
-
Creation of Variable Object
- Argument object is created , containing all arguments that were passed to a function
- Code is scanned for Function declaration , for each function a property is created in Variable object , pointing to the function
- Code is scanned for Variable declarations, for each variable a property is created in the Variable Object and set to undefined.
- These upper two phases are HOISTING
- As Creation phase is done before Execution phase , we can call a Function Declaration even before they are declared in code. As it is a pointer in the creation phase.
- Remember this does not happen for Function Expression as it is referenced as a variable (treated as a variable) , so a function expression is saved in Variable Object set to Undefined (the same happens for Variables)
-
Creation Of Scope Chain
- Decides Where can a certain data be accessed
- Each new function creates a scope (variables in its block remain accessible to its stack only)
- Lexical Scoping , a function that is lexically declared within another function gets access to the scope of outer function (Parent Scope)
- Searching for the variable in Parent scopes creates a Scope Chain
- Execution Context is the order in which functions are called
- whereas Scope chain is the order in which function are lexically written
- That is the reason why variables of Functions can be accessed even after they have been returned (removed from Execution Context, but still pointing in Scope Chain) [Closures]
-
Determine the value of 'this' variable in creation Phase
- In regular function , 'this' keyword points to global object (window)
- in method (functions inside object) call, variable points to the object it is calling
- this keyword is not assigned a value until the function in which it is defined is actually called (that is why function borrowing works between objects , as 'this' points to the object it is in)
- Only methods point to the object , 'this' variable of a Function Declaration written inside a method will point to the window
-
Creation of Variable Object
-
Execution Phase
- The Execution context after creation is now executed from top to bottom
- The code of the functions that generated the context is now executed line by line
Asynchronous JS Working
The Event Loop: Behind the scenes
examples of Asynchronous Functions: setTimeout(), DOM events , XMLHttpRequest are Web APIs
They create their own execution object and then are added to the Web APIs stack, running in the background away from the main execution stack
and therefore the execution of main JavaScript Execution stack continues
Once the Function is in Web APIs stack is complete , it comes in the Message Queue and runs when the main execution stack is empty
The Event loop keeps checking the Message Queue and pushes the pending Function to the main execution stack as soon as it gets empty
This is how Asynchronous JS works behind the scenes.
Extra Concepts
-
Refactoring Code
- Use DRY principle ( using functions , objects)
- Organize content in different files (according to the type of work)
Perform Debugging: debugger stops can help in JS
function myfunc() {
// ... code
debugger;
// ... code
}
- Debugging in VSCode and Chrome Developer Tools can also be used
always use
console.log
to check your working at any point of time in program.-
Planning a Project
- Always structure your code in modules (categorize it and divide it in files),
- using IIFE can help , as only the returned data can be accessed outside
- using classes and objects will also help to modulate the code
- use functions to keep your code DRY
- Always make a rough diagram to have a reference of what you are doing
-
How To Write JavaScript Code
- STEP 1 : List the basic and main functionalities of your project ,
- STEP 2 : See the working of the Functionalities Step by Step and code the basic functionalities in execution order.
- STEP 3 : Now look for the extra functionalities and perform STEP 2 again.
- STEP 4 : Finally Work on your UX
- STEP 5 : and now your code will be complete.
-
Event Delegation
- Simply means due to event bubbling, we can target a child element and give it an event listener using the parent element
- Its use Cases
- When we have multiple children to add event to , we can add event listener to parent and then target the child elements we are interested in
- When we want an event handler attached to an element that is not yet in the DOM when our page is loaded.
From here, you can start digging deeper into these concepts because this is just an overview and summary of inner working & concepts of JavaScript
To Study JavaScript From Beginning : JavaScript Roadmap
Top comments (2)
Great Explanation
Thanks !