🥊Mastering Arrays in JavaScript: Saitama's one punch code Guide⚡

🥊Mastering Arrays in JavaScript: Saitama's one punch code Guide⚡

🎬 Prologue: The Crisis Begins!

😱 KING was ranked #1 in power! (We all know he’s just lucky! 😂)

💻 Dr. Kuseno, the genius scientist, turned to Genos:
🦾 "Genos, we need a coder to fix this mess before the database crashes!"

🤔 Genos thought for a second... then immediately bowed to his sensei, Saitama.
🥚 "Master, only your legendary One Punch Code can bring order to this chaos!"

Saitama sighed. 😪 "Ugh, fine. But let's make it quick. There’s a sale at the supermarket today." 🏪💨

And so, the battle against bad data begins! ⚔

🔥 one punch code begins

"A hero doesn’t seek power… but in JavaScript, we must harness it!" – Saitama 💥

Saitama cracked his knuckles. "Time to clean up this mess, one function at a time!"

📝 Chapter0️⃣ : Creating the Hero Database (Arrays!)

First, Saitama reloaded the Hero Association’s data into an array:

const characters = [
    { name: "Saitama", rank: "B-Class", power: 999999, health: 100 }, // One Punch = Game Over!🥊
    { name: "Genos", rank: "S-Class", power: 8500, health: 90 }, // Robot with a heart… and explosive arms!🔥
    { name: "Tatsumaki", rank: "S-Class", power: 9500, health: 85 },//tiny but terrifying! Floating destruction!🤏
    { name: "Bang", rank: "S-Class", power: 9000, health: 80 }, //Grandpa with hands of steel! 🏋️‍♂️
    { name: "King", rank: "S-Class", power: 100, health: 100 }, // Just lucky 😆
    { name: "Garou", rank: "Villain", power: 9200, health: 95 }, // Wannabe monster, actually a beast!👹
    { name: "Boros", rank: "Villain", power: 9800, health: 98 }, // Interstellar overlord looking for a challenge!👽
    { name: "Speed-o’-Sound Sonic", rank: "Villain", power: 7500, health: 88 }, // Fast… but always outclassed!💨
    { name: "Mumen Rider", rank: "C-Class", power: 50, health: 75 }, // The real hero! Never gives up! 💪
    { name: "Metal Bat", rank: "A-Class", power: 8700, health: 82 } // The angrier, the stronger! 😡
];

🔎Chapter1️⃣: forEach()- Display All Characters

🦸‍♂️ Mission: Show all characters in the database

console.log("\n All One Punch Man Characters:");
characters.forEach(char => console.log(`${char.name} - Rank: ${char.rank}, Power: ${char.power}`));

📌 Output:

 All One Punch Man Characters:
Saitama - Rank: B-Class, Power: 999999
Genos - Rank: S-Class, Power: 8500
Tatsumaki - Rank: S-Class, Power: 9500
Bang - Rank: S-Class, Power: 9000
King - Rank: S-Class, Power: 100
Garou - Rank: Villain, Power: 9200
Boros - Rank: Villain, Power: 9800
Speed-o’-Sound Sonic - Rank: Villain, Power: 7500
Mumen Rider - Rank: C-Class, Power: 50
Metal Bat - Rank: A-Class, Power: 8700

🤣 Meme Point:

"Why is King still here? Must be a bug…"

🏆Chapter2️⃣**: filter() – Finding the S-Class Heroes!**

Genos needed to assemble the strongest heroes to fight the bug monster! 🦸‍♂️

const sClassHeroes = characters.filter(char => char.rank === "S-Class");
console.log("\n S-Class Heroes:", sClassHeroes);

📌 Output:

 S-Class Heroes:
 { name: 'Genos', rank: 'S-Class', power: 8500, health: 90 },
  { name: 'Tatsumaki', rank: 'S-Class', power: 9500, health: 85 },
  { name: 'Bang', rank: 'S-Class', power: 9000, health: 80 },
  { name: 'King', rank: 'S-Class', power: 100, health: 100 } ]

🤣 Meme Point:

"Wait… King?? Never mind, we’ll let him stay.

⚡ Chapter3️⃣: sort() – Sorting by Power Level!

Genos wanted to rank heroes by power level to prepare for battle.

const sortedByPower = [...characters].sort((a, b) => b.power - a.power);
console.log("\n Sorted by Power:", sortedByPower);

📌 Output:

 Sorted by Power:
[ { name: 'Saitama', power: 999999 },
  { name: 'Boros', power: 9800 },
  { name: 'Tatsumaki', power: 9500 },
  { name: 'Garou', power: 9200 },
  { name: 'Bang', power: 9000 } ... ]
]

🤣 Meme Point:

🤯 "Saitama is on another level... as expected."

🤖 Chapter4️⃣: find() – The Main Villain!

💀 The Bug Monster's true form was revealed! It was hiding in the data all along!

const boros = characters.find(char => char.name === "Boros");
console.log("\n Main Villain Identified:", boros);

📌 Output:

 Main Villain Identified: { name: 'Boros', rank: 'Villain', power: 9800, health: 98 }

🤣 Meme Point:

👀 "Boros is back?! This is going to be fun…

👹 Chapter 5️⃣: Finding All The Villains! .map()

Genos wanted to find all the villains from the Hero Association’s data:

const villainIndexes = characters.map((char, index) => char.rank === "Villain" ? index : -1).filter(index => index !== -1);
console.log("\n Villain Indexes:", villainIndexes);

📌 Output:

 Villain Indexes: [5, 6, 7]

🤣 Meme Point:

Genos: We've identified the villains!"

👿Chapter7️⃣:Removing the Last Villain using .pop()

Removing the last villain using pop()

characters.pop();
console.log("\n Removed Last Villain:", characters)

📌 Output:

 Removed Last Villain: (Speed-o’-Sound Sonic was kicked out!)

🤣 Meme Point:

Speed-o’-Sound Sonic: "I’ll be back faster than the speed of light!" 🏃💨
Saitama: "Yeah, yeah, whatever." 😴

Chapter 8️⃣: Removing the Middle Villain using .splice()

Remove another villain using .splice()

const villainToRemove = characters.findIndex(char => char.rank === "Villain"); if (villainToRemove !== -1) { characters.splice(villainToRemove, 1); } 
console.log("\n Removed Another Villain", characters);

📌 Output:

 Removed Another Villain

🤣 Meme Point:

Garou: "I am the strongest monster!" 💀
JavaScript .splice(): "Nah, bro, you’re out!" ✂️

☠Chapter9️⃣: Removing Boros Using .findIndex() and .splice()

Find Boros index and remove him using .splice()

const borosIndex = characters.findIndex(char => char.name === "Boros");
if (borosIndex !== -1) {
    characters.splice(borosIndex, 1);
}
console.log("\n Boros has been defeated!", characters);

📌 Output:

Boros has been defeated

🤣 Meme Point:

Boros: "I am the ultimate warrior of the universe!" 👿
Saitama: Yawns "OK." 💨💥 One Punch!

🦸‍♂️Chapter🔟: Adding a New Hero using .push()

Add a new hero using .push()

characters.push({ name: "Blast", rank: "S-Class", power: 10000, health: 99 });
console.log("\n Added New Hero", characters);

📌 Output:

 Added New Hero

🤣 Meme Point:

Genos: "Master! A new S-Class hero joined us!"
Saitama: "Cool. Does he know where the best ramen shop is?" 🍜😴

🎬 The Battle is Over!

🔹 All villains have been purged!
🔹 Heroes have been sorted by power!
🔹 A new hero has joined the fight!
🔹 The Hero Association Database is now clean!

👀 Meme Moment:
💀 King: "Hah! I knew they couldn't beat me!"
🦸 Saitama: "King, you didn't do anything..."

📝 Cheat Sheet Of Array Methods Used in One Punch Code!!

1️⃣ forEach() – Listing All Heroes
🦸‍♂️ Used to display every character in the array.
📌 "Hey, let’s roll call our heroes!"

2️⃣ filter() – Finding the S-Class Heroes
🔍 Filters out only the strongest heroes!
📌 "King got in here by accident… but whatever."

3️⃣ sort() – Sorting by Power Level
⚡ Sorts characters in descending order based on power.
📌 "Saitama is at the top. Of course. No surprises here."

4️⃣ find() – Identifying the Main Villain
👀 Finds Boros, the strongest villain.
📌 "Oh no, he’s back again! Time for One Punch!"

5️⃣ map() – Finding All the Villains' Indexes
🕵️ Creates an array of villain indexes for easy removal.
📌 "Genos is ready to eliminate them with precision!"

6️⃣ pop() – Removing the Last Villain
💥 Removes the last villain from the array.
📌 "Speed-o’-Sound Sonic got yeeted out of the database!"

7️⃣ splice() – Removing Villains from Specific Positions
✂️ Used to remove villains from the middle of the array.
📌 "Garou: 'I’m the strongest!' – JavaScript: 'No, you’re out!'"

8️⃣ findIndex() + splice() – Defeating Boros
💀 Finds Boros' index and removes him.
📌 "Boros: 'I am the ultimate warrior!' – Saitama: 'OK.' 💨💥"

9️⃣ push() – Adding a New Hero
🔥 Adds a new hero, Blast, to the array.
📌 "A new S-Class hero has arrived! But does he know where the ramen shop is? 🍜"

🎉 The hero database is now clean! The world is safe (and properly sorted);