JavaScript Simplified: Array Methods

🚀 JavaScript Simplified Series — Day 33 You wrote a function… It finished execution… But somehow 😳 👉 It still remembers old variables? How is that possible? 🤯 --- ## 🔥 This is called → Closures --- ## 🔹 What is a Closure? A **closure** is when a function 👉 Remembers variables from its outer scope 👉 Even after the outer function has finished --- ## 🔹 Example ```javascript id="cl1" function outer() { let count = 0 return function inner() { count++ console.log(count) } } let counter = outer() counter() counter() counter() ``` 👉 Output: 1 2 3 --- ## 🔍 What’s happening? 👉 `outer()` executed once 👉 `inner()` still remembers `count` 👉 Value persists 😎 --- ## 🔥 Why is this powerful? Because function can **remember state** --- ## 🔹 Real Life Example Think of a **bank account 🏦** ```javascript id="cl2" function bankAccount() { let balance = 1000 return function deposit(amount) { balance += amount console.log(balance) } } let account = bankAccount() account(500) account(200) ``` 👉 Output: 1500 1700 👉 Balance remembered between calls --- ## 🔥 Where are closures used? 👉 Data privacy 👉 Counters 👉 Event handlers 👉 React hooks --- ## 🔥 Simple Summary Closure → function + memory Remembers outer variables Keeps state alive --- ### 💡 Programming Rule **Closures give functions memory. Use them to control data smartly.** --- 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 → Prototype (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 11 Imagine this 👇 You are building an app… And you need to store: User 1 name User 2 name User 3 name User 4 name 😵 Will you create separate variables for each? ```javascript let user1 = "Abhay" let user2 = "Rahul" let user3 = "Aman" ``` This is messy ❌ Not scalable ❌ --- ## 🔥 Solution → Arrays An **Array** is a data structure that allows you to store **multiple values in a single variable** --- ## 🔹 Creating an Array ```javascript let users = ["Abhay", "Rahul", "Aman"] ``` 👉 Now everything is inside one variable --- ## 🔹 Index (Very Important) Every element in an array has an **index** ```javascript let users = ["Abhay", "Rahul", "Aman"] ``` Index: Abhay → 0 Rahul → 1 Aman → 2 👉 Array always starts from **0** --- ## 🔹 Accessing Values ```javascript console.log(users[0]) // Abhay console.log(users[1]) // Rahul ``` --- ## 🔹 Updating Values ```javascript users[1] = "Neha" console.log(users) ``` 👉 Output: ["Abhay", "Neha", "Aman"] --- ## 🔹 Array Length ```javascript console.log(users.length) ``` 👉 Output: 3 📌 Useful when working with loops --- ## 🔹 Real Life Example Think of a **shopping cart 🛒** Instead of: item1 item2 item3 We use: ```javascript let cart = ["Shoes", "T-shirt", "Watch"] ``` 👉 Clean 👉 Organized 👉 Easy to manage --- ## 🔥 Simple Summary Array → multiple values ek jagah Index → position of value Access → users[0] Update → users[1] = "Neha" --- ### 💡 Programming Rule **Group related data together. Arrays make your code clean and scalable.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary 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 (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 17 Objects are powerful… But sometimes accessing data from them becomes messy 😵 Imagine this 👇 let user = { name: "Abhay", age: 22, city: "Delhi" } Now you want to use all values: let name = user.name let age = user.age let city = user.city Too much repetition ❌ 🔥 Solution → Object Destructuring Destructuring lets you extract values easily from objects 🔹 Basic Example let user = { name: "Abhay", age: 22, city: "Delhi" } let { name, age, city } = user console.log(name) console.log(age) 👉 Output: Abhay 22 🔹 Rename Variables let { name: username } = user console.log(username) 👉 Output: Abhay 📌 Useful when variable name conflict ho 🔹 Default Values let { country = "India" } = user console.log(country) 👉 Output: India 📌 Jab value exist na kare 🔹 Real Life Example API response handle karte waqt: let response = { id: 1, title: "Post", author: "Abhay" } let { title, author } = response 👉 Clean code 👉 Less repetition 👉 Easy to read 🔥 Simple Summary Destructuring → extract values easily Rename → custom variable name Default → fallback value 💡 Programming Rule Write less. Extract smartly. Keep code clean. 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 (Next Post) Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday

🚀 JavaScript Simplified Series — Day 18 Imagine this 👇 You have an object: ```javascript id="sr1" let user = { name: "Abhay", age: 22 } ``` Now you want to: 👉 Copy this object 👉 Add new data 👉 Merge with another object Will you manually copy everything? ❌ Messy… error-prone… not scalable --- ## 🔥 Solution → Spread & Rest Operator (...) That `...` (three dots) is more powerful than you think 😎 --- ## 🔹 1. Spread Operator (Expand / Copy) Spread is used to **expand values** ```javascript id="sr2" let user = { name: "Abhay", age: 22 } let newUser = { ...user } console.log(newUser) ``` 👉 Output: { name: "Abhay", age: 22 } 📌 Creates a **copy of object** --- ## 🔹 Add new properties ```javascript id="sr3" let updatedUser = { ...user, city: "Delhi" } ``` 👉 Output: { name: "Abhay", age: 22, city: "Delhi" } --- ## 🔹 Merge objects ```javascript id="sr4" let extra = { country: "India" } let merged = { ...user, ...extra } ``` 👉 Combines both objects --- ## 🔹 2. Rest Operator (Collect values) Rest is used to **collect remaining values** ```javascript id="sr5" let { name, ...rest } = { name: "Abhay", age: 22, city: "Delhi" } console.log(name) console.log(rest) ``` 👉 Output: Abhay { age: 22, city: "Delhi" } 📌 Rest gathers remaining data --- ## 🔥 Real Life Example Think of updating a profile 👤 Old data + new changes → merge 👉 Spread helps combine 👉 Rest helps extract --- ## 🔥 Simple Summary Spread → expand / copy / merge Rest → collect remaining data --- ### 💡 Programming Rule **Don’t rewrite data. Reuse and extend it smartly.** --- If you want to learn JavaScript in a **simple and practical way**, you can follow these YouTube channels: • Rohit Negi • Hitesh Choudhary 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 (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

Next Part :) 🔥 BEGINNER (10 Q&A) • Q1: What is typeof operator? 👉 Used to check the data type of a variable • Q2: What is null vs undefined? 👉 null = intentional empty value 👉 undefined = variable declared but not assigned • Q3: What is strict mode in JS? 👉 Enables stricter parsing & error handling • Q4: What is template literal? 👉 String using backticks (`) for interpolation • Q5: What is default parameter? 👉 Function parameter with default value • Q6: What is JSX? 👉 Syntax that looks like HTML used in React • Q7: What is fragment in React? 👉 Wrapper without extra DOM node • Q8: What is onClick event? 👉 Event handler for click actions • Q9: What is inline styling in React? 👉 Applying styles using JS objects • Q10: What is export default? 👉 Export a single value from a file ⚡ INTERMEDIATE (10 Q&A) • Q1: What is shallow copy vs deep copy? 👉 Shallow: copies reference 👉 Deep: copies full structure • Q2: What is spread operator? 👉 Expands elements or objects • Q3: What is rest parameter? 👉 Collects multiple arguments into array • Q4: What is destructuring? 👉 Extract values from objects/arrays • Q5: What is optional chaining? 👉 Safely access nested properties • Q6: What is nullish coalescing (??)? 👉 Returns right value if left is null/undefined • Q7: What is synthetic event in React? 👉 Cross-browser wrapper around native events • Q8: What is forwardRef? 👉 Pass ref to child component • Q9: What is prop drilling? 👉 Passing props through many layers • Q10: What is dynamic rendering? 👉 Rendering UI based on conditions/data 🚀 ADVANCED (18 Q&A) • Q1: What is currying? 👉 Transform function with multiple args into nested functions • Q2: What is pure function? 👉 Same input → same output, no side effects • Q3: What is immutability? 👉 Data cannot be modified directly • Q4: What is garbage collection? 👉 Automatic memory cleanup • Q5: What is Webpack? 👉 Module bundler • Q6: What is Babel? 👉 JS compiler for modern syntax • Q7: What is tree shaking? 👉 Removing unused code • Q8: What is reconciliation keys importance? 👉 Helps efficient DOM updates • Q9: What is controlled vs uncontrolled component? 👉 Controlled: React state 👉 Uncontrolled: DOM handles state • Q10: What is React.StrictMode double render? 👉 Helps detect side effects in dev • Q11: What is batching in React? 👉 Grouping multiple state updates • Q12: What is stale closure problem? 👉 Using outdated state inside closure • Q13: What is dependency array in useEffect? 👉 Controls when effect runs • Q14: What is suspense in React? 👉 Handles async loading • Q15: What is concurrent rendering? 👉 Interruptible rendering for better UX • Q16: What is useId? 👉 Generate unique IDs • Q17: What is render props pattern? 👉 Sharing logic via function props • Q18: What is compound component pattern? 👉 Components working together as one #ReactJS #JavaScript #FrontendInterview #WebDevelopment #Coding #FrontendDevelopment

🚀 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 32 You used a variable… Before even declaring it 😳 And somehow… it still worked? 🤯 How is that even possible? --- ## 🔥 This is called → Hoisting --- ## 🔹 What is Hoisting? Hoisting means: 👉 JavaScript moves declarations to the **top of their scope** Before execution starts --- ## 🔹 Example (Confusing 😵) ```javascript id="hs1" console.log(x) var x = 10 ``` 👉 Output: undefined 😳 --- ## 🔍 What actually happens? JavaScript internally converts it to: ```javascript id="hs2" var x console.log(x) x = 10 ``` 👉 Declaration upar chali gayi 👉 Value assign baad me hui --- ## 🔹 let & const (Important ⚠️) ```javascript id="hs3" console.log(a) let a = 10 ``` 👉 Error ❌ 📌 Because of **Temporal Dead Zone (TDZ)** --- ## 🔥 What is TDZ? Time between: 👉 Variable declared 👉 Aur initialize hone tak Is duration me access nahi kar sakte --- ## 🔹 Function Hoisting ```javascript id="hs4" greet() function greet() { console.log("Hello") } ``` 👉 Works perfectly ✅ 📌 Functions are fully hoisted --- ## 🔥 Real Life Example Think of a classroom 🏫 👉 Teacher announces names first 👉 Details baad me fill hoti hain 👉 Declaration pehle 👉 Value baad me --- ## 🔥 Simple Summary Hoisting → declarations upar move hoti hain var → undefined milta hai let/const → error (TDZ) function → fully hoisted --- ### 💡 Programming Rule **Always declare variables at the top. Don’t rely on hoisting.** --- 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 (Next Post) --- Follow for more 🚀 #JavaScriptSimplified #javascript #webdevelopment #coding #programming #learninpublic #100DaysOfCode #frontenddevelopment #devcommunity #codingjourney #softwaredeveloper #techcommunity #dailylearning #codeeveryday Create image based on this

🚀 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

In JavaScript, we often use if...else if...else chain to handle conditions. But, there is a cleaner way to write this code, objects. For example, look at the following code: for (tab in issueElems) {   if (tab === "open") {     openIssues.innerHTML = "";     openCount.className = "loading loading-spinner loading-xs text-info";     showSpinner(searchSpinner, searchSpinnerText, openIssuesSpinner);   }   else if (tab === "closed") {     closedIssues.innerHTML = "";     closedCount.className = "loading loading-spinner loading-xs text-info";     showSpinner(searchSpinner, searchSpinnerText, closedIssuesSpinner);   }   else {     allIssues.innerHTML = "";     allCount.className = "loading loading-spinner loading-xs text-info";     showSpinner(searchSpinner, searchSpinnerText, allIssuesSpinner);   } } Now, if we define an object like the following beforehand: let issueElems = {   all: {     count: allIssuesCount,     issues: allIssues,     spinner: allIssuesSpinner,   },   open: {     count: openIssuesCount,     issues: openIssues,     spinner: openIssuesSpinner,     tab: openTab,   },   closed: {     count: closedIssuesCount,     issues: closedIssues,     spinner: closedIssuesSpinner,     tab: closedTab,   }, }; The code becomes as simple as this: for (tab in issueElems) {   let c = issueElems[tab];   c.issues.innerHTML = "";   c.count.className = "loading loading-spinner loading-xs text-info";   showSpinner(searchSpinner, searchSpinnerText, c.spinner); } There is also switch...case, but it works in a very absurd way. If you don't add break to case clauses, it keeps going to the next case clause. It starts with the first matching case clause and continues until the break statement is encountered. That's why objects are the best way to handle this matter. What do you use? Share your ideas!