Imran Alam

Imran Alam

52 Articles Published

Articles by Imran Alam

Page 4 of 6

How to invoke a function with its arguments transformed in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 336 Views

In JavaScript, we can create functions that take other functions as arguments and invoke them with transformed arguments. This is a powerful technique that can be used to create higher-order functions, which can take a function and return a new function with different behavior. What are Transforming Function Arguments To transform function arguments, we can use several approaches including the built-in methods map() and reduce(), or create custom transformation functions. These methods can be used on arrays to transform the elements in the array, and we can use them on functions to transform the arguments that are passed ...

Read More

How to create Expanding Cards using HTML, CSS, and JavaScript

Imran Alam
Imran Alam
Updated on 15-Mar-2026 3K+ Views

In this tutorial, we will learn how to create Expanding Cards using HTML, CSS and JavaScript. Expanding cards provide an interactive way to display content with smooth animations and enhanced user experience. What are Expanding Cards? Expanding cards are interactive UI elements that scale up or reveal additional content when clicked. They are commonly used to display information in a compact format while providing an engaging way to access more details on demand. HTML Structure To create expanding cards, we need the following HTML elements: Card container element: Contains all cards ...

Read More

How to create Frame by Frame Animation using CSS and JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 975 Views

Frame by frame animation is a technique used in animation to produce motion by displaying a series of static images which are sequentially displayed. The appearance of motion is achieved by displaying the images in rapid succession. The followings are needed before we go to create the frame by frame animation: A series of images (frames) A web page with CSS and JavaScript Approach The process of creating frame by frame animation using CSS and JavaScript is relatively simple: STEP 1 – First, you need to create ...

Read More

How to Flatten JavaScript objects into a single-depth Object?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 3K+ Views

In JavaScript, flattening an object means converting a nested object structure into a single-depth object where all nested properties are brought to the top level with flattened key names. What is Object Flattening? Object flattening transforms a multi-level nested object into a flat structure. For example, an object like {a: 1, b: {c: 2, d: 3}} becomes {a: 1, "b.c": 2, "b.d": 3} or {a: 1, c: 2, d: 3} depending on the flattening strategy. Method 1: Simple Flattening (Merging Properties) This approach merges nested properties directly into the parent object: ...

Read More

How to unflatten an object with the paths for keys in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 521 Views

In JavaScript, unflattening an object means converting a flattened object (where nested properties are represented as dot-separated keys) back to its original nested structure. This is commonly needed when working with APIs, databases, or form data that store nested objects as flat key-value pairs. What is a Flattened Object? A flattened object has nested properties represented as string keys with dot notation: // Flattened object var flatObj = { "user.name": "John", "user.age": 30, "user.address.city": "New York", "user.address.zip": "10001" }; Basic Unflattening Algorithm ...

Read More

What are Architecture Flux Components in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 592 Views

Flux is a JavaScript application architecture pattern developed by Facebook for building scalable web applications. Originally designed for React applications, Flux provides a unidirectional data flow pattern that makes application state more predictable and easier to debug. The Flux architecture consists of four main components that work together to manage data flow in a predictable way. Core Flux Components Flux architecture is built around four key components that ensure unidirectional data flow: Actions − Plain JavaScript objects that describe what happened in the application Dispatcher − Central ...

Read More

How to remove elements from an array until the passed function returns true in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 512 Views

In JavaScript, there are various ways to remove elements from an array until the passed function returns true. This tutorial explores three different approaches with practical examples. Understanding "Remove Until Function Returns True" This operation means collecting elements from the beginning of an array, stopping when a condition is met. It's similar to "taking elements while a condition is false" or "dropping elements until a condition is true". Using Array.prototype.filter() The filter() method creates a new array with elements that pass a test function. For removing elements until a condition is met, we filter elements that ...

Read More

What is difference between Microtask Queue and Callback Queue in asynchronous JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 3K+ Views

In asynchronous JavaScript, there are two ways to schedule tasks – microtask queue and callback queue. Both queues are handled differently by the JavaScript engine, with microtasks having higher priority than callbacks. Event Loop Overview The event loop processes tasks in this order: call stack → microtask queue → callback queue. Understanding this priority system is crucial for predicting execution order in asynchronous code. Call Stack (Synchronous) Highest Priority Microtask Queue ...

Read More

How to return true if the parent element contains the child element in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 7K+ Views

In this tutorial, we are going to look at how we can return true if the parent element contains the child element in JavaScript. Assuming you have two HTML elements, a parent element, and a child element, and you want to know if the parent element contains the child element. Using the Node.contains() method The Node interface's contains() method returns a Boolean value, indicating whether a node is a descendant of a given node or not. If you want to know if the parent element contains the child element, you can use the Node.contains() method. Syntax ...

Read More

How to convert a string into an integer without using parseInt() function in JavaScript?

Imran Alam
Imran Alam
Updated on 15-Mar-2026 2K+ Views

The parseInt() is a built-in function in JavaScript that parses a string and returns an integer. However, there are times when we want to convert a string into an integer without using this function. In this article, we'll explore several alternative methods to achieve this conversion. Using the Unary Plus Operator One way to convert a string into an integer is by using the unary plus operator (+). This operator converts its operand into a number. For instance, the following program converts the string "123" into the number 123: Unary Plus ...

Read More
Showing 31–40 of 52 articles
Advertisements