Javascript Fundamentals

Question 1

Execution Context

Answer 1

The process when a javascript starts running or a function is called, in order to allocate memory for variables and functions and then execute the code is called Execution Context

Question 2

Call stack

Answer 2

Call stack is basically the order of execution or the order of executing different execution context so the JS engine can keep track of the which execution context belongs in which Code Execution.

As soon as a Execution context has finished executing and finished its work - it gets popped out of execution stack / call stack.

Question 3

Memory Creation

Answer 3

The process of Execution Context has 2 phase. Memory Creation is the 1st phase in which all the variables are allocated space in memory with an undefined value. Functions are also allocated space and their value being the whole function itself.

This memory is called as Variable Environment.

Question 4

Code Execution

Answer 4

This is the 2nd phase of Execution Context where all the code is executed and the previous undefined variables saved into memory is now given the respective value and expressions are evaluated.
When a function gets called during Code Execution, a new Execution stack is formed while the Execution stack has a new function popped over Global Execution Context to do the same action that Glocal Execution Context (GEC) goes through to evaluate the expressions.

Meaning Code Execution handle new Execution contexts inside the Global Execution Context.
This Code Execution takes place in a space known as Thread of Execution.

Question 5

Hoisting

Answer 5

A phenomena in Javascript which allows us to access variables and functions even before they get declared in the function.

This is of course possible because of how JS engine works and the fact that when the Global Execution Context starts, it begins with allocating undefined to all variables and allocates the complete function into memory before any real execution starts, which makes it possible to access a variable even before we have declared a value for it.

Question 6

Variable Environment

Answer 6

For every execution context, there are two parts - the memory creation phase, and the code execution phase.
During the memory creation phase, the js engine scans through the entire program to hoist all the variables into the memory and give them an undefined value (initially). This space where all the variables are stored forms the variable environment and this is the space that is passed onto the children functions/blocks as lexical environment.

Question 7

Thread of Execution

Answer 7

The code execution phase of Execution Context occurs in a space called thread of execution.

Question 8

Can you declare the same variable, say ‘x’, in the global execution context and then declare the same variable ‘x’ with a new value inside a function called inside GEC?

Answer 8

YES.
JS engine only looks at the local variable environment to use value from that environment, not outside. In case, it cant find the variable inside local environment - it starts to look in outside variable environment, usually Global Variable environment (obviously depends on what kind of program is being run though, it may be outside the local variable env, but it may still be inside Global Var Env)

So it is possible to have var x = 5 and then var x = 10 inside a function within the GEC.

Question 9

Global Space

Answer 9

The space outside of any function where the memory has to be allocated and code is to be executed (still outside of any function) is Global Space. Global Space invokes the Global execution context.

Question 10

What does ‘THIS’ keyword mean in a global space?

Answer 10

THIS keyword means the ‘window’ object in Global Space. ‘window’ object is responsible for holding all the variables written in a global space.

Question 11

Scope and Scope Chain and Lexical Environment

Answer 11

Lexical Env is the local variable environment of a function plus the lexical environment of its parent.
Scope OF A VARIABLE defines where (or in which functions) can this declared variable be accessed.
A variable defined in the parent function can be accessed in the children functions.

Scope Chain is the chaining of these Lexical Environment and this also defines the scope of a variable.

Question 12

Temporal Dead Zone, ‘let’ and ‘const’

Answer 12

let and const act differently than var
var is stored inside the window object, as we know. This allows it to be hoisted and accessed even before it is declared a value. Which is why we get undefined when trying to access it before declaration.
But let and const can get hoisted - but they are not stored within the ‘window’ object. They are stored in a separate instance and can not be accessed without having them declared.
The period in which the let and const variables get hoisted but cannot be accessed is known as temporal dead zone.

Question 13

ReferenceError, SyntaxError, TypeError

Answer 13

ReferenceError is errors related to referencing. Such as trying to access an uninitialized variable, or trying to access undefined variable.

SyntaxError is errors relating to syntax and the JS engine just straight up nopes out even before executing a line of code in this case. Can happen when we try to initialize a constant (const) with a undefined value. Its not possible. Duplicate declaration of let variable also result in syntax error IN THE SAME EXECUTION CONTEXT. [duplicate declaration of var is possible]

TypeError is error usually related to typing. Like when we have initialized const variable to something and later on we try to assign another value - its not possible and it will return a TypeError.

Question 14

Block Scope, Shadowing and Illegal Shadowing

Answer 14

Block is a collection of statements written between curly brace { }
Block scope follows the same lexical scope chain as in - a ‘let’ or ‘const’ variable declared inside a block cannot be accessed outside of the block. But a ‘var’ declared variable inside a block can also be accessed outside the block in the same execution context.

Where do you find blocks? After if-else statements within the curly braces { }. And after for/while loops within the curly braces { }.

Shadowing is a term used when we shadow a variable outside of a block (or of a function) with a new declared variable inside the block/function.
So say, we have declared var x outside the block - and then re-declare var x inside a block - it will be perfectly valid, and it will replace the value of ‘window.x’ to the new value. Because the scope of var is like that.
Whereas, if we declare a let ‘a’ value to something and then re-declare let ‘a’ to a new value, the new value of ‘a’ will remain inside the block - and as soon as we move out of the block, the value of ‘a’ will be switched to the OG declared value. The same happens for const.

Illegal Shadowing occurs when we try to re-declare a variable inside a block with a different type - say, outside we declare ‘let a’ and inside a block we re-declare ‘var a’. This will result in syntax error. Because scope of var is different from let. Redeclaring of variable works only if the scopes remain same. So a let and const redeclaration works but let and var doesnt nor does const and var.

Question 15

Closures

Answer 15

The lexical environment of a function is called as closure. Closures can be visualized as the environment variable of the parent function along with its lexical environment. This whole thing form a closure.

Question 16

What the output of this one -
function close () {
   var a= 10;
   setTimeout( ( ) => { console.log(a) } , 1000 )
   a= 100;
}
close();

Answer 16

Output - 100.
Reason - It points at the memory space where variable ‘a’ saves its value. Initially it was declared as 10, but later, we changed it to 100, so thats the answer we get. Because JS keeps running unless we exclusively tell it to wait - it will run through all the commands before three seconds is completed.

Question 17

What the output of this one -
function close () {
   let a= 10;
   setTimeout( ( ) => { console.log(a) } , 1000 )
   a= 100;
}
let a = 40;
console.log(a);
close();

Answer 17

// Output
40
100

//Reason
Because let has a block scope - its saved in a separate space and doesn't point to the same memory space even though it has the same variable name.

Question 18

Data Encapsulation and Privacy

Answer 18

Data Encapsulation is a technique of running an action/operation without letting its user know the inner workings of the operations. It encapsulates and keeps the information private and only outputs a value that has been specified.
This encourages privacy and can keep information and data (and also the complication) out of the way of user. You can say, the action “just works”.

Question 19

Data Encapsulation example

Answer 19

function counter() {
   var count = 0;
   function increament( ) {
      count++;
      console.log(count);
   }
   return increament;
}

const a= counter( );
const b= counter( );
a( );
b( );
a( );
b( );

// Output
1 - from closure of 'a'
1 - from closure of 'b'
2 - from closure of 'a'
2 - from closure of 'b'

Question 20

Closure disadvantages

Answer 20

The biggest disadvantage of closure is it may result in a memory leak if a lot of closures are present in a program and are handled carelessly.
In newer JS engines, we have got smart garbage collection that ditches the variables are that ‘extra’ within a closure - but even then, a programmer has to be conscious of a memory leak and structure the program in a sensible manner. Since JS is a high level language, the garbage collection is handled by the engine itself (unlike lower level programs like C and Rust), hence, new programmers may not realize that their programs have memory leaks until its late in development stage.

Besides the potential memory leak problem - it does add a slight complication to the structure of program and if a programmer doesn’t understand how closure work - that causes a lot of frustration.

Question 21

Closures use?

Answer 21

In:

1) Memoization
2) Function that run only once
3) Module pattern
4) Function Currying
5) Data Privacy and Encapsulation.

Question 22

First Class Function
Function Statement
Function Expression
Named Function Expression
Anonymous Function
Arrow Function

Answer 22

First class Function is just a statement associated with a function when the language allows programmers to pass pass function as a value/argument and also allow a function to be returned as a value.
Function expression is when we declare a function like we declare a variable. For ex - var func = function ( ) {.....}
Function statement is when we have a function initiated like a normal person😂. For ex - function func ( ) { ....... }
Name function expression - A function expression with a name. For ex - var funct = function xyz ( ) { .... } //notice the function name xyz.
Anonymous function - Function which doesn't have a name. Usually used in callback function or when declaring a function to a variable.
Arrow function - A function with is initialized with an arrow. It was introduced in ES6 and is a new concept.

Difference between Function statement and function expression? Just the hoisting. Function statements are fully hoisted when the program enters code execution phase. Function expression on the other hand remain undefined (much like how usualy variables work) until the compiler reaches the line where the function is declared as a value to the variable function.

Question 23

Callback Function

Event Listeners

Answer 23

A callback function - as the name suggests - is a function that is called when a certain event occurs or when it is called manually later on.
This can happen when a function is returned as an output to another function and this other function is later invoked to make a call back to the function that is returned from this other function.
setTimeout is a good example where we call upon this function in order to callback a function that is passed as an argument.

Event Listener is another good example where the callback functions are registered to memory and whenever certain events are detected - these registered functions are CALLED BACK into the main thread of JS for execution.

Question 24

Async JS

Event Loop

Answer 24

JS is a synchronous single threaded language.
Which means it has only one thread to do all its evaluation and execution of code.
Async JS allows us to deal with the asynchronous nature of some of the activity that might happen in JS.
Things like setTimeout, fetch, eventListener make JS asynchronous. They are never part of the main thread of code execution.
The callback functions attached to these are always executed only after the main code is executed completely.
And the callback functions are then pushed into CALLBACK QUEUE, or MICROTASK QUEUE.
Microtask queue takes higher priority of operation than Callback queue.
Microtask queue resides only two things - fetch request callbacks and DOM mutation callbacks.
Everything else goes into the callback queue.
Event Loop is responsible for monitoring the Call stack and the Queues. As soon as the event loop detects that the call stack is empty - and then detects that either of the queues have some callback functions lined up - the event loop starts sending these callback functions to push into the call stack while popping them out of the queue. The queues work in FIFO logic. First in first out.