Skip to content

An advanced JavaScript practice repository covering modern JS concepts step by step with examples, questions, and mini-projects to become React-ready.

Notifications You must be signed in to change notification settings

SuRu190/JavaScript-Advanced-Practice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 JavaScript Advanced Practice

This repository is a JavaScript advanced learning challenge.
Each day focuses on a specific set of advanced JS topics with practice questions and answers.


📘 About This Repo

  • Covers modern JavaScript concepts step by step.
  • Structured into Folders (Day - Wise).
  • Each folder contains:
    • A .js file with all questions + answers in code format.
    • A README.md file (detailed explanation of that day).

📅 Progress Overview

🔥 Day 1 – Advanced Functions

  • Topics Covered: Function Declarations, Function Expressions, Arrow Functions, Default Parameters, Rest & Spread, Higher-Order Functions.
  • Total Questions: 20
  • What I Practiced: Writing concise functions, using arrow functions effectively, merging arrays/objects, applying higher-order functions.
  • What I Learned: How to simplify code with default params, use rest/spread for flexibility, and build higher-order functions.

⚡ Day 2 – Array Advanced Methods

  • Topics Covered: forEach, map, filter, reduce, some, every, find, findIndex, sort, slice, splice.
  • Total Questions: 31
  • What I Practiced: Iterating arrays in multiple ways, transforming and filtering data, using reduce for accumulation, sorting with custom logic, extracting/modifying arrays.
  • What I Learned:
    • Difference between map vs forEach (map returns new array, forEach doesn’t).
    • How to use filter to get subsets of data.
    • Using reduce for sum, average, max/min.
    • Boolean checks with some and every.
    • Searching with find & findIndex.
    • Sorting numbers, strings, and objects using custom comparison.
    • Clear understanding of slice (non-mutating) vs splice (mutating).

📘 Day 3 – Destructuring, Template Literals & setTimeout

  • Topics Covered: Array & Object Destructuring, Nested Destructuring, Default Values, Template Literals, setTimeout in loops.
  • Total Questions: 18
  • What I Practiced: Extracting values from arrays/objects, renaming variables, skipping items, applying default values, and handling nested data structures.
  • What I Learned:
    • How to use destructuring for clean code.
    • Handling missing properties with defaults.
    • Creating dynamic strings with template literals.
    • How setTimeout with closures behaves inside loops.

🎯 Day 4 – DOM Deep Dive

  • Topics Covered: Event Bubbling & Capturing, Event Delegation, Input Events, Mouse Events, Double Click + Random Colors, Form Handling.
  • Total Questions: 10
  • What I Practiced: Adding event listeners, using capturing vs bubbling, applying event delegation for efficiency, handling keyboard/mouse input, and working with forms dynamically.
  • What I Learned:
    • Clear difference between bubbling and capturing.
    • How to use delegation for dynamic elements.
    • Generating random colors with events.
    • Preventing form reload and showing success messages.

⚙️ Day 5 – DOM Projects

  • Topics Covered: Counter App, Random Color Generator, To-Do List (Add/Delete/Complete), Input Field + Live Preview.
  • Total Projects: 4
  • What I Practiced: Building interactive mini apps using DOM manipulation, handling click & input events, dynamically creating/removing elements, and toggling CSS classes.
  • What I Learned:
    • Creating reusable event-driven logic.
    • Handling dynamic content in real-world apps (To-Do List).
    • Updating UI instantly with live input preview.
    • Generating and applying random RGB colors.

🌀 Day 6 – Async JavaScript (setTimeout, Callbacks, Promises, Chaining)

  • Topics Covered:

    • setTimeout & setInterval
    • Callbacks & Callback Hell
    • Promises & Chaining
    • Async simulation with Fake API
    • DOM Event handling with Promises
  • Total Questions: 20

  • What I Practiced & Learned:

    • Difference between callbacks vs promises
    • How callback hell makes code messy
    • Why Promises are better (chaining, cleaner flow)
    • How to build a fake API simulation
    • DOM + Promises → async operations with buttons
  • Sample Questions / Features:

    • Delays & intervals using setTimeout / setInterval
    • Sequential async tasks using callback chaining
    • Handling random success/failure in Promises
    • Updating DOM after async operations

🌐 Day 7 – Fetch, Async/Await & JSON

  • Topics Covered:
    • Fetch API with .then() and async/await
    • Error handling with .catch() & try...catch
    • GET and POST requests
    • JSON.stringify() & JSON.parse()
    • Working with JSONPlaceholder and external APIs
  • Total Questions: 26
  • What I Practiced & Learned:
    • Fetching data using both .then() and async/await
    • Better error handling with try...catch
    • Making GET and POST API requests
    • Converting objects ↔ JSON strings with stringify & parse
    • Working with real APIs (JSONPlaceholder, Joke API)
    • Displaying limited API results with slice()
    • Handling edge cases like invalid URLs or empty responses

💾 Day 8 – LocalStorage & SessionStorage

  • Topics Covered:
    • localStorage & sessionStorage
    • Storing strings, objects, and arrays
    • Counters & checks
    • Theme toggle with persistence
    • Saving form data in localStorage
  • Total Questions: 10
  • What I Practiced & Learned:
    • Difference between localStorage (persistent) vs sessionStorage (tab-based)
    • How to store objects & arrays properly (must stringify/parse)
    • Clearing storage vs removing specific items
    • Building real use-cases like:
      • Persistent counters
      • Theme preference
      • Saving form data locally
    • Using DOM + Storage APIs together

📝 Day 9 – Mixed Revision

  • Overview: A revision mix of Day-01 to Day-08 covering all major topics.
  • Topics Covered:
    • Advanced Functions (Rest/Spread, Closures, Default Params)
    • Arrays (map, filter, reduce, slice, splice, etc.)
    • ES6+ Features (Destructuring, Template Literals, let/const)
    • DOM Events (click, keydown, submit, etc.)
    • Async JS (setTimeout, setInterval, Promises, Async/Await)
    • Fetch API & JSON handling
    • LocalStorage + SessionStorage
  • What I Practiced & Learned:
    • Strong revision of functions, arrays, ES6, DOM
    • Hands-on with Promises, fetch, and storage APIs
    • Realistic use-cases: form handling, theme toggle, API calls
    • Confidence in core + advanced concepts together

✅ Why This Repo?

  • To master advanced JavaScript step by step.
  • To practice coding daily and stay consistent.
  • To build a solid foundation before learning React.
  • To help interview preparation with coding questions.

🛠️ Tech Stack

  • Language: JavaScript (ES6+)
  • Tools: VS Code, Node.js, GitHub

About

An advanced JavaScript practice repository covering modern JS concepts step by step with examples, questions, and mini-projects to become React-ready.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published