Namaste JavaScript — Complete Notes

Full interview-prep notes, ##Episode 1 through 29. Episode 1 : Execution Context ============================== Everything in JS happens inside the execution context. Imagine a sealed-off container inside which JS runs. It is an abstract concept that hold info about the env. within the current code is being executed. In the container the first component is memory component and the 2nd one is code component Memory component has all the variables and functions in key value pairs. It is also called Variable environment. Code component is the place where code is executed one line at a time. It is also called the Thread of Execution. JS is a synchronous, single-threaded language Synchronous:- In a specific synchronous order. Single-threaded:- One command at a time. Episode 2 : How JS is executed & Call Stack ============================================= When a JS program is ran, a global execution context is created. The execution context is created in two phases. Memory creation phase - JS will allocate memory to variables and functions. Code execution phase Let's consider the below example and its code execution steps: The very first thing which JS does is memory creation phase, so it goes to line one of above code snippet, and allocates a memory space for variable 'n' and then goes to line two, and allocates a memory space for function 'square'. When allocating memory for n it stores 'undefined', a special value for 'n'. For 'square', it stores the whole code of the function inside its memory space. Then, as square2 and square4 are variables as well, it allocates memory and stores 'undefined' for them, and this is the end of first phase i.e. memory creation phase. Now, in 2nd phase i.e. code execution phase, it starts going through the whole code line by line. As it encounters , it assigns 2 to 'n'. Until now, the value of 'n' was undefined. For function, there is nothing to execute. As these lines were already dealt with in memory creation phase. Coming to line 6 i.e. , here functions are a bit different than any other language. A new execution context is created altogether. Again in this new execution context, in memory creation phase, we allocate memory to num and ans the two variables. And undefined is placed in them. Now, in code execution phase of this execution context, first 2 is assigned to num. Then will store 4 in ans. After that, returns the control of program back to where this function was invoked from. When return keyword is encountered, It returns the control to the called line and also the function execution context is deleted. Same thing will be repeated for square4 and then after that is finished, the global execution context will be destroyed. Javascript manages code execution context creation and deletion with the the help of Call Stack. Call Stack is a mechanism to keep track of its place in script that calls multiple function. Call Stack maintains the order of execution of execution contexts. It is also known as Program Stack, Control Stack, Runtime stack, Machine Stack, Execution context stack. Episode 3 : Hoisting in JavaScript (variables & functions) ============================================================= Let's observe the below code and it's explaination: It should have been an outright error in many other languages, as it is not possible to even access something which is not even created (defined) yet But in JS, We know that in memory creation phase it assigns undefined and puts the content of function to function's memory. And in execution, it then executes whatever is asked. Here, as execution goes line by line and not after compiling, it could only print undefined and nothing else. This phenomenon, is not an error. However, if we remove then it gives error. Hoisting is a concept which enables us to extract values of variables and functions even before initialising/assigning value without getting error and this is happening due to the 1st phase (memory creation phase) of the Execution Context. So in previous lecture, we learnt that execution context gets created in two phase, so even before code execution, memory is created so in case of variable, it will be initialized as undefined while in case of function the whole function code is placed in the memory. Example: Now let's observe a different example and try to understand the output. Episode 4 : Functions and Variable Environments ================================================= Outputs: Code Flow in terms of Execution Context 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 Execution Context is created. 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. Episode 5 : Shortest JS Program, window & this keyword ========================================================= The shortest JS program is empty file. Because even then, JS engine does a lot of things. As always, even in this case, it creates the GEC which has memory space and the execution context. JS engine creates something known as 'window'. It is an object, which is created in the global space. It contains lots of functions and variables. These functions and variables can be accessed from anywhere in the program. JS engine also creates a keyword, which points to the window object at the global level. So, in summary, along with GEC, a global object (window) and a variable are created. In different engines, the name of global object changes. Window in browsers, but in nodeJS it is called something else. At global level, . If we create any variable in the global scope, then the variables get attached to the global object. Episode 6 : undefined vs not defined in JS ============================================ In first phase (memory allocation) JS assigns each variable 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 memory allocation phase, and tried to access it then it is Not defined. Not Defined !== Undefined 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. JS is a loosely typed / weakly typed language. It doesn't attach variables to any datatype. We can say , and then change the value to boolean or string later on. Never assign undefined to a variable manually. Let it happen on it's own accord. Episode 7 : The Scope Chain, Scope & Lexical Environment =========================================================== Scope in Javascript is directly related to Lexical Environment. Let's observe the below examples: Let's try to understand the output in each of the cases above. In case 1: function a is able to access variable b from Global scope. In case 2: 10 is printed. It means that within nested function too, the global scope variable can be accessed. In case 3: 100 is printed meaning local variable of the same name took precedence over a global variable. In case 4: A function can access a global variable, but the global execution context can't access any local variable. To summarize the above points in terms of ex