Added comprehensive documentation on Scope, Lexical Environment, Block Scope, and Shadowing in JavaScript with code examples and explanations of key concepts.

Author: avinashyadav16

10_Scope_And_Lexical_Environment.md

@@ -0,0 +1,80 @@
+# Episode 7 : Scope and Lexical Environment
+
+This is why JS is confusing
+
+### Case-1
+
+```javascript
+function a() {
+  console.log(b); // surprisingly instead of printing undefined it prints 10.
+  //So somehow this b could access the b outside the function.
+}
+
+var b = 10;
+
+a(); // Function Invocation
+```
+
+### Another case: Case-2
+
+```javascript
+function a() {
+  c(); // Function Invocation
+
+  function c() {
+    console.log(b); // when cursor comes here, it still prints out 10 somehow!!
+  }
+}
+
+var b = 10;
+
+a(); // Function Invocation
+```
+
+### Another one (DJ KHALED!): Case-3
+
+```javascript
+function a() {
+  var b = 10;
+
+  c(); // Function Invocation
+
+  function c() {
+    console.log(b); //it prints the right value. How?
+  }
+}
+
+a(); // Function Invocation
+
+console.log(b); // now when cursor comes here, it prints NOT DEFINED!
+```
+
+- This is the intuition behind **scope.**
+- Scope in a simple language means where we can access a specific varible or function inside the code.
+- Scope in JavaScript is directly related to and dependent on the lexical environment.
+- **Lexical Environment** : `local memory + lexical environment 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 function in c (none) + reference of lexical environment 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_
+
+### 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 memory of c(). Nothing is there.
+- So it goes to the reference of Lexical environment 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 environment 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**

11_let_And_const_deadzone_errors.md

@@ -0,0 +1,127 @@
+# Episode 8 : let, const, temporal dead zone, types of errors
+
+> let and const declarations are hoisted. But it's different from var since they are in temporal deadzone for a time being.
+
+```javascript
+console.log(a); // ReferenceError: Cannot access 'a' before initialization
+
+console.log(b); // prints undefined as expected
+
+let a = 10;
+
+console.log(a); // 10
+
+var b = 15;
+```
+
+It looks like let isn't hoisted, **but it is**
+
+- Both a and b are actually initialized as _undefined_ in hoisting stage. But var b is inside the storage space of GLOBAL, and a is in a separate memory(script), where it can be accessed only after assigning some value to it first.
+- i.e. one can access 'a' only if it is assigned. Thus, it throws error.
+- **Temporal Dead Zone** : Time since when the let variable was hoisted until it is initialized some value.
+- So any line till before "let a = 10" is the TDZ for a
+- Since a is not accessible on global, its not accessible in _window/this_ also
+  > window.b or this.b -> 15; But window.a or this.a ->undefined, just like window.x->undefined (x isn't declared anywhere)
+
+```javascript
+let a = 10;
+
+let a = 100; //this code is rejected upfront as SyntaxError. (duplicate declaration)
+
+-----------------------------------------
+
+let a = 10;
+
+var a = 100; // this code also rejected upfront as SyntaxError. (can't use same name in same scope)
+```
+
+Let is a stricter version of var. Now, **const** is even more stricter than let.
+
+- const holds all above properties of let.
+
+```javascript
+let a;
+
+a = 10;
+
+console.log(a) // prints 10 properly. Note declaration and assigning of a is in different lines.
+
+
+-----------------------------------------
+
+
+const b;
+
+b = 10;
+
+console.log(b); // SyntaxError: Missing initializer in const declaration. (This type of declaration won't work with const. const b = 10 only will work)
+
+
+-----------------------------------------
+
+const b = 100;
+b = 1000;
+//this gives us TypeError: Assignment to constant variable.
+
+```
+
+- Till now 3 types of errors have been covered: Syntax, Reference, and Type.
+
+* Uncaught ReferenceError: x is not defined at ...
+
+  - This Error signifies that x has never been in the scope of the program. This literally means that x was never defined/declared and is being tried to be accesed.
+
+* Uncaught ReferenceError: cannot access 'a' before initialization
+
+  - This Error signifies that 'a' cannot be accessed because it is declared as 'let' and since it is not assigned a value, it is its Temporal Dead Zone. Thus, this error occurs.
+
+* Uncaught SyntaxError: Identifier 'a' has already been declared
+
+  - This Error signifies that we are redeclaring a variable that is 'let' declared. No execution will take place.
+
+```javascript
+//code example 1.1
+let a = 10;
+let a = 100;
+```
+
+```javascript
+//code example 1.2
+let a = 10;
+var a = 100;
+```
+
+    Will throw this Syntax error and no code will be run and be rejected affront.
+    'let' is a strict form of declaration and thus can be done only once.
+
+- Uncaught SyntaxError: Missing initializer in const declaration
+
+  - This Error signifies that we haven't initialized or assigned value to a const declaration.
+
+- Uncaught TypeError: Assignment to constant variable
+  - This Error signifies that we are reassigning to a const variable.
+
+### Type Error:
+
+The Errors that occur due to conflicts with the declaration type. For example re-assigning const type declaration will throw this.
+
+### Syntax Error:
+
+The Errors that occur due to wrong syntax that doesn't match with JS Engine syntactical rules.
+
+For example, if const is not initialized, it will throw syntax error as by syntax, it must initialize if it sees a const declaration.
+
+Also, if variable that is assigned with 'let' declaration is tried to re-declared, then it throws Syntax Error.
+
+### Reference Error
+
+The Errors that occurs if no reference is available for access. Can occur when the variable is no where in scope or maybe it is in temporal dead zone.
+
+### SOME GOOD PRACTICES:
+
+- Try using const wherever possible.
+- If not, use let.
+- Avoid var.
+- Declare and initialize all variables with let to the top to avoid errors to shrink temporal dead zone window to zero.
+
+**NOTE**: If in any interview when asked "Are let and const hoisted?" explain fully about temporal deadzone and all the above concepts too

12_Block_Scope_And_Shadowing.md

@@ -0,0 +1,163 @@
+# Episode 9 : Block Scope and Shadowing
+
+### What is a block?
+
+- Block also known as a _compound statement_ is used to group JS statements together into 1 group. We group them within curly braces {...}
+- The purpose is to group multiple statments at a place where JS expects only 1 statement.
+
+```javascript
+//code example 1
+
+if(true) some statement
+```
+
+But if we want to write more statements to execute after if condition; then:
+
+```javascript
+//code example 2
+
+if(true) {
+    statement 1
+    statement 2
+    ...
+}
+```
+
+- The {} block treats all the statements as one statement.
+- The if doesnt have any curly braces in syntax.
+
+### **BLOCK SCOPE**
+
+- What are the variables and functions that can be accessed inside the block.
+
+```javascript
+//code example 3
+
+{
+  var a = 10;
+  let b = 20;
+  const c = 30;
+}
+
+console.log(a);
+console.log(b);
+```
+
+Outputs:
+
+        10
+
+        Uncaught ReferenceError: b is not defined
+
+- Behind the Scenes:
+
+  - In the BLOCK SCOPE; we get b and c inside it initialized as _undefined_ as a part of hoisting (in a seperate memory space called block)
+  - While, a is stored inside a GLOBAL scope.
+
+- Thus we say, _let_ and _const_ are BLOCK SCOPED. They are stored in a separate mem space which is reserved for this block. Also, they can't be accessed outside this block.
+  But var a can be accessed anywhere as it is in global scope.
+- Thus, we can't access them outside the Block.
+
+### **What is SHADOWING in JS?**
+
+```javascript
+//code example 4
+
+var a = 100;
+
+{
+  var a = 10; //same name as global var
+  let b = 20;
+  const c = 30;
+
+  console.log(a); // 10
+  console.log(b); // 20
+  console.log(c); // 30
+}
+
+console.log(a); // 10 instead of the 100 we were expecting. So block "a" modified val of global "a" as well.
+// In console, only b and c are in block space. a initially is in global space(a = 100), and when a = 10 line is run, a is not created in block space, but replaces 100 with 10 in global space itself.
+```
+
+- If one has same named variable outside the block, the variable inside the block _shadows_ the outside variable.
+- So, a is reassigned to 10. Since both refers to same memory space i.e GLOBAL SPACE. **This happens only for var**
+
+### Instead of var, now let's use let
+
+```javascript
+//code example 5
+
+let b = 100;
+{
+  var a = 10;
+  let b = 20;
+  const c = 30;
+
+  console.log(b);
+}
+
+console.log(b);
+```
+
+Outputs:
+
+> 20
+
+> 100 // this was what we were expecting in this first place. Both b's are in separate spaces (one in Block(20) and one in Script(another arbitrary mem space)(100))
+
+- In the Scope, we have b in two places. The b outside of the block is in _Script_ SCOPE (seperate memory space for let and const)
+- The b inside the block is in _Block_ scope.
+- Thus, when in Block scope, 20 is printed and 100 when outside.
+- This concept is called "Shadowing".
+- It is also true for _const_ declarations.
+
+### Same logic is true even for functions also
+
+```javascript
+const c = 100;
+
+function x() {
+  const c = 10;
+  console.log(c);
+}
+
+x();
+
+console.log(c);
+```
+
+Output:
+
+> 10
+
+> 100
+
+### **What is Illegal Shadowing?**
+
+```javascript
+// code example 6
+
+let a = 20;
+{
+  var a = 20;
+}
+```
+
+Outputs:
+
+> Uncaught SyntaxError: Identifier 'a' has already been declared
+
+- We cannot shadow let with var. But it is valid to shadow a let using a let.
+- However, we can shadow var with let.
+- All scope rules that work in function are same in arrow functions too.
+- Since var is function scoped, it is not a problem with the code below.
+
+```javascript
+// code example 7
+
+let a = 20;
+
+function x() {
+  var a = 20;
+}
+```