JavaScript Topicwise Exercises
Hands-on tasks to practice JavaScript concepts step by step
1. Fundamentals Exercises
- Create variables using
letandconstand print their types. - Write programs using arithmetic, logical, and comparison operators.
- Convert string inputs to numbers and validate using
Number.isNaN(). - Build a small calculator using user input and conditional logic.
- Implement number utilities: even/odd, prime check, factorial, and Armstrong number.
- Write temperature and currency conversion programs.
- Build a simple grading system with pass/fail thresholds.
- Practice type coercion cases and log expected vs actual output.
Hint: Focus on clean naming and strict comparisons (
===).2. Control Flow & Loops
- Write grade logic using
if...else ifandswitch. - Print number patterns using nested loops.
- Find prime numbers within a range.
- Use
breakandcontinuein practical loop cases. - Generate Fibonacci series using loop and recursion.
- Create multiplication tables (single and full 1-10 grid).
- Build star, pyramid, inverted pyramid, and diamond patterns.
- Count digits, reverse number, and palindrome number checks.
- Menu-driven console program using
switch(calculator, unit converter, etc.).
Hint: Prefer functions for reusable loop logic.
3. Functions & Objects
- Create utility functions for arithmetic and reusable validation checks.
- Practice regular functions, function expressions, and arrow functions.
- Sort objects by multiple keys (price, rating, name).
- Practice object destructuring and rest/spread operations.
- Build object merge, deep clone (basic), and key existence helpers.
- Practice function expressions, IIFE, callbacks, and higher-order functions.
- Closure exercises: private counter, once function, and memoized sum.
Hint: Solve each task with both loop and modern method approaches.
4. Arrays (Dedicated Program Set)
- Find sum, average, min, and max from a numeric array.
- Reverse an array without using built-in
reverse(). - Find second largest and second smallest numbers.
- Remove duplicates from arrays (loop,
Set, andfiltermethods). - Merge two arrays and sort them ascending/descending.
- Rotate array left/right by
kpositions. - Split array into chunks of fixed size.
- Flatten nested arrays (1-level and deep flatten).
- Find missing number in a sequence.
- Count frequency of each element and print histogram-style output.
- Find intersection, union, and difference of two arrays.
- Move all zeros to the end while preserving order.
- Check if array is palindrome.
- Implement linear search and binary search.
- Use
map,filter,reduceon student/product datasets. - Implement custom versions of
map,filter, andreduce. - Group array objects by a field (e.g., department/category).
- Sort array of objects by nested keys and multiple criteria.
Hint: Start with loop-based solutions, then refactor using modern array methods.
5. DOM & Events Exercises
- Build a live character counter for a textarea.
- Create a to-do list with add, complete, and delete actions.
- Implement form validation with inline error messages.
- Use event delegation for dynamically added elements.
- Create a dark/light mode toggle saved in
localStorage. - Build an image gallery with next/prev controls and keyboard navigation.
- Implement a searchable list with debounce.
- Create a quiz app with score tracking and restart option.
- Build a stopwatch and countdown timer with pause/resume/reset.
Hint: Use
addEventListener and avoid inline events.6. ES6+ & Modules Exercises
- Refactor old functions into arrow functions where appropriate.
- Split a mini app into modules using
exportandimport. - Use optional chaining and nullish coalescing in nested data reads.
- Practice template literals and destructuring in UI rendering.
- Create examples for default parameters and enhanced object literals.
- Use
SetandMapfor unique values and key-value operations. - Build class-based programs with inheritance and method overriding.
- Convert callback-based code to Promise-based and then async/await.
- Create module-wise utility library (
math,string,date).
Hint: Keep each module focused on a single responsibility.
7. Async JavaScript Exercises
- Fetch API data and render cards with loading and error states.
- Convert Promise chains into
async/awaitstyle. - Run parallel requests using
Promise.alland compare performance. - Implement retry logic with exponential backoff for failed requests.
- Use
Promise.raceto implement request timeout behavior. - Build pagination UI for API responses.
- Implement infinite scroll with guarded request states.
- Create a weather search app with async error handling and fallback UI.
- Build a GitHub user finder with profile + repos rendering.
Hint: Always handle rejections and cleanup in
finally.8. String & Number Programs
- Reverse string, palindrome string, and anagram checker.
- Find longest word and longest unique substring in a sentence.
- Count vowels, consonants, words, and repeated characters.
- Implement title case conversion and slug generator.
- Write programs for GCD, LCM, power, and digit-sum.
- Implement number formatting with commas and fixed decimals.
Hint: Use both regex-based and loop-based approaches.
9. Mini Project Exercises
- Expense tracker with add/edit/delete and monthly summary.
- Notes app with search, tags, and local storage persistence.
- Typing speed test with timer and WPM calculation.
- Kanban-style task board with drag-and-drop basics.
- E-commerce cart simulation with quantity, coupon, and total tax logic.
- Quiz application with category selection and result history.
Hint: Break each project into modules and implement step-by-step milestones.