✨ Namaste JavaScript ✨

Season 1

JavaScript is the most hated programming language in the world! 😟
You know what's the most loved programming language in the world? It's JavaScript! 😍
And you know what's the most popular programming language in the world? It's again JavaScript! 😎

JavaScript Documentation

How JavaScript works ?

"Everything in JavaScript happens inside an Execution Context"

Execution Context is like a box which has 2 components.
1st component of Execution Context is the Memory Component (also known as Variable Environment).
- Memory Component has variables and functions in a key-value pair format.
2nd component of Execution Context is the Code component (also known as Thread of Execution).
- This is the place where code is executed 1 line at a time.
- Code component is just like a thread in which the whole code is executed 1 line at a time.

"JavaScript is a synchronous single-threaded language"

Single-Threaded means JavaScript can only execute 1 command at a time.
Synchronous Single-Threaded means JavaScript can execute only 1 command at a time and in a specific order.
- That means, it can only go to the next line once the current line has finished executing.

How JavaScript Code is executed?

Sample Code Snippet

var n=2;
function square(num) {
	var ans = num * num;
	return ans;
}
var square2 = square(n);
var square4 = square(4);

When a JavaScript program is run/executed, an Execution Context is created.
Execution Context is created in 2 Phases
- Creation Phase (also known as Memory Creation Phase)
- Code Execution Phase
In the 1st phase, i.e., memory creation phase, javascript will allocate memory to all the variables and functions.
- For variables, it allocates a special value called undefined.
- For functions, it literally allocates the whole code of the function.
- So in the above code, first JavaScript will allocate memory to n (n = undefined).
- Next it will allocate memory to square function (square = the whole code of the function)
- Next it will allocate memory to square2 and square4 (square2 = undefined, square4 = undefined).
In the 2nd phase, i.e., code execution phase, javascript once again runs through whole code line by line and it executes the code now. This is the point where all the functions, logic, calculations etc. are executed.
- Now when it encounters the 1st line in the code var n = 2;, it actually places/assigns the 2 to the n.
- Now it moves to the next line function square(num) {. In this line, there's nothing to execute. It is just a starting of a function.
- Next, it moves to the line that is after the function code var square2 = square(n);
- In this line, a function is invoked.

Functions are ❤️ of JavaScript

They behave very differently in JavaScript compared to any other language.
Functions here are like a mini program.
In the above flow, the whole javascript program runs in a Global Execution Context.
Whenever a new function is invoked, a new execution context is created.
In the new execution context, the code of the square function is executed.
Once the execution is done in the inner execution context, the value is returned to the outer execution context where the function was invoked.
After this, the execution context to execute the function will be deleted.
If the code has any other function or any line that invokes a function, again a new execution context will be created.
Once all the code is executed, the Global Execution Context is also deleted.

Call Stack in JavaScript

When there're a lot of function calls inside a function, lot of execution contexts are created internally and it can go to any deep level.
And it is very difficult for JavaScript engine to manage and it does it very beautifully.
JavaScript engine manages a stack, i.e., call stack.
The call stack is like a stack and everytime in the bottom of the stack, we have the Global Execution Context.
That means whenever any JavaScript program is run, this call stack is populated with the Global Execution Context.
Whenever a new funciton is invoked/new execution context is created, that execution context is put inside the stack and so on.
Now when a JavaScript code is executed, all the execution contexts are pushed to the stack and the execution context in the top of the stack is executed first and once done, the value is returned, the execution context is popped off from the stack and the control is taken over by the next execution context in the call stack and so on.
So this call stack is only for managing these execution contexts.
Call stack maintains the order of execution of execution contexts.
Call stack is also known by a lot of fancy names such as,
- Execution Context Stack
- Program Stack
- Control Stack
- Runtime Stack
- Machine Stack etc.

Hoisting in Javascript

How Functions work in Javascript? & Variable Environment

SHORTEST JS Program - window & this keyword

window keyword

this keyword

Global Space

What happens when any variables or functions created in global space ?

These variables and functions get attached to the global object (i.e., window).
From the above example code snippets, variable a, b() and c() functions will be attached to the global object. The variable x that is inside c() function will not be present in the global object.
Variables and functions that are in the global object can be accessed using this code console.log(window.a);
console.log(a); also works because if window.a is not used, it automatically assumes that we are referring to the global space.
console.log(this.a); also works because this is equal to window only.

undefined vs not defined in JS

undefined is a very special keyword in Javascript.
It is not there in other languages.
It has a lot to do with how javascript code is executed.
When a javascript program is run/executed, javascript engine creates a global execution context and allocates memory to all the variables and functions even before a single line of code is executed.
undefined is assigned to the variables before the code is executed.
undefined is like a placeholder in the memory for variables before any value is assigned.
Javascript is a loosely typed language a.k.a weakly typed language.
Loosely typed means it does not attach any specific datatype to its variables.
If a variable "a" is created and a string is assigned to it, later in the code, the variable can be assigned with numbers, boolean values etc.

Mistakes to avoid while using undefined

var a = undefined This code is not a good practice.
undefined means no value is assigned to the variable in memory creation phase.
Again if we assign undefined to that variable, it will lead to confusion and inconsistency.
undefined is used to know if any value is assigned to a variable and that's the purpose of undefined keyword.

The Scope Chain, Scope & Lexical Environment

Scope

Scope in JavaScript is directly related to Lexical Environment.
Scope means where you can access a specific variable or a function in the code.

2 Aspects of Scope

What is the scope of this variable "b" in the below code?

function a() {
	var b = 10;
	c();

	function c() {
	}
}
a();

That means, where can the variable "b" be accessed?
Other aspect of scope is, is variable "b" inside the scope of c() function?

Lexical Environment

Wherever an execution context is created, a Lexical Environment is also created.
Lexical Environment is the local memory along with the reference of the lexical environment of it's parent.
We can say function c() is lexically sitting inside function a().
With the example of the above code, the lexical environment of function c() has the memory space of function c() along with the lexical environment of function a().
The lexical environment of the global space will have the memory space of it's variables and functions and doesn't have access to any parent lexical environment (it points to null) because the global space is the starting point and it doesn't have any parent.
Lexical means, in a hierarchy, or in a sequence.
Function a() is lexically inside the global scope.
In terms of code, lexical means where the code is present (i.e., a particular code/variable/function might be present in the outer most code/global scope or inside any function etc.).

Scope Chain

The way/mechanism of finding/searching the variables from inside any function to its parent function till the global space is known as Scope Chain.
Scope Chain defines whether a variable or a function is present inside the scope.
If the Scope Chain is exhausted and the variable is not found, that means it is not inside the Scope Chain.

View the Lexical Environment in the browser

Run the code in debug mode and in the Inspect Page -> Sources Tab -> Click on different execution contexts that are available in the Call Stack tab and see the Scope Tab.
The global execution context will have Global scope.
The execution contexts of any function will have the local scope, parent scopes (if any) and the global scope.

let & const in JS and Temporal Dead Zone

let & const declarations are Hoisted.
But they are hoisted very differently than the var declarations.

Temporal Dead Zone

Temporal Dead Zone is the time between the let variable is Hoisted and initialized with some value.
Whenever a variable is accessed when it is in the Temporal Dead Zone, it throws a ReferenceError.

Block, Scope & Shadowing in JS

Closures in JS

Uses of Closures:

Module Design Pattern
Currying
Functions like once
Memoize
Maintaining state in async world
setTimeouts
Iterators
and many more...

setTimeout + Closures Interview Question

First Class Functions ft. Anonymous Functions

Callback Functions in JS ft. Event Listeners

Asynchronous JavaScript & Event Loop from scratch

JS Engine Exposed

Trust Issues with setTimeout()

Higher-Order Functions ft. Functional Programming

map, filter & reduce

Season 2

Callback Hell

Files

README.md

Latest commit

History

README.md

File metadata and controls

✨ Namaste JavaScript ✨

Season 1

JavaScript Documentation

How JavaScript works ?

How JavaScript Code is executed?

Sample Code Snippet

Functions are ❤️ of JavaScript

Call Stack in JavaScript

Hoisting in Javascript

How Functions work in Javascript? & Variable Environment

SHORTEST JS Program - window & this keyword

window keyword

this keyword

Global Space

What happens when any variables or functions created in global space ?

undefined vs not defined in JS

Mistakes to avoid while using undefined

The Scope Chain, Scope & Lexical Environment

Scope

2 Aspects of Scope

Lexical Environment

Scope Chain

View the Lexical Environment in the browser

let & const in JS and Temporal Dead Zone

Temporal Dead Zone

Block, Scope & Shadowing in JS

Closures in JS

Uses of Closures:

setTimeout + Closures Interview Question

First Class Functions ft. Anonymous Functions

Callback Functions in JS ft. Event Listeners

Asynchronous JavaScript & Event Loop from scratch

JS Engine Exposed

Trust Issues with setTimeout()

Higher-Order Functions ft. Functional Programming

map, filter & reduce

Season 2

Callback Hell