UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Upload
Sign in
Vibhor Grover, profile picture
Uploaded byVibhor Grover
PDF, PPTX1,500 views

Javascript

The document explains the process behind JavaScript execution in browsers, detailing how various engines parse the code, create an abstract syntax tree, and convert it to machine code. It covers concepts like execution contexts, scope, hoisting, and the execution stack, highlighting the flow of function calls and variable accessibility. The interaction between global and function scopes is emphasized, as well as the role of the 'this' keyword in different contexts.

Engineering◦
Download as PDF, PPTX
1 / 10
2 / 10
3 / 10
4 / 10
Most read
5 / 10
6 / 10
7 / 10
Most read
8 / 10
9 / 10
10 / 10
Most read
L E T S S E E W H A T S B E H I N D T H E S C E N E S PROGRAMMING | JAVASCRIPT
In the browser, we have a Javascript engine that takes the code and executes it. Each browser has its own javascript engine Google Chrome has a V8 engine, Firefox has Spider Monkey and Safari has a Nitro engine, so every browser will have a JS engine Inside the engine the first step is to parse the code by a parser, it will read the code line by line and will check that the syntax is correct. The parser will know rules for JS to ensure this. If it finds any mistakes it will throw an error and execution will stop Stuff happening behind the scenes
If everything is correct the parser will produce a data structure which is called Abstract Syntax Tree and that is then turned into machine code, machine code is executed directly by the computer’s processor and that is where our code runs. They are subtle differences about in the steps but these are the main steps for all Stuff happening behind the scenes
The execution context is the environment in which Javascript is executed. Think of execution contexts like a box which contains variables and our code when we talk about JavaScript code execution, we need to keep in mind the execution stack and scope All the code that is not inside any function is in GEC. So any variables or functions, not inside the function is in GEC. GEC is an object which in case of a browser it will be a window object, everything you declare in a global context will be attached to the window object Execution Contexts Global Execution Context (GEC)
A stack data structure in which the new execution context is pushed on top of Global Execution Context. If inside the new execution context(which is a function basically) a new function is called it will create a new execution context and that new execution context is pushed on top of the previous execution context The global context is located in the first position from bottom to top in the execution stack. Every time a new context is created when a function is called, this placed at the top of the queue. Once it's executed, they are eliminated from top to bottom Execution Stack
Argument object is created, which stores all arguments (if any) in a function. The code is scanned for function and variable declarations and creates a property in the variable object (VO) that points to those functions and variables before execution. This process is known as hoisting Creation of the variable object Elevate functions and variables by making them available before execution, albeit in different ways: • Functions: only those that are declared. It makes them fully available. • Variables: makes them available but as undefined Hoisting
Scoping is where can the variable be accessed. Each function has its own scoping space where the variables are defined. Typically a scope is created by if for blocks but not in Javascript. New scope is created by only writing new functions. In Javascript we also have lexical scoping for example a function inside another function will access to its outer function Scoping and Scope Chain
Each and every new execution context gets a this variable. In a regular function call “this” keyword points to window or browser object which is a global object. Important thing to remember is that the this keyword is not assigned a value until a function where a function where it is defined is called Scope Chain “this” variable As the flow of execution is followed, a chain of scopes belonging to the object variable is created to finally create the context object
The execution stack is how the function calls are placed inside the execution stack, storing their context, while the scope chain refers to the scope of accessibility existing between the different contexts Remember !
In this way, the context object is created and goes to the second phase, which is the line-by-line execution of the code within each context until each function call ends and they are removed from the execution stack Conclusion Thank you VIBHOR GROVER