🔢 JavaScript Arrays: The Complete Guide to Methods
Arrays are one of the most fundamental data structures in JavaScript.
Whether you are working with lists, collections of objects, or results from an API, mastering Array methods will make your code cleaner, faster, and easier to maintain.
In this article, we’ll go through all major Array methods, group them by functionality, and show examples you can use right away.
🔗 Reference: MDN Web Docs – Array
📦 Why Arrays Matter
An array in JavaScript is an ordered list of values.
Arrays can hold numbers, strings, objects, or even other arrays.
They also come with a rich set of built-in methods that allow you to add, remove, transform, search, and iterate over data.
🔤 Array Methods by Category
1. 🔄 Adding and Removing Elements
| Method | Description | Example |
|---|---|---|
push() |
Add element(s) to the end | [1,2].push(3) // [1,2,3] |
pop() |
Remove last element | [1,2,3].pop() // [1,2] |
unshift() |
Add element(s) to the start | [2,3].unshift(1) // [1,2,3] |
shift() |
Remove first element | [1,2,3].shift() // [2,3] |
splice(start, deleteCount, ...items) |
Add/remove/replace elements | arr.splice(1,1,"x") |
2. 🔍 Searching & Checking
| Method | Description | Example |
|---|---|---|
indexOf() |
First index of a value | ["a","b"].indexOf("b") // 1 |
lastIndexOf() |
Last index of a value | ["a","b","a"].lastIndexOf("a") // 2 |
includes() |
Checks if value exists | [1,2,3].includes(2) // true |
find(fn) |
First element matching condition | [1,2,3].find(x=>x>1) // 2 |
findIndex(fn) |
Index of first match | [1,2,3].findIndex(x=>x>1) // 1 |
some(fn) |
At least one passes test | [1,2,3].some(x=>x>2) // true |
every(fn) |
All elements pass test | [1,2,3].every(x=>x>0) // true |
3. 🔁 Iteration
| Method | Description | Example |
|---|---|---|
forEach(fn) |
Runs function for each element | [1,2,3].forEach(x=>console.log(x)) |
map(fn) |
Creates new array with mapped values | [1,2,3].map(x=>x*2) // [2,4,6] |
filter(fn) |
Keeps elements that match condition | [1,2,3].filter(x=>x>1) // [2,3] |
reduce(fn, init) |
Accumulate values left → right | [1,2,3].reduce((a,b)=>a+b,0) // 6 |
reduceRight(fn, init) |
Accumulate right → left | [1,2,3].reduceRight((a,b)=>a-b) // 0 |
flatMap(fn) |
Map + flatten one level | ["a b","c"].flatMap(x=>x.split(" ")) // ["a","b","c"] |
4. 📐 Sorting & Rearranging
| Method | Description | Example |
|---|---|---|
sort(fn?) |
Sorts array in-place | [3,1,2].sort() // [1,2,3] |
reverse() |
Reverses order | [1,2,3].reverse() // [3,2,1] |
5. ✂️ Slicing & Copying
| Method | Description | Example |
|---|---|---|
slice(start?, end?) |
Returns shallow copy of part | [1,2,3].slice(1) // [2,3] |
concat() |
Merges arrays | [1,2].concat([3]) // [1,2,3] |
flat(depth) |
Flattens nested arrays | [1,[2,[3]]].flat(2) // [1,2,3] |
copyWithin(target, start, end?) |
Copies elements within array | [1,2,3,4].copyWithin(0,2) // [3,4,3,4] |
fill(value, start?, end?) |
Fills with value | [1,2,3].fill(0) // [0,0,0] |
toSpliced() (ES2023)
|
Immutable version of splice | [1,2,3].toSpliced(1,1) // [1,3] |
6. 📏 Information & Conversion
| Method | Description | Example |
|---|---|---|
length (property) |
Number of items | [1,2,3].length // 3 |
join(sep) |
Converts to string with separator | [1,2,3].join("-") // "1-2-3" |
toString() |
Default string conversion | [1,2,3].toString() // "1,2,3" |
toLocaleString() |
Localized string | [123456].toLocaleString("de-DE") |
Array.isArray(val) |
Checks if value is an array | Array.isArray([]) // true |
Array.from(iterable) |
Creates array from iterable | Array.from("abc") // ["a","b","c"] |
Array.of(...items) |
Creates array from arguments | Array.of(1,2,3) // [1,2,3] |
🧑💻 Practical Example
Let’s bring all this together in a small script:
// =====================
// 🔤 Array Methods Demo
// =====================
// 1. 🔄 Adding and Removing Elements
let arr = [1, 2];
arr.push(3); // Adds element to the end -> [1, 2, 3]
console.log("push:", arr);
arr.pop(); // Removes last element -> [1, 2]
console.log("pop:", arr);
arr.unshift(0); // Adds element to the beginning -> [0, 1, 2]
console.log("unshift:", arr);
arr.shift(); // Removes first element -> [1, 2]
console.log("shift:", arr);
arr.splice(1, 1, "x"); // Removes 1 element at index 1, inserts "x" -> [1, "x"]
console.log("splice:", arr);
// ----------------------------------
// 2. 🔍 Searching & Checking
let nums = [1, 2, 3, 2];
console.log("indexOf:", nums.indexOf(2)); // First index of 2 -> 1
console.log("lastIndexOf:", nums.lastIndexOf(2)); // Last index of 2 -> 3
console.log("includes:", nums.includes(3)); // true, because 3 exists
console.log("find:", nums.find(x => x > 2)); // Finds first > 2 -> 3
console.log("findIndex:", nums.findIndex(x => x > 2)); // Index of first > 2 -> 2
console.log("some:", nums.some(x => x > 3)); // false, no element > 3
console.log("every:", nums.every(x => x > 0)); // true, all positive
// ----------------------------------
// 3. 🔁 Iteration
let base = [1, 2, 3];
base.forEach(x => console.log("forEach element:", x)); // Logs each element
let doubled = base.map(x => x * 2); // Creates [2,4,6]
console.log("map:", doubled);
let filtered = base.filter(x => x > 1); // Keeps [2,3]
console.log("filter:", filtered);
let sum = base.reduce((a, b) => a + b, 0); // Adds all -> 6
console.log("reduce:", sum);
let reduceR = base.reduceRight((a, b) => a - b); // Right to left ((3-2)-1) -> 0
console.log("reduceRight:", reduceR);
let flatMapped = ["a b", "c"].flatMap(x => x.split(" ")); // Split and flatten -> ["a","b","c"]
console.log("flatMap:", flatMapped);
// ----------------------------------
// 4. 📐 Sorting & Rearranging
let sortArr = [3, 1, 2];
sortArr.sort(); // Sorts ascending -> [1,2,3]
console.log("sort:", sortArr);
sortArr.reverse(); // Reverses -> [3,2,1]
console.log("reverse:", sortArr);
// ----------------------------------
// 5. ✂️ Slicing & Copying
let copyArr = [1, 2, 3, 4];
console.log("slice:", copyArr.slice(1, 3)); // [2,3]
console.log("concat:", [1, 2].concat([3, 4])); // [1,2,3,4]
let flatArr = [1, [2, [3]]].flat(2); // Flattens nested arrays -> [1,2,3]
console.log("flat:", flatArr);
console.log("copyWithin:", [1, 2, 3, 4].copyWithin(0, 2)); // [3,4,3,4]
console.log("fill:", [1, 2, 3].fill(0)); // [0,0,0]
console.log("toSpliced:", [1, 2, 3].toSpliced(1, 1)); // New array [1,3]
// ----------------------------------
// 6. 📏 Information & Conversion
let infoArr = [1, 2, 3];
console.log("length:", infoArr.length); // 3
console.log("join:", infoArr.join("-")); // "1-2-3"
console.log("toString:", infoArr.toString()); // "1,2,3"
console.log("toLocaleString:", [123456].toLocaleString("de-DE")); // "123.456"
console.log("Array.isArray:", Array.isArray(infoArr)); // true
console.log("Array.from:", Array.from("abc")); // ["a","b","c"]
console.log("Array.of:", Array.of(1, 2, 3)); // [1,2,3]
📌 Conclusion
JavaScript arrays are more than just lists — they are powerful tools with dozens of built-in methods.
By mastering these methods, you can:
Manipulate collections safely
Transform and filter data efficiently
Write more expressive and functional code
Whether you’re building small scripts or large-scale applications, knowing when and how to use these methods will save you time and reduce bugs.
📚 Reference
- Mozilla Developer Network. (n.d.). Array - JavaScript | MDN. Retrieved August 2025, from https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array
Top comments (0)