Dev Duel

JavaScript Challenges

Practice fundamentals, arrays, functions, async logic, and debugging.

Filter challenges

Narrow down by difficulty or category.

Showing 86 of 86 challenges

All challenges

Practice concepts, improve problem-solving, and build confidence.

beginner5 minutes

Sum Two Values

Write a function that returns the sum of two numbers.

functionsfunctionsparameters
beginner10 minutes

Sum All Numbers in an Array Using JavaScript

Write a JavaScript function that takes an array of numbers and returns the sum of all the elements. This challenge helps you practice array iteration and basic function usage.

functionsarraysloops
beginner10 minutes

Reverse a String Using a JavaScript Function

Create a function that takes a string as input and returns the string reversed. This challenge will help you understand basic string manipulation and working with array methods in JavaScript.

functionsstring manipulationarray methods
beginner10 minutes

Beginner Challenge: Create a Function to Capitalize the First Letter of Each Word

Practice string manipulation by writing a JavaScript function that capitalizes the first letter of every word in a given sentence.

functionsstring manipulationfunctions
beginner10 minutes

Find the Largest Number in an Array

Write a function to identify the largest number within an array of integers.

functionsarraysloops
beginner10 minutes

Simple To-Do List App in JavaScript

Create a basic to-do list application where users can add tasks, mark them as completed, and see the updated list.

mini-projectsarraysobjects
intermediate15 minutes

Build a Task Tracker with Priority Sorting

Create a JavaScript function to manage and sort a list of tasks with priorities and deadlines. This mini-project simulates a simple task tracker with sorting and filtering.

mini-projectsarraysobjects
beginner10 minutes

Fix the Bug in Array Sum Function

The provided JavaScript function is supposed to sum all numbers in an array, but it contains bugs. Your task is to identify and fix the bugs so the function correctly returns the sum of the array elements.

debuggingloopsarrays
intermediate10 minutes

Build a JSON Data Filter and Sorter

Create a JavaScript function that accepts an array of JSON objects representing products, filters them based on multiple criteria, and then sorts the filtered results by a specified property.

mini-projectsArray filteringArray sorting
advanced15 minutes

Fix the Memory Leak and Logic Bug in a Recursive Deep Clone Function

This challenge provides a broken implementation of a deep clone function in JavaScript. The function is supposed to recursively clone any object or array, preserving nested structures without reference sharing. However, the current implementation has both a logic bug causing incorrect cloning of nested structures and a memory leak due to undetected circular references. Your task is to fix these issues and optimize the function for deep cloning complex objects.

debuggingrecursiondeep cloning
intermediate10 minutes

Predict the Output of a Complex Array and Object Transformation

Analyze the provided JavaScript code snippet that manipulates arrays and objects with multiple steps. Predict the exact output produced by the code.

logicArray map()Array filter()
beginner10 minutes

Build a Function to Check if a Number is Even

Create a simple JavaScript function that takes a number as input and returns true if the number is even, and false if it is odd.

functionsfunctionsconditionals
beginner10 minutes

Refactor and Simplify a Function to Calculate Total Price

Improve the readability and maintainability of a simple JavaScript function that calculates the total price of items including tax. The functionality should remain the same while making the code cleaner.

code-qualityfunctionsvariables
intermediate15 minutes

Build a Todo List Manager with Filtering and Prioritization

Create a JavaScript function that manages a list of todo items, allowing for adding, removing, updating status, and filtering tasks based on their priority and completion status.

mini-projectsclosuresarrays
advanced15 minutes

Fix Bug in Async Data Aggregation and Error Handling Function

Debug and fix a complex asynchronous JavaScript function designed to fetch and aggregate data from multiple APIs with error handling. The current implementation contains subtle bugs causing unhandled promise rejections and incorrect data aggregation.

debuggingasynchronous programmingerror handling
advanced15 minutes

Build an Advanced Debounce Function with Immediate and Cancel Options

Create a robust debounce utility function in JavaScript that delays invoking a function until after a specified wait time elapses since the last call. Support both immediate execution on the leading edge and the ability to cancel a pending invocation.

functionsclosuresasynchronous timing
intermediate10 minutes

Predict the Output: Nested Array and Object Manipulation in JavaScript

Analyze the given JavaScript code that involves nested arrays and objects with multiple transformations. Predict what the final output will be after all operations are executed.

logicarray filterarray map
beginner10 minutes

Build a Simple To-Do List App

Create a basic to-do list application in JavaScript where users can add, view, and remove tasks. This project helps beginners practice working with arrays, functions, and DOM manipulation.

mini-projectsArraysFunctions
intermediate10 minutes

Fix the Array Filtering Bug to Return Unique Even Numbers

A function meant to filter even numbers from an array and remove duplicates is currently returning incorrect results. Debug the code to ensure it returns only unique even numbers in ascending order.

debuggingarray filteringremoving duplicates
advanced45 minutes

Advanced Dynamic Form Builder with Validation in JavaScript

Build a reusable dynamic form builder function that generates interactive forms based on a JSON schema, including custom validations and conditional field visibility.

mini-projectsdynamic DOM manipulationcustom validation logic
intermediate10 minutes

Predict the Output of Nested Array and Object Destructuring with Defaults

Analyze the given JavaScript code involving nested array and object destructuring with default values and predict the final output.

logicJavaScript destructuringdefault values in destructuring
advanced10 minutes

Predict the Output of a Complex Recursive and Memoized Function

Analyze the provided JavaScript function that uses recursion, memoization, and bitwise operations to determine its output when called with a specific input.

logicrecursionmemoization
intermediate10 minutes

Build a Function to Group Objects by a Key

Create a JavaScript function that groups an array of objects by a specified key, returning an object where each key maps to an array of items sharing that key's value.

functionsarraysobjects
advanced15 minutes

Refactor Complex Data Processing Function for Improved Readability and Performance

Given a verbose and inefficient JavaScript function that processes and transforms a large dataset, refactor the code to enhance readability, maintainability, and performance without altering its output.

code-qualitycode refactoringarray manipulation
intermediate10 minutes

Refactor a Function to Cleanly Aggregate User Purchases

The provided JavaScript function processes an array of user purchase objects to calculate total spending per user. The existing code works but is messy and repetitive. Refactor it for clarity, reusability, and improved readability without changing its behavior.

code-qualityJavaScript arraysObject manipulation
advanced10 minutes

Fix Bug in Advanced Debounce Function Implementation

Identify and fix the bug in the provided advanced debounce function implementation that prevents it from correctly delaying callback execution and handling immediate invocations.

debuggingdebouncetimers
intermediate15 minutes

Build a To-Do List with JavaScript Using Objects and Arrays

Create a simple interactive to-do list mini-project where users can add, remove, and mark tasks as completed. This challenge focuses on manipulating arrays of objects and implementing multi-step logic to manage a list of tasks.

mini-projectsarraysobjects
advanced15 minutes

Build an Optimized Debounced Function Creator in JavaScript

Create a higher-order function that returns a debounced version of a given input function, ensuring optimized invocation timing and immediate execution control.

functionsclosureshigher-order functions
advanced15 minutes

Fix the Bug in Advanced Asynchronous Array Processing Function

Identify and fix the bug in the asynchronous function that processes an array of URLs to fetch JSON data and extract specific fields. The current implementation leads to incorrect results and unhandled errors.

debuggingasynchronous programmingPromise handling
intermediate10 minutes

Refactor a Function to Calculate Average Scores with Better Readability and Efficiency

Improve a messy JavaScript function that calculates average scores from an array of student objects, making the code cleaner, more efficient, and easier to understand without changing its behavior.

code-qualitycode refactoringarray methods
advanced120 minutes

Build a Real-Time Collaborative Text Editor with Operational Transformation in JavaScript

Create a real-time collaborative text editor that allows multiple users to edit a shared document simultaneously using Operational Transformation (OT) to handle concurrent changes and keep the document state consistent across clients.

mini-projectsOperational TransformationConcurrency Control
beginner10 minutes

Fix the Function to Calculate the Sum of an Array

There's a simple bug in the function that calculates the sum of numbers in an array. Your task is to identify and fix the issue so that the function returns the correct sum.

debuggingloopsvariables
advanced15 minutes

Refactor Complex Nested Callbacks into Clean Async/Await Flow

Refactor a nested callback-based event processing function into clean, modular, and maintainable async/await style JavaScript code without changing the behavior or output.

code-qualityasync/awaitcallbacks
intermediate15 minutes

Build a Task Management CLI Mini Project

Create a simple command-line task manager in JavaScript that allows users to add, remove, list, and mark tasks as complete. This mini-project will help you practice array manipulation, object handling, and implementing multi-step logic.

mini-projectsclosuresarrays
intermediate10 minutes

Fix the Bug in Array Filtering and Object Mapping Function

Identify and fix the bug in a JavaScript function designed to filter an array of user objects and map them to a list of their names based on age criteria.

debuggingarray filteringarray mapping
beginner10 minutes

Fix the Bug in a Simple Function That Adds Two Numbers

Identify and fix the bug in a JavaScript function designed to add two numbers and return the result. This challenge tests understanding of basic function syntax and return statements.

debuggingfunction syntaxreturn statement
advanced15 minutes

Build an Optimized Memoized Deep Nested Object Flattener

Create a highly efficient JavaScript function that flattens deeply nested objects into a single-level object with dot-separated keys. Implement memoization to cache and reuse results for previously processed inputs to optimize performance for repeated calls with identical objects.

functionsrecursionmemoization
intermediate15 minutes

Create a Deep Object Merge Function

Build a JavaScript function that takes two objects and merges them deeply, combining nested objects instead of overwriting them.

functionsrecursionobject manipulation
advanced10 minutes

Predict the Output of Complex Closure and Async Workflows in JavaScript

Analyze a JavaScript code snippet combining closures, async/await, Promises, and loops, then predict the exact order and content of its console output.

logicclosuresasync/await
beginner10 minutes

Create a Function to Convert Celsius to Fahrenheit

Write a JavaScript function that converts a temperature from Celsius to Fahrenheit.

functionsfunctionsarithmetic operators
intermediate20 minutes

Build a Dynamic To-Do List Manager in JavaScript

Create a small interactive to-do list manager that allows users to add, remove, edit, and toggle completion of tasks. This project will strengthen your skills with arrays, objects, DOM manipulation, and event handling in JavaScript.

mini-projectsarraysobjects
beginner10 minutes

Predict the Output of a Basic For Loop with Condition

Analyze the given JavaScript code snippet involving a for loop and conditional statements, then determine the output printed to the console.

logicfor loopconditionals
advanced45 minutes

Build a Real-Time Collaborative Todo List with Conflict Resolution

Create an advanced real-time collaborative todo list application backend function that merges concurrent updates from multiple users while resolving conflicts using operational transformation or CRDT principles in JavaScript.

mini-projectsOperational TransformationCRDT
advanced10 minutes

Predict Output: Complex Recursive Function with Memoization and Side Effects

Analyze the given JavaScript code involving recursion, memoization, and side effects, and predict what the output will be when it is executed.

logicrecursionmemoization
advanced15 minutes

Refactor Complex Data Aggregation and Filtering in JavaScript

Improve the quality and maintainability of a long, nested JavaScript function that processes and aggregates data from a complex array of objects while preserving its original behavior and performance.

code-qualitycode refactoringES6 array methods
intermediate10 minutes

Refactor a Function to Improve Array Filtering and Mapping Logic

Refactor the provided JavaScript function to improve readability, reduce complexity, and maintain the same output when filtering and mapping an array of user objects.

code-qualityarray filteringarray mapping
advanced40 minutes

Advanced Expense Tracker with Recurring Transactions and Filters

Build a robust expense tracking function that manages one-time and recurring transactions, supports dynamic filtering by categories and date ranges, and returns detailed summaries with optimized performance.

mini-projectsrecurring events expansionfiltering with multiple criteria
advanced45 minutes

Advanced Task Scheduler with Dependency Resolution

Build a task scheduler function that accepts a list of asynchronous tasks with dependencies and executes them in the correct order. The scheduler must support concurrency for independent tasks and return results in dependency-resolved order.

mini-projectsAsynchronous programmingGraph theory (dependency graphs, topological sort)
intermediate15 minutes

Build a Task Management App with JavaScript

Create a simple task management mini-project where users can add, mark complete, and delete tasks dynamically using JavaScript arrays and DOM manipulation.

mini-projectsarraysDOM manipulation
advanced10 minutes

Predict the Output of Complex Recursive Function with Memoization in JavaScript

Analyze a recursive JavaScript function that uses memoization and array transformations. Predict the output when the function is called with a specific argument.

logicrecursionmemoization
intermediate10 minutes

Refactor Nested Loops and Conditionals into Cleaner JavaScript Function

Improve the readability and maintainability of a JavaScript function that processes an array of user objects by refactoring nested loops and conditionals without changing its behavior.

code-qualityArray filteringArray methods (some, map)
intermediate10 minutes

Fix the Bug in Filtering and Summing Product Prices

The provided JavaScript function is intended to filter products by category and then calculate the total price of those filtered products. However, it contains bugs that prevent it from working correctly. Your task is to debug and fix the function so that it returns the correct total price for the specified category.

debuggingArray.prototype.filterArray.prototype.reduce
intermediate10 minutes

Fix the Bug in User Age Filter Function

The provided JavaScript function is intended to filter an array of user objects to return only those aged 18 or older. However, it contains bugs that prevent it from working correctly. Identify and fix the bugs so that the function behaves as expected.

debuggingarray filteringcallback functions
intermediate10 minutes

Refactor a Complex Data Transformation Function in JavaScript

Improve the readability and maintainability of a complex JavaScript function that processes and transforms an array of user objects, ensuring the behavior remains identical.

code-qualityarray methodsrefactoring
beginner10 minutes

Refactor Imperative Sum Calculator to Clearer Functional Code

Improve the readability and maintainability of a simple JavaScript function that calculates the sum of numbers in an array by refactoring it from a verbose imperative style to a clean and concise functional style.

code-qualityrefactoringfunctional programming
advanced45 minutes

Advanced ToDo List with Tag Filtering and Persistent Storage

Build an advanced ToDo List application in JavaScript that supports task creation, dynamic filtering by tags, completion toggling, and persists data across sessions using localStorage.

mini-projectsJavaScript closureslocalStorage API
advanced60 minutes

Build a Dynamic Kanban Board with Drag-and-Drop in JavaScript

Create a fully functional Kanban board application that supports adding, moving, and editing tasks across multiple columns using native JavaScript and the Drag-and-Drop API.

mini-projectsDrag and Drop APIlocalStorage persistence
intermediate10 minutes

Fix the Bug in Filtering Unique Usernames from an Array

The provided JavaScript function is supposed to return an array of unique usernames from a list of user objects. However, it currently returns duplicates. Your task is to debug and fix the code to ensure it returns only unique usernames.

debuggingarraysloops
intermediate10 minutes

Refactor Messy JavaScript Array Processing Function

Clean up and improve the readability and efficiency of a JavaScript function that processes an array of user objects. The function currently contains redundant code, unclear variable names, and inefficient looping that you need to refactor without changing its output.

code-qualityarray methodscode refactoring
intermediate10 minutes

Build a Weather Dashboard with Dynamic City Search

Create a small weather dashboard application in JavaScript that fetches and displays weather data for cities searched by the user, using a public weather API.

mini-projectsAPI consumptionasynchronous JavaScript
intermediate10 minutes

Refactor Messy Array Processing Function for Clarity and Efficiency

Improve the readability, efficiency, and overall code quality of a JavaScript function that processes arrays without changing its behavior.

code-qualityarray methodsrefactoring
beginner10 minutes

Fix the Bug in the Function That Calculates the Sum of an Array

This challenge involves debugging a simple JavaScript function that is intended to sum all numbers in an array but currently returns an incorrect result.

debuggingloopsvariables
intermediate10 minutes

Build a Function to Group Objects by Property in JavaScript

Create a function that takes an array of objects and groups them by a specified property, returning an object where keys are property values and values are arrays of matching objects.

functionsarray methodsobject manipulation
advanced15 minutes

Refactor and Optimize Deeply Nested Array and Object Processing in JavaScript

Improve the readability, maintainability, and performance of a complex function that processes deeply nested arrays and objects without changing its behavior.

code-qualitycode refactoringarray iteration and transformation
advanced10 minutes

Predict the Output of Nested Closures and Asynchronous Execution in JavaScript

Analyze a complex JavaScript function involving nested closures, asynchronous setTimeout calls, and variable shadowing to predict the exact console output sequence and values.

logicclosuresvariable scope
intermediate10 minutes

Refactor Nested Loops and Conditionals into Clean Functional Code

Improve the readability and maintainability of a JavaScript function that calculates a summary from an array of user objects with nested loops and conditionals, by refactoring it using higher-order array methods and cleaner logic without changing its behavior.

code-qualityArray methodsFunctional programming
advanced60 minutes

Advanced Real-Time Collaborative To-Do List with Optimistic UI

Build a sophisticated real-time collaborative to-do list application that supports multiple users adding, updating, and deleting tasks simultaneously, while maintaining a responsive optimistic UI and conflict resolution.

mini-projectsReal-time synchronizationOptimistic UI
advanced15 minutes

Build an Immutable Deep Merge Function for Nested JavaScript Objects

Create a robust JavaScript function that performs a deep merge of two objects without mutating either input. The function should recursively merge nested objects and arrays, handling conflicts by favoring values from the second object while preserving original nested structures.

functionsrecursionimmutability
advanced15 minutes

Build a Debounced Async Function Executor

Create a reusable JavaScript function that returns a debounced version of an asynchronous function. The debounced function delays invoking the original async function until after a specified wait time has passed since the last time it was invoked, ensuring only the most recent call is executed and preventing race conditions.

functionsdebounceasynchronous functions
intermediate15 minutes

Build a Task Manager with Dynamic Filtering and Sorting

Create a JavaScript function that manages a list of tasks, allowing dynamic filtering by status and priority, and sorting by due date or priority. This mini-project focuses on multi-step data manipulation and state handling with arrays and objects.

mini-projectsarray filteringsorting with custom comparator
intermediate10 minutes

Refactor the User Data Formatter Function for Better Readability and Performance

Improve a given JavaScript function that formats an array of user objects by cleaning up nested conditionals, reducing duplication, and enhancing readability while keeping the output unchanged.

code-qualityrefactoringarray iteration
advanced20 minutes

Build a Memoized Async Function Runner with Concurrency Control

Create an advanced utility function in JavaScript that memoizes asynchronous functions and limits their concurrency, optimizing performance and resource usage.

functionsasynchronous programmingmemoization
intermediate10 minutes

Build a Function to Filter and Transform User Data

Create a JavaScript function that takes an array of user objects and returns a new array containing only users above a certain age, with their full names combined into a single string.

functionsarray filteringarray mapping
advanced15 minutes

Build a Memoized Deep Object Comparator Function

Create an advanced JavaScript function that deeply compares two objects for structural and value equality, with memoization to optimize repeated comparisons of the same pairs.

functionsdeep object comparisonmemoization
intermediate10 minutes

Create a Function to Group and Count Array Elements by Key

Build a JavaScript function that groups objects in an array by a specific key and returns the count of each group.

functionsobject manipulationarray iteration
advanced15 minutes

Advanced Recursive Function to Deeply Flatten and Transform Nested Arrays in JavaScript

Create a highly optimized recursive function that accepts an arbitrarily nested array structure containing numbers and arrays, deeply flattens it into a single-level array, and applies a transformation function to each number. This challenge tests mastery of recursion, performance optimization, and functional programming in JavaScript.

functionsrecursionhigher-order functions
advanced15 minutes

Fix the Memory Leak and Logical Bugs in Async Data Processor

Identify and correct bugs in an asynchronous JavaScript function that processes a large dataset with complex filtering and transformations. The current implementation suffers from logical errors and potential memory leaks causing performance degradation.

debuggingasync/awaitarray methods
advanced15 minutes

Refactor Complex Nested Callback Code to Async/Await in JavaScript

Improve code quality by refactoring a deeply nested callback-based asynchronous function into a clean, readable async/await structure, while maintaining identical functionality.

code-qualityasync/awaitcallback hell
advanced15 minutes

Refactor Nested Callbacks to Async/Await for Cleaner Asynchronous Code

Improve the provided JavaScript function by refactoring deeply nested callbacks into a more readable and maintainable async/await structure without changing the current functionality.

code-qualityasync/awaitcallback hell
beginner10 minutes

Refactor Messy JavaScript Function for Calculating Total Price

Improve the readability and simplicity of a basic function that calculates the total price of items including tax by refactoring the provided messy code without changing its behavior.

code-qualityfunctionsloops
advanced45 minutes

Build a Customizable Data Table with Sorting, Filtering, and Pagination in JavaScript

Create a dynamic and reusable data table component in JavaScript that supports sorting by columns, filtering rows based on multiple criteria, and client-side pagination with a configurable page size.

mini-projectsData TransformationSorting Algorithms
intermediate10 minutes

Refactor a User Data Processing Function for Clarity and Performance

Improve the readability and efficiency of a JavaScript function that processes an array of user objects by removing duplicates, sorting them by age, and mapping to a simplified format.

code-qualityarray iterationdata structures
intermediate15 minutes

Build a Deep Object Merger Function in JavaScript

Create a function that deeply merges two JavaScript objects, combining nested properties without overwriting entire sub-objects.

functionsrecursionobject manipulation
advanced15 minutes

Build a Memoized Deep Clone Function with Circular Reference Handling

Create an advanced JavaScript function that performs a deep clone of any given object, including nested objects and arrays, while efficiently handling circular references using memoization to avoid infinite loops.

functionsdeep cloningcircular references
advanced15 minutes

Fix Infinite Loop and Incorrect State Updates in Async Data Processor

Debug and fix a complex asynchronous JavaScript function that processes data items in sequence but currently produces an infinite loop and incorrect state updates due to improper async handling and variable scope issues.

debuggingasynchronous programmingasync/await
advanced15 minutes

Refactor and Optimize Nested Loops for Product Price Analysis

Improve the readability, maintainability, and performance of a deeply nested JavaScript function that analyzes product prices across multiple categories and regions.

code-qualityarray methodsfunctional programming