Please enable JavaScript.
Coggle requires JavaScript to display documents.
Javascript - Coggle Diagram
Javascript
Fundamentals
-
Memory Component (Variable Environment) : It is a place where all the functions and variables are stored as a key-value pair.
- Call Stack (It contains whole GEC in the bottom whenever any JS Program is run & New generated Excecution context populated on GEC and It maintains the order of excecution of the excecution context) also known as Execution context/ Runtime/ Program/ Control/ Machine - Stack
- Window Object (It represents the browser's window. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are properties of the window object. Global functions are methods of the window object)
- In JS, before the code is executed, the variables get initialized to undefined.
- Arrow functions enact as variables and get "undefined" during the memory creation phase while functions actually get run.
- Hoisting: Mechanism in JS where the variable declarations are moved to the top of the scope before execution. Therefore it is possible to call a function before initializing it.
- Whenever a JS program is run, a global execution block is created, which comprises of 2: Memory creation and Code execution.
- At first a global execution context is created, which consists of Memory and code and has 2 phases: Memory allocation phase and code execution phase.
- In the first phase, the variables are assigned "undefined" while functions have their own code.
- Whenever there is a function declaration in the code, a separate local execution context gets created having its own phases and is pushed into the call stack.
- Once the function ends, the EC is removed from the call stack.
- When the program ends, even the global EC is pulled out of the call stack.
- undefined: a variable is 'declared', it has its own placeholder but not having the value of itself 'defined' hence 'undefined' and until the variable has assigned a value, the 'undefined' fills that particular placeholder and 'undefined' is itself a datatype.
- not Defined: This case comes in error where js engine neither find that particular variable nor its placeholder and cannot find the variable in 1st phase of context (Memory allocation context).
- The Scope Chain & Scope & Lexical Env.
-
1) Lexical Environment of its parent is the scope where a function is physically present or defined. So, suppose a function x(), is defined and invoked in the GEC, when function x()'s EC is pushed in the call stack, it stores a reference to its parent's lexical environment i.e. the GEC's memory.
2) Whenever a new Execution Context is pushed in the Call Stack it holds a reference to the Lexical Environment of its parent, i.e. the EC's memory from where it was invoked.
-
4) Javascript engine first looks for the variable/function being accessed in the local scope of the function, and if not found, it keeps on searching the lexical environment of its parent until it finds the variable/function being accessed.
-
6) If the variable accessed is not found in the Scope Chain, then you will get the variable is not defined error in the browser's console.
- let and const are hoisted but its memory is allocated at other place than window which cannot be accessed before initialisation.
- Temporal Dead Zone exists until variable is declared and assigned a value.
- window.variable OR this.variable will not give value of variable defined using let or const.
- We cannot redeclare the same variable with let/const(even with using var the second time).
- const variable declaration and initialisation must be done on the same line.
- There are three types of error: [1] referenceError {given where variable does not have memory allocation} [2] typeError {given when we change type that is not supposed to be changed} [3] syntaxError {when proper syntax(way of writing a statement) is not used}.
- Use const wherever possible followed by let, Use var as little as possible(only if you have to). It helps avoid error.
- Initialising variables at the top is good idea, helps shrinks TDZ to zero.
- Code inside curly bracket is called block.
- Multiple statements are grouped inside a block so it can be written where JS expects single statements like in if, else, loop, function etc.
- Block values are stored inside separate memory than global. They are stored in block. (the reason let and const are called block scope)
- Shadowing of variables using var, let and const.
- The shadow should not cross the scope of original otherwise it will give error.
- shadowing let with var is illegal shadowing and gives error.
- var value stored in global memory and hence can be accessed outside block as well whereas same is not the case with let and const.