Forem: Manoj

Event Loop — JavaScript

Manoj — Tue, 03 Dec 2024 06:06:49 +0000

Event loop is the loop that maintains the execution order (handling asynchronous operations without blocking the main thread) of JavaScript code.

Things to know before diving into event loop:

Call Stack: This is where JavaScript executes our code. It follows a Last In, First Out (LIFO) structure. When a function is called, a new execution context is created and it gets pushed onto the stack. When the function ends, it’s popped off.
MicroTasks Queue: Special queue dedicated to queueMicroTask methods, Promise handlers, await callbacks and MutationObserver (interface provides the ability to watch for changes being made to the DOM tree).
MacroTasks Queue: All other callbacks from Web APIs (setTimeout, setInterval, DOM APIs, fetch) enters the macroTasks queue.

What is Event Loop?

It’s an endless loop that waits for tasks and pushes them into call stack for execution. Since JavaScript is single-threaded, it maintains an execution order to handle both synchronous asynchronous operations based on priority.

Regular JS code: Synchronous code runs first and fills the call stack.
MicroTasks: Tasks queued in microTasks queue gets executed.
MacroTasks: Tasks queued in macroTasks queue gets executed.

// Programmatic way of how the event loop processes tasks
while (true) {
  // Step 1: Execute tasks in the call stack
  while (!callStack.isEmpty()) {
    const currentTask = callStack.pop();
    currentTask(); // Executes the task
  }
  // Step 2: Process all microtasks
  while (!microTasksQueue.isEmpty()) {
    const microTask = microTasksQueue.shift();
    callStack.push(microTask); // Push microtask to call stack for execution
  }
  // Step 3: Process one macrotask if available
  if (!macroTasksQueue.isEmpty()) {
    const macroTask = macroTasksQueue.shift();
    callStack.push(macroTask); // Push macrotask to call stack for execution
  }
  // Break if there's nothing left to process
  if (callStack.isEmpty() && microTasksQueue.isEmpty() && macroTasksQueue.isEmpty()) {
    break;
  }
}

Let’s go through an example to understand the workflow better

1.  setTimeout(() => console.log(1), 2000);
2.  Promise.resolve().then(() => {
3.      console.log(2);
4.      queueMicroTask(() => console.log(3));
5.  });
6.  Promise.resolve().then(() => {
7.      console.log(4);
8.      setTimeout(() => console.log(5));
9.  });
10. setTimeout(() => console.log(6));
11. console.log(7);

// 7 2 4 3 6 5 1

Let’s assume we have a 2 queues microTasks and macroTasks. When the code starts executing,

() => console.log(1) gets pushed into the macroTasks queue in 2000ms.
() => { console.log(2); queueMicroTask(() => console.log(3)); }) gets pushed into the microTasks queue.
() => { console.log(4); setTimeout(() => console.log(5)); }) gets pushed into the microTasks queue.
() => console.log(6) gets pushed into the macroTasks queue in 0ms.
console.log(7) executes and prints 7 in console.
Now the event loop checks the microTasks queue for tasks and takes () => { console.log(2); queueMicroTask(() => console.log(3)); }) task and prints 2 in console and pushes () => console.log(3) into microTasks queue.
Next, the event loop checks microTasks queue and takes () => { console.log(4); setTimeout(() => console.log(5)); }) task and prints 4 and pushes () => console.log(5) into macroTasks queue in 0ms.
Again, the event loop checks microTasks queue and takes () => console.log(3)) task and prints 3 in console.
Since the microTasks queue is empty now, the event loop checks the macroTaskQueue and takes () => console.log(6) and prints 6 in console.
Event loop takes the next task () => console.log(5) from the macroTasks after ensuring that there isn’t any tasks in microTasks queue and prints 5 in console.
Event loop takes the next task () => console.log(1) from the macroTasks and prints 1 in console.

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

Closures - Javascript

Manoj — Sun, 10 Nov 2024 06:13:25 +0000

You know what? In JavaScript, all functions are naturally closures (with only one exception). Really, let’s go through to understand how this works.

Closure are functions bundled together with its lexical references. While that’s the formal definition, what do closures really mean? Before diving into closures, understanding first-class functions is beneficial, as it provides foundational knowledge that helps you grasp how closures work.

Key Concepts to Know First:

1. First-class functions: Functions that can be assigned to variables, passed as an argument and returned from functions.
2. Function scope: Functions can access variables from their own scope and from the surrounding (outer) scope.
3. Execution context: Each time a function is invoked, a new execution context is created. This includes the variable environment and the scope chain.

In general, variables created within a function are scoped to that function and are destroyed immediately after the function completes execution. For example, consider a function named premiumContentAccess that contains two variables: articlesAllowedToAccess and currentlyAccessed.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;
}

premiumContentAccess();

When premiumContentAccess is executed, the local variables articlesAllowedToAccess and currentlyAccessed are created. Once the function execution completes, these variables go out of scope and are eligible for garbage collection, meaning they are effectively destroyed and cannot be accessed afterward.

Is it possible to retain access to these variables even after the execution of premiumContentAccess? Here comes the closure.

What is Closure?

A closure is formed when a function is returned (or created) that has access to its surrounding (outer) variables. These variables references are bundled together with the function, allowing them to persist.

function premiumContentAccess() {
  let articlesAllowedToAccess = 3;
  let currentlyAccessed = 0;  

  function accessArticle() {
    if (currentlyAccessed >= articlesAllowedToAccess) {
      return 'Premium Article Access Reached';
    }
    currentlyAccessed++;
    return 'Article accessed';
  }
  return accessArticle;
}

let accessArticle = premiumContentAccess();

console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Article accessed
console.log(accessArticle()); // Outputs: Premium Article Access Reached

Breakdown of the Example

1. Outer Function: premiumContentAccess() is the outer function that defines the variables articlesAllowedToAccess and currentlyAccessed.
2. Inner Function: accessArticle is the inner function that accesses the variables from its lexical scope, which is defined in the outer function.
3. Closure: When premiumContentAccess() is called, it returns the accessArticle function retaining access to the variables articlesAllowedToAccess and currentlyAccessed, even after the outer function has finished executing.
4. State Retention: The closure allows accessArticle to maintain its own state regarding how many articles have been accessed. Each call to accessArticle modifies currentlyAccessed, which is preserved due to the closure.

All Functions Are Closures:

As we mentioned at start, all functions are naturally closures.

That is: they automatically retain a reference to their creation context through a hidden [[Environment]] property, allowing their code to access outer variables.

Exception: Functions created using the new Function constructor set the [[Environment]] to the global context instead of the creation context.

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

Writing polyfills — Javascript

Manoj — Sun, 03 Nov 2024 12:30:00 +0000

A piece of code that provides functionality that is not natively supported by certain browsers or environments. In simple terms, a browser falback.

Before writing polyfills for the call(), apply() and bind() methods, please check the functionality of call, apply and bind.

let details = {
  name: 'Manoj',
  location: 'Chennai'
}

let getDetails = function (...args) {
  return `${this.name} from ${this.location}${args.join(', ') ? `, ${args.join(', ')}` : ''}`;
}

1. Call Method:

Let’s create a polyfill for call(). We'll add a custom call method to the Function.prototype to make it accessible to all functions.

getDetails.call(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myCall = function (ref, ...args) {
  if (typeof Function.prototype.call === 'function') {  // Checks whether the browser supports call method
    return this.call(ref, ...args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is used to overwriting a function name
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](...args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myCall(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

2. Apply Method:

Let’s create a polyfill for apply(). We’ll add a custom apply method to the Function.prototype to make it accessible to all functions.

getDetails.apply(details, ['Tamil Nadu', 'India']);  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myApply = function (ref, args) {
  if (typeof Function.prototype.apply === 'function') {  // Checks whether the browser supports call method
    this.apply(ref, args);
  } else {
    ref = ref || globalThis;
    let funcName = Math.random();  // Random is to avoid duplication
    while (ref.funcName) {
      funcName = Math.random();
    }
    ref[funcName] = this;
    let result = ref[funcName](args);
    delete ref[funcName];
    return result;
  }
}

getDetails.myApply(details, 'Tamil Nadu', 'India');  // Manoj from Chennai, Tamil Nadu, India

3. Bind method

Let’s create a polyfill for bind(). We’ll add a custom bind method to the Function.prototype to make it accessible to all functions.

let getFullDetails = getDetails.bind(details, 'Tamil Nadu');
getFullDetails();  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

// Polyfill
Function.prototype.myBind = function (ref, ...args) {
  if (typeof Function.prototype.bind === 'function') {
    return this.bind(ref, ...args);
  } else {
    let fn = this;
    return function (...args2) {
        return fn.apply(ref, [...args, ...args2]);  // Merge and apply arguments
    }
  }
}

let getFullDetails = getDetails.myBind(details, 'Tamil Nadu');  // Manoj from Chennai, Tamil Nadu
getFullDetails('India');  // Manoj from Chennai, Tamil Nadu, India

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

Call, Apply & Bind Methods — Javascript

Manoj — Fri, 01 Nov 2024 09:53:11 +0000

Each and every function in JS has access to this keyword.

1. Call

It’s similar to function borrowing, where we can use functions / borrow functions from one object and use them with another object instead of redeclaring them.

let name = {
  firstnName: 'Manoj',
  secondName: 'Ravi',
  fullName: function (district, state) {
    return `${this.firstName} ${this.secondName} from ${district}, ${state}.`;
  }
};

let getFullDetails = function(district, state) {
  return `${this.firstName} ${this.secondName} from ${district}, ${state}.`;
};

name.fullName('Chennai', 'TN');  // Manoj Ravi from Chennai, TN.
getFullDetails.call(name, 'Chennai', 'TN');  // Manoj Ravi from Chennai, TN.

let name2 = {
  firstnName: 'Sanjay',
  secondName: 'Ravi',
};

name.fullName.call(name2, 'Coimbatore', 'TN');  // Sanjay Ravi from Coimbatore, TN.
getFullDetails.call(name2, 'Coimbatore', 'TN');  // Sanjay Ravi from Coimbatore, TN.

Additional parameters can be shared in a comma-separated format.

2. Apply

Similar to call, the only difference is the way we pass arguments. Instead of passing them individually (in a comma-separated format), we pass them as an array.

let getFullDetails = function(district, state) {
  return `${this.firstName} ${this.secondName} from ${district}, ${state}.`;
};

let name = {
  firstnName: 'Manoj',
  secondName: 'Ravi'
};
getFullDetails.call(name, ['Chennai', 'TN']);  // Manoj Ravi from Chennai, TN.

let name2 = {
  firstnName: 'Sanjay',
  secondName: 'Ravi'
};
getFullDetails.call(name2, ['Coimbatore', 'TN']);  // Sanjay Ravi from Coimbatore, TN.

3. Bind

Similar to call, this method does not invoke the function immediately; instead, it binds the function's reference and returns a new function that can be called later.

let getFullDetails = function(district, state) {
  return `${this.firstName} ${this.secondName} from ${district}, ${state}.`;
};

let name = {
  firstnName: 'Manoj',
  secondName: 'Ravi'
};


let printDetails = getFullDetails(name, 'Chennai', 'TN');
printDetails();  // Manoj Ravi from Chennai, TN.

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.

Object Creation Methods — JavaScript

Manoj — Sun, 27 Oct 2024 12:30:00 +0000

In JavaScript, almost “everything” is an object. Understanding how to create and work with objects effectively is fundamental to becoming proficient in JavaScript development.

All the objects created inherits directly from the built-in Object.prototype by default.

There are several ways to create object in JavaScript. Here are some common methods:

1. Object Literals

Simple and Straightforward way to create a object without specifying a prototype explicitly.

const obj = {
    property1: "value1",
    property2: "value2"
};

2. Using the new keyword with Object Constructor

We can create objects using the built-in Object constructor function along with the new keyword.

const obj = new Object();
obj.key1 = value1;
obj.key2 = value2;

3. Object.create() Method

Unlike other object creating methods Object.create() allows us to explicitly specify the prototype of the newly created object.

const prototypeObject = {}; // Prototype object
const obj = Object.create(prototypeObject);

Prototype chain of the new object will include the prototypeobject provided as an argument, and ultimately, it will inherit from Object.prototype.

4. Factory Functions

A simpler approach to create objects by encapsulating the object creation process within a function.

function myFunction(key1, key2) {
    return {
        key1: key1,
        key2: key2
    };
}

const obj = myFunction(value1, value2);

5. Using Function Constructors

We can define a constructor function and then create objects from it using the new keyword which is useful for creating multiple objects with the same structure.

Constructor functions typically start with a capital letter by convention.

function MyObject(key1, key2) {
    this.key1 = key1;
    this.key2 = key2;
}
const obj = new MyObject(value1, value2);

6. Using ES6 Classes

Introduced in ES6, class syntax allows us to define object blueprints more clearly.

Classes are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance.

class MyClass {
    constructor(key1, key2) {
        this.key1 = key1;
        this.key2 = key2;
    }
}
const obj = new MyClass(value1, value2);

Quick Question: Is it possible to create an object with no prototype methods?

Thank you for reading! I hope you found this blog informative and engaging. If you notice any inaccuracies or have any feedback, please don’t hesitate to let me know.