This content originally appeared on DEV Community and was authored by Gouranga Das Samrat
You wrote some code. You ran it.
And then your array went from a list of users to an angry collection of undefined
, NaN
And more bugs than a summer camping trip.
Staring at map
, filter
, and reduce
like they were ancient scrolls written in Elvish.
Copy-pasting from Stack Overflow like a caffeinated zombie.
Wondering why the heck splice
just murdered half my data.
But here’s the truth: mastering arrays is non-negotiable.
If you’re fumbling with arrays, you’re fumbling with everything.
Web apps, APIs, UIs — they all depend on your ability to tame this glorious beast.
So buckle up.
I’m about to drop 25 methods that will make you look at arrays like a surgeon looks at a scalpel.
Edited by me
1. map()
– Because Loops Are for Cavemen
You want to transform every item in an array?
Don’t go forEach
your way to hell.
map
It is concise, expressive, and doesn’t mutate your data. It’s like therapy for arrays.
const names \= \['alice', 'bob', 'charlie'\];
const upper \= names.map(name \=\> name.toUpperCase());
2. filter()
– Marie Kondo for Arrays
If it doesn’t spark joy (or match your condition), toss it out.
const scores \= \[80, 45, 90, 60\];
const passed \= scores.filter(score \=\> score \>= 60);
3. reduce()
– The Swiss Army Knife
Reduce is terrifying. Until it’s not.
It can do everything: sum, flatten, group, and even recreate most other methods. Just don’t overuse it. You’re not a wizard.
const total \= \[10, 20, 30\].reduce((acc, val) \=\> acc \+ val, 0);
4. forEach()
– When You Want Side Effects (Like Printing Stuff)
It doesn’t return anything. And that’s the point.
Want to log something? Send data? Use forEach
. Just don’t pretend it’s map
.
5. find()
– First Come, First Served
Need the first match? This is your guy.
const users \= \[{id: 1}, {id: 2}\];
const user \= users.find(u \=\> u.id \=== 2);
6. findIndex()
– For When find()
Isn’t Good Enough
Sometimes you don’t need the value.
You need its address. Like a bounty hunter.
7. some()
– Just One? Good Enough
Returns true
if any item passes the test.
Like asking, “Is anyone here a React dev?”
8. every()
– All or Nothing
Opposite of some()
. Like checking if everyone RSVPed.
(They didn’t.)
9. includes()
– Truth or Dare
Checks for primitive presence. But don’t expect it to work on objects.
JS is weird like that.
10. indexOf()
– The OG Search Tool
Classic, but cranky. Works for primitives only.
Otherwise, use findIndex()
.
11. lastIndexOf()
– Because Sometimes You Want the Last One
Useful when duplicates sneak into your array like uninvited party guests.
12. concat()
– Merge Like a Boss
Combines arrays. Doesn’t mutate originals.
Like a classy friend.
const merged \= \[1, 2\].concat(\[3, 4\]);
13. flat()
– Flatten the Madness
Especially useful when your array looks like it fell down a flight of stairs.
const messy \= \[1, \[2, \[3\]\]\];
const clean \= messy.flat(2);
14. flatMap()
– Combo Move!
First map, then flatten. Efficient and elegant.
Like you on a good day.
15. slice()
– Non-Destructive Surgery
Need a piece of an array?
slice
Doesn’t touch the original.
A surgeon with a steady hand.
16. splice()
– Chaos Incarnate
It mutates. It deletes. It inserts.
It’s powerful and dangerous. Use with caution.
17. sort()
– Alphabet Soup by Default
Sorts strings beautifully. Numbers? Not so much.
Always pass a comparison function.
[10, 5, 20].sort((a, b) => a – b);
18. reverse()
– Mirror, Mirror
Flips the array in place. Great for timelines.
Dangerous for shared state.
19. join()
– Your Array, Now a String
Want to display stuff? join
Is your friend?
[‘Hi’, ‘there’].join(‘ ‘);
20. split()
– join()
s Twin Evil Twin
Takes a string and turns it into an array.
Usually seen lurking with CSVs.
21. fill()
– Fake It Till You Make It
Fills an array with static values.
Good for tests, placeholders, or pure mischief.
Array(3).fill(‘JS’); // [‘JS’, ‘JS’, ‘JS’]
22. copyWithin()
– The Clone Wars
Copies part of an array within itself.
Honestly? Rarely used. But impressive at parties.
23. Array.from()
– Convert Anything Into an Array
Great for DOM nodes, sets, or when life gives you array-like lemons.
24. Array.isArray()
– The Bouncer
Before you manipulate, verify.
This method keeps your code from embarrassing itself.
25. at()
– Negative Indexes, Finally
Grabs the item at a position, even from the end.
About time, JavaScript.
const arr \= \[1, 2, 3\];
arr.at(-1); // 3
Finally, Stop copying and Pasting, Start Mastering
If you find yourself Googling “JavaScript loop through array” in 2025, we need to talk.
Arrays aren’t just a data type.
They’re your playground, your battlefield, your secret weapon.
Know them. Trust them. Abuse them (gently).
Let this list be your cheat sheet, your bible, your comeback to that one dev who thinks they know everything.
And hey — if you loved this, disagreed with it, or want to fight me about reduce()
being overrated, drop a comment.
Hit the claps.
Let’s argue (productively) in the comments.
Because code is fun.
But coding together? That’s where the magic is.
This content originally appeared on DEV Community and was authored by Gouranga Das Samrat