Added JavaScript Files

Advanced_JS/IIFE/IIFE.js

@@ -0,0 +1,14 @@
+/// Immediately Invoked Function Expressions (IIFE) : It is a function that is executed immediately after it is created.
+// Sometimes, It is used to protect from global pollution like some global variable and it is used to immediately execute the Database file.
+
+// Named IIFE
+(function welcome() {
+    console.log("Welcome, User!"); // Welcome, User!
+})();
+
+// Note: It is necessary to put semicolon ";" after iife created. It is used to stop the context.
+
+// Unamed IIFE
+( (name) => {
+    console.log(`Welcome, ${name}!`); // Welcome, braudalf!    
+})("braudalf");

Advanced_JS/JS_Execution_and_Call_Stack/Call_Stack.js

@@ -0,0 +1,32 @@
+// Implement these code snippets in browser environment for call stack visuals. 
+
+// This code has work normal execution
+// function first() {
+//     console.log("first"); // first
+// }
+// function second() {
+//     console.log("second"); // second
+// }
+// function third() {
+//     console.log("third"); // third
+// }
+// first();
+// second();
+// third();
+
+
+// This code work as LIFO (Last In First Out)
+function first() {
+    console.log("first"); // first
+    second();
+}
+function second() { 
+    console.log("second"); // second
+    third();
+}
+function third() {
+    console.log("third"); // third
+}
+first();
+second();
+third();

Advanced_JS/JS_Execution_and_Call_Stack/Js_Execution.txt

@@ -0,0 +1,74 @@
+Javascript Execution Context
+
+|JS Code| -> Global Execution Context (All this in "this" keyword) 
+
+-> Global Execution Context
+-> Function Execution Context
+-> Eval Execution Context (It can say a property of Global Object)
+
+Javascript Phases
+| JS Code | -> Memory Creation Phase
+| JS Code | -> Execution Phase
+
+Code Snippet to explain Javascript Phases
+*******************************************************************************
+let val1 = 10;
+let val2 = 5;
+Function addNum(num1, num2){
+   let total = num1 + num2;
+   return total;
+}
+let result1 = addNum(val1, val2);
+let result2 = addNum(10, 2);
+********************************************************************************
+
+Working of above Code Snippet
+     Global Execution (All this in "this" keyword)
+
+A. Memory Phase
+   val1 -> undefined
+   val2 -> undefined
+   addNum -> defination
+   result1 -> undefined
+   result2 -> undefined
+
+B. Execution Phase
+   val1 -> 10
+   val2 -> 5                ---------------------------------
+   addNum ->               |                                 |
+   result1 -> 15           |    New variable environment     |
+   result2 ->              |            +                    |  
+                           |    Execution Thread             |
+               <--         |                                 |
+                            ---------------------------------
+                                after all phases this will automatically deleted
+       Memory Phase
+       val1 -> undefined
+       val2 -> undefined
+       total -> undefined  
+
+       Execution Phase
+       num1 -> 10
+       num2 -> 5
+       total -> 15
+
+
+addNum)() in first Execution phase
+
+                            ---------------------------------
+                           |                                 |
+                           |    New variable environment     |
+                           |            +                    |  
+                           |    Execution Thread             |
+               <--         |                                 |
+                            ---------------------------------
+                              after all phases this will automatically deleted
+       Memory Phase
+       val1 -> undefined
+       val2 -> undefined
+       total -> undefined  
+
+       Execution Phase
+       num1 -> 10
+       num2 -> 5
+       total -> 15 (Now this move to Global Execution Context)

Advanced_JS/Memory_Management/Garbage_Collection.js

@@ -0,0 +1,43 @@
+//// Garbage Collection: In case of the low-level languages where the developer has to manually decide when the memory is no longer needed, high-level languages use an automated form of memory management known as Garbage Collection(GC). An object with zero references is considered to be garbage or “collectible”. 
+/// In short, release of unused memory is Garbage Collection(GC);
+
+/// Working of Garbage Collection
+
+let x = {
+    a: {
+        b: 2,
+    },
+};
+// 2 objects are created. One is referenced by the other as one of its properties.
+
+console.log(x); // { a: { b: 2 } }
+
+let y = x;
+// The 'y' variable is the second thing that has a reference to the object.
+
+console.log(y); // { a: { b: 2 } }
+
+x = 1;
+/* Now, the object that was originally in 'x' has a unique reference
+embodied by the 'y' variable. */
+
+console.log(x); // 1
+
+let z = y.a;
+/* Reference to 'a' property of the object.
+This object now has 2 references: one as a property, 
+the other has the z variable. */
+
+console.log(z); // { b: 2 }
+
+y = "mozilla";
+/* The object that was originally in 'x' has now zero
+references to it. It can be garbage-collected. */
+
+console.log(y); // mozilla
+
+z = null;
+/* The 'a' property of the object originally in x
+has zero references to it. It can be garbage collected. */
+
+console.log(z); // null

Advanced_JS/Memory_Management/Memory_Manage.js

@@ -0,0 +1,7 @@
+/// Memory Management involves mainly two steps 
+// 1. Memory Life Cycle
+// 2. Grabage Collection
+
+
+// Use link for Memory Life Cycle
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management#memory_life_cycle

Advanced_JS/Memory_Management/Stack_and_Heap_Memory.js

@@ -0,0 +1,26 @@
+/// Stack Memory: The stack is a segment of memory that stores temporary variables created by a function, objects and array. In stack, variables are declared, stored and initialized during runtime. 
+// All Primitive DataTypes such as String, Number, BigInt, Symbol, Boolean, Null, Undefined are stored in the stack memory.
+
+/// Heap Memory: Heaps are memory areas allocated to each program. Memory allocated to heaps can be dynamically allocated, unlike memory allocated to stacks. It is also known as Dynamic Memory.
+// All Reference(Non-Primitive) DataTypes such as Array, Object, and Function are stored in the heap memory.  
+
+// Use of Stack Memory
+let myName = "Braudalf";
+let myAnotherName = myName;
+
+myAnotherName = "WereWolf";
+
+console.log(myAnotherName); // WereWolf
+console.log(myName); // Braudalf
+
+// Use of Heap Memory
+let userOne = {
+    email: "[email protected]",
+    upi: "braudalf@sbi"
+}
+
+let userTwo = userOne;
+userTwo.email = "[email protected]";
+
+console.log(userTwo.email); // wareWolf@gmail.com
+console.log(userOne.email); // wareWolf@gmail.com

Advanced_JS/Modules/Import_&_Export/Aliases/aliasesExport.js

@@ -0,0 +1,6 @@
+// Aliases are used to change variable and function name
+
+const add = (val1, val2) => val1 + val2;
+
+// as keyword is used to change variable name 
+export {add as increment};

Advanced_JS/Modules/Import_&_Export/Aliases/aliasesExport_&_aliasesImport.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Aliases Export and Aliases Import</title>
+</head>
+<body>
+    <script type="module" src="aliasesImport.js"></script>
+</body>
+</html>

Advanced_JS/Modules/Import_&_Export/Aliases/aliasesImport.js

@@ -0,0 +1,6 @@
+// Aliases are used to change variable and function name 
+
+// as keyword is used to change variable name 
+import { increment as sum } from "./aliasesExport.js";
+
+console.log(sum(1, 2));

Advanced_JS/Modules/Import_&_Export/Combine/Combine.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Combine</title>
+</head>
+<body>
+    <script type="module" src="Export.js"></script>
+    <script type="module" src="Combine.js"></script>
+</body>
+</html>

Advanced_JS/Modules/Import_&_Export/Combine/Combine.js

@@ -0,0 +1,7 @@
+
+import * as Combine from "./Export.js";
+
+console.log(Combine.calc.mul(3, 5));
+console.log(Combine.calc.less(5, 7));
+
+Combine.sayMyName("User");

Advanced_JS/Modules/Import_&_Export/Combine/Export.js

@@ -0,0 +1,4 @@
+
+export * as calc from "./calc.js";
+
+export {default as sayMyName} from "./printMyName.js";

Advanced_JS/Modules/Import_&_Export/Combine/calc.js

@@ -0,0 +1,10 @@
+
+const add = (val1, val2) => val1 + val2;
+
+const less = (val1, val2) => val1 - val2;
+
+const mul = (val1, val2) => val1 * val2;
+
+const div = (val1, val2) => val1 / val2;
+
+export {add, less, mul, div};

Advanced_JS/Modules/Import_&_Export/Combine/printMyName.js

@@ -0,0 +1,5 @@
+
+ const printMyName = (name) => console.log(`Your name is ${name}.`);
+
+ export default printMyName;
+

Advanced_JS/Modules/Import_&_Export/Dynamic/dynamicImport.js

@@ -0,0 +1,17 @@
+// Dynamic Import is a function like expression which is used by import() method allows you to load module asynchronously and dynamically.
+
+const { sayHii, sayHola } = await import("./greetings.js");
+
+sayHii("User");
+sayHola("User");
+
+
+// Handling multiple imports using promises
+const promises = Promise.all(
+    [
+        await import("../Combine/calc.js"),
+        await import("../Combine/printMyName.js")
+]
+);
+
+promises.then((result1) => console.log(result1[0].mul(3, 4)))

Advanced_JS/Modules/Import_&_Export/Dynamic/dynamicInput_and_greetings.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dynamic Import</title>
+</head>
+<body>
+    <script type="module" src="dynamicImport.js"></script>
+</body>
+</html>

Advanced_JS/Modules/Import_&_Export/Dynamic/greetings.js

@@ -0,0 +1,6 @@
+
+const sayHii = (name) => console.log(`Hii, ${name}`);
+
+const sayHola = (name) => console.log(`Hola, ${name}`);
+
+export {sayHii, sayHola};

Advanced_JS/Modules/Import_&_Export/Namespaces/Export.js

@@ -0,0 +1,10 @@
+
+const add = (val1, val2) => val1 + val2;
+
+const less = (val1, val2) => val1 - val2;
+
+const mul = (val1, val2) => val1 * val2;
+
+const div = (val1, val2) => val1 / val2;
+
+export {add, less, mul, div};

Advanced_JS/Modules/Import_&_Export/Namespaces/namespacesImport.js

@@ -0,0 +1,9 @@
+// Namespaces import allows us to import module from exported module into a single object
+
+// use * to import all files from exported module
+import * as Maths from "./Export.js";
+
+console.log(Maths.add(5,3));
+console.log(Maths.less(5,3));
+console.log(Maths.mul(5,3));
+console.log(Maths.div(5,3));

Advanced_JS/Modules/Import_&_Export/Namespaces/namespacesImport_&_Export.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Namespaces Import and Export</title>
+</head>
+<body>
+    <script type="module" src="namespacesImport.js"></script>
+</body>
+</html>

Advanced_JS/Modules/Import_&_Export/defaultImport_&_defaultExport/defaultExport.js

@@ -0,0 +1,6 @@
+// Default Export: This type of export is used to export default value to another module.
+
+const add = (val1, val2) => val1 + val2;
+
+// default keyword is to export default module to another module
+export default add;

Advanced_JS/Modules/Import_&_Export/defaultImport_&_defaultExport/defaultImport.js

@@ -0,0 +1,12 @@
+// Default Import: This type of import is used to import default value from a another module.
+
+// There are two ways to use default import
+// First way
+// default keyword is used to import default module
+// import {default as add} from "./defaultExport.js";
+
+// Second way
+import add from "./defaultExport.js";
+
+
+console.log(add(3, 4));

Advanced_JS/Modules/Import_&_Export/defaultImport_&_defaultExport/defaultImport_&_defaultExport.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Default Import and Default Export</title>
+</head>
+<body>
+    <script type="module" src="defaultImport.js"></script>
+</body>
+</html>

Advanced_JS/Modules/Import_&_Export/export.js

@@ -0,0 +1,18 @@
+// Export statement is an statement which is used to export module to the another module
+
+// export keyword is used to export module to the another module
+// There are two types to use export keyword
+
+// First : write export keyword before variable or function
+// export const add = (val1, val2) => {return val1 + val2};
+
+// export const less = (val1, val2) => {return val1 - val2};
+
+// Second : write variable or function in export keyword
+const add = (val1, val2) => {return val1 + val2};
+
+const less = (val1, val2) => {return val1 - val2};
+
+export{add, less};
+
+// This is also called named export.