# Top 10 JavaScript Array Methods You Probably Haven't Used Yet

*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?

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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:

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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?

```javascript
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](https://github.com/prajapatisaurabh) · [LinkedIn](https://linkedin.com/in/saurabh-prajapati) · 📧 [saurabhprajapati120@gmail.com](mailto:saurabhprajapati120@gmail.com) · *Available for work*