JavaScript Arrays

#javascript #programming #arrays

🔢 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]