JavaScript Topicwise Exercises

Hands-on tasks to practice JavaScript concepts step by step

1. Fundamentals Exercises

  • Create variables using let and const and 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 if and switch.
  • Print number patterns using nested loops.
  • Find prime numbers within a range.
  • Use break and continue in 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, and filter methods).
  • Merge two arrays and sort them ascending/descending.
  • Rotate array left/right by k positions.
  • 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, reduce on student/product datasets.
  • Implement custom versions of map, filter, and reduce.
  • 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 export and import.
  • 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 Set and Map for 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/await style.
  • Run parallel requests using Promise.all and compare performance.
  • Implement retry logic with exponential backoff for failed requests.
  • Use Promise.race to 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.