Updated The Layout and Bit of Changes

Author: avinashyadav16

01_JavaScript_Fundamentals.md

@@ -1,4 +1,4 @@
-# 👋 Hello, World!
+# CHAPTER 01: 👋 Hello, World!
 
 ## 🧩 The `<script>` Tag
 
@@ -124,3 +124,11 @@ Use separate `<script>` tags instead:
 ```
 
 ---
+
+<br><br>
+
+<p align="right">
+  <a href="./02_Code_Structure.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

02_Code_Structure.md

@@ -1,4 +1,4 @@
-# 🧱 JavaScript Code Structure
+# CHAPTER 02: 🧱 JavaScript Code Structure
 
 The building blocks of code.
 
@@ -15,7 +15,8 @@ alert("Hello, world!");
 We can have as many statements in our code as we want. They can be separated with a semicolon (`;`):
 
 ```js
-alert("Hello"); alert("World");
+alert("Hello");
+alert("World");
 ```
 
 But usually, for readability, we write them on separate lines:
@@ -34,8 +35,8 @@ Semicolons can be **omitted** in many cases where a line break exists:
 This would also work:
 
 ```js
-alert("Hello")
-alert("World")
+alert("Hello");
+alert("World");
 ```
 
 Here, JavaScript interprets the line break as an **implicit** semicolon. This is called **automatic semicolon insertion**. But be careful—**not all cases** are safe.
@@ -45,9 +46,7 @@ Here, JavaScript interprets the line break as an **implicit** semicolon. This is
 Example:
 
 ```js
-alert(3 + 
-1 
-+ 2);
+alert(3 + 1 + 2);
 ```
 
 ✅ This works as expected and shows `6` because JavaScript does not insert semicolons here. JavaScript knows the line ends in `+`, so it continues.
@@ -71,12 +70,10 @@ Hello
 But if you remove the semicolon after the `alert`:
 
 ```js
-alert("Hello")
-
-[(1, 2)].forEach(alert);
+alert("Hello")[(1, 2)].forEach(alert);
 ```
 
-It fails! 
+It fails!
 The difference compared to the code above is only one character: the semicolon at the end of the first line is gone.
 
 If we run this code, only the first Hello shows (and there’s an error, you may need to open the console to see it). There are no numbers any more.
@@ -151,3 +148,17 @@ alert('World');
 
 - Single-line comment: `Ctrl + /` (or `Cmd + /` on Mac)
 - Multiline comment: `Ctrl + Shift + /` (or `Cmd + Option + /` on Mac)
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./01_JavaScript_Fundamentals.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./03_The_Modern_Mode_use_strict.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

03_The_Modern_Mode_use_strict.md

@@ -1,4 +1,4 @@
-# 🛡️ JavaScript Strict Mode – `"use strict"`
+# CHAPTER 03: 🛡️ JavaScript Strict Mode – `"use strict"`
 
 ## 📜 What is `"use strict"`?
 
@@ -103,3 +103,17 @@ But… when you start using **classes** or **modules**, strict mode is enabled a
 ---
 
 Stay strict, code safe! 💻🔒
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./02_Code_Structure.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./04_Execution_Context.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

04_Execution_Context.md

@@ -1,13 +1,13 @@
-# Episode 1 : Execution Context
+# CHAPTER 04: Execution Context
 
 ### Everything in JS happens inside the **execution context.**
 
-Assume execution context to be a big box/container where everything takes place(whole javascript code is executed).
+Assume execution context to be a big box / container where everything takes place(whole javascript code is executed).
 
 It has 2 components in it:
 
-<li> <strong>Memory : </strong>The place where all the variables and functions are stored as (key:value) pairs. Memory component is also known as <em>variable environment</em>.
-<li> <strong>Code : </strong>The place where code is executed one line at a time. Code component is also known as <em>Thread of Execution</em>
+- **Memory:** The place where all the variables and functions are stored as (key:value) pairs. Memory component is also known as _variable environment_.
+- **Code:** The place where code is executed one line at a time. Code component is also known as _Thread of Execution_
 
 <br>
 
@@ -16,5 +16,19 @@ _Javascript is not possible without this beautiful execution context._
 
 ### JS is a **synchronous single-threaded language**.
 
-<li> By single threaded, we mean JS can only run 1 command at a time
-<li> By synchronous single threaded, we mean it can run 1 command at a time, <em>in a specific order</em>
+- By single threaded, we mean JS can only run 1 command at a time
+- By synchronous single threaded, we mean it can run 1 command at a time, **_in a specific order_**
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./03_The_Modern_Mode_use_strict.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./05_Execution_Context_And_Call_Stack.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

05_Execution_Context_And_Call_Stack.md

@@ -1,4 +1,4 @@
-# Episode 2 : Execution & Call Stack
+# CHAPTER 05: Execution & Call Stack
 
 **What happens when we run a js program?**
 
@@ -16,7 +16,7 @@ var square2 = square(n);
 var square4 = square(4);
 ```
 
-Now first, for this entire code a <strong>Global</strong> execution context is created.
+Now first, for this entire code a **Global** execution context is created.
 
 So, this execution context is created in 2 phases:
 
@@ -28,7 +28,7 @@ So, this execution context is created in 2 phases:
 Here JS will allocate memory to all the variables and functions whenever they are encounterd while running whole js program line by line. In case of variables, it stores a special value called _undefined_, and in case of functions it literally stores the whole code of the function inside this memory space.
 
 - Memory is allocated to variables and functions.
-- For variable name(which is key) it assigns a value of <strong>undefined</strong>
+- For variable name(which is key) it assigns a value of **undefined**
 - For the function name(which is key) it assigns the entire function code as value.
 
 ```javascript
@@ -56,3 +56,17 @@ To manage all these EC, a **call stack** is created. Everytime code is run, the
 > Call Stack maintains the order of execution of execution contexts
 
 #### Call stack also known as Execution control stack, program stack, control stack, runtime stack and machine stack
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./04_Execution_Context.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./06_Hoisting.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

06_Hoisting.md

@@ -1,4 +1,4 @@
-# Episode 3 : Hoisting
+# CHAPTER 06: Hoisting
 
 ## Code Example 01
 
@@ -60,7 +60,11 @@ Output:
 - Not defined: We have not initialised the value for variable anywhere in the entire code and in memory space.
 - Undefined: It is a placeholder that is assigned to a variable by the Javascript Engine until the variable is assigned with some other value.
 
-**Hoisting** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting _error_
+---
+
+**`Hoisting`** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting _error_
+
+---
 
 <br>
 
@@ -134,3 +138,17 @@ Output:
 - The answer lies in the Global Execution Context. In the memory phase, the variables will be initialized as _undefined_ and functions will get the whole function code in their memory.
 
 - This is the reason why we are getting these outputs.
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./05_Execution_Context_And_Call_Stack.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./07_Functions_And_Variable_Environment.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

07_Functions_And_Variable_Environment.md

@@ -1,4 +1,4 @@
-# Episode 4 : Functions and Variable Environments
+# CHAPTER 07: Functions and Variable Environments
 
 ```javascript
 var x = 1;
@@ -31,12 +31,34 @@ Outputs:
 ### Code Flow
 
 - The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
+
   > Call Stack : GEC
+
 - In first phase of GEC (memory phase), variable `x:undefined` and `a` and `b` have their entire function code as value initialized
 - In second phase of GEC (execution phase), when the function is called, a new local EC is made. After `x = 1` assigned to GEC `x`, `a()` is called. So local EC for a is made inside code part of GEC.
+
   > Call Stack: [GEC, a()]
+
 - For local EC, a totally different `x` variable assigned `undefined` (`x` inside `a()`) in phase 1 , and in phase 2 it is assigned `10` and printed in console log. After printing, no more commands to run, so `a()` local EC is removed from both GEC and from Call stack
+
   > Call Stack: GEC
+
 - Cursor goes back to `b()` function call. Same steps repeat.
+
   > Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)
+
 - Finally GEC is deleted and also removed from call stack. Program ends.
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./06_Hoisting.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./08_window_And_this.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

08_window_And_this.md

@@ -1,4 +1,4 @@
-# Episode 5: Window and this keyword
+# CHAPTER 08: Window and this keyword
 
 ### Everywhere JS is run, it is done with a JS execution engine. For Chrome: v8
 
@@ -7,6 +7,7 @@
 - It creates the GEC, the "window" and the _this_ variable.
 - Window is a big global object that has a lot of functions and variables, which is created along with global execution context.These functions and varibles are created by the JavaScript Engine and into the global scope. All of these can be accessed from anywhere in the program.
 - At the global level, _this_ points to _window_ object.
+
   > this === window -> true (at global level)
 
 _Whenever a JavaScript program is run, a **global object** is created, a **global execution context** is created and along with it a **this** varible is also created._
@@ -28,5 +29,19 @@ console.log(a); //also gives same "a" value. (if we don't put any . in front of
 console.log(x); // x is not defined. (tries to find x inside global space, but it isn't there)
 ```
 
-- Global space is anything in JS which isn't inside a function. All these global objects will be present inside the windows schema. But non globals ones won't be there (here, x)
+- Global space is anything in JS which isn't inside a function. All these global objects will be present inside the windows schema. But non globals ones won't be there (here, `x`)
 - When a GEC is made, _this_ is also created with it (even for functional(local) EC). Global object provided by the browser engine is the window, so _this_ points to window.
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./07_Functions_And_Variable_Environment.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./09_undefined_vs_not_defined.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---

09_undefined_vs_not_defined.md

@@ -1,4 +1,4 @@
-# Episode 6: Undefined vs Not Defined
+# CHAPTER 09: Undefined vs Not Defined
 
 - In first phase (memory allocation) JS assigns each variable to a placeholder called _undefined_
 - _undefined_ is when memory is allocated for the variable, but no value is assigned yet.
@@ -20,5 +20,19 @@ console.log(a);
         25
         Uncaught ReferenceError: a is not defined
 
-- JS is a loosely-typed / weakly-typed language. It doesn't attach variables to any datatype. We can say var a = 5, and then change the value to bool (a = true) or string (a = 'hello') later on.
+- JS is a loosely-typed / weakly-typed language. It doesn't attach variables to any datatype. We can say `var a = 5`, and then change the value to bool (`a = true`) or string (`a = 'hello'`) later on.
 - **Never** assign _undefined_ to a variable manually. Let it happen on it's own accord.
+
+---
+
+<br><br>
+
+<p align="left">
+  <a href="./08_window_And_this.md"><b>‹ GO TO PREVIOUS</b></a>
+</p>
+
+<p align="right">
+  <a href="./10_Scope_And_Lexical_Environment.md"><b>GO TO NEXT ›</b></a>
+</p>
+
+---