JavaScript Functions as Objects: Unlocking Power and Flexibility

🚀 Template Literals in JavaScript — A Small Feature That Makes a Big Difference When I first started writing JavaScript, creating strings looked like this 👇 const message = "Hello " + name + ", your score is " + score; It works… but as projects grow, this approach becomes hard to read and messy. That’s where Template Literals changed everything. __________________________________________________________________________________ 💡 What are Template Literals? They are a modern way to write strings in JavaScript using backticks ( ) instead of quotes. Example: const message = `Hello ${name}, your score is ${score}`; Much cleaner, right? ✨ __________________________________________________________________________________ 🔎 Why developers prefer Template Literals ✅ Better readability ✅ Easier to maintain code ✅ Supports multi-line strings ✅ Perfect for dynamic content __________________________________________________________________________________ 📌 Before vs After Old way: "Welcome " + user + ", your order " + orderId + " is confirmed." Modern way: `Welcome ${user}, your order ${orderId} is confirmed.` Cleaner code = Faster understanding. __________________________________________________________________________________ 🧠 Another powerful feature: Multi-line strings Before: const text = "Line one\n" + "Line two\n" + "Line three"; Now: const text = `Line one Line two Line three`; Simple and readable. __________________________________________________________________________________ 🔥 If you're learning JavaScript or preparing for MERN / Frontend interviews, this is a concept you should definitely master. __________________________________________________________________________________ 💬 Quick question for developers: When did you start using template literals instead of string concatenation? Let’s discuss in the comments 👇 Hitesh Choudhary Piyush Garg Chai Aur Code #javascript #webdevelopment #frontenddeveloper #coding #mernstack #100DaysOfCode

🚀 JavaScript Simplified Series — Day 37 Till now… you’ve written all your JavaScript in one file 😵 👉 Everything mixed together 👉 Hard to manage 👉 Hard to scale What if you could **split your code into multiple files** and still use them together? 🤔 --- ## 🔥 Solution → Modules --- ## 🔹 What are Modules? Modules allow you to: 👉 Break code into **separate files** 👉 Reuse code easily 👉 Keep code clean & organized --- ## 🔹 Exporting Code ```javascript id="md1" // math.js export function add(a, b) { return a + b } ``` 👉 `export` makes function available outside --- ## 🔹 Importing Code ```javascript id="md2" // main.js import { add } from "./math.js" console.log(add(5, 3)) ``` 👉 Output: 8 --- ## 🔹 Default Export ```javascript id="md3" // user.js export default function greet() { console.log("Hello") } ``` Import: ```javascript id="md4" import greet from "./user.js" ``` --- ## 🔥 Real Life Example Think of a big project 🏢 👉 One file → login 👉 One file → dashboard 👉 One file → API All connected… but separate --- ## 🔥 Why Modules Matter? ✅ Clean code ✅ Reusable logic ✅ Easy to maintain ✅ Scalable projects --- ## 🔥 Simple Summary export → share code import → use code modules → organize code --- ### 💡 Programming Rule **Divide your code. Organize it. Scale it.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules Day 38 → Debounce (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

#SoftwareEngineer_Not_Code_Monkey I was recently revisiting some concepts that used to trip me up in JavaScript: Array Manipulation. Sometimes, the best way to master a concept is to lay them all out, look them in the eye, and have a little "chat" with the code. Yes, I talk to my code—and you should too! Let’s break down the "Internal Dialogue" of a Senior Developer when handling arrays: .map() — The Transformer The Conversation: "Take this array, visit every single element, and give me a new array with the modifications I asked for. Same length, fresh look." Use Case: Formatting currency or wrapping data in UI components. JavaScript const prices = [10, 20, 30]; const formattedPrices = prices.map(price => `$${price}.00`); // Result: ["$10.00", "$20.00", "$30.00"] .filter() — The Gatekeeper The Conversation: "I’ve got a condition. Check every item; if they pass, they join the new array. If they fail? They’re out." Use Case: Removing "Out of Stock" items or finding "Admin" users. .reduce() — The Grinder The Conversation: "Take the whole list, start with this 'bag' (Accumulator) set to 0, and squash everything down into one single value." Use Case: Calculating a shopping cart total or flattening nested data. JavaScript const cart = [100, 200, 300]; const total = cart.reduce((acc, price) => acc + price, 0); // Result: 600 .find() — The Scout The Conversation: "Go find me the first person named 'Ashraf'. Once you find him, stop looking and bring him back to me—not a list, just the man himself." const students = ["Ahmed", "Ashraf", "Sara"]; const winner = students.find(s => s === "Ashraf"); // Result: "Ashraf" .forEach() — The Blue-Collar Worker The Conversation: "Don't give me a new array. Just loop through and do something—log it, send it to an API, or trigger an alert." const tasks = ["Task 1", "Task 2"]; tasks.forEach(task => console.log(`Processing: ${task}`)); .some() & .every() — The Inspectors .some(): "Is there at least one rebel in this list? If yes, give me a true." .every(): "Is everyone following the rules? If even one person fails, give me a false." The Engineer's Takeaway: Immutability Except for forEach and sort, these methods respect the Immutability principle. We don't touch the original array—it’s a "Red Line." We create new versions. This keeps your state predictable and your bugs minimal, especially as your project scales from a simple script to a full-blown freelance system. Stop just "writing code." Start engineering solutions. Which Array method was your "final boss" when you started? #Programming #SoftwareEngineering #JavaScript #CleanCode #WebDevelopment #Frontend #TechCommunity #ReactJS #NodeJS #Freelancing

🚀 JavaScript Simplified Series — Day 36 You created a class… Now imagine 👇 You want another class with: 👉 Same properties 👉 Same methods 👉 Plus some extra features Will you rewrite everything again? ❌ That’s inefficient 😵 --- ## 🔥 Solution → Inheritance --- ## 🔹 What is Inheritance? Inheritance allows one class to: 👉 **Reuse properties & methods of another class** --- ## 🔹 Example ```javascript id="inh1" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } } class Admin extends User { deleteUser() { console.log("User deleted") } } let admin = new Admin("Abhay") admin.greet() admin.deleteUser() ``` 👉 Output: Hello Abhay User deleted --- ## 🔍 What’s happening? 👉 `Admin` inherited from `User` 👉 So it gets `greet()` automatically 👉 Plus its own method --- ## 🔹 super keyword ```javascript id="inh2" class Admin extends User { constructor(name, role) { super(name) this.role = role } } ``` 👉 `super()` calls parent constructor --- ## 🔥 Real Life Example Think of a **family 👨👩👧** 👉 Parent → basic traits 👉 Child → inherits + adds new traits --- ## 🔥 Simple Summary extends → inheritance super → parent constructor Reuse → no duplication --- ### 💡 Programming Rule **Don’t rewrite code. Reuse it with inheritance.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 30 JavaScript feels fast… But have you ever wondered 👇 👉 How does it handle multiple tasks at once? 👉 How does async code run without blocking? This is where the **Event Loop** comes in 😎 --- ## 🤯 The Big Confusion JavaScript is **single-threaded** 👉 It can do **one thing at a time** Then how does this work? 👇 ```javascript id="el1" console.log("Start") setTimeout(() => { console.log("Async Task") }, 0) console.log("End") ``` 👉 Output: Start End Async Task Wait… why? 🤔 --- ## 🔥 Behind the Scenes JavaScript has 3 main parts: 👉 Call Stack 👉 Web APIs 👉 Callback Queue --- ## 🔹 Step by Step Flow 1️⃣ `console.log("Start")` → runs first 2️⃣ `setTimeout` → goes to **Web API** 3️⃣ `console.log("End")` → runs next 4️⃣ Callback goes to **Queue** 5️⃣ Event Loop checks → stack empty? 6️⃣ Yes → push callback to stack 👉 Then runs → "Async Task" --- ## 🔍 Visualization ```id="viz1" Call Stack → Executes code Web APIs → Handles async tasks Queue → Stores callbacks Event Loop → Manages everything ``` --- ## 🔥 Real Life Example Think of a **restaurant 🍽️** 👉 Waiter takes order → sends to kitchen 👉 Kitchen prepares food 👉 Meanwhile waiter serves others 👉 When food is ready → serves you 👉 Event Loop = waiter managing tasks --- ## 🔥 Simple Summary JS → single-threaded Async → handled outside Event Loop → manages execution --- ### 💡 Programming Rule **JavaScript is not multi-threaded… but it behaves like it is.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 38 You type in a search bar… And API call starts firing on **every single keystroke** 😵 👉 Type “A” → API call 👉 Type “Ab” → API call 👉 Type “Abh” → API call Server overload 💥 App slow 😓 --- ## 🔥 Problem → Too many function calls --- ## 🔥 Solution → Debounce --- ## 🔹 What is Debouncing? Debouncing means: 👉 **Delay execution** 👉 Until user stops typing --- ## 🔹 Example ```javascript id="db1" function debounce(fn, delay) { let timer return function(...args) { clearTimeout(timer) timer = setTimeout(() => { fn(...args) }, delay) } } ``` --- ## 🔹 Usage ```javascript id="db2" function search(query) { console.log("Searching for:", query) } let debouncedSearch = debounce(search, 500) // call this on input event debouncedSearch("Abhay") ``` 👉 Only runs after user stops typing --- ## 🔍 What’s happening? 👉 Every new call clears previous timer 👉 Only last call executes --- ## 🔥 Real Life Example Think of a **remote button 📺** 👉 You press multiple times 👉 TV reacts only after you stop --- ## 🔥 Where is Debounce used? 👉 Search bars 🔍 👉 Resize events 👉 Input fields 👉 API calls --- ## 🔥 Simple Summary Debounce → delay execution Avoid → unnecessary calls Improve → performance --- ### 💡 Programming Rule **Don’t run code on every action. Run it at the right time.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance Day 37 → Modules Day 38 → Debounce Day 39 → Throttle (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 30 Days of JavaScript – Day 20 Today I upgraded my To-Do App with more advanced features. 💡 Project: Advanced To-Do App New features added: • Mark tasks as completed • Edit existing tasks • Delete tasks • Store data using localStorage 🧠 Concepts Used: • DOM manipulation • CRUD operations • local Storage • dynamic UI updates 📌 This project helped me understand how real applications manage and update data. 🎥 Demo below 👇 👉 Source code in (only JS Code). #JavaScript #FrontendDevelopment #WebDevelopment #LearningJavaScript #CodingJourney <script> let tasks = JSON.parse(localStorage.getItem("tasks")) || []; function showTasks() {   let list = document.getElementById("taskList");   list.innerHTML = "";   tasks.forEach((task, index) => {     let li = document.createElement("li");     let text = document.createElement("span");     text.innerText = task.name;     if (task.completed) {       text.classList.add("completed");     }     // actions     let actions = document.createElement("div");     actions.className = "actions";     // complete button     let completeBtn = document.createElement("button");     completeBtn.innerText = "✔";     completeBtn.onclick = function() {       toggleComplete(index);     };     // edit button     let editBtn = document.createElement("button");     editBtn.innerText = "Edit";     editBtn.onclick = function() {         editTask(index);     };     // delete button     let deleteBtn = document.createElement("button");     deleteBtn.innerText = "X";     deleteBtn.onclick = function() {       deleteTask(index);     };     actions.appendChild(completeBtn);     actions.appendChild(editBtn);     actions.appendChild(deleteBtn);     li.appendChild(text);     li.appendChild(actions);     list.appendChild(li);   }); } function addTask() {   let input = document.getElementById("taskInput");   if (input.value === "") {     alert("Enter task");     return;   }   tasks.push({ name: input.value, completed: false });   localStorage.setItem("tasks", JSON.stringify(tasks));   input.value = "";   showTasks(); } function deleteTask(index) {   tasks.splice(index, 1);   localStorage.setItem("tasks", JSON.stringify(tasks));   showTasks(); } function toggleComplete(index) {   tasks[index].completed = !tasks[index].completed;   localStorage.setItem("tasks", JSON.stringify(tasks));   showTasks(); } function editTask(index) {   let newTask = prompt("Edit your task:", tasks[index].name);   if (newTask !== null && newTask !== "") {     tasks[index].name = newTask;     localStorage.setItem("tasks", JSON.stringify(tasks));     showTasks();   } } showTasks(); </script>

🚀 JavaScript Simplified Series — Day 35 Prototypes are powerful… But let’s be honest 😅 👉 Syntax thoda confusing lagta hai 👉 Hard to read 👉 Not beginner friendly What if we could write the same thing in a **clean and simple way?** 🤔 --- ## 🔥 Solution → Classes --- ## 🔹 What are Classes? Classes are just a **clean syntax over prototypes** 👉 Same power 👉 Better readability --- ## 🔹 Without Class (Old Way) ```javascript id="clx1" function User(name) { this.name = name } User.prototype.greet = function() { console.log("Hello " + this.name) } let u1 = new User("Abhay") u1.greet() ``` --- ## 🔹 With Class (Modern Way 😎) ```javascript id="clx2" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } } let u1 = new User("Abhay") u1.greet() ``` 👉 Same result 👉 Cleaner code --- ## 🔹 Adding More Methods ```javascript id="clx3" class User { constructor(name) { this.name = name } greet() { console.log("Hello " + this.name) } sayBye() { console.log("Goodbye") } } ``` --- ## 🔥 Real Life Example Think of a **blueprint 🏗️** 👉 Class = blueprint 👉 Object = actual building Same design → multiple objects --- ## 🔥 Simple Summary Class → cleaner syntax Constructor → initialize values Methods → behavior --- ### 💡 Programming Rule **Write code that humans can read. Classes make code cleaner.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting Day 33 → Closures Day 34 → Prototypes Day 35 → Classes Day 36 → Inheritance (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 31 You wrote a variable… But suddenly 😳 👉 It works in one place 👉 But gives error in another Why? 🤔 --- ## 🔥 This is called → Scope --- ## 🔹 What is Scope? Scope defines **where a variable can be accessed** 👉 Kaha use kar sakte ho 👉 Kaha nahi --- ## 🔹 1. Global Scope ```javascript id="sc1" let name = "Abhay" function greet() { console.log(name) } greet() ``` 👉 Accessible everywhere 📌 Global = sab jagah access --- ## 🔹 2. Function Scope ```javascript id="sc2" function test() { let age = 22 console.log(age) } test() console.log(age) ❌ ``` 👉 Error ❌ 📌 Function ke bahar access nahi --- ## 🔹 3. Block Scope (let & const) ```javascript id="sc3" if (true) { let city = "Delhi" console.log(city) } console.log(city) ❌ ``` 👉 Error ❌ 📌 Block ke bahar access nahi --- ## 🔥 var vs let vs const ```javascript id="sc4" if (true) { var x = 10 } console.log(x) // works 😳 ``` 👉 `var` ignores block scope 📌 `let` & `const` follow block scope --- ## 🔥 Real Life Example Think of a house 🏠 👉 Global → pura ghar 👉 Function → ek room 👉 Block → ek drawer Har cheez har jagah access nahi hoti --- ## 🔥 Simple Summary Global → everywhere Function → inside function Block → inside {} --- ### 💡 Programming Rule **Keep variables limited. Smaller scope = fewer bugs.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) --- 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods Day 13 → Array Iteration Day 14 → Advanced Array Methods Day 15 → Objects Basics Day 16 → Object Methods + this Day 17 → Object Destructuring Day 18 → Spread & Rest Day 19 → Advanced Objects Day 20 → DOM Introduction Day 21 → DOM Selectors Day 22 → DOM Manipulation Day 23 → Events Day 24 → Event Bubbling Day 25 → Event Delegation Day 26 → Async JavaScript Day 27 → Promises Day 28 → Async / Await Day 29 → Fetch API Day 30 → Event Loop Day 31 → Scope Day 32 → Hoisting (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 13 Arrays are powerful… But what if you want to process every element automatically? 🤔 Imagine this 👇 You have a list of prices: [100, 200, 300] Now you want to: 👉 Double every price 👉 Filter expensive items 👉 Get total price Will you use loops every time? ❌ JavaScript gives a smarter way… 👉 Array Iteration Methods 🔹 1. map() → Transform every element let prices = [100, 200, 300] let updated = prices.map(price => price * 2) console.log(updated) 👉 Output: [200, 400, 600] 📌 map() returns a new array 🔹 2. filter() → Select specific elements let prices = [100, 200, 300] let expensive = prices.filter(price => price > 150) console.log(expensive) 👉 Output: [200, 300] 📌 filter() returns elements that match condition 🔹 3. reduce() → Combine all values let prices = [100, 200, 300] let total = prices.reduce((acc, price) => acc + price, 0) console.log(total) 👉 Output: 600 📌 reduce() gives a single value 🔥 Real Life Example Shopping cart 🛒 map() → apply discount filter() → find expensive items reduce() → calculate total bill 🔥 Simple Summary map → transform data filter → select data reduce → combine data 💡 Programming Rule Don’t write loops again and again. Use smart methods. If you want to learn JavaScript in a simple and practical way, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary (Chai aur Code) 📌 Series Progress Day 1 → What is JavaScript Day 2 → Variables & Data Types Day 3 → Type Conversion & Operators Day 4 → Truthy & Falsy + Comparison Operators Day 5 → If Else + Switch + Ternary Day 6 → Loops Day 7 → Break + Continue + Nested Loops Day 8 → Functions Basics Day 9 → Arrow + Default + Rest Parameters Day 10 → Callback & Higher Order Functions Day 11 → Arrays Basics Day 12 → Array Methods (Basic) Day 13 → Array Iteration (map, filter, reduce) Day 14 → Advanced Array Methods (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday