JavaScript Practice Workbook

1. Variables and Data Types

Concept Recap:

Variables can be declared using let, const, or var. Data types include string, number, boolean, null,

undefined, object, and symbol.

Practice Exercises:

1. Declare a variable for your name and age.

2. Create a constant for your birth year.

3. Change the value of a let variable and print it.

Mini Challenge:

Write a program to swap two variables.

 JavaScript Practice Workbook

2. Control Structures

Concept Recap:

Use if, else, and switch statements for conditional logic. Loops like for, while, and do...while repeat actions.

Practice Exercises:

1. Write a program to check if a number is even or odd.

2. Create a grading system using if-else.

3. Print numbers from 1 to 10 using a loop.

Mini Challenge:

FizzBuzz program: print numbers from 1 to 50. For multiples of 3 print 'Fizz', for 5 print 'Buzz', for both print

'FizzBuzz'.
 JavaScript Practice Workbook

3. Functions

Concept Recap:

Functions help organize reusable logic. Use function declarations, expressions, and arrow functions.

Practice Exercises:

1. Write a function to add two numbers.

2. Convert Celsius to Fahrenheit.

3. Return the factorial of a number.

Mini Challenge:

Write a function to check if a string is a palindrome.

 JavaScript Practice Workbook

4. Arrays & Objects

Concept Recap:

Arrays store ordered collections, objects store key-value pairs.

Practice Exercises:

1. Create an array of 5 fruits and print each using a loop.

2. Create an object with name, age, and city keys.

3. Use map() to double each number in an array.

Mini Challenge:

Write a function that takes an array of user objects and returns names of users aged 18+.
 JavaScript Practice Workbook

5. Strings & Methods

Concept Recap:

Common methods: length, slice, split, replace, includes, toUpperCase, toLowerCase.

Practice Exercises:

1. Count characters in a string.

2. Convert a sentence to title case.

3. Replace bad words in a sentence with stars.

Mini Challenge:

Write a function to reverse a string.

 JavaScript Practice Workbook

6. DOM Manipulation

Concept Recap:

Use getElementById, querySelector, and addEventListener to interact with the HTML DOM.

Practice Exercises:

1. Change the text of a button when clicked.

2. Display user input below a form.

3. Change background color of a div on mouseover.

Mini Challenge:

Create a live character counter for a textarea.

 JavaScript Practice Workbook

7. Events & Forms

Concept Recap:

JavaScript can respond to user interactions using events like click, submit, keydown, etc.

Practice Exercises:

1. Alert user on button click.

2. Validate email in a form before submit.

3. Show a message while typing in input.

Mini Challenge:

Make a form that only submits if all fields are filled.

 JavaScript Practice Workbook

8. ES6+ Features

Concept Recap:

Use let/const, template literals, destructuring, spread/rest, arrow functions.

Practice Exercises:

1. Use template literals to print user details.

2. Destructure an object and log the values.

3. Merge two arrays using spread operator.

Mini Challenge:

Use rest parameters to sum any number of arguments.

 JavaScript Practice Workbook

9. Asynchronous JS

Concept Recap:

Use callbacks, promises, and async/await to handle asynchronous operations.

Practice Exercises:

1. Simulate a delay using setTimeout.

2. Fetch mock data using Promise.

3. Use async/await to wait for 2 seconds and return a value.

Mini Challenge:

Chain two promises that resolve sequentially.

 JavaScript Practice Workbook

10. Error Handling

Concept Recap:

Use try...catch to handle errors in code. Create custom error messages when needed.

Practice Exercises:

1. Try parsing invalid JSON.

2. Write a function that throws an error if input is not a number.

3. Catch and log any runtime error.

Mini Challenge:

Wrap a calculator function in try-catch and show alerts if inputs are invalid.
 JavaScript Practice Workbook

Solutions to Practice Exercises

Solutions to Practice Exercises:

1. Variables and Data Types:

let name = "John"; let age = 25;

const birthYear = 2000;

let city = "Delhi"; city = "Mumbai"; console.log(city);

Swapping: let a=5,b=10,temp=a;a=b;b=temp;

2. Control Structures:

Even/Odd: if(num % 2 == 0) { ... }

Grading: if(score >= 90) return 'A'; ...

FizzBuzz: use modulo and conditions.

3. Functions:

function add(a,b){return a+b;}

function toF(c){return (c*9/5)+32;}

function fact(n){...}

Palindrome: reverse the string and compare.

4. Arrays & Objects:

Loop: for(let fruit of fruits) console.log(fruit);

map: nums.map(n => n*2);

Filter adults: users.filter(u => u.age >= 18).map(u => u.name);

5. Strings:

Title case: split, map with word[0].toUpperCase()...

Reverse: str.split("").reverse().join("");

6. DOM:
 JavaScript Practice Workbook

element.innerText = "Clicked!";

addEventListener("mouseover", ...);

7. Events:

form.addEventListener("submit", e => { ... });

input.addEventListener("input", ...);

8. ES6+:

Template: `Hi ${name}`;

Destructuring: const {name, age} = obj;

9. Async JS:

setTimeout(() => ..., 2000);

new Promise((res) => setTimeout(() => res("Done"), 1000));

async function demo() { await ...; }

10. Errors:

try { JSON.parse("invalid"); } catch(e) { console.log(e); }

if(typeof input !== "number") throw Error("Not a number");