Array Methods

Arrays are everywhere in JavaScript.
They store lists of data and help you work with them efficiently.

JavaScript provides many built-in array methods.
These methods make your code cleaner, shorter, and easier to understand.

---

What Are Array Methods?

Array methods are functions attached to the Array prototype.

They let you perform actions like:

• add items

• remove items

• loop through data

• transform values

• combine arrays

Example:

const nums = [1, 2, 3];
nums.push(4);

---

Methods That Add or Remove Elements

These methods change the original array.

---

push() – Add to the End

const arr = [1, 2];
arr.push(3);

console.log(arr); // [1, 2, 3]

---

pop() – Remove from the End

arr.pop(); // removes 3

---

unshift() – Add to the Start

arr.unshift(0);

---

shift() – Remove from the Start

arr.shift();

---

splice() – Add or Remove at Any Position

const fruits = ["apple", "banana", "mango"];

fruits.splice(1, 1); // remove 1 item at index 1

Add elements:

fruits.splice(1, 0, "orange");

---

Methods That Do NOT Change the Original Array

These methods return a new array.

---

slice() – Copy Part of an Array

const nums = [10, 20, 30, 40];
const part = nums.slice(1, 3);

console.log(part); // [20, 30]

---

concat() – Combine Arrays

const a = [1, 2];
const b = [3, 4];

const result = a.concat(b);

---

Spread Operator (...)

const result = [...a, ...b];

---

Searching and Checking Methods

---

indexOf()

fruits.indexOf("banana"); // 1

Returns -1 if not found.

---

includes()

fruits.includes("apple"); // true

---

find()

const users = [{ id: 1 }, { id: 2 }];

const user = users.find(u => u.id === 2);

Returns the first matching element.

---

findIndex()

users.findIndex(u => u.id === 2); // 1

---

Iteration Methods

These methods loop through arrays.

---

forEach()

nums.forEach(n => console.log(n));

Does not return anything.

---

map() – Transform Data

const doubled = [1, 2, 3].map(n => n * 2);

Returns a new array.

---

filter() – Keep Some Elements

const evens = [1, 2, 3, 4].filter(n => n % 2 === 0);

---

reduce() – Combine Values

const sum = [1, 2, 3].reduce((total, n) => total + n, 0);

---

some() – Check If Any Match

[1, 2, 3].some(n => n > 2); // true

---

every() – Check If All Match

[1, 2, 3].every(n => n > 0); // true

---

Sorting and Reversing

---

sort()

const nums = [10, 2, 5];
nums.sort((a, b) => a - b);

⚠️ Sort modifies the array.

---

reverse()

nums.reverse();

---

Converting Arrays

---

join()

["a", "b", "c"].join("-"); // "a-b-c"

---

toString()

[1, 2, 3].toString(); // "1,2,3"

---

flat() – Flatten Nested Arrays

[1, [2, [3]]].flat(2); // [1, 2, 3]

---

Checking Array Type

---

Array.isArray()

Array.isArray([1, 2]); // true

---

Mutable vs Immutable Methods

Mutable (change original array)

• push

• pop

• shift

• unshift

• splice

• sort

• reverse

---

Immutable (return new array)

• map

• filter

• slice

• concat

• flat

---

Common Mistakes

❌ Expecting map() to modify array

arr.map(x => x * 2);
// original array unchanged

---

❌ Using forEach() expecting return

const result = arr.forEach(x => x * 2);
// result is undefined

---

❌ Forgetting sort comparison

[10, 2].sort(); // [10, 2] ❌

---

Best Practices

Prefer map, filter, reduce over loops
Avoid mutating arrays unintentionally
Use const for arrays
Chain methods for readable code
Always provide compare function to sort()

---

Table