add javascript execution context

Author: brijeshkumar-chavda

13_function/19_first_class_function.js 13_function/first_class_function.js

@@ -1,6 +1,6 @@
 // First Class Function
 
-// Q. What is First Class Function?
+// What
 // - In JavaScript, functions are considered "first-class" citizens, It means they can be treated just like any other value.
 
 // Functions can be assigned to variables

25_asynchronous_javascript/03_call_back/call_back_function.js

@@ -4,3 +4,4 @@ fetch(url)
   .then((result) => result.json())
   .then((json) => console.log(json))
   .catch((error) => console.log(error));
+ 

25_asynchronous_javascript/01_asynchronous_operation/asynchronous_diagram.png 25_asynchronous_javascript/1_asynchronous_operation/asynchronous_diagram.png

@@ -0,0 +1,72 @@
+// Call Back Function
+
+// What
+// - A call back function is a function which passed as an argument to another function.
+// - Call back function called after the main function completes its execution.
+
+// Why
+// - To handle asynchronous operations.
+// - To control the flow of execution.
+
+// Syntax
+function mainFunction(callback) {
+  // ... do something
+  callback();
+}
+
+function callbackFunction() {
+  // ... do something after mainFunction finishes
+}
+
+mainFunction(callbackFunction);
+
+// How
+// - Sometimes we need to execute a functions in certain order.
+
+// Example 1: Calling functions in a order manually.
+function orderPizza() {
+  return console.log("Pizza order has been placed.");
+}
+function deliverPizza() {
+  return console.log("Pizza has been delivered.");
+}
+
+orderPizza();
+deliverPizza();
+
+// Example 2: Nesting function inside the function to execute sequence wise.
+function calculation(number1, number2) {
+  const result = number1 + number2;
+  displayResult(result);
+}
+
+function displayResult(result) {
+  console.log(result);
+}
+
+calculation(5, 10);
+
+// - The problem with the first example above, is that you have to call two functions to display the result.
+// - The problem with the second example, is that you cannot prevent the calculator function from displaying the result.
+
+// Example 3: Now it is time to bring in a callback.
+function calculation2(number1, number2, callback) {
+  const result = number1 + number2;
+  callback(result);
+}
+
+function display2(result) {
+  console.log(result);
+}
+
+calculation2(5, 10, display2);
+
+// Note
+// - JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.
+// - Overusing callbacks can lead to "callback hell", making code hard to read and maintain. Consider using Promises or async/await for complex asynchronous operations.
+
+// Analogy
+// - Let's imagine you're going to a restaurant and you want to place an order. You have a special request: you want to be notified when your order is ready so that you can pick it up.
+// - In this scenario, you are the main program or the "caller", and the restaurant is the function you're calling. The restaurant has a chef who will prepare your order, and you need a way to be notified when the order is ready.
+// - Here's where the concept of a callback comes in. You give the restaurant your phone number and ask them to call you back when the order is ready. In this case, your phone number is the callback function.
+// - In JavaScript, a callback function is similar to giving your phone number to the restaurant. It's a function that you provide as an argument to another function. The main function (the "caller") will call the callback function at an appropriate time, usually when a certain task or operation is completed.

25_asynchronous_javascript/01_asynchronous_operation/asynchronous_operation.md 25_asynchronous_javascript/1_asynchronous_operation/asynchronous_operation.md

@@ -2,28 +2,25 @@
 
 // https://youtu.be/bx9xYPt2tdc
 
-// Function 1
 function firstFunction(callback) {
   setTimeout(function () {
     console.log("First function executed.");
     callback();
   }, 1000);
 }
 
-// Function 2
 function secondFunction(callback) {
   setTimeout(function () {
     console.log("Second function executed.");
     callback();
-  }, 1000);
+  }, 3000);
 }
 
-// Function 3
 function thirdFunction(callback) {
   setTimeout(function () {
     console.log("Third function executed.");
     callback();
-  }, 1000);
+  }, 2000);
 }
 
 // Callback Hell

25_asynchronous_javascript/02_setTimeout_and_setInterval/setTimeout_and_setInterval.js 25_asynchronous_javascript/2_setTimeout_and_setInterval/setTimeout_and_setInterval.js

@@ -0,0 +1,30 @@
+// Heap Memory
+
+// What
+// - A region in a computer's memory where objects and functions are stored in JavaScript.
+// - It's used for dynamic memory allocation, meaning the size and location of memory blocks are determined at runtime.
+// - Unlike the stack, which has a fixed size, the heap can grow and shrink as needed.
+
+// Why
+// - Storing objects and functions: Objects, arrays, and functions are typically stored in the heap due to their dynamic nature and variable sizes.
+// - Flexibility: The heap allows for dynamic memory allocation, enabling the creation of objects and variables at runtime.
+// - Automatic memory management: JavaScript's garbage collector automatically frees memory allocated in the heap when objects are no longer reachable.
+
+// How
+// - Allocation: When an object, array, or function is created, a block of memory is allocated in the heap.
+// - Reference: A reference to the allocated memory block is stored on the stack, allowing the object to be accessed.
+// - Garbage Collection: The JavaScript engine periodically scans the heap to identify objects that are no longer reachable (not referenced by any other objects). These objects are marked for deletion, and their memory is reclaimed.
+
+// Example
+const object1 = {
+  key1: "value1",
+};
+
+const object2 = object1;
+object2.key1 = "value2";
+
+console.log(object1.key1);
+
+// Note
+// - In heap memory you will be refer to the original value.
+// - If you make change. It will reflect to the original value.

25_asynchronous_javascript/04_async_and_await/01_async_and_await.js 25_asynchronous_javascript/4_async_and_await/01_async_and_await.js

@@ -0,0 +1,27 @@
+// Stack Memory
+
+// Video: https://youtu.be/7gwc-1czolw?si=QrGmJvmijiOURUkf
+// Article: https://medium.com/@iarsham/stack-and-heap-in-js-c09aeabf3967
+
+// What
+// - The stack is a data structure used in JavaScript to manage function calls and local variables. It operates on a Last-In, First-Out (LIFO) principle, meaning the most recently added item is the first to be removed.
+
+// Why
+// - Local Variables: Keep track of the local variables via stack memory.
+// - Call Stack: When you call a function. That call will be added to the stack memory in stack order until the function execution completes.
+
+// How
+// - The stack is used for static memory allocation.
+// - Primitive datatype stored in the stack memory.
+// - Stack provide the copy of the value
+
+// Example
+let variable1 = "value1";
+let variable2 = variable1;
+variable2 = "value2";
+
+console.log(variable1);
+console.log(variable2);
+
+// Note
+// - In Stack Memory it will give you the copy of the original value.

27_promise/promise.js 25_asynchronous_javascript/5_promise/promise.js

@@ -155,39 +155,32 @@
     11. Abstraction
     12. Polymorphism
 
-2.  Asynchronous JavaScript
+1.  JavaScript Under the Hood
+
+    1.  Compiler
+    2.  Interpreter
+    3.  Compile Time
+    4.  Runtime
+
+1.  JavaScript Execution Context
+
+    1.  Context
+    2.  Execution Context
+        1.  Global Execution Context
+            1.  Memory Creation Phase
+            2.  Execution Phase
+        2.  Function Execution Context
+
+1.  Asynchronous JavaScript
     1.  Asynchronous Operations
     2.  setTimeout & setInterval
     3.  Call back
         1.  Call back function
         2.  Call back hell
     4.  Promise
+    5.  Fetch
 
 <!-- OOP -->
 
 1. Literal Object
 2. Constructor Function
-
-# Monospace Font
-
-1. Fira Mono Light
-2. JetBrains Mono ExtraLight
-3. Commit Mono
-4. Fira Mono
-5. Monaspace
-6. MonoLisa
-7. Source Code Pro
-8. Cascadia Code
-9. JetBrains Mono
-10. Maple Mono
-
-# Theme - Pitch Dark Background
-
-1. Bluloco
-2. Dracula
-3. Github dark
-4. One Dark Mono
-5. Ayu - Dark
-6. Noctis - Obscuro
-7. Monokai Night
-8. Night Owl

pending_concept/fetch_api/fetch_api.js 25_asynchronous_javascript/6_fetch/fetch_api.js

@@ -28,4 +28,13 @@
 
 // // promise1;
 
+function myFirst() {
+  console.log("Hello");
+}
 
+function mySecond() {
+  console.log("Goodbye");
+}
+
+mySecond();
+myFirst();

pending_concept/fetch_api/fetch_error.js 25_asynchronous_javascript/6_fetch/fetch_error.js

@@ -0,0 +1,43 @@
+# Context
+
+https://youtu.be/ByhtOgF6uYM?si=CSWhLVOTp682uLUD
+
+### What
+
+Context in programming refers to the environment or circumstances in which a piece of code operates. It encompasses the surrounding information, data, and conditions that influence the code's behavior.
+
+### Why
+
+Understanding context is crucial for:
+
+- Debugging issues
+- Code optimization
+- Security
+- Code maintainability
+
+### How
+
+Context is established through:
+
+- Global variables
+- Function arguments
+- Object properties
+- Database connections
+- User interface elements
+- Execution environment
+
+### Example
+
+Imagine a function that calculates a user's total income. The context for this function would include:
+
+- The user's income data
+- Tax rates
+- Deduction rules
+
+### Important Note
+
+Context can vary depending on the programming language, framework, and application. It's essential to consider the context when writing and understanding code.
+
+### Analogy
+
+Context is like the stage on which a play unfolds. The actors (code) perform their roles based on the setting, props, and other characters (data and environment).