Array Methods
A complete guide to JavaScript array methods — splice, flat, flatMap, findIndex, every, some, Array.from and more, each with a brief explanation and live examples.
A complete guide to JavaScript array methods — splice, flat, flatMap, findIndex, every, some, Array.from and more, each with a brief explanation and live examples. This hands-on tutorial focuses on practical implementation of array methods concepts.
Array Methods Deep Dive 🔧
You already know map, filter, and reduce. Now let's cover the full toolkit — every important array method with a brief description and examples.
⚠️ Unlike strings, arrays are mutable — many methods modify the original array in place!
1. Mutating Methods (Change the Original) ⚠️
These methods directly modify the array.
| Method | What it does |
|---|---|
| splice(start, deleteCount?, ...items) | Removes/replaces elements AND optionally inserts new ones at start |
| reverse() | Reverses the array in place |
| fill(value, start?, end?) | Fills elements from start to end with value |
| copyWithin(target, start?, end?) | Copies part of the array to another position within it |
2. Non-Mutating Methods (Return New Array) ✅
These leave the original unchanged and always return a new array.
| Method | What it does |
|---|---|
| slice(start?, end?) | Returns a shallow copy of a portion (original unchanged) |
| concat(...arrays) | Joins two or more arrays into a new array |
| flat(depth?) | Flattens nested arrays up to depth levels (default: 1) |
| flatMap(fn) | map() + flat(1) in one efficient step |
| join(separator?) | Joins all elements into a string |
| at(index) | Returns element at index; supports negative indices |
3. Search & Position Methods 🔍
Find elements or their positions inside an array.
| Method | What it does |
|---|---|
| indexOf(value, from?) | Returns index of first strict match, or -1 |
| lastIndexOf(value, from?) | Returns index of last match, or -1 |
| includes(value, from?) | Returns true if value exists |
| find(fn) | Returns the first element that passes the test |
| findIndex(fn) | Returns the index of the first element that passes, or -1 |
| findLast(fn) | Returns the last element that passes the test |
| findLastIndex(fn) | Returns the index of the last element that passes, or -1 |
4. Test Methods ✔️
These return a boolean based on whether elements pass a condition.
| Method | What it does |
|---|---|
| every(fn) | Returns true if ALL elements pass the test |
| some(fn) | Returns true if at least one element passes the test |
| Array.isArray(value) | Returns true if value is an array (static method) |
5. Creation Methods 🏗️
Static methods on the Array class to create arrays from other data.
| Method | What it does |
|---|---|
| Array.from(iterable, mapFn?) | Creates a new array from any iterable (string, Set, Map, NodeList) |
| Array.of(...values) | Creates a new array from arguments (avoids new Array(3) ambiguity) |
Practical Example: Data Pipeline 📊
AI Mentor
Confused about "JavaScript array methods: splice, flat, flatMap, findIndex, every, some, Array.from"? Ask our AI mentor for a simplified explanation.
Quiz
Quiz
Question 1 of 5What is the key difference between slice() and splice()?
Key Takeaways
✅ Mutating: splice, reverse, fill — change the original array.
✅ Non-mutating: slice, concat, flat, flatMap, join — return new arrays.
✅ Search: findIndex, findLast, includes — locate by value or condition.
✅ Test: every (all pass?) and some (any pass?) — powerful boolean guards.
✅ Create: Array.from converts iterables; Array.of creates from arguments.
What's Next?
Modern JavaScript gives us powerful ways to work with arrays using Spread, Rest, and Destructuring — let's master those next!
Keep coding! 🚀