JavaScript – 100+ Lab Exercises (Basic, Intermediate, Advanced)

🔰 Basic Level (35+ Exercises)

 

Goal: Build a strong foundation in JavaScript syntax, logic, and browser interactions.

 

Fundamentals & Syntax

  • Print "Hello, World!" in the console.

  • Declare variables using var, let, and const.

  • Perform arithmetic operations.

  • Understand data types: string, number, boolean, null, undefined.

  • Use typeof operator.

Control Structures

  • Create conditional statements using if, else if, else.

  • Write switch-case logic.

  • Implement for, while, and do...while loops.

  • Practice nested loops.

Functions & Scope

  • Create simple functions with parameters.

  • Use arrow functions.

  • Demonstrate lexical scope and block scope.

  • Implement recursion (e.g., factorial, Fibonacci).

Arrays & Strings

  • Initialize arrays and access elements.

  • Use array methods: push, pop, shift, unshift, splice.

  • Iterate using forEach, map, filter, reduce.

  • Manipulate strings using slice, split, replace, toUpperCase.

DOM Manipulation

  • Access elements using getElementById, querySelector.

  • Change text, HTML, and styles dynamically.

  • Add event listeners (click, input, hover).

  • Create and append new elements.

 

🚀 Intermediate Level (40+ Exercises)

 

Goal: Deepen JavaScript capabilities including object manipulation, asynchronous programming, and modern ES6+ features.

 

Objects & OOP Basics

  • Create and modify objects.

  • Use object destructuring.

  • Loop through object properties.

  • Define object methods and use this.

  • Create constructor functions and classes.

ES6+ Features

  • Use let and const effectively.

  • Apply template literals.

  • Use rest and spread operators.

  • Use default and named function parameters.

  • Destructure nested arrays and objects.

Asynchronous JavaScript

  • Understand callbacks and create a callback function.

  • Create and handle Promises.

  • Use async/await to fetch data.

  • Handle Promise chaining and error handling.

  • Create a loading UI while data is fetched from an API.

API Integration

  • Use fetch() to call an API (e.g., JSONPlaceholder).

  • Display API results in the DOM.

  • Handle errors and response status codes.

  • Implement a search form with live API querying.

  • Build a simple weather app using an open API.

Debugging & Tools

  • Use browser DevTools (Console, Network, Elements).

  • Debug using breakpoints.

  • Log complex data structures.

  • Use ESLint to maintain code standards.

 

🧠 Advanced Level (40+ Exercises)

 

Goal: Master advanced topics including functional programming, modular code, event loops, and performance optimization.

 

Advanced Functions & Closures

  • Implement closures and use cases.

  • Demonstrate currying and partial application.

  • Understand and apply memoization.

  • Use higher-order functions.

  • Build your own version of map, filter, and reduce.

The Event Loop & Execution Context

  • Explain and visualize the call stack.

  • Simulate blocking vs. non-blocking code.

  • Use setTimeout, setInterval, clearTimeout, clearInterval.

  • Create examples that demonstrate the event loop.

Modular JavaScript

  • Structure code with ES6 Modules (import / export).

  • Implement the Revealing Module Pattern.

  • Use bundlers like Webpack or Vite (basic setup).

  • Organize files by feature or domain.

Advanced Objects & Classes

  • Use ES6 classes with inheritance.

  • Define static and private properties.

  • Implement mixins and composition patterns.

  • Override and extend built-in prototypes.

  • Build a publish-subscribe pattern.

Browser APIs & Storage

  • Use LocalStorage, SessionStorage, and Cookies.

  • Implement custom events and event delegation.

  • Work with the Geolocation API.

  • Build drag-and-drop functionality.

  • Access and manipulate the Clipboard API.

Performance & Best Practices

  • Benchmark and profile performance.

  • Optimize loops and DOM manipulation.

  • Avoid memory leaks.

  • Lazy load scripts and images.

  • Debounce and throttle input events.

Testing & Deployment

  • Write unit tests using Jest.

  • Test DOM interactions.

  • Mock API requests.

  • Automate testing with GitHub Actions.

  • Deploy JS apps on Netlify or Vercel.

 

Capstone Projects

 

  • Create a To-Do List App with LocalStorage.

  • Build a Calculator using classes.

  • Develop a Quiz App with live scoring.

  • Design a Currency Converter with API integration.

  • Construct a Portfolio Website with interactive sections.

 

✅ Tools & Ecosystem

 

  • Vanilla JavaScript (ES6+)

  • Jest, ESLint, Prettier

  • Webpack/Vite

  • Fetch API, LocalStorage

  • DevTools, Lighthouse

Download Syllabus 👇
Scroll to Top