Understanding these two will help you build user-friendly, persistent features without needing a backend.

What Is LocalStorage?

LocalStorage is a built-in browser storage system that allows you to save data directly on the user’s device.

Key points:

• Stores data as key–value pairs

• Data never expires unless manually cleared

• Only supports strings

• Can store up to ~5MB in most browsers

This makes it ideal for:

• Saving cart items

• Storing user theme preference

• Saving form inputs

• Saving login tokens (not recommended for sensitive data)

Example:

localStorage.setItem("name", "Adiba");

Basic LocalStorage Methods

localStorage.setItem("key", "value");  // Save
localStorage.getItem("key");          // Read
localStorage.removeItem("key");       // Remove one
localStorage.clear();                 // Remove all

Example:

localStorage.setItem("city", "Pune");
console.log(localStorage.getItem("city"));

Why JSON Is Needed

LocalStorage can only store strings.
But we often need to store objects or arrays.

Example object:

const user = { name: "Adiba", age: 25 };

We cannot store this directly.
So we use JSON to convert objects into strings and back.

JSON.stringify() and JSON.parse()

These two functions allow storing structured data.

Convert object → string

JSON.stringify(user);

Convert string → object

JSON.parse(storedValue);

Example:

const user = { name: "Adiba", role: "Frontend Developer" };

localStorage.setItem("user", JSON.stringify(user));

const data = JSON.parse(localStorage.getItem("user"));
console.log(data.role);

Why JSON Is Important

• Most APIs return JSON data

• Makes data transferable between systems

• Helps store complex data in LocalStorage

• Used across JavaScript, Node.js, Angular, React, Python, etc.

JSON is the universal data language of the web.

Day 7 Practical Tasks (Copy-Paste Ready)

Below are tasks ready to test directly in your browser console or your HTML project.

1. Save User Name to LocalStorage

localStorage.setItem("username", "Adiba");
console.log(localStorage.getItem("username"));

2. Save an Object Using JSON

const profile = {
  name: "Adiba",
  city: "Pune",
  stack: "Frontend"
};

localStorage.setItem("profile", JSON.stringify(profile));

const savedProfile = JSON.parse(localStorage.getItem("profile"));
console.log(savedProfile.city);

3. Save an Array (e.g., Cart Items)

const cart = ["Shoes", "Bag", "Bottle"];

localStorage.setItem("cart", JSON.stringify(cart));

const savedCart = JSON.parse(localStorage.getItem("cart"));
console.log(savedCart[1]); // Bag

4. Remove a Specific Item

localStorage.removeItem("cart");

5. Clear All LocalStorage

localStorage.clear();

6. Save Form Input in LocalStorage (Live Saving)

HTML

<input id="email" placeholder="Enter Email" />
<p id="show"></p>

JavaScript

const email = document.getElementById("email");
const show = document.getElementById("show");

email.addEventListener("input", () => {
  localStorage.setItem("emailValue", email.value);
  show.textContent = email.value;
});

// Load saved data on refresh
window.addEventListener("load", () => {
  const saved = localStorage.getItem("emailValue");
  if (saved) {
    email.value = saved;
    show.textContent = saved;
  }
});

7. Dark Mode Toggle Using LocalStorage

HTML

<button id="toggle">Toggle Theme</button>

JavaScript

const toggle = document.getElementById("toggle");

toggle.addEventListener("click", () => {
  const current = localStorage.getItem("theme");

  if (current === "dark") {
    document.body.style.background = "white";
    localStorage.setItem("theme", "light");
  } else {
    document.body.style.background = "#222";
    localStorage.setItem("theme", "dark");
  }
});

// On page load
window.addEventListener("load", () => {
  const saved = localStorage.getItem("theme");
  if (saved === "dark") {
    document.body.style.background = "#222";
  }
});

Closing Line

LocalStorage lets you persist data directly in the browser, and JSON helps convert complex objects into a format that can be saved and restored easily—skills that form a strong foundation for building modern web applications.

Completing JavaScript is a milestone worth celebrating. You’ve covered everything from variables and functions to DOM events, LocalStorage, and JSON—each skill forming the foundation of real frontend development. With this, you’ve built the core mindset every developer needs: understanding how the browser works, how data flows, and how user interactions shape the UI. This completes your JavaScript basics journey and opens the door to mastering frameworks like Angular with confidence.

Events are the way web pages react to user actions.
Whenever a user clicks, types, scrolls, submits a form, or hovers over an element — the browser triggers an event.
JavaScript allows us to listen to these events and run custom code in response.

Learning events is important because every interactive feature in modern frontend development is built on this foundation.

What Are Events?

An event is any action performed by the user or browser.
Some common examples:

• Clicking a button

• Typing inside an input

• Submitting a form

• Hovering the mouse over an element

• Pressing a keyboard key

• Resizing or scrolling the page

Events allow JavaScript to become interactive instead of being static.

Example:
A button doesn’t do anything by default — but with events, you can make it show a message, change text, add a new element, or update the UI.

Event Listeners

An event listener is a function that waits for an event and then runs code when the event happens.

Syntax:

element.addEventListener("eventName", function);

Example:

const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  console.log("Button was clicked");
});

The browser listens for a click on the button.
When the click happens, the callback function runs.

Why Events Are Important

Events are used in almost every feature:

• Showing validation messages

• Updating the UI in real-time

• Controlling forms

• Opening/closing menus

• Handling cart actions in e-commerce

• Playing/pausing media

• Managing dark mode toggles

Every dynamic website relies heavily on event handling.

Working With Form Inputs

Form inputs let users enter data.
JavaScript can read, validate, and update UI based on user input.

Example:

const email = document.getElementById("email").value;

The value updates automatically as the user types.
By listening to events, you can respond instantly.

Important Form Events

These events help build real-time validation, previews, button enabling/disabling, and more.

Preventing Form Reload

Forms reload pages by default.
To stop this, use:

e.preventDefault();

This is essential for custom form handling.

Day 6 Practical Tasks (With HTML + JS)

All examples are ready to copy-paste and test.

1. Button Click → Change Text

HTML

<h2 id="heading">Hello User</h2>
<button id="changeBtn">Click Me</button>

JavaScript

const heading = document.getElementById("heading");
const changeBtn = document.getElementById("changeBtn");

changeBtn.addEventListener("click", () => {
  heading.textContent = "Text Updated";
});

2. Live Input Preview

HTML

<input id="nameInput" placeholder="Type your name..." />
<p id="preview"></p>

JavaScript

const nameInput = document.getElementById("nameInput");
const preview = document.getElementById("preview");

nameInput.addEventListener("input", () => {
  preview.textContent = nameInput.value;
});

3. Form Submission Handling

HTML

<form id="myForm">
  <input id="email" placeholder="Email" />
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.getElementById("myForm");
const email = document.getElementById("email");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  console.log("Email submitted:", email.value);
});

4. Highlight Input on Focus

HTML

<input id="focusInput" placeholder="Click inside me" />

JavaScript

const focusInput = document.getElementById("focusInput");

focusInput.addEventListener("focus", () => {
  focusInput.style.border = "2px solid purple";
});

focusInput.addEventListener("blur", () => {
  focusInput.style.border = "1px solid gray";
});

5. Detect Key Presses

HTML

<input id="keyCheck" placeholder="Press any key..." />

JavaScript

const keyCheck = document.getElementById("keyCheck");

keyCheck.addEventListener("keydown", (e) => {
  console.log("Key pressed:", e.key);
});

6. Enable Button Only When Input Has Text

HTML

<input id="userInput" placeholder="Type something..." />
<button id="submitBtn" disabled>Submit</button>

JavaScript

const userInput = document.getElementById("userInput");
const submitBtn = document.getElementById("submitBtn");

userInput.addEventListener("input", () => {
  submitBtn.disabled = userInput.value.length === 0;
});

Closing Line

Events turn static webpages into interactive applications, and understanding how to handle user input lays the foundation for building modern, dynamic UI experiences in frameworks like Angular.

Understanding DOM manipulation is important for every frontend developer before moving to frameworks like Angular.

What is the DOM?

• The DOM represents the webpage as a tree of nodes.

• Each HTML element becomes a JavaScript object.

• JavaScript can select and modify these objects.

Example representation:

Document
 ┗━ <body>
      ┗━ <div>
            ┗━ <p>

Selecting Elements

document.getElementById("title");
document.querySelector(".btn");
document.querySelectorAll("p");

Console Example

console.log(document.getElementById("title"));

Changing Text Content

const title = document.getElementById("title");
title.textContent = "Updated Title";

Console Example

document.getElementById("title").textContent = "Hello from Console";

Changing Styles

title.style.color = "purple";
title.style.fontSize = "24px";

Console Example

document.body.style.background = "lightyellow";

Changing Attributes

const img = document.querySelector("img");
img.src = "new-image.jpg";
img.alt = "Updated Image";

Console Example

document.querySelector("img").src = "https://picsum.photos/200";

Creating Elements

const li = document.createElement("li");
li.textContent = "New Item Added";
document.body.appendChild(li);

Console Example

const p = document.createElement("p");
p.textContent = "This paragraph was created from the console.";
document.body.appendChild(p);

Removing Elements

const box = document.getElementById("box");
box.remove();

Console Example

document.querySelector("p").remove();

Event Listeners

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("Button clicked");
});

Practical Tasks

Below are tasks you can directly try in your HTML file + console.

1. Change Page Title on Button Click

HTML

<h1 id="title">Welcome</h1>
<button id="btn">Change Title</button>

JavaScript

const title = document.getElementById("title");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  title.textContent = "Hello Adiba";
});

2. Highlight Product Price

const price = document.querySelector(".price");
price.style.color = "green";
price.style.fontSize = "20px";

3. Update Product Image on Hover

HTML

<img id="productImg" src="image1.jpg" width="200">

JavaScript

const img = document.getElementById("productImg");

img.addEventListener("mouseover", () => {
  img.src = "image2.jpg";
});

img.addEventListener("mouseout", () => {
  img.src = "image1.jpg";
});

4. Add New Item to a List

HTML

<ul id="list"></ul>
<button id="addBtn">Add Item</button>

JavaScript

const list = document.getElementById("list");
const addBtn = document.getElementById("addBtn");

addBtn.addEventListener("click", () => {
  const li = document.createElement("li");
  li.textContent = "New Product Added";
  list.appendChild(li);
});

5. Remove a Card on Button Click

HTML

<div class="card">
  <p>Card Content</p>
  <button class="delete">Delete</button>
</div>

JavaScript

const del = document.querySelector(".delete");

del.addEventListener("click", () => {
  del.parentElement.remove();
});

6. Live Preview While Typing

HTML

<input id="nameInput" placeholder="Type something..." />
<p id="preview"></p>

JavaScript

const input = document.getElementById("nameInput");
const preview = document.getElementById("preview");

input.addEventListener("input", () => {
  preview.textContent = input.value;
});

Understanding DOM manipulation gives you direct control over how webpages behave, and this skill prepares you for building dynamic interfaces in frameworks like Angular.

Think of an object like a box that stores information with labels.

⭐ What Is an Object?

• An object stores data in key–value pairs.

• Keys are always strings.

• Values can be anything: string, number, array, another object.

Example

const user = {
  name: "Adiba",
  age: 25,
  role: "Frontend Developer"
};

⭐ What Are Nested Objects?

A nested object is simply an object inside another object.

Real-world example:
A user has an address → and an address has city, pin, state.

const userProfile = {
  name: "Adiba",
  contact: {
    email: "adiba@email.com",
    address: {
      city: "Pune",
      pin: 411001
    }
  }
};

This is exactly how user APIs, product APIs, LMS dashboards, cart systems, etc. structure data.

⭐ Why Developers Use Objects Everywhere

• Easy to group related data.

• Easy to pass around as a single unit.

• Flexible: you can add, update, or delete properties anytime.

• Perfect representation of real-world entities.

⭐ Accessing Object Values

Dot notation:

console.log(userProfile.name);
console.log(userProfile.contact.email);
console.log(userProfile.contact.address.city);

Bracket notation:

console.log(userProfile["name"]);

Bracket notation is useful when:

• key is dynamic

• key comes from a variable

Practical E-commerce Examples

⭐ 1. Product Object

const product = {
  id: 101,
  name: "Wireless Mouse",
  price: 899,
  specs: {
    color: "Black",
    battery: "AA",
    warranty: "1 Year"
  }
};

⭐ 2. Cart Array (Array of Objects)

const cart = [
  { id: 1, name: "Shoes", price: 1200 },
  { id: 2, name: "Bag", price: 900 }
];

⭐ 3. Users List (Nested Objects inside Array)

const users = [
  {
    name: "Aditi",
    address: { city: "Mumbai", pin: 400001 }
  },
  {
    name: "Riya",
    address: { city: "Pune", pin: 411001 }
  }
];

Objects are the truth behind every API you consume.

4 Challenges

1. Product Description Generator

Input:

const product = {
  name: "Laptop",
  price: 55000,
  specs: { ram: "16GB", storage: "512GB SSD" }
};

Task:

• Write a function that returns:
  "Laptop costs ₹55000 and comes with 16GB RAM and 512GB SSD"

2. Add a New Property to an Object

Task:

• Create a function addProperty(obj, key, value) that:

  • adds the new key/value into the object

  • returns updated object

This mirrors adding dynamic fields in forms or API objects.

3. Nested Object Reader

Given:

const user = {
  name: "Aman",
  contact: {
    address: {
      city: "Delhi",
      pin: 110001
    }
  }
}

Task:

• Write a function that returns "Delhi" by accessing the nested city.

This teaches deep property access — common in Angular templates.

4. Inventory Total Price

Given:

const items = [
  { price: 100 },
  { price: 250 },
  { price: 150 }
];

Task:

• Write a function to return the total price.

This mirrors calculating totals in a shopping cart.

5. Compare Two Product Specifications

Given two product objects:

const p1 = { name: "Laptop A", specs: { cpu: "i5" } };
const p2 = { name: "Laptop B", specs: { cpu: "i7" } };

Task:

• Return which one has the better CPU.

This builds comparison logic — used in filtering/sorting.

Objects form the foundation of real-world data in every frontend project, and mastering them now makes the upcoming days APIs, services, and Angular components far smoother and more intuitive.

An array stores multiple values in a single variable.

Imagine you have a cupboard with numbered shelves.
Each shelf holds one thing an apple, a banana, or even your favourite bug report.

const cupboard = ["Apple", "Banana", "Mango"];

Here:

• The cupboard’s name is cupboard.

• The shelves start at 0 (JavaScript likes counting like a toddler: “zero, one, two…”).

• cupboard[0] opens the first shelf → "Apple".

Your array is basically a queue of items waiting for your commands.

let fruits = ["Apple", "Banana", "Mango"];

fruits.push("Orange");     // Add at end
fruits.pop();              // Remove last
fruits.unshift("Pineapple"); // Add at start
fruits.shift();            // Remove first

console.log(fruits);       // ["Apple", "Banana", "Mango"]

console.log(fruits.includes("Mango")); // true
console.log(fruits.indexOf("Banana")); // 1

🍓 Array Slice, Splice, Concat & Spread — Cutting and Mixing Fruits

You’ve got multiple baskets in your fruit shop sometimes you take a few fruits out, sometimes you mix baskets together.
That’s exactly what these methods help you do.

🍍 Code Example

// 🍎 Original baskets
let basket1 = ["Apple", "Banana", "Mango"];
let basket2 = ["Orange", "Kiwi"];

// 🍰 slice() — take a copy portion
let fewFruits = basket1.slice(1, 3);
console.log("Sliced Portion:", fewFruits);
// ["Banana", "Mango"]

console.log("After slice:", basket1);
// ["Apple", "Banana", "Mango"]

// 🔪 splice() — remove or replace inside
basket1.splice(1, 1, "Pineapple");
console.log("After splice:", basket1);
// ["Apple", "Pineapple", "Mango"]

// 🧺 concat() — merge baskets
let combined = basket1.concat(basket2);
console.log("After concat:", combined);
// ["Apple", "Pineapple", "Mango", "Orange", "Kiwi"]

// ✨ spread (...) — merge the modern way
let spreadCombined = [...basket1, ...basket2, "Strawberry"];
console.log("After spread:", spreadCombined);
// ["Apple", "Pineapple", "Mango", "Orange", "Kiwi", "Strawberry"]

Loops :

A loop is a repeater.
It lets you run the same block of code multiple times automatically until a condition tells it to stop.

Think of a loop as your fruit shop assistant 🍊
who checks every shelf in your cupboard so you don’t have to repeat the same work manually.

🧺 Example Basket

let fruits = ["Apple", "Banana", "Mango", "Orange"];

Without a loop, you’d have to do:

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);

Boring, right?
So let’s automate it!

🧠 Types of Loops in JavaScript

🍏 1️⃣ for loop

Your assistant counts every shelf manually.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
for (let i = 0; i < fruits.length; i++) {
  console.log("Fruit on shelf", i, "is", fruits[i]);
}

// Output:
// Fruit on shelf 0 is Apple
// Fruit on shelf 1 is Banana
// Fruit on shelf 2 is Mango
// Fruit on shelf 3 is Orange

🍌 2️⃣ for...of loop

The polite version — ignores shelf numbers, just handles fruits directly.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
for (let fruit of fruits) {
  console.log("Selling:", fruit);
}

// Output:
// Selling: Apple
// Selling: Banana
// Selling: Mango
// Selling: Orange

🍓 3️⃣ forEach() loop

The modern way — give one rule, and it runs for each fruit automatically.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
fruits.forEach(fruit => console.log("Packing:", fruit));

// Output:
// Packing: Apple
// Packing: Banana
// Packing: Mango
// Packing: Orange

🍍 4️⃣ while loop

Keeps going as long as a condition stays true.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
let i = 0;
while (i < fruits.length) {
  console.log("Checking:", fruits[i]);
  i++;
}

//Output:
//Checking: Apple
//Checking: Banana
//Checking: Mango
//Checking: Orange

🍇 5️⃣ do...while loop

Runs at least once, even if the condition is false.

let fruits = ["Apple", "Banana", "Mango", "Orange"];
let j = 0;
do {
  console.log("Fruit:", fruits[j]);
  j++;
} while (j < fruits.length);

// Output:
// Fruit: Apple
// Fruit: Banana
// Fruit: Mango
// Fruit: Orange

✋ Special Keywords: break & continue

Example:

let fruits = ["Apple", "Banana", "Mango", "Orange"];
for (let fruit of fruits) {
  if (fruit === "Banana") continue; // skip banana
  if (fruit === "Mango") break;     // stop at mango
  console.log(fruit);
}

// Output:
// Apple

🍒 When to Use Which

🤖 Smart Loops — map(), filter(), reduce(), find()

These are built-in array methods that act like loops but with shorter, cleaner, and smarter syntax.
They help you transform, filter, or summarise data all without writing manual loops.

🍏 1️⃣ map() — Transform Every Fruit

Creates a new array by applying a function to every item.

let juices = fruits.map(fruit => fruit + " Juice");
console.log(juices);
// ["Apple Juice", "Banana Juice", "Mango Juice", "Orange Juice"]

🍌 2️⃣ filter() — Keep Only the Good Ones

Creates a new array with only elements that pass a test.

let selected = fruits.filter(fruit => fruit.startsWith("M"));
console.log(selected);
// ["Mango"]

🍓 3️⃣ reduce() — Combine Everything into One

Reduces the array to a single value (like sum, total, etc.)

let numbers = [10, 20, 30, 40];
let total = numbers.reduce((sum, num) => sum + num, 0);
console.log(total);
// 100

🍍 4️⃣ find() — Find the First Match

Returns the first element that passes a condition.

let found = fruits.find(fruit => fruit === "Mango");
console.log(found);
// "Mango"

🍇 Sorting & Rearranging Arrays

Let’s keep our fruit basket theme going 🍎

let fruits = ["Mango", "Apple", "Banana", "Orange"];

🍏 1️⃣ sort() — Arrange in Order

fruits.sort();
console.log(fruits);
// ["Apple", "Banana", "Mango", "Orange"]

🍊 2️⃣ reverse() — Flip the Order

fruits.reverse();
console.log(fruits);
// ["Orange", "Mango", "Banana", "Apple"]

🍓 3️⃣ join() — Turn into a String

let fruitString = fruits.join(", ");
console.log(fruitString);
// "Orange, Mango, Banana, Apple"

🍍 4️⃣ split() — Turn String into Array

let newBasket = fruitString.split(", ");
console.log(newBasket);
// ["Orange", "Mango", "Banana", "Apple"]

🍇 5️⃣ sort() with Numbers (Custom Function)

sort() doesn’t sort numbers correctly by default (it treats them as text).
To sort numbers properly, use a custom function:

let prices = [50, 5, 20, 100];
prices.sort((a, b) => a - b);
console.log(prices);
// [5, 20, 50, 100]

🧠 Array & Loop Practice Questions

1. Print every fruit in the array using a loop.

2. Print only fruits that start with the letter M.

3. Count how many fruits are in the basket (without using .length).

4. Reverse the array manually (don’t use .reverse()).

5. Combine two fruit baskets into one new array.

6. Find the fruit with the longest name.

7. Find the fruit with the shortest name.

8. Check if "Kiwi" exists in the basket.

9. Remove the first and last fruit using array methods.

10. Add "Pineapple" at the beginning and "Papaya" at the end.

11. Copy only the middle two fruits using slice().

12. Replace "Banana" with "Guava" using splice().

13. Create a string of all fruits separated by commas using join().

14. Split "Apple, Banana, Mango" back into an array.

15. Sort fruits alphabetically and then reverse the order.

16. Create a new array of fruits with " Juice" added to each name.

17. Create a new array of fruits that start with A or B.

18. Count total number of letters in all fruit names combined.

19. Find the first fruit that starts with "O".

20. Stop looping once you find "Mango" and print only fruits before it.

🍎 Closing Note

And that wraps up Day 3 — Arrays & Loops!
You’ve learned how to store, organize, and move through data effortlessly — from stacking fruits in baskets to looping through them like a pro. These are the real building blocks of logic in JavaScript.

Every time you push, pop, or loop through an array, you’re training your brain to think like a developer step by step, pattern by pattern. Keep practising these challenges until they feel natural, because tomorrow’s JavaScript magic will build right on top of this foundation.

“Next stop: Smart Loops and Advanced Array Methods 🚀”

Every time you find yourself repeating code, JavaScript whispers, “There’s a smarter way.”
That smarter way is called a function.

Functions are reusable blocks of code that perform a specific task
you can define once and use anywhere.

“A function is a shortcut from problem to solution — write once, use forever.”

Think of your JavaScript program as a giant factory.
Inside it, you have machines (functions).

Each machine:

• Takes some raw materials (inputs or parameters).

• Does some processing (the logic inside).

• And gives you a finished product (the return value).

You press a button (call the function) the machine starts working.
You get the same predictable result every time you feed it the same input.
That’s the beauty of it: a function is a reusable logic machine.

🔹 1. Function Declaration

function greet(name) {
  return 'Hi ' + name;
}

console.log(greet('Adiba')); // Hi Adiba

• Has a name (greet)

• Takes parameters (name)

• Returns a value

• Must be called to run

🔹 2. Function Expression

Functions can be stored in variables too:

const greet = function(name) {
  return 'Hello ' + name;
};

• Anonymous (no name)

• Useful when passing around functions or callbacks

🔹 3. Arrow Functions (ES6)

Introduced in ES6, arrow functions make code shorter and cleaner.

const greet = (name) => 'Hello ' + name;

• No function keyword

• return and {} can be omitted for one-line functions

• Great for callbacks and modern Angular/React code

🔹 4. Default Parameters

Give parameters a default value:

function greet(name = 'Guest') {
  return 'Hello ' + name;
}

🔹 5. Returning Objects

const getUser = (name, age) => ({
  name,
  age,
  info: `${name} is ${age} years old.`,
});

console.log(getUser('Adiba', 25));

🔹 6. Practical Example — Full User Info

const getUserInfo = (name, age, city) =>
  `${name}, ${age}, lives in ${city}.`;

console.log(getUserInfo('Adiba', 25, 'Pune'));

🧩 Key Takeaways

• Functions = reusable code shortcuts

• function and => both define them

• Always return what you need

• Arrow functions are best for compact logic

🧠 Why Use Functions?

• Avoid repeating code (DRY = Don’t Repeat Yourself)

• Organize logic into small, testable chunks

• Improve readability

• Make debugging and updates easier

🧩 Challenge Time (Hands-On Practice)

Let’s make this an actual hour-long session with these mini-tasks:

Simple Function: Create add(a, b) that returns their sum.

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

console.log(add(12, 25)); // ✅ 37

Arrow Rewrite: Convert add() to arrow syntax.

const add = (a, b) =>  a + b;
console.log(add(12, 25)); // 37

Greeting Function: Add a default name.

function greet(name = 'Guest') {
  return `Hello, ${name}!`;
}

console.log(greet('Adiba')); // Hello, Adiba!
console.log(greet());        // Hello, Guest!

User Card: Create a function that returns a formatted user card (like a business card string).

function userCard(name, role, city) {
  return `
  Name: ${name}
  Role: ${role}
  City: ${city}
  `;
}

console.log(userCard('Adiba', 'Frontend Developer', 'Pune'));

Compare Age: Create a function compareAges(user1, user2) that returns who’s older.

function compareAges(user1, user2) {
  if (user1.age > user2.age) {
    return `${user1.name} is older than ${user2.name}.`;
  } else if (user1.age < user2.age) {
    return `${user2.name} is older than ${user1.name}.`;
  } else {
    return `${user1.name} and ${user2.name} are the same age.`;
  }
}

const userA = { name: 'Adiba', age: 25 };
const userB = { name: 'Riya', age: 27 };

console.log(compareAges(userA, userB));

✨ Closing Thought

Functions are like your team of mini-robots — each built for one task.
Train them once, and they’ll keep working tirelessly while you move on to bigger ideas.