Web Dev Concepts
Asynchronous Programming
Understanding callbacks, promises, and async/await in JavaScript for handling asynchronous operations.
Asynchronous programming allows code to run in multiple threads parallely without blocking the main thread, enabling smoother user experiences. Callbacks are functions passed as arguments to another function to be executed later, while promises represent the eventual completion or failure of an asynchronous operation like fullfilled, pending or failure. The async/await is a more readable way to work with promises, allowing developers to write asynchronous code that looks synchronous. This page shows the difference between sequential and parallel API calls using these concepts. This page shows a comparison between sequential (synchronous) and parallel (asynchronous) JavaScript execution by fetching data from multiple independent APIs and displaying the results in a single UI. In the sequential method, each API call waits for the previous one to complete using async/await, which increases the total execution time, while in the parallel method, all API calls are executed simultaneously using Promise.all, significantly improving performance. By rendering the same product data using both approaches and measuring execution time, the page highlights how asynchronous JavaScript enables non-blocking operations, smoother user experience and faster data loading. This helps in understanding when to use sequential execution for dependent tasks and parallel execution for independent tasks.
Show PreviewDebounce and Throttle
Understanding how to optimize event handling in JavaScript using debounce and throttle.
Debounce is a technique which ensures that a function is only executed after a specified delay from last fired event. When typing or keypressing event occurs rapidly for searching functionality, without debounce, after each keypress, an API is called for serching input data which lead to unnecessary API calls. But with debounce, the API is called only after user has stopped typing with some specific delay e.g., 200 ms. This reduces the number of API calls and improves performance. Throttle ensures function are executed at most once in a defined time interval irrespective of how many times event is fired. For similar example of debounce, with throttle, the API is called at a given interval repeatedly while user is typing, like in every 200 ms. This reduces the number of API calls and improves performance. Both techniques are used for optimizing event handling in JavaScript.
Show PreviewMap, Filter, Reduce
Understanding how to use map, filter, and reduce methods for array manipulation in JavaScript.
Map, filter and reduce are powerful array methods in javscript for manipulating or transforming data. Map method creates a new array by applying function on each element of original array. Fiter method creates a new array with only required element needed based on condition from original array. Reduce method reduces array to single value by applying function on each element. This page demonstrates how to use these methods like mapping an array of products to extract required product details like name and price, filtering products based on price by showing only that product that have price greater or equal to input price and reducing all cart product prices by adding them to get total cart value
Show Preview