Added more chapters to Behind scenes (#219)

Hachondeoro · sumn2u · web-flow · commit 9911647a6493 · 2024-08-03T08:33:51.000-05:00
* Add "JavaScript behind the scenes" section with key concepts

Introduce new comprehensive documentation covering foundational concepts of JavaScript's internal mechanisms. Key topics include Call Stack, Engine, and Event Loop, providing a deeper understanding for writing efficient code.

* Add new chapters on Execution Context, Memory Heap, and Runtime Environment

Introduced detailed chapters to explain fundamental JavaScript concepts. Includes descriptions and code examples for understanding execution context, memory heap, and runtime environment. Updated SUMMARY.md to reflect these additions.

---------

Co-authored-by: Suman Kunwar &lt;suman.kunwar@daliaresearch.com&gt;
diff --git a/en/SUMMARY.md b/en/SUMMARY.md
@@ -137,6 +137,9 @@
   - [Call Stack](behind-scenes/call-stack.md)
   - [Engine](behind-scenes/engine.md)
   - [Event Loop](behind-scenes/event-loop.md)
+  - [Execution Context](behind-scenes/execution-context.md)
+  - [Memory Heap](behind-scenes/memory-heap.md)
+  - [Runtime Environment](behind-scenes/runtime-environment.md)
 - [References](References.md)
 - [Resources](resources.md)
 - [Credits](Credits.md)
diff --git a/en/behind-scenes/execution-context.md b/en/behind-scenes/execution-context.md
@@ -0,0 +1,127 @@
+---
+chapter: 27
+pageNumber: 260
+description: Understanding Execution Context in JavaScript.
+---
+
+## Understanding Execution Context in JavaScript
+
+In JavaScript, an execution context is an environment where the code is evaluated and executed. It is a fundamental concept that helps manage the scope and behavior of variables and functions.
+
+### Types of Execution Context
+
+There are three main types of execution contexts in JavaScript:
+
+1. **Global Execution Context**: This is the default context where the code starts execution. It creates a global object (e.g., `window` in browsers) and sets up the global scope.
+2. **Function Execution Context**: Created whenever a function is invoked. Each function has its own execution context.
+3. **Eval Execution Context**: Created when code is executed inside the `eval` function.
+
+### Phases of Execution Context
+
+Each execution context goes through two phases:
+
+1. **Creation Phase**: In this phase, the JavaScript engine sets up the environment for the code to be executed. It involves:
+   - Creating the `this` binding.
+   - Setting up the scope chain.
+   - Creating the variable object (variables, functions, and arguments).
+
+2. **Execution Phase**: In this phase, the JavaScript engine executes the code line by line.
+
+### Example of Execution Context
+
+Here's an example to illustrate how execution contexts work:
+
+```javascript
+var globalVar = "I am a global variable";
+
+function outerFunction() {
+    var outerVar = "I am an outer variable";
+
+    function innerFunction() {
+        var innerVar = "I am an inner variable";
+        console.log(globalVar); // Accesses global variable
+        console.log(outerVar);  // Accesses outer variable
+        console.log(innerVar);  // Accesses inner variable
+    }
+
+    innerFunction();
+}
+
+outerFunction();
+```
+
+**Output:**
+```
+I am a global variable
+I am an outer variable
+I am an inner variable
+```
+
+### Explanation
+
+1. **Global Execution Context**:
+    - `globalVar` is created and assigned the value "I am a global variable".
+    - `outerFunction` is created and stored in memory.
+
+2. **Function Execution Context (outerFunction)**:
+    - `outerVar` is created and assigned the value "I am an outer variable".
+    - `innerFunction` is created and stored in memory.
+
+3. **Function Execution Context (innerFunction)**:
+    - `innerVar` is created and assigned the value "I am an inner variable".
+    - The `console.log` statements access variables from their respective scopes.
+
+### Scope Chain and Lexical Environment
+
+The scope chain is a list of all the variable objects that the currently executing code has access to. The lexical environment is the environment in which the code is written, and it determines the scope chain.
+
+### Example of Scope Chain
+
+```javascript
+var a = 10;
+
+function foo() {
+    var b = 20;
+
+    function bar() {
+        var c = 30;
+        console.log(a + b + c); // Accesses variables from all scopes
+    }
+
+    bar();
+}
+
+foo();
+```
+
+**Output:**
+```
+60
+```
+
+### Explanation
+
+1. **Global Scope**: Contains `a`.
+2. **Function Scope (foo)**: Contains `b` and has access to `a`.
+3. **Function Scope (bar)**: Contains `c` and has access to `a` and `b`.
+
+### Hoisting
+
+Hoisting is a behavior in JavaScript where variable and function declarations are moved to the top of their containing scope during the creation phase.
+
+### Example of Hoisting
+
+```javascript
+console.log(hoistedVar); // Output: undefined
+var hoistedVar = "I am hoisted";
+
+hoistedFunction(); // Output: I am a hoisted function
+function hoistedFunction() {
+    console.log("I am a hoisted function");
+}
+```
+
+### Explanation
+
+- `hoistedVar` is declared but not initialized during the creation phase, so it is `undefined` when accessed.
+- `hoistedFunction` is fully hoisted and can be called before its declaration.
diff --git a/en/behind-scenes/memory-heap.md b/en/behind-scenes/memory-heap.md
@@ -0,0 +1,86 @@
+---
+chapter: 27
+pageNumber: 261
+description: Understanding Memory Heap in JavaScript.
+---
+
+## Understanding Memory Heap in JavaScript
+
+In JavaScript, memory management is crucial for ensuring efficient and smooth performance of applications. The memory heap is a region in memory where objects, strings, and closures are stored. It is managed by the JavaScript engine's garbage collector.
+
+### What is a Memory Heap?
+
+The memory heap is an area of pre-reserved computer memory that a program can use to store data in some variable amount. Unlike the stack, which is used for static memory allocation, the heap is used for dynamic memory allocation.
+
+### How Memory Heap Works
+
+When you create objects or variables in JavaScript, they are allocated in the memory heap. The JavaScript engine's garbage collector periodically scans the heap to identify and reclaim memory that is no longer in use.
+
+### Example of Memory Allocation
+
+Here's an example to illustrate how memory is allocated in the heap:
+
+```javascript
+let obj = {
+    name: "John",
+    age: 30
+};
+
+let arr = [1, 2, 3, 4, 5];
+```
+
+In this example, the object `obj` and the array `arr` are allocated in the memory heap.
+
+### Garbage Collection
+
+JavaScript uses an automatic garbage collection mechanism to manage memory. The garbage collector identifies objects that are no longer reachable and reclaims their memory.
+
+### Example of Garbage Collection
+
+Consider the following example:
+
+```javascript
+function createUser() {
+    let user = {
+        name: "Alice",
+        age: 25
+    };
+    return user;
+}
+
+let user1 = createUser();
+let user2 = createUser();
+user1 = null; // The object referenced by user1 is now eligible for garbage collection
+```
+
+In this example, when `user1` is set to `null`, the object it referenced becomes eligible for garbage collection because it is no longer reachable.
+
+### Memory Leaks
+
+Memory leaks occur when memory that is no longer needed is not released. This can happen if references to objects are unintentionally retained.
+
+### Example of Memory Leak
+
+Here's an example of a memory leak:
+
+```javascript
+let arr = [];
+function addElement() {
+    arr.push(new Array(1000000).join('x'));
+}
+
+setInterval(addElement, 1000); // This will cause a memory leak as the array keeps growing
+```
+
+In this example, the `arr` array keeps growing because new elements are continuously added without being removed, leading to a memory leak.
+
+### Best Practices for Memory Management
+
+1. **Avoid Global Variables**: Minimize the use of global variables to reduce the risk of memory leaks.
+2. **Use `let` and `const`**: Prefer `let` and `const` over `var` to limit the scope of variables.
+3. **Clean Up References**: Explicitly set references to `null` when they are no longer needed.
+4. **Use Closures Wisely**: Be cautious with closures as they can retain references to outer variables.
+
+### Conclusion
+
+Understanding how the memory heap works in JavaScript is essential for writing efficient and performant code. By following best practices and being mindful of memory allocation and garbage collection, you can avoid common pitfalls such as memory leaks.
diff --git a/en/behind-scenes/runtime-environment.md b/en/behind-scenes/runtime-environment.md
@@ -0,0 +1,112 @@
+---
+chapter: 27
+pageNumber: 262
+description: Understanding Runtime Environment in JavaScript.
+---
+
+## Understanding Runtime Environment in JavaScript
+
+The runtime environment in JavaScript is the context in which your code is executed. It includes the JavaScript engine, the call stack, the memory heap, and the APIs provided by the environment (such as the browser or Node.js).
+
+### JavaScript Engine
+
+The JavaScript engine is responsible for executing your code. Popular engines include V8 (used in Chrome and Node.js), SpiderMonkey (used in Firefox), and JavaScriptCore (used in Safari).
+
+### Call Stack
+
+The call stack is a data structure that keeps track of function calls. When a function is called, it is added to the top of the stack. When the function returns, it is removed from the stack.
+
+### Example of Call Stack
+
+```javascript
+function first() {
+    console.log("First function");
+    second();
+}
+
+function second() {
+    console.log("Second function");
+    third();
+}
+
+function third() {
+    console.log("Third function");
+}
+
+first();
+```
+
+**Output:**
+```
+First function
+Second function
+Third function
+```
+
+### Memory Heap
+
+The memory heap is where objects, strings, and closures are stored. It is managed by the garbage collector, which reclaims memory that is no longer in use.
+
+### Example of Memory Allocation
+
+```javascript
+let obj = {
+    name: "John",
+    age: 30
+};
+
+let arr = [1, 2, 3, 4, 5];
+```
+
+### Event Loop
+
+The event loop is responsible for handling asynchronous operations. It continuously checks the call stack and the task queue, executing tasks from the queue when the stack is empty.
+
+### Example of Event Loop
+
+```javascript
+console.log("Start");
+
+setTimeout(() => {
+    console.log("Timeout");
+}, 0);
+
+console.log("End");
+```
+
+**Output:**
+```
+Start
+End
+Timeout
+```
+
+### APIs Provided by the Environment
+
+The runtime environment provides various APIs that you can use in your code. In a browser, these include the DOM, fetch, and setTimeout. In Node.js, these include file system operations, HTTP requests, and more.
+
+### Example of Browser API
+
+```javascript
+document.getElementById("myButton").addEventListener("click", () => {
+    alert("Button clicked!");
+});
+```
+
+### Example of Node.js API
+
+```javascript
+const fs = require('fs');
+
+fs.readFile('example.txt', 'utf8', (err, data) => {
+    if (err) {
+        console.error(err);
+        return;
+    }
+    console.log(data);
+});
+```
+
+### Conclusion
+
+Understanding the runtime environment in JavaScript is crucial for writing efficient and effective code. By knowing how the call stack, memory heap, event loop, and provided APIs work, you can better manage your code's execution and performance.
