5 JavaScript Array Methods Every Frontend Developer Should Know
# 5 JavaScript Array Methods Every Frontend Developer Should Know (With Real Examples)
If you work with JavaScript, you deal with arrays every day. Product lists, cart items, user comments, search results — they are all arrays. The question is: do you know how to work with them properly, or are you still handling everything with `for` loops?
I am Reza, a frontend developer with around ten years of WordPress and four years of React and Next.js experience. One thing I have learned well over the years: the difference between a junior and a professional developer lives in these details. Someone who truly knows `map`, `filter` and `reduce` writes cleaner code, ships fewer bugs and works faster.
In this article we go through five of the most-used array methods with real examples from a shop project — the same stuff I deal with every week in client projects.
## 1. map: Transform Every Item
`map` runs a function on each array item and returns a **new array**. Key point: the original array stays untouched.
```jsconst prices = [100000, 250000, 80000, 420000];
// Apply 10% discount to all pricesconst discounted = prices.map(price => price * 0.9);
console.log(discounted); // [90000, 225000, 72000, 378000]console.log(prices); // [100000, 250000, 80000, 420000] — unchanged```
When to use it? Whenever you want to build a new list from an existing one: turning a product list into display cards, or converting dates to another format. If your output is an array of the same length as the input, `map` is the right pick.
**Common mistake:** some people use `map` just for looping and throw away its output. If you do not need a new array, `map` is the wrong tool — go for `forEach`.
## 2. filter: Keep Only What Matches
`filter` keeps the items that pass a condition and drops the rest. Its output is also a **new array**, equal in length or shorter than the input.
```jsconst products = [ { name: 'Headphones', price: 850000, inStock: true }, { name: 'Mouse', price: 320000, inStock: false }, { name: 'Keyboard', price: 1200000, inStock: true },];
// Only in-stock itemsconst available = products.filter(p => p.inStock);
// Only in-stock items under one millionconst cheapAvailable = products.filter(p => p.inStock && p.price < 1000000);```
In online shops built with WooCommerce or Next.js, `filter` is the backbone of sidebar filters: by price, brand, availability, color. Combining several conditions with `&&` is completely normal and keeps the code readable.
**Common mistake:** forgetting that `filter` creates a new array. If you do not reassign it or store it in a new variable, nothing has effectively happened.
## 3. reduce: Turn the Whole Array Into One Value
`reduce` is the most powerful and the most intimidating method on this list. It takes the whole array and turns it into **a single value** — a number, a string, or even a full object.
```jsconst cart = [ { name: 'Headphones', price: 850000, qty: 1 }, { name: 'Mouse', price: 320000, qty: 2 },];
// Cart totalconst total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(total); // 1490000```
What is that trailing `0`? The initial value of `sum`. Skip it and you will get an error on an empty array. My rule: always pass an initial value. Always.
Real-world uses of `reduce` go far beyond summing: grouping items by category, counting occurrences, building a lookup object from an array. Whenever you feel stuck with `map` and `filter`, the answer is probably `reduce`.
**Common mistake:** overcomplicating it. If the function inside `reduce` grows beyond three or four lines, step back — a chain of `filter` and `map` might read better.
## 4 & 5. find and some: Search and Check
I cover these two together because many people mix them up.
`find` returns the **first** item that passes the condition (the item itself, not an array). If nothing matches, it gives `undefined`.
`some` only answers a true/false question: is there **at least one** item that passes the condition?
```jsconst users = [ { name: 'Ali', age: 25 }, { name: 'Sara', age: 17 },];
// First user over 18const adult = users.find(u => u.age >= 18);console.log(adult); // { name: 'Ali', age: 25 }
// Any user under 18?const hasMinor = users.some(u => u.age < 18);console.log(hasMinor); // true```
The subtle but important difference: `find` looks for a **thing**, `some` looks for a **yes/no answer**. If you only need to know whether something exists (for example, does the cart contain an out-of-stock item?), `some` is both faster and more expressive — it stops at the first match instead of scanning the rest.
**Common mistake:** using `filter()[0]` instead of `find`. It is slower (scans the whole array) and uglier. If you want a single item, use `find`.
## Chaining Them: Where the Real Power Is
In a real project you never use one method alone. Watch:
```jsconst totalDiscounted = products .filter(p => p.inStock) // only in-stock .map(p => p.price * 0.9) // apply discount .reduce((sum, price) => sum + price, 0); // sum up```
Three lines, three steps, fully readable. The same logic with a `for` loop and helper variables would be at least ten lines with an `if` and a `push` mixed in. That is the difference between clean code and messy code.
One technical note: chain order matters. Filter first, then map — this way `map` runs on fewer items, which genuinely matters for performance on large lists.
## Summary
| Method | Input | Output | Use when ||---|---|---|---|| `map` | array | same-length array | transforming every item || `filter` | array | shorter array | selecting items by condition || `reduce` | array | a single value | summing, grouping, aggregating || `find` | array | one item or undefined | locating the first match || `some` | array | true / false | checking a condition exists |
If you have been solving everything with `for` until today, start asking yourself for each new task: "which one of these five does this job?" After two weeks your hands will reach for them on their own.
## FAQ
**What is the difference between `map` and `forEach`?**`map` returns a new array and is for data transformation; `forEach` returns nothing and is only for running an operation per item (logging, saving to a database). If you are not using `map`'s output, you are doing it wrong.
**When do I actually need `reduce`?**Whenever your output is a single thing rather than a list: a cart total, an average score, grouping users by city, or building an object from an array. If `map` and `filter` get the job done, do not reach for `reduce` — simplicity always wins.
**Do these methods mutate the original array?**No. All five are immutable — they leave the original array alone and produce new output (except `reduce`, which does not return an array at all). That is exactly why they are so popular in React and state management: they never touch state directly.
**Which is fastest on very large arrays?**`some` and `find` stop at the first match, so they are more efficient on big data. In chains, filter first so `map` runs on fewer items. But honestly: below a few thousand items you will not feel the difference — readability matters more.
---
**I am Reza Barzakhi, a frontend developer.** If your site needs a technical review, or you want your shop built with React or WordPress, [the first consultation is free](https://rezabarzakhi.ir/en). You can also see my portfolio on the same site.
If you work with JavaScript, you deal with arrays every day. Product lists, cart items, user comments, search results — they are all arrays. The question is: do you know how to work with them properly, or are you still handling everything with `for` loops?
I am Reza, a frontend developer with around ten years of WordPress and four years of React and Next.js experience. One thing I have learned well over the years: the difference between a junior and a professional developer lives in these details. Someone who truly knows `map`, `filter` and `reduce` writes cleaner code, ships fewer bugs and works faster.
In this article we go through five of the most-used array methods with real examples from a shop project — the same stuff I deal with every week in client projects.
## 1. map: Transform Every Item
`map` runs a function on each array item and returns a **new array**. Key point: the original array stays untouched.
```jsconst prices = [100000, 250000, 80000, 420000];
// Apply 10% discount to all pricesconst discounted = prices.map(price => price * 0.9);
console.log(discounted); // [90000, 225000, 72000, 378000]console.log(prices); // [100000, 250000, 80000, 420000] — unchanged```
When to use it? Whenever you want to build a new list from an existing one: turning a product list into display cards, or converting dates to another format. If your output is an array of the same length as the input, `map` is the right pick.
**Common mistake:** some people use `map` just for looping and throw away its output. If you do not need a new array, `map` is the wrong tool — go for `forEach`.
## 2. filter: Keep Only What Matches
`filter` keeps the items that pass a condition and drops the rest. Its output is also a **new array**, equal in length or shorter than the input.
```jsconst products = [ { name: 'Headphones', price: 850000, inStock: true }, { name: 'Mouse', price: 320000, inStock: false }, { name: 'Keyboard', price: 1200000, inStock: true },];
// Only in-stock itemsconst available = products.filter(p => p.inStock);
// Only in-stock items under one millionconst cheapAvailable = products.filter(p => p.inStock && p.price < 1000000);```
In online shops built with WooCommerce or Next.js, `filter` is the backbone of sidebar filters: by price, brand, availability, color. Combining several conditions with `&&` is completely normal and keeps the code readable.
**Common mistake:** forgetting that `filter` creates a new array. If you do not reassign it or store it in a new variable, nothing has effectively happened.
## 3. reduce: Turn the Whole Array Into One Value
`reduce` is the most powerful and the most intimidating method on this list. It takes the whole array and turns it into **a single value** — a number, a string, or even a full object.
```jsconst cart = [ { name: 'Headphones', price: 850000, qty: 1 }, { name: 'Mouse', price: 320000, qty: 2 },];
// Cart totalconst total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
console.log(total); // 1490000```
What is that trailing `0`? The initial value of `sum`. Skip it and you will get an error on an empty array. My rule: always pass an initial value. Always.
Real-world uses of `reduce` go far beyond summing: grouping items by category, counting occurrences, building a lookup object from an array. Whenever you feel stuck with `map` and `filter`, the answer is probably `reduce`.
**Common mistake:** overcomplicating it. If the function inside `reduce` grows beyond three or four lines, step back — a chain of `filter` and `map` might read better.
## 4 & 5. find and some: Search and Check
I cover these two together because many people mix them up.
`find` returns the **first** item that passes the condition (the item itself, not an array). If nothing matches, it gives `undefined`.
`some` only answers a true/false question: is there **at least one** item that passes the condition?
```jsconst users = [ { name: 'Ali', age: 25 }, { name: 'Sara', age: 17 },];
// First user over 18const adult = users.find(u => u.age >= 18);console.log(adult); // { name: 'Ali', age: 25 }
// Any user under 18?const hasMinor = users.some(u => u.age < 18);console.log(hasMinor); // true```
The subtle but important difference: `find` looks for a **thing**, `some` looks for a **yes/no answer**. If you only need to know whether something exists (for example, does the cart contain an out-of-stock item?), `some` is both faster and more expressive — it stops at the first match instead of scanning the rest.
**Common mistake:** using `filter()[0]` instead of `find`. It is slower (scans the whole array) and uglier. If you want a single item, use `find`.
## Chaining Them: Where the Real Power Is
In a real project you never use one method alone. Watch:
```jsconst totalDiscounted = products .filter(p => p.inStock) // only in-stock .map(p => p.price * 0.9) // apply discount .reduce((sum, price) => sum + price, 0); // sum up```
Three lines, three steps, fully readable. The same logic with a `for` loop and helper variables would be at least ten lines with an `if` and a `push` mixed in. That is the difference between clean code and messy code.
One technical note: chain order matters. Filter first, then map — this way `map` runs on fewer items, which genuinely matters for performance on large lists.
## Summary
| Method | Input | Output | Use when ||---|---|---|---|| `map` | array | same-length array | transforming every item || `filter` | array | shorter array | selecting items by condition || `reduce` | array | a single value | summing, grouping, aggregating || `find` | array | one item or undefined | locating the first match || `some` | array | true / false | checking a condition exists |
If you have been solving everything with `for` until today, start asking yourself for each new task: "which one of these five does this job?" After two weeks your hands will reach for them on their own.
## FAQ
**What is the difference between `map` and `forEach`?**`map` returns a new array and is for data transformation; `forEach` returns nothing and is only for running an operation per item (logging, saving to a database). If you are not using `map`'s output, you are doing it wrong.
**When do I actually need `reduce`?**Whenever your output is a single thing rather than a list: a cart total, an average score, grouping users by city, or building an object from an array. If `map` and `filter` get the job done, do not reach for `reduce` — simplicity always wins.
**Do these methods mutate the original array?**No. All five are immutable — they leave the original array alone and produce new output (except `reduce`, which does not return an array at all). That is exactly why they are so popular in React and state management: they never touch state directly.
**Which is fastest on very large arrays?**`some` and `find` stop at the first match, so they are more efficient on big data. In chains, filter first so `map` runs on fewer items. But honestly: below a few thousand items you will not feel the difference — readability matters more.
---
**I am Reza Barzakhi, a frontend developer.** If your site needs a technical review, or you want your shop built with React or WordPress, [the first consultation is free](https://rezabarzakhi.ir/en). You can also see my portfolio on the same site.