JS Array Methods

Imagine a warehouse team with specialized workers, one who adds new boxes to the end of a shelf, one who finds a specific box, one who checks every box and reports back a summary, each with one clear job. JavaScript array methods are that specialized team for your data, push adds an item, find locates one, filter narrows a list down, and map transforms every item at once, all without you writing manual loops for common tasks. Real applications, including features across cookiescursor.com, rely heavily on these methods to process lists of tutorials, scores, or user data efficiently and readably.

In this page:

Adding and Removing: push, pop, shift, unshift
splice, slice, concat, and join
indexOf and find
filter and map
reduce, forEach, and sort

Syntax

javascript

array.push(item);
array.pop();
array.map(item => expression);
array.filter(item => condition);
array.slice(start, end);

Adding and Removing: push, pop, shift, unshift

push() adds an element to the end of an array, pop() removes the last element, unshift() adds an element to the beginning, and shift() removes the first element, all modifying the original array directly.

Note: push() and pop() are generally faster than unshift() and shift(), since adding or removing from the end avoids reindexing every other element.

Warning: pop() and shift() both return the removed element, not the modified array, which can be surprising if you expected the array itself back.

उदाहरण: Adding and Removing: push, pop, shift, unshift

javascript

const list = [2, 3];
list.push(4);
list.unshift(1);
console.log(list); // [1, 2, 3, 4]
list.pop();
list.shift();
console.log(list); // [2, 3]

splice, slice, concat, and join

splice() adds or removes elements at any position and modifies the array in place, slice() extracts a portion without modifying the original, concat() combines arrays into a new one, and join() converts an array into a single string.

Note: Use slice() when you need a copy or portion without touching the original, and splice() specifically when you want to modify the array itself.

Warning: splice()'s arguments are easy to misremember, the second argument is how many elements to remove, not an end index like slice().

उदाहरण: splice, slice, concat, and join

javascript

const nums = [1, 2, 3, 4];
console.log(nums.slice(1, 3));   // [2, 3], original untouched
nums.splice(1, 1, "x");
console.log(nums);               // [1, "x", 3, 4]
console.log([1, 2].concat([3, 4]));
console.log(nums.join("-"));

indexOf and find

indexOf() returns the position of the first matching element or -1 if it's not found, while find() returns the first element that satisfies a given test function, or undefined if none match.

Note: Use indexOf() for simple value matches, and find() when your search condition is more complex than a simple equality check.

Warning: indexOf() checks for exact matches, it cannot find an object by one of its properties, find() is required for that kind of search.

उदाहरण: indexOf and find

javascript

// Declare the constant `nums`, set to `[10, 20, 30]`
// Declare the constant `nums`, set to `[10, 20, 30]`
const nums = [10, 20, 30];
// Print `nums.indexOf(20)` to the console
// Print `nums.indexOf(20)` to the console
console.log(nums.indexOf(20));
// Print `nums.find(n => n > 15)` to the console
// Print `nums.find(n => n > 15)` to the console
console.log(nums.find(n => n > 15));

filter and map

filter() creates a new array containing only elements that pass a given test, while map() creates a new array where every element has been transformed by a given function, both leave the original array untouched.

Note: filter() and map() are often chained together, filtering a list down first and then transforming what remains, all in one readable expression.

Warning: Both filter() and map() always return a new array, even if it's empty, they never modify the original array in place.

उदाहरण: filter and map

javascript

// Declare the constant `nums`, set to `[1, 2, 3, 4, 5]`
// Declare the constant `nums`, set to `[1, 2, 3, 4, 5]`
const nums = [1, 2, 3, 4, 5];
// Print `nums.filter(n => n % 2 === 0)` to the console
// Print `nums.filter(n => n % 2 === 0)` to the console
console.log(nums.filter(n => n % 2 === 0));
// Print `nums.map(n => n * 2)` to the console
// Print `nums.map(n => n * 2)` to the console
console.log(nums.map(n => n * 2));

reduce, forEach, and sort

reduce() combines every element of an array into a single accumulated value, forEach() runs a function once for each element purely for side effects without returning anything useful, and sort() reorders an array's elements, by default treating them as strings unless given a custom compare function.

Note: For numeric sorting, always pass a compare function to sort(), like (a, b) => a - b, otherwise numbers sort incorrectly as text.

Warning: sort() modifies the original array in place, unlike filter and map, which is easy to forget when you only meant to preview a sorted order.

उदाहरण: reduce, forEach, and sort

javascript

// Declare the constant `nums`, set to `[4, 2, 7]`
// Declare the constant `nums`, set to `[4, 2, 7]`
const nums = [4, 2, 7];
// Print `nums.reduce((sum, n) => sum + n, 0)` to the console
// Print `nums.reduce((sum, n) => sum + n, 0)` to the console
console.log(nums.reduce((sum, n) => sum + n, 0));
// Call `nums.forEach(n => console.log(n))`
// Call `nums.forEach(n => console.log(n))`
nums.forEach(n => console.log(n));
// Print `[...nums].sort((a, b) => a - b)` to the console
// Print `[...nums].sort((a, b) => a - b)` to the console
console.log([...nums].sort((a, b) => a - b));

Live Example

Chapter Quiz — Complete all 6 topics to unlock

0/6 topics done

Complete these topics first:

← Previous Lesson JS Arrays Next Lesson → JS Numbers

JS Array Methods

Adding and Removing: push, pop, shift, unshift

splice, slice, concat, and join

indexOf and find

filter and map

reduce, forEach, and sort

Chapter Quiz — Complete all 6 topics to unlock

Login to run this code