Forem: Aman Kumar

Handling Events and Event Propagation in JavaScript

Aman Kumar — Sat, 19 Jul 2025 10:30:06 +0000

🧪 Sample HTML Structure

Let’s start with a simple HTML page that includes a list of images:

<ul id="images">
  <li><img id="owl" src="owl.jpg" /></li>
  <li><a id="google" href="https://google.com">Google</a></li>
</ul>

📌 3 Ways to Handle Click Events

1. Inline HTML (Not Recommended)

<img onclick="alert('Owl')" />

❌ Not a clean or scalable approach.

2. Using `onclick` Property (Old Way)

document.getElementById('owl').onclick = function () {
    alert('Owl');
};

Works, but limits flexibility (e.g., you can't attach multiple listeners).

3. ✅ Modern Way: `addEventListener()`

document.getElementById('owl').addEventListener('click', function () {
    alert('Owl');
});

✔️ This is the preferred method. It allows multiple listeners, better control, and more modern event handling features.

🧱 The Event Object

document.getElementById('owl').addEventListener('click', function (e) {
    console.log(e);
});

This logs the PointerEvent object, which gives you rich information like:

type – what kind of event occurred
target, srcElement, currentTarget
Mouse positions: clientX, clientY, screenX, screenY
Modifier keys: altKey, ctrlKey, shiftKey
timestamp, keyCode (for keyboard events)

🔁 Event Propagation

Bubbling (default):

Events bubble from the target element upward to its ancestors.

document.getElementById('images').addEventListener('click', function () {
    console.log('Clicked inside ul');
}, false);

document.getElementById('owl').addEventListener('click', function () {
    console.log('Clicked on owl');
}, false);

Capturing:

Events flow top-down before reaching the target.

document.getElementById('images').addEventListener('click', function () {
    console.log('Captured on ul');
}, true);

Stop Bubbling:

document.getElementById('owl').addEventListener('click', function (e) {
    e.stopPropagation();
    console.log('Clicked on owl');
});

🔒 stopPropagation() prevents the event from reaching ancestor elements.

🚫 Preventing Default Behavior

Stop anchor tags from navigating:

document.getElementById('google').addEventListener('click', function (e) {
    e.preventDefault();
    console.log("Google link clicked, but not redirected.");
});

🧼 Bonus: Remove Image on Click

Let’s say you want to remove an image when it's clicked. Here's how:

document.querySelector('#images').addEventListener('click', function (e) {
    if (e.target.tagName === 'IMG') {
        let removeIt = e.target.parentNode;
        removeIt.remove(); // Removes the <li> along with the image
    }
});

🧹 This approach uses event delegation and works even if you add new images dynamically!

📘 Summary

Feature	Description
`addEventListener()`	Attach events cleanly
`e.target`	Element that triggered the event
`stopPropagation()`	Stops bubbling up the DOM
`preventDefault()`	Cancels default browser behavior
Event Delegation	Handle multiple similar events efficiently

🧠 DOM Unlocked: Learn the Document Object Model Like a Pro!

Aman Kumar — Sat, 19 Jul 2025 10:24:04 +0000

📄 What is the DOM?

DOM stands for Document Object Model.

It’s a programming interface that represents your HTML document as a tree of objects that JavaScript can interact with.

Example Breakdown:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>DOM Learning</title>
  </head>
  <body>
    <div class="bg-black">
      <h1 id="title" class="heading">DOM Learning on Chai Aur Code</h1>
      <p>Lorem ipsum dolor sit amet.</p> 
    </div>
  </body>
</html>

Here, the browser transforms this HTML into a DOM tree, where each tag becomes a node that JavaScript can access and change.

🔍 Exploring the DOM in the Browser Console

You can try these directly in your browser’s console:

console.log(window); // The global window object
console.log(window.document); // Gives you the HTML document
console.log(document); // Shortcut for above
console.dir(document); // Reveals properties and methods in object-like view

Want to grab the third link on a page?

console.log(document.links[2]); // Not an array, but an HTMLCollection

✋ DOM Manipulation 101

Let's try selecting and updating DOM elements using JavaScript.

🧾 Example:

Select an element by ID:

document.getElementById('title');

Change the content inside that element:

document.getElementById('title').innerHTML = "<h1>Chai Aur Code</h1>";

This line replaces the original heading content with your own.

🌐 Practice It Yourself

Try these out on a real webpage like:

👉 Wikipedia – Brendan Eich

document.getElementById('firstHeading');
document.getElementById('firstHeading').innerHTML = "Chai Aur Code";

Boom! You’ve just changed a live website’s heading (on your browser only 😄).

📌 Quick Notes

DOM Feature	Description
`window`	Global object containing browser environment
`document`	Represents the web page
`getElementById()`	Selects an element with a specific ID
`innerHTML`	Gets or sets the HTML content inside an element
`console.dir(document)`	Displays the DOM tree as a JS object

🧠 Final Thoughts

DOM is the bridge between your HTML and JavaScript. It allows you to:

Read content from the page
Update styles, text, and attributes
Respond to user actions

# 🧮 Crushing Numbers with `.reduce()` in JavaScript: From Totals to Real-Life Scenarios

Aman Kumar — Sat, 19 Jul 2025 10:21:06 +0000

🧠 What is `.reduce()`?

.reduce() is a method that reduces an array to a single value by applying a function on each element — one at a time — while keeping track of an accumulator.

Let’s see it in action:

🔁 Basic Example: Adding Numbers in an Array

const myNums = [1, 2, 3, 4, 5];

const myTotal = myNums.reduce(function (acc, currVal) {
    console.log(`acc: ${acc} and currval: ${currVal}`);
    return acc + currVal;
}, 0); // 0 is the initial value of the accumulator

console.log(myTotal);

🧾 Output:

acc: 0 and currval: 1
acc: 1 and currval: 2
acc: 3 and currval: 3
acc: 6 and currval: 4
acc: 10 and currval: 5
15

🔍 acc keeps track of the total so far, and currVal is the current item from the array.

✅ Arrow Function Version

const NewTotal = myNums.reduce((acc, curr) => acc + curr, 0);
console.log(NewTotal);

✔️ Cleaner and more readable for simple operations.

🛒 Real-Life Use Case: Calculating Total Price in a Cart

Imagine you're building an e-commerce site, and you want to calculate the total price from the cart. Here's how:

const shoppingCart = [
    { itemName: "JS Course", price: 2999 },
    { itemName: "Py Course", price: 999 },
    { itemName: "Mobile dev Course", price: 5999 },
    { itemName: "Data Science Course", price: 12999 },
];

const priceToPay = shoppingCart.reduce((acc, item) => acc + item.price, 0);

console.log(priceToPay); // Output: 22996

🛍️ Instead of manually looping and adding, reduce() elegantly combines it all into one line.

📌 Syntax Recap

array.reduce((accumulator, currentValue) => {
    // logic
    return updatedAccumulator;
}, initialValue);

🔄 `.reduce()` vs `.map()` or `.filter()`

Method	Purpose	Returns
`.map()`	Transforms each item	New array
`.filter()`	Selects items based on condition	New array
`.reduce()`	Combines all items into one result	Single value

🧠 Final Takeaway

.reduce() is powerful and versatile — from summing numbers to aggregating complex data. Once you get the hang of it, you’ll start reaching for it every time you need to calculate a total, build a string, or even transform arrays in advanced ways.

# 🔁 Transform Like a Pro: Mastering `.map()` and Method Chaining in JavaScript

Aman Kumar — Sat, 19 Jul 2025 10:18:36 +0000

When working with arrays, you don’t just want to loop through them — sometimes you want to transform them. That’s where .map() becomes your best friend.

Today, we'll explore how .map() works and take it further with method chaining — a pattern that makes your code both powerful and readable.

🗺️ What is `.map()`?

.map() is a method in JavaScript that creates a new array by applying a function to every element in the original array.

Let’s take an example:

const myNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const plusTen = myNumbers.map((num) => num + 10);

console.log(plusTen);

🧾 Output:

[11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

🧠 The original array stays unchanged. .map() returns a new transformed array.

✅ With Explicit `return` (Block Syntax)

const plusTen = myNumbers.map((num) => {
  return num + 10;
});

You can use curly braces and return when your logic needs more space, but for simple expressions, inline (arrow) form is shorter and cleaner.

🔗 Method Chaining: `map()` + `map()` + `filter()`

Here's where things get exciting. You can chain multiple array methods together to build transformations in one go.

const myNums = myNumbers
  .map((num) => num * 10)   // Step 1: Multiply each number by 10
  .map((num) => num + 1)    // Step 2: Add 1 to each result
  .filter((num) => num >= 40); // Step 3: Keep only values >= 40

console.log(myNums);

🧾 Output:

[41, 51, 61, 71, 81, 91]

🧮 Let’s break it down:

1 * 10 = 10 → 10 + 1 = 11 → ❌ rejected (less than 40)
4 * 10 = 40 → 40 + 1 = 41 → ✅ kept
...
9 * 10 = 90 → 90 + 1 = 91 → ✅ kept

✨ Chaining makes your code more declarative, readable, and efficient. It’s like passing your array through a pipeline of transformations.

🧠 When to Use `.map()`

Use Case	Why `.map()` Works
Adding tax to prices	Transforming each price individually
Formatting dates	Changing each date format in an array
Extracting properties	Like mapping over users to get their names
Building UIs from data (React)	Transforming data into components

🧩 Final Takeaway

Use .map() when you want to transform each item in an array.
Combine .map(), .filter(), and others for powerful, clean operations.
Prefer method chaining for concise and readable code.

# 🔍 From `forEach` to `filter`: Extracting Meaning from JavaScript Arrays

Aman Kumar — Sat, 19 Jul 2025 10:15:54 +0000

When working with arrays in JavaScript, you're often filtering, looping, or performing operations on each element. But when should you use forEach() and when should you use filter()?

Let’s walk through practical examples to understand their differences, how they behave, and what they're best at.

🔁 Looping with `forEach()`

const coding = ["js", "ruby", "java", "python", "cpp"];

coding.forEach((item) => {
    console.log(item);
});

🧾 Output:

js
ruby
java
python
cpp

forEach() simply loops through each element in the array and executes a function.
But here's a catch: It doesn't return anything.

🤔 What if you try to return a value?

const values = coding.forEach((item) => {
    return item;
});
console.log(values); // Output: undefined

❌ Even with a return inside, forEach() does not return a new array.
It's useful only for side effects, like printing, updating UI, or pushing into another array.

🔎 Enter `filter()` – the Selector

What if you want to extract a subset of an array? That’s where filter() shines.

const myNums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

const numbersGreaterThanFour = myNums.filter((num) => num > 4);
console.log(numbersGreaterThanFour);

🧾 Output:

[5, 6, 7, 8, 9, 10]

✔️ filter() returns a new array containing only elements that satisfy the condition.

⛓️ Block Syntax (with `return`)

const numbers = myNums.filter((val) => {
    return val > 4;
});
console.log(numbers);

Same output, just written with explicit return.

🆚 `forEach` vs `filter` in Practice

Let’s try doing what filter does, but using forEach:

const newNums = [];

myNums.forEach((num) => {
    if (num > 4) {
        newNums.push(num);
    }
});
console.log(newNums);

🧾 Output:

[5, 6, 7, 8, 9, 10]

🔧 Works fine, but notice how you have to manually manage the new array.
filter() makes this cleaner and declarative.

📚 Real World Example: Filtering Books by Genre

const books = [
    { title: 'Book One', genre: 'Fiction', publish: 1981, edition: 2004 },
    { title: 'Book Two', genre: 'Non-Fiction', publish: 1992, edition: 2008 },
    { title: 'Book Three', genre: 'History', publish: 1999, edition: 2007 },
    { title: 'Book Four', genre: 'Non-Fiction', publish: 1989, edition: 2010 },
    { title: 'Book Five', genre: 'Science', publish: 2009, edition: 2014 },
    { title: 'Book Six', genre: 'Fiction', publish: 1987, edition: 2010 },
    { title: 'Book Seven', genre: 'History', publish: 1986, edition: 1996 },
    { title: 'Book Eight', genre: 'Science', publish: 2011, edition: 2016 },
    { title: 'Book Nine', genre: 'Non-Fiction', publish: 1981, edition: 1989 },
];

🔍 Filter Fiction Books Only

const fictionBooks = books.filter((book) => book.genre === "Fiction");

fictionBooks.forEach(book => console.log(book));

🧾 Output:

{ title: 'Book One', genre: 'Fiction', ... }
{ title: 'Book Six', genre: 'Fiction', ... }

📚 filter() is amazing when you're querying data – like filtering by genre, year, or other criteria.

🧠 Final Thoughts

Function	Purpose	Returns a New Array?	Use When...
`forEach()`	Executes a function for each item	❌ No	You're just doing something with each item
`filter()`	Filters items based on a condition	✅ Yes	You need to extract a subset of data

# 🔁 Mastering the `for...in` Loop in JavaScript: When and Where to Use It

Aman Kumar — Sat, 19 Jul 2025 10:14:09 +0000

JavaScript offers several looping mechanisms, and one of the most misunderstood is the for...in loop. Today, let’s uncover the truth behind for...in, what it’s really good at, and where you shouldn’t use it.

🎯 What is `for...in`?

The for...in loop is used to iterate over the enumerable properties of an object. It goes through the keys (also called property names) of an object one by one.

🧪 Example 1: `for...in` on Objects ✅

const myObject = {
    js: "javascript",
    cpp: "C++",
    rb: "ruby",
    swift: "swift by apple"
};

for (const key in myObject) {
    console.log(`${key} shortcut is ${myObject[key]}`);
}

🧾 Output:

js shortcut is javascript
cpp shortcut is C++
rb shortcut is ruby
swift shortcut is swift by apple

✔️ for...in is perfect for objects because it loops through each key.

🧪 Example 2: `for...in` on Arrays 🔎

const programming = ["js", "cpp", "java", "py"];

for (const key in programming) {
    console.log(programming[key]);
}

🧾 Output:

js
cpp
java
py

⚠️ While for...in works with arrays, it actually loops through the indices (0, 1, 2, 3...) and not the values directly.

💡 Pro Tip: Use for...of when you want to iterate through values in an array.

🧪 Example 3: `for...in` on Maps 🚫

const map = new Map();
map.set('IN', "India");
map.set('USA', "America");
map.set('Fr', "France");

for (const [key, value] in map) {
    console.log(key, '=', value);
}

🧾 Output:

TypeError: map is not iterable using for...in

❌ for...in does not work with Map objects. Maps are not enumerable in the way objects are. For Maps, use for...of with destructuring.

for (const [key, value] of map) {
    console.log(`${key} = ${value}`);
}

🧠 Quick Recap

Data Type	Use `for...in`?	Why?
Object	✅ Yes	Loops through keys
Array	⚠️ Not recommended	Loops through indices, not values
Map	❌ No	Not enumerable like objects

🔚 Final Thoughts

Understanding where for...in shines can save you from subtle bugs and confusion. Use it wisely—especially when dealing with objects. For arrays and maps, go with for...of instead.

Unveiling the Secrets of Loops, Iterables, and Maps in JavaScript 🌟

Aman Kumar — Sun, 08 Dec 2024 16:30:42 +0000

JavaScript offers a variety of ways to iterate over collections, whether arrays, strings, or even custom objects. From traditional while loops to the elegance of for...of and the flexibility of Maps, there's a lot to explore. Let’s dive in! 🚀

🌀 Exploring the `while` Loop

The while loop executes a block of code as long as the specified condition is true.

let index = 0;
while (index <= 10) {
    console.log(`Value of index is ${index}`);
    index = index + 2; // Increment by 2
}

Output:

Value of index is 0
Value of index is 2
...
Value of index is 10

🔄 Iterating Through Arrays with `while`

let myArray = ['flash', 'batman', 'superman'];
let arr = 0;

while (arr < myArray.length) {
    console.log(`Value is ${myArray[arr]}`);
    arr = arr + 1;
}

Output:

Value is flash
Value is batman
Value is superman

🔁 The `do...while` Loop: Guaranteed First Execution

A do...while loop ensures the block of code executes at least once, regardless of the condition.

let score = 11;

do {
    console.log(`Score is ${score}`);
    score++;
} while (score <= 10);

Output:

Score is 11

🎯 The Elegant `for...of` Loop

The for...of loop is ideal for iterating over iterables like arrays, strings, and even Maps.

Example 1: Iterating Over an Array

const arr = [1, 2, 3, 4, 5];

for (const num of arr) {
    console.log(num);
}

Output:

Example 2: Iterating Over a String

const greetings = "Hello world!";

for (const greet of greetings) {
    console.log(`Each char is ${greet}`);
}

Output:

Each char is H
Each char is e
Each char is l
...
Each char is !

🌍 Mastering Maps in JavaScript

Maps provide a flexible and powerful way to store key-value pairs. Unlike objects, they maintain the order of insertion and can have keys of any type.

Creating a Map

const map = new Map();
map.set('IN', "India");
map.set('USA', "United States of America");
map.set('Fr', "France");
map.set('IN', "India"); // Duplicate keys overwrite existing ones

Iterating Over Maps

for (const [key, value] of map) {
    console.log(key, ':-', value);
}

Output:

IN :- India
USA :- United States of America
Fr :- France

🚫 Can You Use `for...of` on Objects?

Plain objects are not iterable by default, so attempting to use for...of on them results in an error. Instead, you can use Object.entries() to convert an object into an array of key-value pairs:

const myObject = {
    game1: 'NFS',
    game2: 'Spiderman'
};

for (const [key, value] of Object.entries(myObject)) {
    console.log(key, ':-', value);
}

Output:

game1 :- NFS
game2 :- Spiderman

Key Takeaways

while and do...while are useful when you’re unsure how many iterations are required.
for...of is the go-to for iterating over iterables like arrays, strings, and Maps.
Maps are excellent for key-value storage with insertion order and flexible key types.
Use Object.entries() to make objects iterable.

By mastering these looping techniques, you can navigate and manipulate data structures like a pro! 🌟

Mastering the Art of Loops in JavaScript: The Complete Guide to For Loops 🔄✨

Aman Kumar — Wed, 16 Oct 2024 15:46:43 +0000

Understanding loops is crucial for efficient coding in JavaScript. They allow us to repeat a block of code multiple times based on a given condition. Let's dive deep into the world of for loops, nested loops, and how to handle arrays and control statements like break and continue! 🛤️

🔁 For Loop Fundamentals

for (let i = 1; i <= 10; i++) {
    const element = i;
    console.log(element);
}
// Output: Will print numbers from 1 to 10.

Breaking It Down:

Initialization (let i = 1): The loop starts with i set to 1.
Condition Check (i <= 10): If true, the code inside {} runs.
Increment (i++): Increases the value of i after each iteration.
Exit Condition: When i > 10, the loop stops running.

Note: The variable element has block scope, meaning it exists only inside the loop. Accessing it outside will result in an error.

🏆 Conditionals Within For Loops

for (let i = 1; i <= 10; i++) {
    const element = i;
    if (element == 5) {
        console.log("5 is the best number");
    }
    console.log(element);
}

Output: The loop prints numbers from 1 to 10, with an extra message "5 is the best number" when it reaches 5.

🔄 Nested Loops: Looping Within Loops

for (let i = 2; i <= 10; i++) {
    console.log(`Table of ${i} is:`);
    for (let j = 1; j <= 10; j++) {
        console.log(`${i} * ${j} = ${i * j}`);
    }
}

Output: This creates multiplication tables from 2 to 10. The outer loop runs once, and the inner loop runs 10 times for each iteration of the outer loop.

📚 Working with Arrays and For Loops

let myArr = ["IronMan", "Thor", "Captain America"];
for (let index = 0; index < myArr.length; index++) {
    const element = myArr[index];
    console.log(element);
}

Explanation: The loop runs from index = 0 to index < myArr.length (i.e., 3). It prints each superhero's name from the array myArr.

🚦 Break & Continue Keywords: Controlling the Loop Flow

for (let i = 1; i <= 10; i++) {
    if (i == 5) {
        console.log("Detected 5");
        // break; // Uncommenting this will stop the loop entirely at 5
        continue; // Skips the current iteration and continues with the next one
    }
    console.log(`Value of i is ${i}`);
}

Break:

Stops the loop entirely when a certain condition is met.

Continue:

Skips the current iteration but continues with the loop.

Example Output:

It prints numbers from 1 to 10, skipping the number 5 and printing "Detected 5".

🚀 Key Takeaways

For Loops are the backbone of iteration in JavaScript, allowing you to execute a block of code repeatedly.
Nested Loops help perform operations that require multiple levels of iteration.
Array Handling in loops lets you efficiently access and manipulate data.
Break and Continue provide fine control over the loop's execution, making your code more efficient and readable.

Mastering these concepts will enhance your problem-solving skills and make your JavaScript code more dynamic and powerful. Ready to loop your way to success? 🔁✨

Understanding Truthy & Falsy Values in JavaScript: The Art of Conditional Logic 🎭

Aman Kumar — Sun, 06 Oct 2024 17:37:14 +0000

In JavaScript, truthy and falsy values determine how a value behaves in a conditional statement. Some values are automatically considered true, while others are automatically considered false. Knowing how JavaScript handles these values can save time and reduce errors in your code. Let's explore! 🕵️‍♂️

📧 Example 1: Truthy and Falsy in Action

const useremail = "ayushyadavz@gmail.com";

if (useremail) {
    console.log("Got user email");
} else {
    console.log("Don't have user email");
}
// Output: Got user email

Explanation: Here, the string "ayushyadavz@gmail.com" is considered truthy, which means the code inside the if block is executed. If useremail had a falsy value, the else block would run instead.

🎭 What are Falsy Values?

In JavaScript, the following values are falsy, meaning they are treated as false in conditional statements:

false
0
-0
0n (BigInt zero)
null
undefined
NaN (Not a Number)

🔍 What are Truthy Values?

Anything not on the falsy list is truthy. This includes:

"0" (string)
'false' (string)
" " (space character in a string)
[] (empty array)
{} (empty object)
function() {} (any function)

🌟 Example 2: Checking for Empty Arrays & Objects

Sometimes, we need to verify if an array or object is empty. Let's see how to do that.

📝 Checking an Empty Array:

const username = [];

if (username.length === 0) {
    console.log("Array is Empty");
}
// Output: Array is Empty

Explanation: Here, we use the .length property to check if the array username has any elements. If its length is 0, it is considered empty.

🧳 Checking an Empty Object:

const useremailId = {};

if (Object.keys(useremailId).length === 0) {
    console.log("Object is Empty");
}
// Output: Object is Empty

Explanation: In the case of an object, we use Object.keys() to retrieve an array of the object’s keys. If the array length is 0, the object is empty.

🎯 Key Takeaways:

Falsy Values: These include false, 0, null, undefined, NaN, and empty or "falsey" values that JavaScript treats as false.
Truthy Values: Everything else that has a value or type in JavaScript, like "0", "false", [], {}, or functions, are considered truthy.
Empty Check: Use .length to check for empty arrays and Object.keys(obj).length to check for empty objects.

Understanding truthy and falsy values helps you better control your conditional logic and write efficient, error-free code. Ready to level up your JavaScript skills? 🚀

Unlocking the Power of Switch Statements 🎛️

Aman Kumar — Sat, 28 Sep 2024 17:36:54 +0000

In JavaScript, we often encounter scenarios where we need to compare a single value against multiple options. This is where the switch statement shines, providing a cleaner and more readable alternative to if-else chains. Let’s dive into how switch statements work and explore how to leverage them effectively. 🔍

What is a Switch Statement? 🚦

A switch statement evaluates an expression, then compares its value to multiple case clauses. When a match is found, the corresponding code block runs, and the break statement ensures the program exits the switch.

📅 Example 1: Switching Based on Month

const month = 3;

switch (month) {
    case 1:
        console.log("January");
        break;
    case 2:
        console.log("February");
        break;
    case 3:
        console.log("March");
        break;
    case 4:
        console.log("April");
        break;

    default:
        console.log("Default case match");
        break;
}
// Output: March

Explanation: The switch checks the value of month. Since it's 3, it matches the case for March, prints the result, and exits.

📆 Example 2: Switching Based on Day

const day = "wednesday";

switch (day) {
    case "monday":
        console.log("1");
        break;
    case "tuesday":
        console.log("2");
        break;
    case "wednesday":
        console.log("3");
        break;
    case "thursday":
        console.log("4");
        break;

    default:
        console.log("Default");
        break;
}
// Output: 3

Explanation: The switch evaluates the day variable. Since day is "wednesday", the case for "wednesday" runs, and the output is 3.

🔑 Key Points to Remember:

Break Statement: Without the break keyword, the switch will continue to execute the subsequent cases—even if they don't match. This is known as fall-through behavior. The break stops the switch from running all the remaining cases.

Example:

const month = 3;

switch (month) {
    case 1:
        console.log("January");
    case 2:
        console.log("February");
    case 3:
        console.log("March");
    case 4:
        console.log("April");
    default:
        console.log("Default case match");
}
// Output: March April Default case match

Explanation: Without break, all the subsequent cases (April and Default) execute after finding a match for March.

Default Case: It works like the else block in an if-else chain. If none of the cases match, the default case is executed.

const month = 10;

switch (month) {
    case 1:
        console.log("January");
        break;
    case 2:
        console.log("February");
        break;

    default:
        console.log("Default case match");
        break;
}
// Output: Default case match

Explanation: Since month doesn’t match any of the given cases, the default block runs.

🎯 Switch in Action:

Use cases: Switch statements are excellent for menu options, input validation, and any scenario where you need to compare a variable against multiple possible values.
Readability: They offer a cleaner, more readable way to handle multiple possible outcomes compared to a series of if-else conditions.

With the switch statement, you gain more structured control over your code, allowing for a clear, efficient way to handle multiple conditions. Ready to switch up your code? 🚀

Navigating Control Flow: How Your Code Decides What to Do 🧭✨

Aman Kumar — Tue, 24 Sep 2024 10:11:06 +0000

In JavaScript, not all code needs to be executed immediately or without conditions. Using Control Flow, you can decide when and how your code should run, based on different conditions and logic. Let's break down how comparison operators, if-else statements, and other logical operators work to manage your code's flow. 🛠️

🔄 What is Control Flow? 🤔

Control Flow is all about how your code executes based on conditions. Without conditions, your code would execute line by line. But with Control Flow, you can tell JavaScript when to run specific parts of the code and when to skip them.

🔢 Comparison Operators: The Backbone of Conditions 🎯

To make decisions, we need to compare values. Here's how comparison operators work in JavaScript:

<, >: Less than, Greater than Example: 1 < 2 returns true
<=, >=: Less than or equal to, Greater than or equal to Example: 2 <= 2 returns true
==: Equal to (ignores data type) Example: 2 == "2" returns true
!=: Not equal to Example: 3 != 2 returns true
===: Strict equality (checks both value and data type) Example: 2 === "2" returns false
!==: Strict inequality (checks value and data type) Example: 3 !== "2" returns true

🔀 If-Else: Making Decisions 💡

Basic If Condition

const isUserLoggedIn = true;
if (isUserLoggedIn) {
    console.log("You are logged in.");
}
// Output: You are logged in.

Explanation: The block inside the if statement executes because the condition isUserLoggedIn is true.

If-Else Condition

const temperature = 53;
if (temperature < 50) {
    console.log("Less than 50");
} else {
    console.log("Greater than 50");
}
// Output: Greater than 50

Explanation: The code checks the condition temperature < 50. Since it's false, the else block runs.

🧩 Block Scope: Keeping Things Inside the Block 🧱

Variables declared inside {} are not accessible outside their block.

const score = 200;
if (score === 200) {
    let power = "fly";
}
// console.log(`Power: ${power}`); // Error: power is not defined

⏩ Short-Hand If-Else ✨

You can write a simple if statement without curly braces if it’s just one line.

const balance = 1000;
if (balance > 500) console.log("Balance Greater than 500");
// Output: Balance Greater than 500

🔗 Logical Operators: Combining Conditions 🧠

AND (`&&`) Operator

All conditions need to be true for the block to run.

const userLoggedIn = true;
const debitCard = true;
if (userLoggedIn && debitCard) {
    console.log("Allow to shop.");
}
// Output: Allow to shop

OR (`||`) Operator

At least one condition needs to be true for the block to run.

const loggedInWithGoogle = false;
const loggedInWithEmail = true;
if (loggedInWithEmail || loggedInWithGoogle) {
    console.log("User Logged In");
}
// Output: User Logged In

🌟 Nullish Coalescing Operator (`??`): Handling `null` or `undefined`

This operator returns the right-hand value if the left-hand value is null or undefined.

let val1;
val1 = 10 ?? 15;
console.log(val1); // Output: 10

val1 = null ?? 10;
console.log(val1); // Output: 10

val1 = undefined ?? 13;
console.log(val1); // Output: 13

val1 = null ?? 10 ?? 15;
console.log(val1); // Output: 10

🧠 Ternary Operator: One-Liner Condition 🏆

const iceTeaPrice = 100;
iceTeaPrice <= 100 
  ? console.log("less than 100") 
  : console.log("more than 100");
// Output: less than 100

Explanation: This one-line if-else checks whether the iceTeaPrice is less than or equal to 100.

🎯 Key Takeaways:

Control Flow helps guide your code's logic based on conditions.
Use comparison operators to create conditions for your if, else, and else-if statements.
Logical operators let you combine multiple conditions with ease.
The ternary operator offers a compact way to handle simple conditions.

Mastering control flow gives you the power to write smarter, more dynamic code! Ready to take control? 🚀

Mastering IIFE (Immediately Invoked Function Expressions) 🚀: Private Scopes & Immediate Execution 🎯

Aman Kumar — Sun, 22 Sep 2024 14:15:02 +0000

In JavaScript, an IIFE is a function that runs as soon as it's defined. It helps create private scopes to avoid messing with the global namespace. Let’s dive into the world of IIFE with clear examples, so you can grasp this powerful feature easily! 💡

⚡ What is an IIFE? ⚡

An IIFE (Immediately Invoked Function Expression) is a function that gets executed immediately after its declaration. It’s a great way to keep your code modular and avoid creating global variables.

✨ Named IIFE: Create & Execute in One Go! 💻

Here’s how a named IIFE works. Notice how the function is defined and executed in one step.

(function chai() {
    console.log(`DB Connected`);
})(); 
// Output: DB Connected

Explanation: We define a function chai, and it gets immediately executed by adding () after the function definition.
Tip: Always end an IIFE with a semicolon ; to avoid issues when other scripts follow.

🔥 Simple IIFE with Parameters 🎯

IIFEs can also take parameters and arguments like any regular function. This adds flexibility in how you pass data into them.

((name) => {
    console.log(`DB Connected, ${name}`);
})("Ayush");
// Output: DB Connected, Ayush

Explanation: The arrow function inside the IIFE accepts the parameter name and prints a customized message. The argument "Ayush" is passed into the IIFE during invocation.

🌟 Why Use IIFE?

Avoid Global Variables: IIFE helps keep your code self-contained by creating its own scope.
Encapsulation: Variables and functions inside the IIFE aren’t accessible from the outside, preventing accidental overwrites.
Immediate Execution: The function runs as soon as it’s defined, which can be useful for initializing code right away.

🎯 Key Takeaways:

IIFE runs immediately after it’s defined, making it perfect for tasks that need to be done right away.
Named IIFE can be useful for initialization tasks like setting up databases or loading configuration.
Simple IIFE with parameters allows you to pass data right into the function as soon as it's invoked.

By understanding and utilizing IIFEs, you can keep your code clean and modular, avoiding the pitfalls of a cluttered global scope. Give it a try and enjoy more organized JavaScript code! 🚀✨

🔚 JS Basics – The End! 🎉

Forem: Aman Kumar

Handling Events and Event Propagation in JavaScript

🧪 Sample HTML Structure

📌 3 Ways to Handle Click Events

1. Inline HTML (Not Recommended)

2. Using onclick Property (Old Way)

3. ✅ Modern Way: addEventListener()

🧱 The Event Object

🔁 Event Propagation

Bubbling (default):

Capturing:

Stop Bubbling:

🚫 Preventing Default Behavior

🧼 Bonus: Remove Image on Click

📘 Summary

🧠 DOM Unlocked: Learn the Document Object Model Like a Pro!

📄 What is the DOM?

Example Breakdown:

🔍 Exploring the DOM in the Browser Console

✋ DOM Manipulation 101

🧾 Example:

Select an element by ID:

Change the content inside that element:

🌐 Practice It Yourself

📌 Quick Notes

🧠 Final Thoughts

# 🧮 Crushing Numbers with `.reduce()` in JavaScript: From Totals to Real-Life Scenarios

🧠 What is .reduce()?

🔁 Basic Example: Adding Numbers in an Array

🧾 Output:

✅ Arrow Function Version

🛒 Real-Life Use Case: Calculating Total Price in a Cart

📌 Syntax Recap

🔄 .reduce() vs .map() or .filter()

🧠 Final Takeaway

# 🔁 Transform Like a Pro: Mastering `.map()` and Method Chaining in JavaScript

🗺️ What is .map()?

🧾 Output:

✅ With Explicit return (Block Syntax)

🔗 Method Chaining: map() + map() + filter()

🧾 Output:

🧮 Let’s break it down:

🧠 When to Use .map()

🧩 Final Takeaway

# 🔍 From `forEach` to `filter`: Extracting Meaning from JavaScript Arrays

🔁 Looping with forEach()

🧾 Output:

🤔 What if you try to return a value?

🔎 Enter filter() – the Selector

🧾 Output:

⛓️ Block Syntax (with return)

🆚 forEach vs filter in Practice

🧾 Output:

📚 Real World Example: Filtering Books by Genre

🔍 Filter Fiction Books Only

🧾 Output:

🧠 Final Thoughts

# 🔁 Mastering the `for...in` Loop in JavaScript: When and Where to Use It

🎯 What is for...in?

🧪 Example 1: for...in on Objects ✅

🧾 Output:

🧪 Example 2: for...in on Arrays 🔎

🧾 Output:

🧪 Example 3: for...in on Maps 🚫

🧾 Output:

🧠 Quick Recap

🔚 Final Thoughts

**Unveiling the Secrets of Loops, Iterables, and Maps in JavaScript** 🌟

🌀 Exploring the while Loop

🔄 Iterating Through Arrays with while

🔁 The do...while Loop: Guaranteed First Execution

🎯 The Elegant for...of Loop

Example 1: Iterating Over an Array

Example 2: Iterating Over a String

🌍 Mastering Maps in JavaScript

Creating a Map

Iterating Over Maps

🚫 Can You Use for...of on Objects?

Key Takeaways

**Mastering the Art of Loops in JavaScript: The Complete Guide to For Loops** 🔄✨

2. Using `onclick` Property (Old Way)

3. ✅ Modern Way: `addEventListener()`

🧠 What is `.reduce()`?

🔄 `.reduce()` vs `.map()` or `.filter()`

🗺️ What is `.map()`?

✅ With Explicit `return` (Block Syntax)

🔗 Method Chaining: `map()` + `map()` + `filter()`

🧠 When to Use `.map()`

🔁 Looping with `forEach()`

🔎 Enter `filter()` – the Selector

⛓️ Block Syntax (with `return`)

🆚 `forEach` vs `filter` in Practice

🎯 What is `for...in`?

🧪 Example 1: `for...in` on Objects ✅

🧪 Example 2: `for...in` on Arrays 🔎

🧪 Example 3: `for...in` on Maps 🚫

Unveiling the Secrets of Loops, Iterables, and Maps in JavaScript 🌟

🌀 Exploring the `while` Loop

🔄 Iterating Through Arrays with `while`

🔁 The `do...while` Loop: Guaranteed First Execution

🎯 The Elegant `for...of` Loop

🚫 Can You Use `for...of` on Objects?

Mastering the Art of Loops in JavaScript: The Complete Guide to For Loops 🔄✨

Unlocking the Power of Switch Statements 🎛️

AND (`&&`) Operator

OR (`||`) Operator

🌟 Nullish Coalescing Operator (`??`): Handling `null` or `undefined`