feat: add lexical scope

brijeshkumar-chavda · brijeshkumar-chavda · commit 2b620772b602 · 2024-06-23T12:02:31.000+05:30
diff --git a/34_closure/lexical_scoping.js b/34_closure/lexical_scoping.js
diff --git a/35_lexical_scope/1_lexical_scope.js b/35_lexical_scope/1_lexical_scope.js
@@ -0,0 +1,28 @@
+// Lexical Scope
+
+// Resource
+
+// What
+//  -> Lexical scope in JavaScript means that the scope of a variable is determined by its position within the source code's lexical structure (the location where the variable is declared or defined).
+// -> When a function is defined, it captures its surrounding lexical environment(scope chain) at the time of its creation.
+
+// Why
+// -> Clarity and Predictability: Helps developers understand where variables are defined and how they are accessed.
+// -> Encapsulation: Enables functions to access variables from their containing scope, promoting modular and maintainable code.
+// -> Closure: Facilitates the creation of closures, where inner functions retain access to variables in their lexical scope even after the outer function has finished executing.
+
+// Example
+function outerFunction() {
+  const outerVariable = "value";
+
+  function innerFunction() {
+    console.log(outerVariable);
+  }
+
+  return innerFunction;
+}
+
+const variable = outerFunction();
+variable();
+
+// Note
diff --git a/35_lexical_scope/example.html b/35_lexical_scope/example.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Lexical Scope Example</title>
+  </head>
+  <body style="background-color: #414141">
+    <button id="greenButton">Green</button>
+    <button id="blueButton">Blue</button>
+  </body>
+  <script>
+    function clickHandler(color) {
+      //   document.body.style.backgroundColor = `${color}`;
+
+      return function () {
+        document.body.style.backgroundColor = `${color}`;
+      };
+    }
+
+    document.getElementById("greenButton").onclick = clickHandler;
+    document.getElementById("blueButton").onclick = clickHandler;
+  </script>
+</html>
