🥊Mastering Arrays in JavaScript: Saitama's one punch code Guide⚡
🎬 Prologue: The Crisis Begins!
Table of contents
- 🔥 one punch code begins
- 📝 Chapter0️⃣ : Creating the Hero Database (Arrays!)
- 🔎Chapter1️⃣: forEach()- Display All Characters
- 🤣 Meme Point:
- 🏆Chapter2️⃣**: filter() – Finding the S-Class Heroes!**
- 🤣 Meme Point:
- ⚡ Chapter3️⃣: sort() – Sorting by Power Level!
- 🤣 Meme Point:
- 🤖 Chapter4️⃣: find() – The Main Villain!
- 🤣 Meme Point:
- 👹 Chapter 5️⃣: Finding All The Villains! .map()
- 🤣 Meme Point:
- 👿Chapter7️⃣:Removing the Last Villain using .pop()
- 🤣 Meme Point:
- Chapter 8️⃣: Removing the Middle Villain using .splice()
- 🤣 Meme Point:
- ☠Chapter9️⃣: Removing Boros Using .findIndex() and .splice()
- 🤣 Meme Point:
- 🦸♂️Chapter🔟: Adding a New Hero using .push()
- 🤣 Meme Point:
- 🎬 The Battle is Over!
- 📝 Cheat Sheet Of Array Methods Used in One Punch Code!!
😱 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);