4) How Javascript works

Local Scope
In JavaScript, a local scope refers to the area within a program where a variable is declared and can be accessed. JavaScript has function-level scope, which means that variables declared inside a function are only accessible within that function.

function exampleFunction() {
  // This variable 'localVariable' is within the local scope of the function.
  var localVariable = "I am a local variable";
  console.log(localVariable);
}
exampleFunction(); // Output: I am a local variable
// This will result in an error because 'localVariable' is not accessible outside the function.
console.log(localVariable); // Error: localVariable is not defined

The let and const keywords allow for block-level scoping, which means variables declared with let and const are confined to the block (a set of statements surrounded by curly braces {}) in which they are defined, rather than just the function. This is in contrast to the var keyword, which is function-scoped.

function exampleFunction() {
  if (true) {
    let blockVariable = "I am a block-scoped variable";
    console.log(blockVariable);
  }
  // This will result in an error because 'blockVariable' is not accessible here.
  console.log(blockVariable); // Error: blockVariable is not defined
}
exampleFunction(); // Output: I am a block-scoped variable

In this example, blockVariable is only accessible within the block where it is declared.

Global Scope
In JavaScript, the global scope refers to the outermost scope in a program, where variables and functions are accessible from any part of the code. When you declare a variable or a function outside of any block or function, it becomes part of the global scope.

// Global variable
var globalVar = "I am a global variable";

function myFunction() {
  // Accessing the global variable inside a function
  console.log(globalVar);
}
myFunction(); // Outputs: I am a global variable

// Global function
function globalFunction() {
  console.log("I am a global function");
}
globalFunction(); // Outputs: I am a global function

In this example, globalVar and globalFunction are in the global scope. They can be accessed and used anywhere in the code, both inside and outside functions.
However, it's generally considered good practice to minimize the use of global variables to avoid unintended side effects and potential naming conflicts.

Execution Context
In JavaScript, an execution context is an abstract concept that encompasses the environment in which JavaScript code is executed. Understanding execution contexts is crucial for comprehending how JavaScript code runs. There are two main types of execution contexts in JavaScript,
i) Global Execution Context
The global execution context is the default or outermost context.
It is created when the JavaScript code is executed, and it represents the global scope.
In a browser environment, the global object is the window object.
ii) Function Execution Context
Each time a function is invoked, a new function execution context is created.
It includes the function's local variables, parameters, and a reference to the outer (enclosing) execution context.
The context is popped off the stack when the function execution completes.
Each execution context has two phases -
Creation phase and Execution phase.

Scope Chain
In JavaScript, the scope chain refers to the hierarchical structure of scopes that a program maintains during its execution. A scope in JavaScript is a region of code where a variable can be accessed or modified. Scopes can be nested within each other, creating a scope chain.
When a variable is referenced in JavaScript, the interpreter searches for that variable in the current scope. If the variable is not found, it looks in the outer scope, continuing this process until the variable is found or the global scope is reached.

var globalVariable = 'I am global';

function outerFunction() {
  var outerVariable = 'I am outer';

  function innerFunction() {
    var innerVariable = 'I am inner';
    console.log(globalVariable);  // Access global variable
    console.log(outerVariable);  // Access variable from the outer function
    console.log(innerVariable);  // Access variable from the current function
  }
  innerFunction();
}
outerFunction();

Global Execution Context
In JavaScript, the global execution context is the outermost or top-level context in the execution stack. When a JavaScript program is run, the global execution context is created first.
It consists of two main components,
i) Global Object
In a browser environment, the global object is window. In Node.js, it is global. The global object is a container for various properties and methods that are accessible globally. For example, functions like setTimeout and console.log are properties of the global object.
ii) Global Scope
The global scope encompasses variables and functions that are defined outside of any function or block. Variables declared in the global scope are accessible throughout the entire program.
iii) Additionally, the global execution context sets up the following:

this: In the global context, this refers to the global object (window in browsers, global in Node.js).

When a JavaScript program starts running, the global execution context is created, and code is executed line by line. Functions and variables declared in the global scope are available throughout the entire program. Other execution contexts are created when functions are called, and they have their own scope chains and local variables.

Call Stack
The call stack is a critical concept in JavaScript's runtime environment, providing a mechanism for managing the flow of execution in a program. It keeps track of the currently executing functions and their contexts during the execution of a script.
In JavaScript, when a function is called, a new execution context for that function is created, including information such as local variables and the current position in the code. These execution contexts are organized in a stack-like structure known as the call stack.
Here's a simplified explanation of how the call stack works:
i) Function Call: When a function is called, a new execution context is created for that function, and it is pushed onto the call stack.
ii) Execution: The code inside the function is executed line by line within its execution context.
iii) Return: When the function completes its execution or encounters a return statement, the execution context is popped off the call stack.
iv) Control Flow: The control is then transferred back to the previous execution context on top of the stack, and the program continues its execution from where it left off.
This process repeats as functions are called and return, forming a stack of execution contexts.

Callback Queue
In JavaScript, the callback queue is closely associated with the event loop and is a key concept in handling asynchronous operations. The callback queue holds functions (callbacks) that are ready to be executed, but they are waiting for the execution stack to be empty.
Here's a brief overview of how the callback queue works in conjunction with the event loop,
i) Execution Stack
The execution stack is where the JavaScript engine keeps track of the functions that are currently being executed. When a function is called, its execution context is pushed onto the stack, and when the function completes, its context is popped off the stack.
ii) Callback Queue
The callback queue holds functions (callbacks) that are scheduled to be executed as a result of asynchronous events. These events could be I/O operations, timer events (such as setTimeout or setInterval), or other asynchronous operations.
iii) Event Loop
The event loop continuously checks the state of the call stack and the callback queue. If the call stack is empty, and there are functions in the callback queue, the event loop will move a function from the callback queue to the call stack for execution.

https://cabulous.medium.com/how-v8-javascript-engine-works-5393832d80a7