Added JavaScript concepts on Hoisting, Functions and Variable Environments, Window and this keyword, and Undefined vs Not Defined

Author: avinashyadav16

06_Hoisting.md

@@ -0,0 +1,136 @@
+# Episode 3 : Hoisting
+
+## Code Example 01
+
+```javascript
+var x = 7;
+
+function getName() {
+  console.log("Namaste JavaScript");
+}
+
+getName();
+console.log(x);
+```
+
+Output:
+
+    Namaste JavaScript
+    7
+
+<br>
+
+## Code Example 02
+
+```javascript
+getName(); // in most languages, both the lines which are above their declaration will give error. But not in JS though.
+console.log(x);
+
+var x = 7;
+
+function getName() {
+  console.log("Namaste JavaScript");
+}
+```
+
+Output:
+
+    Namaste JavaScript
+    undefined
+
+<br>
+
+## Code Example 03
+
+```javascript
+getName();
+console.log(x);
+
+function getName() {
+  console.log("Namaste JavaScript");
+}
+```
+
+Output:
+
+    Namaste JavaScript
+    Error: x is not defined // note that not defined here and "undefined" in
+    sample 2 are totally different.
+
+- Not defined: We have not initialised the value for variable anywhere in the entire code and in memory space.
+- Undefined: It is a placeholder that is assigned to a variable by the Javascript Engine until the variable is assigned with some other value.
+
+**Hoisting** is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting _error_
+
+<br>
+
+## Code Example 04
+
+```javascript
+function getName() {
+  console.log("Namaste JavaScript");
+}
+
+console.log(getName);
+```
+
+Output:
+
+    f getName(){
+        console.log("Namaste JavaScript);
+    }
+
+<br>
+
+## Code Example 05
+
+```javascript
+getName();
+console.log(x);
+console.log(getName);
+
+var x = 7;
+
+function getName() {
+  console.log("Namaste JavaScript");
+}
+```
+
+Output:
+
+    Namaste JavaScript
+
+    undefined
+
+    f getName(){
+        console.log("Namaste JavaScript);
+    }
+
+<br>
+
+## Code Example 06
+
+```javascript
+console.log(getName);
+
+var getName = function () {
+  console.log("Namaste JavaScript");
+};
+
+var getName = () => {
+  // use fat arrow function
+  console.log("Namaste JavaScript");
+};
+```
+
+Output:
+
+    undefined //it is because arrow function behave as variable and not function.
+
+---
+
+**REASON OF WEIRDNESS**
+
+- The answer lies in the Global Execution Context. In the memory phase, the variables will be initialized as _undefined_ and functions will get the whole function code in their memory.
+
+- This is the reason why we are getting these outputs.

07_Functions_And_Variable_Environment.md

@@ -0,0 +1,42 @@
+# Episode 4 : Functions and Variable Environments
+
+```javascript
+var x = 1;
+
+a();
+
+b(); // we are calling the functions before defining them. This will work properly, as seen in Hoisting.
+
+console.log(x);
+
+function a() {
+  var x = 10;
+  console.log(x);
+}
+
+function b() {
+  var x = 100;
+  console.log(x);
+}
+```
+
+Outputs:
+
+    10
+
+    100
+
+    1
+
+### Code Flow
+
+- The Global Execution Context (GEC) is created (the big box with Memory and Code subparts). Also GEC is pushed into Call Stack
+  > Call Stack : GEC
+- In first phase of GEC (memory phase), variable `x:undefined` and `a` and `b` have their entire function code as value initialized
+- In second phase of GEC (execution phase), when the function is called, a new local EC is made. After `x = 1` assigned to GEC `x`, `a()` is called. So local EC for a is made inside code part of GEC.
+  > Call Stack: [GEC, a()]
+- For local EC, a totally different `x` variable assigned `undefined` (`x` inside `a()`) in phase 1 , and in phase 2 it is assigned `10` and printed in console log. After printing, no more commands to run, so `a()` local EC is removed from both GEC and from Call stack
+  > Call Stack: GEC
+- Cursor goes back to `b()` function call. Same steps repeat.
+  > Call Stack :[GEC, b()] -> GEC (after printing yet another totally different x value as 100 in console log)
+- Finally GEC is deleted and also removed from call stack. Program ends.

08_window_And_this.md

@@ -0,0 +1,32 @@
+# Episode 5: Window and this keyword
+
+### Everywhere JS is run, it is done with a JS execution engine. For Chrome: v8
+
+- Shortest JS program is nothing but an Empty JS file.
+- Even for this program, JS engine does a lot of the things behind the scenes.
+- It creates the GEC, the "window" and the _this_ variable.
+- Window is a big global object that has a lot of functions and variables, which is created along with global execution context.These functions and varibles are created by the JavaScript Engine and into the global scope. All of these can be accessed from anywhere in the program.
+- At the global level, _this_ points to _window_ object.
+  > this === window -> true (at global level)
+
+_Whenever a JavaScript program is run, a **global object** is created, a **global execution context** is created and along with it a **this** varible is also created._
+
+```javascript
+var a = 10; // not inside any fxn. So global object
+
+function b() {
+  // this fxn not inside any function. So global.
+  var x = 5; // not global
+}
+
+console.log(window.a); //gives us "a" value
+
+console.log(this.a); //this points to window so it returns "a" value
+
+console.log(a); //also gives same "a" value. (if we don't put any . in front of variable, it **assumes variable is in global space**
+
+console.log(x); // x is not defined. (tries to find x inside global space, but it isn't there)
+```
+
+- Global space is anything in JS which isn't inside a function. All these global objects will be present inside the windows schema. But non globals ones won't be there (here, x)
+- When a GEC is made, _this_ is also created with it (even for functional(local) EC). Global object provided by the browser engine is the window, so _this_ points to window.

09_undefined_vs_not_defined.md

@@ -0,0 +1,24 @@
+# Episode 6: Undefined vs Not Defined
+
+- In first phase (memory allocation) JS assigns each variable to a placeholder called _undefined_
+- _undefined_ is when memory is allocated for the variable, but no value is assigned yet.
+- If an object/variable is not even declared/found in mem alloc phase, and tried to access it then it is _Not defined_
+
+> When variable is declared but not assigned value, its current value is undefined. But when the variable itself is not declared but called in code, then it is not defined.
+
+```javascript
+console.log(x);
+
+var x = 25;
+
+console.log(x);
+
+console.log(a);
+```
+
+        undefined
+        25
+        Uncaught ReferenceError: a is not defined
+
+- JS is a loosely-typed / weakly-typed language. It doesn't attach variables to any datatype. We can say var a = 5, and then change the value to bool (a = true) or string (a = 'hello') later on.
+- **Never** assign _undefined_ to a variable manually. Let it happen on it's own accord.