DEV Community: Rajat Oberoi

JavaScript Main Concepts < In Depth > Part 2

Rajat Oberoi — Sat, 22 Jun 2024 17:13:22 +0000

6. Closures

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

A closure gives you access to an outer function's scope from an inner function.

let b = 3;

function impureFunc(a) {
    return a + b;
}

In order to call a function in our code, JS interpreter needs to know about the function it self and any other data from the surroundings environment that it depends on.
Everything needs to be neatly closed up into a box before it can be fed into the machine.

A pure function is a function where the output is determined solely by its input values, without observable side effects. Given the same inputs, a pure function will always return the same output.

//Stored in call stack
function pureFunc(a, b) {
    return a + b;
}

Stack Memory:
A: 2
B: 3

Call Stack:

pureFunc(2, 3)

An impure function is a function that interacts with or modifies some state outside its own scope, which means its output can vary even with the same inputs.

In below example, in order to interpreter to call this function and also know the value of this free variable, it creates a closure and store them in a place in memory from where they can be access later. That area of memory is called the Heap.
Call stack memory is short lived, and heap memory can keep data indefinitely. Later memory gets freed using GC.
So a closure is a combination of a function with it's outer state or lexical environment.
Closure requires more memory than pure functions.

let b = 3;//free variable

function impureFunc(a) {
    return a + b;
}

Impure functions often rely on external state. Closures can encapsulate and manage this state within a function scope, making it possible to create stateful functions without resorting to global variables.

function createCounter() {
    let count = 0; // This is the external state

    return function() {
        count += 1; // Impure function: modifies the external state
        return count;
    };
}

const counter = createCounter();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

The count variable is encapsulated in the closure created by createCounter.
This allows the count variable to persist between function calls, while keeping it private and preventing it from being modified directly from the outside.

So,

Closures are often used in JavaScript to create functions with "private" variables or to maintain state across multiple function calls.

Memory Management and Closures:

In JavaScript, closures involve storing function references along with their surrounding state. This state is stored in memory, typically in the heap, as it needs to persist beyond the scope of the function execution.
When a function with a closure is no longer referenced, the memory it occupies can be garbage collected (GC). However, as long as there are references to the closure, the variables in its scope will not be freed.

Use Case of closure: Memoization

The Fibonacci sequence is a classic example where memoization can significantly improve performance. The naive recursive approach has exponential time complexity due to repeated calculations of the same values.

Naive Recursive Fibonacci Function(inefficient):

function findFabonacciRecursive(number) {
    if (number < 2) {
        return number;
    }
    return findFabonacciRecursive(number - 1) + findFabonacciRecursive(number - 2);
}

console.log(findFabonacciRecursive(10)); // 55

In this approach, the same values of fibonacci(n) are recalculated multiple times, leading to inefficiency. By memoizing the results of the function calls, we can avoid redundant calculations and improve the performance.

Memoized Fibonacci Function:


// Memoized Fibonacci function using a closure
function fibonacciMaster() {
    let cache = {};
    return function fib(n) {
        if (n in cache) {
            return cache[n];
        } else {
            if (n < 2) {
                cache[n] = n;  // Cache the base case result
                return n;
            } else {
                cache[n] = fib(n - 1) + fib(n - 2);
                return cache[n];
            }
        }
    };
}

const fasterFib = fibonacciMaster();
console.log(fasterFib(10)); // 55
console.log(fasterFib(50)); // 12586269025

7. JavaScript Let vs Var vs Const

Using let: It has block scope. So it is not accessible outside of a block i.e. curly braces {}

function start() {
    for(let counter = 0; counter < 5; counter++) {
        console.log(counter);
    }
    //console.log(counter)//ReferenceError: counter is not defined
}

start();

Output:
0
1
2
3
4

Using var: It has function scope. It's scope is not limited to the block in which it is defined but is limited to the function scope.

function start() {
    for(var counter = 0; counter < 5; counter++) {
        console.log(counter);
    }
    console.log(counter)//last value of counter after the for loop ends i.e. value 5
}

start();

Output:
0
1
2
3
4
5

Another example of var:


function start() {
    for(var counter = 0; counter < 5; counter++) {
        if(true) {
            var color = 'red';
        }
    }
    console.log(color)
}

start();

When we use var outside of a function, it creates a global variable and attaches that global variable window object in browser. variables declared with let (or const) do not get attached to the global object.

window object is central, suppose we are using a third party library and it has a variable with a same name and so that variable can override our variable. Hence, we should avoid adding stuff to window object. So, Avoid using var keyword.

Key Differences Between var and let:

Scope:

var is function-scoped, meaning it is accessible throughout the entire function in which it is declared.
let(& const) is block-scoped, meaning it is only accessible within the block (enclosed by {}) where it is declared.

Hoisting: Check 8. headline to understand hoisting further.

Variables declared with var are hoisted to the top of their scope and initialized with undefined.
Variables declared with let(& const) are also hoisted, but they are not initialized. Accessing them before declaration results in a ReferenceError.

Example Illustrating Scope and Hoisting:


function testVar() {
  console.log(varVar); // Outputs: undefined (due to hoisting)
  var varVar = 'I am var';
  console.log(varVar); // Outputs: 'I am var'
}

function testLet() {
  // console.log(letVar); // Would throw ReferenceError (temporal dead zone)
  let letVar = 'I am let';
  console.log(letVar); // Outputs: 'I am let'
}

testVar();
testLet();

Const keyword:

The const keyword in JavaScript is used to declare variables that are constant, meaning their value cannot be reassigned after they are initialized.
The binding (the reference to the value) of a const variable cannot be changed, but this does not mean the value itself is immutable. For example, if the value is an object or an array, its properties or elements can still be modified.


const y = 5;
// y = 10; // TypeError: Assignment to constant variable.

const obj = { name: 'Alice' };
obj.name = 'Bob'; // This is allowed
console.log(obj.name); // Outputs: 'Bob'

8. Hoisting

In JavaScript, hoisting is a concept where variable and function declarations are moved to the top of their containing scope during the compilation phase, before the code is executed. This means that regardless of where variables and functions are declared within a scope, they are treated as if they are declared at the top.

Scope in JavaScript refers to the visibility and accessibility of variables, functions, and objects in particular parts of your code during runtime

Variable Hoisting:

When variables are declared using var, let, or const, the declaration (not the initialization) is hoisted to the top of the scope.
However, only the declaration is hoisted, not the initialization. This means that variables declared with var are initialized with undefined whereas variables declared with let or const are not initialized until the actual line of code where the declaration is made.
Variables declared with let or const are hoisted to the top of their block scope, but they are not initialized until their actual declaration is evaluated during runtime. This is known as the "temporal dead zone" (TDZ).

console.log(y);  // ReferenceError: Cannot access 'y' before initialization
let y = 10;

Function Hoisting:

Function declarations are completely hoisted, including both the function name and the function body.
This allows you to call a function before it is declared in the code.

foo();  // "Hello, I'm John Wick!"

function getName() {
    console.log("Hello, I'm John Wick!");
}

Function expressions (functions assigned to variables) are not hoisted in the same way. Only the variable declaration is hoisted, not the function initialization.

getName();  // Error: getName is not a function

var getName = function() {
    console.log("Hello, I'm John Wick!");
};

9. IIFE (Immediately Invoked Function Expression)

An Immediately Invoked Function Expression (IIFE) is a function in JavaScript that runs as soon as it is defined. It is a common JavaScript pattern used to create a private scope and avoid polluting the global namespace.

Here is the basic structure of an IIFE:

(function() {
    // Your code here
})();

The function is defined within parentheses () to treat it as an expression, and it is immediately invoked with another set of parentheses ().

(function() {
    console.log("This is an IIFE");
})();

Why Use IIFE?

Avoid Global Variables: IIFEs help in avoiding global variables by creating a local scope.
Encapsulation: They encapsulate the code, making it self-contained.
Immediate Execution: Useful for running setup code for testing on local that should not be run again.

Examples:

With Parameters

(function(a, b) {
    console.log(a + b);
})(5, 10);

Returning Values:


let result = (function() {
    return "Hello, World!";
})();
console.log(result);  // Outputs: Hello, World!

Using Arrow functions:


(() => {
    console.log("This is an IIFE with arrow function");
})();

Q. What does this code log out?

for (var counter = 0; counter < 3; counter++) {
    //Closure as it depends on variable outside of it's scope.
    const log = () => {
        console.log(i);
    }

    setTimeout(log, 100);
}

Output:
3
3
3

var has global scope. with var we are mutating over and over again.
As we are using a closure, it keeps reference to counter variable in heap memory where it can be used later after timeout is achieved.
The time the setTimeout callbacks (the log functions) execute, the counter variable in the outer scope has been incremented to 3. Thus, each log function logs the final value of counter, which is 3.

for (var let = 0; counter < 3; counter++) {
    //Closure as it depends on variable outside of it's scope.
    const log = () => {
        debugger;
        console.log(i);
    }

    setTimeout(log, 100);
}

Output:
0
1
2

let is block scope. with let we are creating a variable that is scoped to for loop. i.e. it is local to the for loop and cannot be accessed outside of it.
In case of let, closure is capturing the log function with counter variable for each iteration of loop which is 0, 1 and 2.
Closure and Execution Context: Because let is block-scoped, each log function captures a unique counter variable from its respective iteration of the loop. Therefore, when each log function executes after 100 milliseconds, it logs the value of counter as it existed at the time of its creation.

JavaScript Main Concepts < In Depth > Part 1

Rajat Oberoi — Tue, 18 Jun 2024 14:24:40 +0000

1. Event Loop, Call Stack, Callback Queue

Explained here

2. this Keyword

The value of this in JavaScript depends on how a function is called, not where it is defined.

If function is a method i.e. a part of object, then this references the object itself.

const video = {
    title: 'Netflix',
    play() {
        console.log(this);
    }
}

video.play() //{ title: 'Netflix', play: [Function: play] }

video.stop = function() {
    console.log(this)
}

video.stop() //{ title: 'Netflix', play: [Function: play], stop: [Function] }

If function is a Regular function --> this reference the global object, i.e. global object in node and window object in web.

function playVideo() {
    console.log(this);
}

// playVideo() //Global object

If function is a Constructor function. this references the new object created from this constructor.

function Video(title) {
    this.title = title;
    console.log(this);
}

const newVideo = new Video('Netflix'); //Video { title: 'Netflix' }

// new keyword creates empty object {} then this will reference the new empty object.

*Behaviour of this keyword in Arrow Functions
*

Arrow functions do not have their own this context. Instead, they inherit this from the surrounding (lexical) scope where they are defined.
This means that the value of this inside an arrow function is the same as the value of this outside of it.

const userProfile = {
    name: 'John Wick',
    designation: 'SSE',
    team: 'Bill Payments',
    getEmployeeDetails() {
        console.log(`Name: ${this.name}, Designation: ${this.designation}`);
    },
    getTeam: () => {
        console.log(`Team for employee: ${this.name} is ${this.team}`);
    }
}


userProfile.getEmployeeDetails(); //Name: John Wick, Designation: SSE
userProfile.getTeam(); //Team for employee: undefined is undefined

//Arrow functions inheriting this keyword value from their surrounding(lexical) scope.

const userProfile = {
    name: 'John Wick',
    designation: 'SSE',
    team: 'Bill Payments',
    getEmployeeDetails() {
        console.log(`Name: ${this.name}, Designation: ${this.designation}`);
        let getTeam = () => {
            console.log(`Team for employee: ${this.name} is ${this.team}`);
        }
        getTeam();
    },
}


userProfile.getEmployeeDetails();

//Output:
//Name: John Wick, Designation: SSE
//Team for employee: John Wick is Bill Payments

Why arrow functions are designed like this?

This behavior is intentional and solves a common issue in JavaScript when working with functions, especially when passing them as callbacks or using them within methods.
As we understood before, In a regular function, this is determined at runtime based on how the function is invoked. If it’s called as a method of an object, this refers to that object. If it’s called as a standalone function, this defaults to the global object (or undefined in strict mode).
This dynamic behavior can be problematic when using functions as callbacks or nested within methods because the context (this) can change unexpectedly.

Example of Issue:

const userProfile = {
    name: 'John',
    showName: function() {
        console.log(this.name); // "John"

        function nestedFunction() {
            console.log(this.name); // `this` refers to the global object, not `userProfile`
        }

        nestedFunction();
    }
};

userProfile.showName();

Here, the nestedFunction loses the context of userProfile and points to the global object instead. This can be confusing and often requires using workarounds like storing this in a variable (const self = this) or using .bind().
Arrow functions solve this issue by lexically binding this—meaning they capture the this value from their enclosing scope (where they are defined), rather than creating their own.

*Example of Arrow Function Preserving this:
*

The arrow function getTeam correctly retains the this value from the getEmployeeDetails method,

const userProfile = {
    name: 'John Wick',
    designation: 'SSE',
    team: 'Bill Payments',
    getEmployeeDetails() {
        console.log(`Name: ${this.name}, Designation: ${this.designation}`);
        const getTeam = () => {
            console.log(`Team: ${this.team}`);
        }
        getTeam()
    },
}


userProfile.getEmployeeDetails();

< Passing this to self {Use case} >

const hotStar = {
    title: 'Sports',
    tags: ['India Vs Pakistan', 'India Vs USA', 'Ireland VS USA'],
    showTags() {
        this.tags.forEach(function (tag) {
            console.log(this.title, tag);
        })
    }
}

hotStar.showTags()

Output:

undefined 'India Vs Pakistan'
undefined 'India Vs USA'
undefined 'Ireland VS USA'

Reason:

When showTags is called, this refers to the hotStar object.
However, inside the forEach callback function, function is a regular function and not a method and as explained above, in regular function this references global object (window object in browsers) or be undefined in strict mode.
So there is no property in global object named 'title' hence undefined.

To Solve such scenario:

To maintain a reference to the hotStar object within the forEach callback, the showTags method saves the reference in a variable called self(most commonly variable name used is self, we can give any name to it.)

const hotStar = {
    title: 'Sports',
    tags: ['India Vs Pakistan', 'India Vs USA', 'Ireland VS USA'],
    showTags() {
        let self = this;
        this.tags.forEach(function (tag) {
            console.log(self.title, tag);
        })
    }
}

hotStar.showTags()

Output:

Sports India Vs Pakistan
Sports India Vs USA
Sports Ireland VS USA

3. Callbacks

General Callback: Any function that is passed as an argument to another function and is executed after some kind of event or action.
Asynchronous Callback: A specific type of callback that is executed after an asynchronous operation completes. These are often associated with events or tasks that are scheduled to run in the future, such as I/O operations, timers, or network requests.

function getDBdata(rechargeNumber, cb) {
    console.log(`Executing select query in MySQL for  ${rechargeNumber}`)
    cb(rechargeNumber);
}


function callMerchantApi(recharge_number) {
    console.log(`Calling merchant REST API for ${recharge_number}`)
}

getDBdata('1241421414', callMerchantApi) //callMerchantApi is a callback

In this JavaScript code, we have two functions: getDBdata and callMerchantApi.
The getDBdata function accepts a rechargeNumber(Customer Number) and a callback function cb. Inside getDBdata, a message is logged to the console, and then the callback function cb is called with rechargeNumber as its argument. Function passed in a function.
Another Example

Here below setTimeout is a function for adding a delay, and after timeout/delay of 3 seconds is achieved, callback(which here is a arrow function) gets triggered and console message is printed.

setTimeout(() => { 
    console.log("This message is shown after 3 seconds");
}, 3000);

Major Disadvantage of Callback is Nested Callbacks.

Callbacks can lead to deeply nested code (callback hell), which is hard to read and maintain.
To address these drawbacks, modern JavaScript offers Promises and the async/await syntax, which simplify asynchronous code and improve readability.

4. Promises

In JavaScript, a Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. Promises provide a cleaner, more flexible way to work with asynchronous code compared to traditional callback functions.

A Promise has three states:

Pending: The initial state, neither fulfilled nor rejected.
Fulfilled: The operation completed successfully.
Rejected: The operation failed.

To a promise, we can attach 3 methods:

.then(): Gets called after a promise resolved.
.catch(): Gets called after a promise rejected.
.finally(): Always gets called, whether the promise resolved or rejected.

The .then method receives the value passed to the resolve method.
The .catch method receives the value passed to the rejected method

getUserFromMySQL(custId)
.then((result) => {
    console.log(result)
})
.catch((err) => {
    console.log(`Something went wrong!! ${err}`)
})
.finally(() => {
    console.log('Promise all done!!')
})

Creating and Using a Promise:


//Creating
let somePromise = new Promise((resolve, reject) => {
    // Some asynchronous operation
    let success = true; // This could be the result of the operation

    if (success) {
        resolve("Operation successful");
    } else {
        reject("Operation failed");
    }
});

//Using

somePromise
    .then(result => {
        console.log(result); // "Operation successful"
    })
    .catch(error => {
        console.error(error); // "Operation failed"
    })

< Promise Execution Behind The Scenes >

1. new Promise Constructor function is called. It also receives a executor function.

new Promise((resolve, reject) => { //Some Async Stuff Here. })

1. New Promise object is created in memory. This object contains some internal slots like PromiseState, PromiseResult, PromiseFulfillReactions, PromiseRejectReactions and PromiseIsHandled. {We cannot access these internal slots}
PromiseState will be pending if the promise is not resolved or rejected.

// Initially:
// PromiseState: "pending"
// PromiseResult: undefined
// PromiseFulfillReactions: []
// PromiseRejectReactions: []
// PromiseIsHandled: false

We can resolve or reject by calling resolve or reject that are made available to use by executor function.
When we call resolve, the PromiseState is set to fulfilled.

// After resolve is called:
// PromiseState: "fulfilled"
// PromiseResult: undefined --> As we have not passed anything while calling resolve()
// PromiseFulfillReactions: [onFulfilled handler]
// PromiseRejectReactions: []
// PromiseIsHandled: false

Resolving or Rejecting with some data.

Using .then and .catch

const getCarDetails = new Promise((resolve, reject) => {
    const customerId = 'Elon Musk';
    readBillsFromCassandra(customerId, (error, data) => {
        if (error) {
            reject('DB Client Not Ready!!');
        } else {
            resolve(data);
        }
    });
});

function readBillsFromCassandra(custId, callback) {
    console.log(`Fetching data from Cassandra keyspace for ${custId}`);
    // Simulating async data fetching with a timeout
    setTimeout(() => {
        // Simulate successful data retrieval
        callback(null, {"car": "Tesla", "color": "black", "type": "EV"});
        // To simulate an error, uncomment the following line
        // callback(new Error('Cassandra error'), null);
    }, 1000);
}

getCarDetails
    .then((result) => {
        console.log(`Result of promise is ${JSON.stringify(result)}`);
    })
    .catch((error) => {
        console.log(`Something went wrong, Error: ${error}`);
    });

When resolve is called, it gets added to the call stack, Promise state is set to fulfilled, result is set to the value we pass to the resolve, and the promise reaction record handler receives that promise result {"car": "Tesla", "color": "black", "type": "EV"} in above example.

< Code Flow BTS >

Example 1:

new Promise((resolve) => {
    setTimeout(() => {
        resolve('Done!')
    }, 1000);
})
.then((result) => {
    console.log('Result is ', result)
})

new Promise constructor added to call stack and this creates the promise object.
The executor function (resolve) => { setTimeout(...) } is executed immediately.
setTimeout gets added to call stack and registers a event-callback pair in Node API. Timer Starts.

The new Promise constructor completes, and the Promise is now pending, waiting to be resolved.

next line, The .then method is called on the Promise object.
Timeout achieved, callback we passed to setTimeOut is now added to Task Queue/Callback Queue.
From task queue it goes to Call stack and gets executed. Promise state changes to fulfilled.
.then handler now moves to micro task queue. (result) => { console.log('Result is', result) } when the Promise is resolved. The callback is added to the micro task queue (also known as the job queue).
The JavaScript runtime continues to execute other code (if any) or sits idle, checking the event loop.
setTimeout callback is popped out after execution, handler function moves to call stack and gets executed.
When our handler was in micro task queue, our other tasks in our code keeps on executing, only when the call stack is empty this handler gets added to it.
This means we can handle the promise results in a Non Blocking Way.
.then itself also creates a promise record. Which allows us to chain .then to each other, like below.


new Promise((resolve) => {
    resolve(1)
})
.then((result) => {
    return result * 2;
})
.then((result) => {
    return result * 3;
})
.then((result) => {
    console.log(result) //Output: 6
})

Example 2 < Code Flow BTS >


new Promise((resolve) => {
    setTimeout(() => {
        console.log(1)
        resolve(2)
    }, 1000);
})
.then((result) => {
    console.log(result)
});

console.log(3);

Output Sequence
3
1
2

Explanation:

Main Execution Context:

new Promise((resolve) => {...}) is encountered, and the Promise constructor is called. Which creates a Promise Object with PromiseState: pending

Promise Executor Function:

The executor function (resolve) => { setTimeout(...) } is executed immediately.
setTimeout is called with a callback and a delay of 1000 milliseconds. It registers an event-callback pair.

Adding .then Handler:

The .then method is called on the Promise object.
The callback (result) => { console.log(result) } is registered to be called once the Promise is resolved.

logging 3 to the console.

console.log(3) is executed immediately.

Event Loop and Task Execution:

The JavaScript runtime continues executing other code (if any) or sits idle, checking the event loop.
After 1000 milliseconds, the callback passed to setTimeout is moved from the macro task queue to the call stack.

The callback () => { console.log(1); resolve(2); } is executed.

console.log(1) is executed, logging 1 to the console.

resolve(2) is called, which changes the state of the Promise from pending to fulfilled with the value 2.

The .then callback (result) => { console.log(result) } is enqueued in the micro task queue.

Microtask Queue Execution:

After the current macrotask (the setTimeout callback) completes, the event loop checks the microtask queue.

The .then callback (result) => { console.log(result) } is dequeued from the microtask queue and moved to the call stack.

The .then callback is executed with result being 2.
console.log(result) is executed, logging 2 to the console.

5. Async/Await

ES7 introduced a new way to add async behaviour in JavaScript and make easier to work with promises based code!

First, Let's analyse the behaviour changes when we add a keyword 'async' in front of a function.

const doWork = () => {
    //If we do not return anything by default undefined is returned.
}

console.log(doWork()); //Output: undefined

Now, adding async

const doWork = async () => {
    //If we do not return anything by default undefined is returned.
}

console.log(doWork()); //Promise { undefined }

Hence, *Async functions always returns a promise, and those promise are fulfilled by the value developer choose to return from the function. *

Now, lets explicitly return a string.

const doWork = async () => {
    return 'John Wick'
}

console.log(doWork()); //Promise { 'John Wick' }

So the return value of doWork function here is not a string, instead it is a Promise that gets fulfilled with this string 'John Wick'.

Since, we are getting a promise in return, we can use .then and .catch methods.

const doWork = async () => {
    //throw new Error('Db client not connected!')
    return 'John Wick'
}

doWork()

Output: My name is John Wick

If doWork throws an error, it is same as reject promise, and will be catched. Uncomment throw error to stimulate .catch

Await Operator

Old Way

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        //setTimeOut is used to stimulate Async opearation. Here it can be any thing, like REST API call, or Fetching data from Database.
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}


add(1, 3)
.then((result) => {
    console.log(`Result received is ${result}`)
})
.catch((err) => {
    console.log(`Received error: ${err}`)
})

With using Async-Await

const add = (a, b) => {
    return new Promise((resolve, reject) => {
        //setTimeOut is used to stimulate Async opearation. Here it can be any thing, like REST API call, or Fetching data from Database.
        setTimeout(() => {
            resolve(a + b)
        }, 2000)
    })
}

const doWork = async () => {
    try {
        const result = await add(1, 3);
        console.log(`Result is ${result}`);

    } catch (err) {
        console.log(`Received error: ${err}`)
    }
}

doWork()

This way JavaScript's async and await keywords allow developers to write asynchronous code in a style that resembles synchronous code. This can make the code easier to read and understand.
The doWork function is declared with the async keyword, making it an asynchronous function. This allows the use of the await keyword inside it.
Within doWork, the await keyword is used before calling add(1, 3). This pauses the execution of doWork until the Promise returned by add is resolved.
While the execution is paused, other operations can continue (i.e., the event loop remains unblocked).

Using Async and Await doesn't make things faster, it's just makes things easier to work with. Check below snippet for doWork

const doWork = async () => {
    try {
        const sum = await add(1, 3); //Wait 2 seconds
        const sum1 = await add(sum, 10);//Wait 2 seconds
        const sum2 = await add(sum1, 100);//Wait 2 seconds
        console.log(`Final sum is ${sum2}`) //Final sum is 114
    } catch (err) {
        console.log(`Received error: ${err}`)
    }
}

Out all 3 functions calls runs in order, other asynchronous things happening behind the scenes.
If first await promise rejects, none of the code down below that would run.
await calls operator sequentially, sum2 will not kick off until we get a value for sum. In some cases this is desired.

Taking below example where sum, sum2, sum3 are not dependent

const doWork = async () => {
    try {
        const sum = await add(1, 3);
        const sum2 = await add(4, 10);
        const sum3 = await add(100, 200);
        return `${sum}, ${sum2}, ${sum3}`
    } catch (error) {
        console.log(`Something went wrong! Error: ${error}`)
    }
}

If we want all the sum simultaneously by not blocking each other we can rewrite the above code as:

async function getAllSum() {
    let [
        sum,
        sum2,
        sum3
    ] = await Promise.all([
        add(1, 3),
        add(4, 10),
        add(100, 200)
    ]);
    return `${sum}, ${sum2}, ${sum3}`; 
}

One of the problem with Promise chaining is that, it is difficult to have all values in same scope. For example

add(1, 1)
.then((sum) => {
    console.log(sum)
    return add(sum, 10);
})
.then((sum2) => {
    console.log(sum2)
})
.catch((err) => {
    console.log(err)
})

What if we want to have access to both sum at the same time to do something like save in database. We would have to create a variable in parent scope and reassign them in .then.
In async await, we have access to all individual sums in the same scope.

click for Part 2

Understanding the Event Loop, Callback Queue, and Call Stack & Micro Task Queue in JavaScript

Rajat Oberoi — Tue, 18 Jun 2024 08:57:35 +0000

Call Stack: Simple Data structure provided by the V8 Engine

JavaScript executes code using a Call Stack, which tracks the currently executing function.
Main function (the entire script) is automatically added to the call stack.
Functions are added to the call stack when called and removed once executed.
JavaScript is single-threaded, meaning only one task is processed in the call stack at a time.

//Basic Example

const x = 1;
const y = x + 2;
console.log('Sum is', y);

/*

- This code gets wrapped in main() and main is added to Call Stack.
- log('Sum is 3') added to call stack.
- On console we would get 'Sum is 3'. Now log function is finished and gets removed from Call Stack.
- Now end of script, main function gets popped out of Call Stack.
*/


const listLocations = (locations) => {
    locations.forEach((location) => {
        console.log(location);
    });
}

const myLocation = ['Delhi', 'Punjab'];
listLocations(myLocation)

Main function gets pushed onto the call stack.
Line 1 we are declaring the function but not calling it, hence it will not get added to call stack.
Line 7 we are defining our location array.
Line 8 Function call, So it is going to be pushed to call stack and is the top item there.
listLocations will start running. pushed to call stack.
forEach is a function call so gets added to call stack. forEach calls anonymus function one time for each location.
anonymous('Delhi) function gets added to call stack with argument Delhi.
Now console.log function gets added to call stack. It prints Delhi, and finishes. and pops out.
anonymous('Delhi) finishes and pops out.
forEach is not done yet hence does not pops out. anonymous('Punjab) gets added to call stack.
Now console.log function gets added to call stack. It prints Punjab, and finishes. and pops out.
forEach is completed and hence poped out of call stack.
listLocations is done, hence pops out.
Script is completed. main() pops out.

Callback Queue

It's job is to maintain a list of all of the callback functions that needs to be executed.

console.log('Starting Up!');

setTimeout(() => {
    console.log('Two Seconds!');
}, 2000);

setTimeout(() => {
    console.log('Zero Seconds!');
}, 0);

console.log('Finishing Up!');

main() pushed to call stack.
Line 3: setTimeout pushed to call stack. < setTimeout is not part of JS V8 but is part of NodeJS. It's implementation is in C++ provided by NodeJs.
setTimeout when called registers an event which is an event-callback pair. Event here is wait 2 seconds and callback is the function to run. Another example of event-callback pair is wait for database request to complete and then run the callback that does something with the data.
This new event i.e. setTimeout function is popped and is registered in Node APIs. 2 Seconds clock starts ticking down.
While waiting for those 2 seconds we can do other stuff < Non Blocking nature of node >
Line 7: setTimeout registers another event in Node API.
Now timeout 0 seconds are up, now the callback needs to be executed.

Callback Queue comes in picture: It's job is to maintain a list of all of the callback functions that needs to be executed. Front item gets executed first.

callback of setTimeout with 0 seconds timeout gets added to queue so that it can be executed. But to get executed it needs to be added on Call Stack, that's where function go to run.

Now, here Event Loops comes in picture, it looks at the call stack and callback queue, If call stack is empty then it will run items from callback queue. < This is the reason 'Finishing Up!' logged before 'Zero Seconds!' as main was in call stack, event loop is waiting for main to get popped out>

log('Zero Seconds!') gets added to call stack. and message is printed on console.
main is completed and pops out.
Event loop takes item from call back queue and push to call stack. 'Zero Seconds!' prints.
Once 2 seconds achieved, callback('Two Seconds!') added to callback queue, moves to call stack, gets executed. 'Two Seconds!' prints.

The delay specified in setTimeout is not the exact timing of execution but rather the minimum delay after which the callback can be added to the callback queue.
The actual execution time depends on the event loop's scheduling and the availability of the call stack. This asynchronous behaviour allows JavaScript to handle non-blocking operations effectively, especially in environments like Node.js where I/O operations are common.

Non-Blocking Nature of Node.js

Though JavaScript is single-threaded, meaning only one function can be executed at a time.
it achieves non-blocking behavior using Node APIs for asynchronous tasks like setTimeout, database calls, etc.
While the call stack is executing synchronous code, the environment handles asynchronous tasks in the background.

Micro Task Queue

When working with Promise, NodeJS works with micro task queue.
Microtasks are queued for execution.
When a Promise is resolved or rejected, its .then() or .catch() callbacks are added to the microtask queue.
In async await: When await is used inside an async function, it essentially breaks the function into two parts:
Synchronous Part: The part before the await keyword executes synchronously.
Asynchronous Part: The part after await executes asynchronously once the awaited promise resolves.
Microtasks come into play when promises are resolved inside async functions using await. After the awaited promise resolves, the callback (or subsequent async code) following the await is placed in the Microtask Queue for execution.
Event Loop prioritise the microtask queue. Microtasks have higher priority than macrotasks (such as setTimeout callbacks or event handlers), which means they are executed as soon as the call stack is empty and before the event loop moves to the next macrotask.
First micro task queue is emptied then event loop moves to callback queue.
After each task picked from callback queue and pushed to call stack, event loop will check micro task queue.

Structured summary:

Call Stack:

JavaScript executes code using a Call Stack, which tracks the currently executing function.
Main function (the entire script) is automatically added to the call stack.
Functions are added to the call stack when called and removed once executed.
JavaScript is single-threaded, meaning only one task is processed in the call stack at a time.

Asynchronous Behavior:

Though JavaScript is single-threaded, it achieves non-blocking behavior using Node APIs for asynchronous tasks like setTimeout, database calls, etc.
These APIs handle long-running tasks in the background, allowing other synchronous code to execute.

Callback Queue:

After an asynchronous task is complete, its callback is added to the Callback Queue.
The Event Loop checks whether the Call Stack is empty and, if so, pushes callbacks from the queue to the call stack.
Example: setTimeout(() => console.log('Hello'), 0) will be executed after the synchronous code finishes, despite the 0ms timeout.

Event Loop:

Event Loop continuously checks if the call stack is empty.
It then processes tasks from the Callback Queue or Microtask Queue (like Promise callbacks).

Microtask Queue:

Microtasks are usually created by promises.
When a promise is resolved or rejected, the corresponding .then() or .catch() handler is added to the Microtask Queue.
Microtasks have higher priority than Macrotasks (like setTimeout callbacks).
Before handling any macrotasks from the callback queue, the event loop checks and clears the Microtask Queue.

Execution Order:

Promises and async functions utilize the microtask queue for their resolution/rejection handlers.
Example:
Promises' .then() callbacks run before setTimeout callbacks, even if the timeout is 0ms.

Summary of Execution Order:

Synchronous code executes first (added to the call stack).
Once the call stack is empty, Microtasks (e.g., resolved promises) are handled.
After the microtask queue is cleared, Macrotasks (e.g., setTimeout, I/O callbacks) are processed from the Callback Queue.
This explains why promises' .then() callbacks are executed before setTimeout callbacks, even with a 0ms timeout, and how JavaScript manages non-blocking operations effectively.

Mastering OOP: Encapsulation, Abstraction, Inheritance, and Polymorphism Explained with JavaScript Examples

Rajat Oberoi — Tue, 18 Jun 2024 07:06:04 +0000

Four fundamental concepts of Object-Oriented Programming (OOP)

1. Encapsulation

Bundling the data (properties) and methods (functions) that operate on the data into a single unit, typically a class or an object.
It restricts direct access to some of the object's components, which can help prevent the accidental modification of data. Instead, interactions with the data are done through well-defined interfaces (methods).

< Procedural way of code >

let baseSalary = 30000;
let overtime = 10;
let rate = 20;

function getWage(baseSalary, overtime, rate) {
    return baseSalary + (overtime * rate)
}

< OOP way >

let employee = {
    baseSalary: 30000,
    overtime: 10,
    rate: 20,
    getWage: function() {
        return this.baseSalary + (this.overtime * this.rate);
    }
}

console.log(employee.getWage())

In OOP way functions will have fewer parameters. And hence easier to manage.
Parameters modeled as properties of this object.
Data (baseSalary, overtime, rate) and functionality (getWage method) are encapsulated within a single object employee.

2. Abstraction

Abstraction in JavaScript (or any programming language) involves hiding the complex implementation details and showing only the necessary features of an object.
This helps in reducing complexity and increases the efficiency of the program by allowing the user to interact with the object at a higher level.

class Car {

    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    startEngine() {
        this.#checkEngine();
        console.log(`${this.make} ${this.model} engine started.`);
    }

    drive() {
        console.log(`${this.make} ${this.model} is driving.`)
    }

    #checkEngine() {
        console.log('Check engine...')
    }
}

const myCar = new Car('Tata','Punch', 2024);
myCar.startEngine();
myCar.drive();
// myCar.#checkEngine(); //--> SyntaxError: Private field '#checkEngine' must be declared in an enclosing class

Private method checkEngine cannot be accessed outside the class because it has a private identifier. #checkEngine is an example of a private method (a feature introduced in ES2022).
The startEngine method provides a simple interface for the user, while the complex logic inside #checkEngine is hidden, demonstrating abstraction.

3. Inheritance

Helps us to prevent redundant code.
Allows a class to inherit properties and methods from another class. In JavaScript, inheritance can be implemented using the class syntax with the extends keyword.

// Base class
class Vehicle {
    constructor(make, model, year) {
        this.make = make;
        this.model = model;
        this.year = year;
    }

    drive() {
        console.log(`${this.make} ${model} driving.`)
    }
}

//The Car class inherits from the Vehicle class. This means that Car has access to the properties and methods defined in Vehicle
class Car extends Vehicle {
    constructor(make, model, year, color) {
        super(make, model, year);
        this.color = color;
    }

    getColor() {
        console.log(`Color of ${this.make} ${this.model} is ${this.color}`)
    }
}

const myCar = new Car('Tata', 'Punch', '2024', 'Grey');
myCar.getColor()

4. Polymorphism

Poly means Many, morphism means Forms.
In polymorphism the same method results in different actions depending on the object it is acting upon.
In programming terms, the remote control calls the power method, and each device has its own implementation of what happens when the power method is called.
This is polymorphism: the same method (power) results in different actions depending on the object it is acting upon (TV, DVD player, or radio).


// Base class
class Device {
    power() {
        throw new Error('power method must be implemented');
    }
}

// Derived class for TV
class TV extends Device {
    power() {
        console.log('Turning TV on or off.');
    }
}

// Derived class for DVD Player
class DVDPlayer extends Device {
    power() {
        console.log('Turning DVD Player on or off.');
    }
}

// Derived class for Radio
class Radio extends Device {
    power() {
        console.log('Turning Radio on or off.');
    }
}

// Function that demonstrates polymorphism
function useRemoteControl(device) {
    device.power();
}

// Usage
const myTV = new TV();
const myDVDPlayer = new DVDPlayer();
const myRadio = new Radio();

useRemoteControl(myTV);        // Output: Turning TV on or off.
useRemoteControl(myDVDPlayer); // Output: Turning DVD Player on or off.
useRemoteControl(myRadio);     // Output: Turning Radio on or off.