By Saurabh Prajapati | IBM Software Engineer & Full-Stack Developer
Wait — Do You Really Know JavaScript Arrays?
Before we dive in, let me throw a quick challenge at you. What does this code output?
let fruits = ['apple', 'banana', 'mango'];
fruits.favorite = 'orange';
fruits[5] = "mango";
console.log(fruits.length);
console.log(fruits);
Drop your answer in the comments. I'll explain the twist at the end. 😄
So What Even Is an Array?
Simple answer: an array is a way to store multiple values in one variable.
let fruits = ["apple", "banana", "orange"];
let mixed = ["apple", 123, false, { name: "xyz" }];
You can throw anything in there — strings, numbers, booleans, even objects. JavaScript doesn't complain.
Here's something that blew my mind when I first learned it: arrays are objects in JavaScript. That's why they have built-in properties and methods. And that's also why the code challenge above behaves the way it does — you can add custom properties to arrays just like objects!
Now let's get to the fun part.
The 10 Array Methods Worth Knowing
#1 — copyWithin()
I'd never heard of this one until recently. It copies part of the array to another position within the same array — without changing its length.
A fun way to think about it: imagine a terminal command history that auto-shifts when you add a new command.
let history = [
"npm start",
"git status",
"git add .",
"git commit"
];
history.copyWithin(0, 1);
history[history.length - 1] = "git push";
console.log(history);
// ["git status", "git add .", "git commit", "git push"]
It "shifts everything left" and makes room for the new entry at the end. Honestly, weird at first — but kind of clever once you see it in action.
#2 — every()
This one checks if all elements pass a condition. Think of it like a quality gate in CI/CD.
const files = [
{ fileName: "login.js", coverage: 92 },
{ fileName: "signup.js", coverage: 88 },
{ fileName: "dashboard.js", coverage: 95 },
{ fileName: "profile.js", coverage: 90 }
];
const isCoverageGood = files.every(file => file.coverage >= 80);
console.log(isCoverageGood); // true
If even one file dips below 80%, it returns false. Super clean for validation logic.
#3 — reduce()
Okay, this one most developers have seen — but not everyone really gets it. The idea: take a whole array and boil it down to one value.
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 15
Think of acc as your running total, and curr as the current item being processed. Once it clicked for me, I started using reduce() everywhere — for summing, grouping, building objects, you name it.
#4 — reduceRight()
Same idea as reduce(), but it starts from the right side of the array. Here's a fun example:
const words = ["ChaiCode", "the", "to", "Welcome"];
const sentence = words.reduceRight((acc, curr) => acc + " " + curr);
console.log(sentence); // "Welcome to the ChaiCode"
The array is in reverse order, and reduceRight() assembles it correctly. I wish I'd known this earlier — I used to reverse arrays manually first. 🤦
#5 — some()
While every() checks if all elements pass, some() checks if at least one does. Great for role-based access checks.
const user = {
isLoggedIn: true,
roles: ["member", "editor"]
};
const requiredRoles = ["admin", "editor"];
const hasAccess = user.isLoggedIn && user.roles.some(role => requiredRoles.includes(role));
console.log(hasAccess); // true
The user has "editor" in their roles, and that matches one of the required roles — so access granted. Clean, readable, and practical.
#6 — with()
This is a newer one and it's really handy. It returns a new array with one item replaced at a specific index — without mutating the original.
const students = ["Saurabh", "Hitesh", "Piyush"];
const updatedStudents = students.with(0, "Anirudh");
console.log(updatedStudents); // ["Anirudh", "Hitesh", "Piyush"]
console.log(students); // ["Saurabh", "Hitesh", "Piyush"] — unchanged!
When working with React state or any immutable data pattern, this is a lifesaver. No more spreading and remapping just to change one element.
#7 — shift()
This removes the first element from an array and returns it.
const numbers = [1, 2, 3, 4, 5];
const first = numbers.shift();
console.log(first); // 1
console.log(numbers); // [2, 3, 4, 5]
It does mutate the original array though, so use with care. Think of it like a queue — first in, first out.
#8 — unshift()
The opposite of shift() — it adds elements to the beginning of an array.
let presenters = ["Saurabh", "Pradip", "Yash"];
presenters.unshift("Rahul", "Amit");
console.log(presenters);
// ["Rahul", "Amit", "Saurabh", "Pradip", "Yash"]
Also mutates the original. I use this when I need to prepend items dynamically — like adding a "pinned" item to a list.
#9 — flatMap()
This one is a combo of map() and flat(). It maps over each element and then flattens the result by one level.
const numbers = [1, 2, [3, 4], 5];
const result = numbers.flatMap(n => Array.isArray(n) ? n : n);
console.log(result); // [1, 2, 3, 4, 5]
Where it really shines is when your map produces arrays and you don't want nested arrays in the output. I used this while building a chat message parser — each message could expand into multiple UI elements, and flatMap() kept things clean.
#10 — includes()
Simple but essential. Checks if an array contains a specific value.
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false
Cleaner than using indexOf() !== -1 — which is what I used to do before I discovered this. 😅
The Challenge Answer
Remember the puzzle from the beginning?
let fruits = ['apple', 'banana', 'mango'];
fruits.favorite = 'orange';
fruits[5] = "mango";
console.log(fruits.length); // 6
console.log(fruits);
// ['apple', 'banana', 'mango', empty × 2, 'mango', favorite: 'orange']
The length is 6 because we set fruits[5] — JavaScript creates "empty" slots for the gaps. And fruits.favorite is a property on the array object, so it doesn't affect length at all. Arrays in JavaScript are more flexible (and weird) than they look!
Key Takeaways
copyWithin() — shift data within the same array
every() / some() — check conditions across elements
reduce() / reduceRight() — collapse arrays into a single value
with() — immutable single-element replacement (underrated!)
shift() / unshift() — add/remove from the front
flatMap() — map + flatten in one step
includes() — clean existence check
About the Author
Saurabh Prajapati is a Full-Stack Software Engineer at IBM India Software Lab, where he builds cloud-native enterprise solutions on Maximo. He's passionate about GenAI, React, and modern web tech — and loves documenting his learning journey for fellow developers.
🔗 GitHub · LinkedIn · 📧 saurabhprajapati120@gmail.com · Available for work
