Create Ep7.md

HariAcidReign · web-flow · commit d6d012eea47d · 2021-01-11T22:56:49.000+05:30
diff --git a/Notes/Ep7.md b/Notes/Ep7.md
@@ -0,0 +1,83 @@
+# Episode 7 : Scope and Lexical Environment
+
+```
+This is why JS is confusing (Case-1)
+
+function a() {
+    console.log(b); // surprisingly instead of printing undefined it prints 10. 
+    //So somehow this b could access the b outside the fun. 
+}
+
+var b = 10;
+a();
+
+---------------------
+
+Another case: (Case-2)
+
+function a() {
+  c();
+  function c() {
+  console.log(b); // when cursor comes here, it still prints out 10 somehow!!
+  }
+ }
+ var b = 10;
+ a();
+ 
+ --------------------
+ 
+ Another one (DJ KHALED!) (Case-3)
+ 
+ function a() {
+  var b = 10;
+  c();
+  function c() {
+    console.log(b); //it prints the right value. How? See ans below Summary part
+  }
+ }
+ 
+ a();
+ console.log(b); // now when cursor comes here, it prints NOT DEFINED!
+
+```
+
+- This is the intuition behind **scope**
+- Scope is directly dependent on the lexical environment
+- **Lexical Environment** : local memory + lexical env of its parent
+- Whenever an EC is created, a Lexical environment(LE) is also created and is referenced in the local EC(in memory space)
+- Lexical means hierarchy. In the DJ KHALED (xD) code, function c is lexically inside function a. 
+- So in EC of c(), variables and fun in c (none) + reference of lexical env of parent a() is there
+- LE of a() in turn is its memory space + reference to LE of parent (Global EC)
+- LE of Global EC points to *null*
+
+ ```
+    To summarize the above points:
+    
+    call_stack = [GEC, a(), c()]
+
+    Now lets also assign the memory sections of each execution context in call_stack.
+
+    c() = [[lexical environment pointer pointing to a()]]
+
+    a() = [b:10, c:{}, [lexical environment pointer pointing to GEC]]
+
+    GEC =  [a:{},[lexical_environment pointer pointing to null]]
+
+ ```
+  ### For case -3 
+  - First JS engine searches for b in local mem of c(). Nothing is there. 
+  - So it goes to the reference of Lexical env of parent a(). Here b = 10 is here. So it takes this value, goes back to c() and console prints it.
+  - Had b not been in a(), then pointer would have gone to a()'s parent (Global EC and searched there). Had b not been there too, then it goes to LE of global's parent
+  which is null. Now JS engine stops and says b is NOT DEFINED. 
+  - **Lexical env of c = Local memory of c + LE of A + LE of Global**
+  - This process of going one by one to parent and checking is called **scope chain**
+ 
+  
+  
+
+
+
+
+
+
+
