Forem: Imran shaikh

Ace Your JS Interview: How to Implement a Polyfill for the some() Method

Imran shaikh — Sun, 01 Feb 2026 11:37:55 +0000

One of the most common questions in senior JavaScript interviews is asking a candidate to write a polyfill. It’s not enough to just know how to use built-in array methods; you need to understand how they work under the hood.
In my latest YouTube tutorial, I broke down exactly how to build a custom implementation of the some() function. If you are preparing for a coding interview or just want to strengthen your logic building, this guide is for you.

Youtube Link

What is the some() Method?

Before we build it, we must understand what it does. As explained in the video, the some() function checks an array to see if at least one element satisfies a specific condition.
It works on a simple boolean logic:
• If one or more elements meet the condition, it returns true.
• If no elements meet the condition, it returns false.
For example, if we have an array of mixed negative and positive numbers [-2, 0, 3, -1, 5, -4], and we want to check if there is any positive number, some() will iterate through the list. As soon as it finds 3 (which is greater than 0), it stops looking and returns true.

Step 1: Setting up the Prototype

To make our custom function available to all arrays—just like the native .some() method—we need to attach it to the Array.prototype.
In the video, we define our custom method (let’s call it mySome) on the prototype so that any array object can call it directly.
Array.prototype.mySome = function(callback) { // Logic goes here }
By using Array.prototype, we ensure that the function is accessible to any array instance, allowing us to use the this keyword to access the data.

Step 2: Handling Errors

A good polyfill is robust. Before processing the logic, we must ensure the user has actually passed a function as an argument.
If the typeof the callback is not a function, we should throw an error immediately: "Callback should be a function". This prevents the code from crashing unexpectedly later on.

Step 3: The Logic (The this Keyword)

Inside our prototype function, the array we are operating on is accessible via the this keyword. For clarity, we can assign this to a variable, though we can also access it directly.
We then need to loop through the array. The standard some() method accepts a callback that takes three arguments:

Item: The current element.
Index: The current index.
Self: The array itself. Here is the core logic we implemented in the tutorial:

Array.prototype.mySome = function (callback, thisArg) {
    if (typeof callback !== "function") {
        throw new TypeError("Callback must be a function");
    }
    console.log(this);
    console.log(thisArg);
    for (let i = 0; i < this.length; i++) {
        // 🔥 Skip sparse (empty) indexes
        if (i in this) {
            if (callback.call(thisArg, this[i], i, this)) {
                return true;
            }
        }
    }
    return false;
};

As demonstrated in the video, the moment the logic finds a "truthy" value (like the number 3 in our positive number check), it returns true and exits the loop. If it iterates through the whole array without success, it defaults to false.
Testing the Polyfill
Does it work? In the video, we test this against a real scenario: checking for values greater than zero.

const numbers = [-2, 0, 3, -1, 5, -4];

const result = numbers.mySome((element) => {
    return element > 0;
});
console.log(result); // Output: true

Because the logic encountered 3 and 5, which are positive, our polyfill correctly identified that the condition was met.
Watch the Full Implementation
Writing polyfills is a fantastic way to master JavaScript fundamentals. If you want to see this code being written line-by-line, along with a detailed explanation of how the call stack and callbacks work in real-time, check out my full video tutorial below.
I cover the edge cases and debugging steps that I couldn't fit into this article!

If you found this guide helpful, please follow me on dev.to and subscribe to my YouTube channel for more JavaScript interview prep!

JavaScript Interview Trick: typeof vs instanceof

Imran shaikh — Tue, 29 Apr 2025 16:38:12 +0000

Title: JavaScript Interview Trick: Understanding typeof vs instanceof

As we dive into the world of JavaScript, we encounter different methods to determine the type of a variable or object. Two of the most common methods are the 'typeof' and 'instanceof' operators. In this blog post, we will explore these operators, their use cases, edge cases, and when it's best to use each one.

typeof Use Cases

The 'typeof' operator in JavaScript is used to return a string indicating the type of the operand. An operand is the object or variable you're testing. It’s a unary operator, meaning it takes only one operand. Here are some examples:

console.log(typeof 'Hello World'); // Returns "string"
console.log(typeof 42); // Returns "number"
console.log(typeof true); // Returns "boolean"
console.log(typeof undefined); // Returns "undefined"
console.log(typeof {name: 'John Doe'}); // Returns "object"
console.log(typeof null); // Returns "object"
console.log(typeof function() {}); // Returns "function"
console.log(typeof [1, 2, 3]); // Returns "object"

instanceof Use Cases

On the other hand, 'instanceof' operator in JavaScript is used to check the current object and returns true if an object is an instance of a particular class or constructor, and false otherwise. It's a binary operator, meaning it requires two operands: an object and a constructor. Here are some examples:

console.log([] instanceof Array); // Returns true
console.log({} instanceof Object); // Returns true
console.log('Hello World' instanceof String); // Returns false
console.log(new String('Hello World') instanceof String); // Returns true

Edge Cases

While 'typeof' and 'instanceof' operators are straightforward in most cases, there are some edge cases that might trip you up. For instance,

console.log(typeof null); // Returns "object"

This is a long-standing bug in JS, but one we're stuck with for now. Null is not really an object; it has its own type.

Another edge case is when dealing with arrays. When you use the 'typeof' operator with an array, it will return "object", which is not entirely accurate.

console.log(typeof [1, 2, 3]); // Returns "object"

That's where 'instanceof' comes in handy:

console.log([1, 2, 3] instanceof Array); // Returns true

When to use what?

Understanding when to use 'typeof' vs 'instanceof' can be a bit tricky. Here are some rules of thumb:

Use 'typeof' when you want to know the type of a primitive value.
Use 'instanceof' when you want to know if an object is an instance of a certain class.
'instanceof' is typically better for custom objects where you want to check if an object was instantiated from a specific class.

Remember, JavaScript is a dynamically typed language, which means that the same variable can be used to hold different data types. Therefore, understanding 'typeof' and 'instanceof' is crucial in your journey as a JavaScript developer.

By understanding the subtleties of these operators, you'll be better prepared to write and debug JavaScript code, and you'll be more equipped to handle any curveballs thrown your way during a JavaScript interview. Happy coding!

Deep Dive into JavaScript Event Loop

Imran shaikh — Fri, 25 Apr 2025 06:46:06 +0000

JavaScript is a single-threaded, non-blocking, asynchronous, concurrent language. Its concurrency model is heavily reliant on an entity known as the Event Loop. This blog post will provide a detailed exploration of the JavaScript Event Loop and how it handles asynchronous operations. We'll discuss the call stack, web APIs, the callback queue, the microtask queue, and async/await & promises.

Call Stack

The call stack is a mechanism that JavaScript uses to track function execution. It's a LIFO (Last In, First Out) data structure - the last function that gets pushed into the stack is the first one to be popped out when its execution is complete. When a script calls a function, JavaScript pushes that function onto the call stack and starts executing it. Once it's done, JavaScript pops it off the stack and resumes execution where it left off in the code. If the stack takes up more space than it had assigned to it, it results in a "stack overflow."

Web APIs

Web APIs are not provided by the JavaScript language itself, but by the browser environment. They are essentially a set of functions and objects that JavaScript can interact with, allowing it to perform operations like fetch data, manipulate the DOM, handle user events, etc. These operations are asynchronous, meaning they can occur outside the regular top-to-bottom flow of the JavaScript execution.

When a function with an asynchronous task (like a setTimeout or an AJAX call) is called, it gets pushed to the call stack, but then it's offloaded to the Web API. The Web API handles the task, allowing the call stack to continue executing other tasks without being blocked.

Callback Queue

Once the Web API has completed the asynchronous task, it doesn't return the result to the call stack directly. Instead, it pushes the callback function (a function to be executed after the task is complete) to a Callback Queue. The Callback Queue is a FIFO (First In, First Out) data structure, meaning that tasks are dequeued in the order they arrived.

Microtask Queue

Next to the callback queue, there's another queue called the Microtask Queue. This queue is used for "promise" tasks. Promises in JavaScript are objects that represent the eventual completion or failure of an asynchronous operation.

The difference between the Callback Queue and the Microtask Queue is that tasks in the Microtask Queue have higher priority. After each callback is processed, the Event Loop checks if there’s a function in the Microtask Queue. If there is, it runs that function before moving on to the next callback.

Async/Await & Promises

Promises and async/await are modern ways of dealing with asynchronous operations in JavaScript.

A Promise is an object that may produce a single value sometime in the future. It can be in one of three states: fulfilled, rejected, or pending. Promises are added to the Microtask Queue once they're resolved or rejected.

Async/await is a syntactic sugar built on top of Promises. It makes asynchronous code look and behave like synchronous code. The keyword "async" is used to declare an asynchronous function, while "await" is used to pause async function execution until a Promise is fulfilled or rejected.

In conclusion, the JavaScript Event Loop is a complex but efficient system for handling synchronous and asynchronous operations. By understanding the Call Stack, Web APIs, the Callback Queue, the Microtask Queue, and async/await & Promises, you can better understand and use JavaScript's concurrency model.

Understanding JavaScript Hoisting with Examples

Imran shaikh — Thu, 24 Apr 2025 01:29:16 +0000

Title: Understanding JavaScript Hoisting with Examples

What is Hoisting?

In the world of JavaScript, hoisting is a fundamental concept that every developer must understand. To put it simply, hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their enclosing scope during the compile phase, before the code has been executed.

Think of hoisting like a flag hoisted at the top of a pole. No matter where the flag is initially placed, it's eventually hoisted to the top. Similarly, regardless of where you declare functions or variables in your code, they are hoisted to the top of their scope.

Let's consider this piece of code.

console.log(myName);
var myName = 'John Doe';

The output will be 'undefined' instead of a ReferenceError. This is because of the hoisting mechanism. When JavaScript is compiled, all variable declarations (not initializations) are hoisted to the top. The code is interpreted as follows:

var myName;
console.log(myName); //undefined
myName = 'John Doe';

Function vs Variable Hoisting

Function and variable hoisting behaviors differ slightly in JavaScript.

For functions, both the declaration and the body are hoisted. Thus, you can call a function before declaring it in your code.

hoistedFunction(); //Outputs: "Hello, I have been hoisted!"
function hoistedFunction() {
  console.log('Hello, I have been hoisted!');
}

In contrast, for variables, only declarations are hoisted, not initializations. So, if you try to use a variable before it's declared and initialized, you'll get 'undefined'.

let & const behavior

The hoisting mechanism works a bit differently with 'let' and 'const' compared to 'var'. While 'var' declarations are hoisted and initialized with 'undefined', 'let' and 'const' declarations are hoisted but not initialized.

If you try to access a 'let' or 'const' variable before declaration, you'll get a ReferenceError because JavaScript doesn't initialize them with 'undefined' like it does with 'var'.

console.log(myName); //ReferenceError: myName is not defined
let myName = 'John Doe';

Interview Pitfalls

Understanding hoisting is crucial not only for writing efficient code but also for acing technical interviews.

Many interviewers ask questions related to hoisting to test a candidate's knowledge of JavaScript's inner workings. For instance, you might be asked why a particular piece of code returns 'undefined' instead of a ReferenceError, or why a function call before its declaration doesn't result in an error.

Remember, JavaScript does not hoist initializations, only declarations. This is an easy detail to overlook, but it's crucial for understanding why your code behaves the way it does.

In conclusion, hoisting is a unique and important feature of JavaScript that plays a crucial role in how the code is interpreted and executed. By understanding hoisting, you can write cleaner, more predictable code and avoid common bugs and pitfalls.

Explain AI Agents in a Simple Manner

Imran shaikh — Wed, 23 Apr 2025 02:30:22 +0000

Explaining AI Agents in a Simple Manner

As we move further into the 21st century, artificial intelligence (AI) continues to shape our world in ways we could not have imagined. One of the key components of AI is the concept of an agent - an element that perceives its environment and takes actions that maximize its chance of achieving its goals. In this blog, we will take a deep dive into AI agents: what they are, how they work, and why they matter.

What are AI Agents?

In the simplest terms, an AI agent is an autonomous entity that observes through sensors and acts upon an environment using actuators. It directs its activity towards achieving goals, from simple tasks like setting a timer to complex activities like playing chess. These agents are designed to handle tasks in a flexible and intelligent manner, responding to changes in the environment or different user requirements.

Real-life examples of agents

AI agents are all around us, often in ways we take for granted. Your phone's virtual assistant (like Siri or Google Assistant) is an AI agent, using your voice commands (sensors) to perform tasks (actuators). Self-driving cars are another example, using complex sensors like cameras and radars to navigate the environment and reach a destination.

Types of AI agents

There are several types of AI agents, each with its unique characteristics:

Simple Reflex Agents: These agents act only on the current percept, ignoring the rest of the percept history. They choose actions based on the current situation, not considering the consequences of their actions. An example is a thermostat controlling temperature.
Model-Based Reflex Agents: These agents consider the history of the world and keep track of the part of the world not in view. They have a model of the world, which they use to handle partially observable situations.
Goal-Based Agents: These agents take future actions into account and are flexible to changing goals. They take steps to achieve a specific objective, like a GPS navigating to a destination.
Utility-Based Agents: These agents not only aim for a specific goal but also try to maximize the overall expected benefit. They choose actions based on a utility function, like a stock trading bot trying to maximize profit.

How they make decisions

AI agents use a variety of techniques to make decisions. These include search and planning, where they determine the sequence of actions that lead to the desired goal, and machine learning, where they improve performance based on experience. More advanced agents also use knowledge and reasoning to make decisions based on logic and inference.

Use cases in real-world applications

AI agents have a multitude of real-world applications. In healthcare, they can assist doctors in diagnosing diseases and suggesting treatments. In finance, they can predict stock market trends and advise on investments. In entertainment, they can power video game characters and virtual reality experiences. And in everyday life, they can manage smart homes, recommend products online, and even help you find your way around town.

Why developers should care about them

AI agents represent a significant opportunity for developers. They are a key part of many emerging technologies, from autonomous vehicles to virtual reality. Understanding how they work and how to develop them can open up a world of possibilities. Furthermore, as AI becomes more integrated into our lives, the demand for developers who can create intelligent agents will only increase. By learning about AI agents, developers can stay ahead of the curve and be prepared for the future of technology.

In conclusion, AI agents are a fascinating and important aspect of artificial intelligence. They are not just the future; they are the present. So, whether you're a developer, a tech enthusiast, or just curious, there's never been a better time to learn about AI agents.

Mastering JavaScript Closures in Simple Terms

Imran shaikh — Wed, 23 Apr 2025 02:24:32 +0000

Title: Mastering JavaScript Closures in Simple Terms

Introduction

JavaScript, one of the most popular scripting languages in today's web development, fascinates developers with its power, flexibility, and versatility. But to master this language, one has to understand its fundamental concepts thoroughly. One important concept that often confuses new JavaScript developers is closures. So, let's demystify this concept and help you become a JavaScript maestro.

What is a Closure?

In JavaScript, a closure is a function that has access to its own scope, the outer function's scope, and the global scope. It is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). Simply put, a closure gives you access to an outer function’s scope from an inner function.

Lexical Environment

To understand closures, it's crucial to comprehend what the lexical environment is. In JavaScript, a lexical environment is a data structure that holds variable and function declarations. It's used by the JavaScript engine to look up variables and functions, and it consists of two main components: the environment record and a reference to the outer environment.

When a function is invoked, a new lexical environment is created to hold the local variables of that function. If that function contains nested functions, those functions hold a reference to their parent function’s environment, as well as the global environment. This is the basis of how closures work.

Practical Examples

Let's take a look at a practical example to understand closures better.

function outerFunction() {
    let outerVariable = 'I am outside!';

    function innerFunction() {
        console.log(outerVariable);
    }

    return innerFunction;
}

let myNewFunction = outerFunction();

myNewFunction(); // Logs: 'I am outside!'

In this example, myNewFunction is a closure that consists of the innerFunction and the scope in which innerFunction was declared. When we invoke myNewFunction, it can still access outerVariable from its parent scope, even though outerFunction has finished executing. This is the power of closures - they remember the environment in which they were created.

Interview Tricky Questions

Closures are a common topic in JavaScript interviews. Here are a few tricky questions you might encounter:

a) What will be the output of the following code?

for (var i = 1; i <= 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, i * 1000);
}

Many would expect this code to log the numbers 1 through 5, each after one second. However, it will actually log the number 6 five times, each after one second. This is because var does not have block scope, and the callbacks capture the same single global scope.

b) How would you make this code log the numbers 1 through 5?

The answer is to use a closure. By creating an IIFE (Immediately Invoked Function Expression) inside the loop, we can create a new scope for each iteration, capturing the current value of i.

for (var i = 1; i <= 5; i++) {
    (function(i) {
        setTimeout(function() {
            console.log(i);
        }, i * 1000);
    })(i);
}

In this version, each IIFE creates a new scope, capturing the current value of i. The setTimeout callback then references this scope, logging the expected values.

Wrapping Up

Understanding closures is a crucial step on the path to mastering JavaScript. They offer powerful capabilities for managing scope and preserving state over time. Keep practicing and experimenting with closures, and you'll find them becoming second nature in no time.

Remember, as with all things JavaScript, it is practice and exploration that makes perfect. Happy coding!

How to Build a REST API with Node.js

Imran shaikh — Mon, 21 Apr 2025 08:27:59 +0000

Title: Building a REST API with Node.js: A Comprehensive Guide

Introduction

Node.js is one of the most popular technologies used in modern web development today. It is an open-source, cross-platform JavaScript runtime environment that allows developers to build server-side and networking applications. In this blog post, we will walk you through the steps to build a REST API using Node.js. We will cover setting up Express, defining routes, and using middleware.

Setting Up Express

Express.js is a fast, unopinionated, minimalist web framework for Node.js. It is the de facto standard server framework for Node.js.

To start with, you need to have Node.js and npm (Node Package Manager) installed on your machine. You can download it from the official website: https://nodejs.org/en/download/.

Once you have Node.js installed, create a new folder for your project, navigate into it, and initiate a new Node.js project using the following command:

npm init -y

Now, install Express using npm:

npm install express --save

This command will install Express in your project and save it in your dependencies.

Defining Routes

After setting up Express, we need to set up our routes. Routes are the endpoints that define how an API responds to client requests. In an Express app, we define routes using methods of an Express application instance.

Create a new file named 'app.js' in your project root and require the express module:

const express = require('express'); const app = express(); const port = 3000;

Now, let's define a basic route:

app.get('/', (req, res) => { res.send('Hello World!') })

This code creates a route handler for HTTP GET requests to the application’s home page. The callback function takes a request and a response object as arguments, and simply responds by sending a text message.

Using Middleware

Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. Middleware functions can perform the following tasks:

Execute any code.
Make changes to the request and the response objects.
End the request-response cycle.
Call the next middleware function in the stack.

To use a middleware, we can use the app.use() function. Here's an example of how to use a middleware function at the application level:

app.use(function (req, res, next) { console.log('Time:', Date.now()) next() })

This middleware function simply prints the current time and then passes control to the next middleware function in the stack.

Conclusion

Building a REST API with Node.js and Express.js is a straightforward process. This blog post only covers the basics, but there’s a lot more you can do, such as adding a database, validating user input, handling errors, and more. With a good understanding of Express and Node.js, you can build highly scalable and efficient web applications. The key is to understand how routes and middleware work, as they form the core of any Express application. Happy coding!

https://youtu.be/OYkmIIKfWq4?si=xLtWbtVJTF131vqL

To master Login/Signup with MERN stack, please have a look this video

10 JavaScript Tricks Every Developer Should Know

Imran shaikh — Sun, 20 Apr 2025 18:00:01 +0000

Title: 10 JavaScript Tricks Every Developer Should Know

Hello to all the code enthusiasts out there! Today, we're going to delve into the world of JavaScript, a cornerstone language of the web, and explore some tricks that can elevate your coding skills to a new level. Whether you're a novice developer or a seasoned programmer, these JavaScript tricks are sure to add a new dimension to your coding repertoire. So let's get started!

Destructuring:

Destructuring in JavaScript is a handy way to extract multiple properties from an object or array in a single statement. It can significantly simplify your code and make it more readable. For example:

let [a, b] = [1, 2];
console.log(a); // outputs: 1
console.log(b); // outputs: 2

The same can be done with objects:

let {name, age} = {name: "John", age: 22};
console.log(name); // outputs: John
console.log(age); // outputs: 22

Optional Chaining:

Optional chaining is a recent addition to JavaScript (ES2020), which allows you to access deeply nested object properties without having to check if each reference in the chain is valid. It helps in writing cleaner and safer code. Here's how it works:

let user = {}; // an empty object
console.log(user?.address?.street); // outputs: undefined, instead of throwing an error

Spread/Rest Operators:

The spread operator (…) in JavaScript is used to spread the elements of an array or object. The rest operator, also (…), is used to collect the rest of the elements into an array. Both these operators contribute to shorter and cleaner code:

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // outputs: [1, 2, 3, 4, 5]

For the rest operator:

let [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // outputs: 1
console.log(rest); // outputs: [2, 3, 4, 5]

Short-circuit Evaluation:

Short-circuit evaluation in JavaScript involves logical operators (&& and ||) to create shorter code. It can be used to set default values, validate objects before using them, and more:

let name = user && user.name; 
let port = serverPort || 3000;

Template Literals:

Template literals provide an easy way to interpolate variables and expressions into strings. They are enclosed by backtick () characters instead of quotes:

let name = "John";
console.log(`Hello, ${name}!`); // outputs: Hello, John!

Arrow Functions:

Arrow functions offer a more concise syntax for writing function expressions. They are ideal for non-method functions and they do not have their own 'this', arguments, super, or new.target:

let hello = () => "Hello World";
console.log(hello()); // outputs: Hello World

Nullish Coalescing Operator:

The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

let name = null ?? "default name";
console.log(name); // outputs: default name

Ternary Operator:

The ternary operator is a quicker way to write simple if-else statements. The syntax is: condition ? value_if_true : value_if_false:

let age = 15;
let type = age >= 18 ? "Adult" : "Minor";
console.log(type); // outputs: Minor

Array Methods (map, reduce, filter):

JavaScript provides powerful array methods like map, reduce, and filter. They are more efficient and elegant to use in comparison to traditional for-loops:

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map(n => n * 2); // outputs: [2, 4, 6, 8, 10]

Async/Await:

Async/Await makes asynchronous code look and behave more like synchronous code. This syntactic sugar on top of promises makes asynchronous code easier to understand and write:

async function fetchUser() {
  let response = await fetch('https://api.github.com/users');
  let data = await response.json();
  console.log(data);
}
fetchUser();

That's all for this post. I hope you found these JavaScript tricks useful. Happy coding!

MERN Stack Login/Signup in detailed
https://youtu.be/OYkmIIKfWq4?si=xLtWbtVJTF131vqL

Mastering React Challenge: Building a Timer App

Imran shaikh — Tue, 23 Apr 2024 17:07:11 +0000

In this blog post, I'll guide you through building a robust timer application using React that meets specific requirements and integrates notifications for a seamless user experience. We'll cover essential features such as starting, pausing, resetting the timer, and ensuring accessibility for screen readers.

Challenge Overview

The challenge involves creating a timer app with the following key features:
Displaying 'Hours', 'Minutes', and 'Seconds' fields without visible labels but ensuring accessibility and screen reader compatibility.
Implementing placeholder text for input fields.
Transitioning to a running timer with plain text representation of hours, minutes, and seconds upon pressing 'Start', along with 'Pause' and 'Reset' functionalities.
Zero-padding numbers during countdown (e.g., displaying '01' instead of '1').
Displaying notifications or alerts upon timer completion based on app permissions.

Video Preview

To get a quick glimpse of the timer app in action and follow along with detailed implementation steps, watch my video tutorial here: Watch the Timer App Challenge Video

React Timer App Video is here

Key Learnings

Throughout the tutorial video and accompanying blog post, you'll learn:
How to structure a React component-based timer app.
Techniques for managing timer state and handling user interactions.
Integration of notifications for timer completion using browser APIs.
Strategies for handling app permissions and fallbacks for unsupported features.

Conclusion

Building a timer app is a great way to enhance your React skills and understand important concepts in modern web development. By following this tutorial and watching the video, you'll gain practical experience and insights into creating interactive and accessible React applications.
Ready to dive in? Watch the video above and let's build an awesome timer app together!

How to Flatten an Object in Javascript ?

Imran shaikh — Tue, 02 May 2023 18:02:34 +0000

Interviewer :
Can you flatten an object, Please take below as input

const obj = {
    name: "test",
    address: {
        personal: "abc",
        office: {
            building: 'random',
            street: 'some street'
        }
    }
}

and produce output like below

{
    name : "test",
    address_personal: "abc"
    address_office_building: "random"
    address_office_street: "some street"
}

Here is the solution.

const flattenObject = (obj, parentKey = '') => {
    if (parentKey !== '')
        parentKey = parentKey + '_';

    let flattened = {};
    console.log(flattened)
    Object.keys(obj).forEach((key) => {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            Object.assign(flattened, flattenObject(obj[key], parentKey + key))
        } else {
            flattened[parentKey + key] = obj[key]
        }
    })
    return flattened;
}


const obj = {
    name: "test",
    address: {
        personal: "abc",
        office: {
            building: 'random',
            street: 'some street'
        }
    }
}

let flat = flattenObject(obj);
console.log(flat);

If you want to see more interview questions please reach out my GitHub profile

Github: https://github.com/imran-mind/javascript-notes/blob/master/JS-Interview-coding-ques/objectFlatten.js

Linkedin: https://www.linkedin.com/in/imran-mind

Twitter: https://twitter.com/imran1mind

My Blogs: https://imranshaikh.co.in/

If you find this blog helpful, please like and comment and don't forget to share this.

Array-Flatten Array Javascript interview questions-1

Imran shaikh — Mon, 01 May 2023 16:37:02 +0000

Frontend Interview or Nodejs Interview it's the most frequently asked interview question.

function doFlat(){
    let flatten = [];
    function flat(arr){    
        for(let i=0; i<arr.length; i++){
            const item = arr[i];
            if(Array.isArray(item)){
                // Object.assign(flatten,flat(item));
               [...flatten,flat(item)]
            }else{
                flatten.push(item);
            }
        }
        return flatten;
    }
    return {
        flat
    }
}

const {flat} = doFlat();

console.log(flat([1,2,[3,[0,4,5],4,[5,6]]]))

If you want to see more interview questions please reach out my GitHub profile

https://github.com/imran-mind/javascript-notes/blob/master/JS-Interview-coding-ques/

If you find this blog helpfull, please like and comment and don't forget to share this.

How to use JavaScript Promise.all with realtime code example [Axios GET Calls]

Imran shaikh — Sat, 06 Aug 2022 08:53:00 +0000

What is Promise.all

A Promise.all() is a static method which takes array (group) of promises as an input and do the process as single promise and return in than-able or catch.

The basic syntax of Promise.all is

  Promise.all([promise1, promise2,.....])
   .then(result=>{
     //Congrats! Promise got resolved.
    }).catch(err=>{
     //Ohh ! Promise got rejected.
    })

where promise1, promise2 are async functions which also returns promise.

When to use Promise.all method

When you have group of asynchronous task to process in single shot then it's recommended to use Promise.all().

To understand clearly let's take an example of async functions which is getting resolved by the Promise.all() function.

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p1 completed');
    },1000);
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2 completed');
    },2000);
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p3 completed');
    },3000);
})

Promise.all([p1,p2,p3,])
    .then(result=>{
        console.log(result);
    }).catch(err=>{
        console.log(err);
    })

Result returned from the above code snippet

[ 'p1 completed', 'p2 completed', 'p3 completed' ]

In the above example we can see that p1,p2 and p3 are the async functions because it's having setTimeout as function so each function will resolved respectively after 1,2 and 3 seconds but Promise.all will resolved once the last function will be resolved that's the beauty of the Promise.all() method.

The core property of Promise.all() method is that It will resolved all function and returns result in the same order in which order we have given input functions array.

If all array functions (p1,p2,p3) will resolve then only it will give result in then-able.
Otherwise if any one of the Promise function get rejected for any reason then the Promise.all() method will go into catch() block. you can see the below example for this scenario.

 const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p1 completed');
    },1000);
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2 completed');
    },2000);
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject(new Error('p3 rejected'));
    },3000);
})


Promise.all([p1,p2,p3,])
    .then(result=>{
        console.log(result);
    }).catch(err=>{
        console.log(err);
    })

This code snipped will be coming in catch block

Error: p3 rejected

Now Lets see the realtime example of Promise.all().

Suppose you have dashboard where you have to call 3 APIs
Till the time api is calling you have to show loader on the screen. So you can achieve this very easily by using Promise.all() method.
Please refer the below example

const axios = require('axios');

const task = async (id)=>{
    const response = await axios(`https://reqres.in/api/users/${id}`);
    const {data} = response;
    return data.data;
}
const ids = [1,2,3];
const allTasks = ids.map((pageNumber)=>{
    return task(pageNumber);
});

// you can start page loader here
Promise.all(allTasks)
    .then((result)=>{
        console.log(result);
        // once the task is finished then you stop loader over here
    }).catch((err)=>{
        //If error comes then also you have to stop loader
        console.log(err);
    })

In the above example I have created a function called 'task' which async function basically calling the api.

So we have to calls 3 api for UserID 1,2 and 3 so for that we have grouped 3 apis call in a single array (allTasks) and passing the array to Promise.all(allTasks) as an input and waiting for resolve or reject.

If all the apis runs successfully then we are expecting the result in an array format (users response)

If any one of the api gets rejected then we should expect error in catch block.

Thank you guys for reading my little effort.

Please like and comment the article if you really like it.