Essential JavaScript Array Methods You Should Know

Adding and Removing Elements

push() - Append Elements to the End

const data = [1, 2, 3];
data.push(4);
console.log(data); // [1, 2, 3, 4]

pop() - Remove the Last Element

const items = ['a', 'b', 'c'];
const removed = items.pop();
console.log(removed); // 'c'
console.log(items);   // ['a', 'b']

shift() - Remove the First Element

const numbers = [10, 20, 30];
const first = numbers.shift();
console.log(first); // 10
console.log(numbers); // [20, 30]

unshift() - Insert Elements at the Beginning

const colors = ['red', 'green'];
const newLength = colors.unshift('blue', 'yellow');
console.log(newLength); // 4
console.log(colors); // ['blue', 'yellow', 'red', 'green']

splice() - Insert, Delete, or Replace Elements

let values = [1, 2, 3, 4, 5];

// Delete elements
values.splice(2, 1);
console.log(values); // [1, 2, 4, 5]

// Insert elements
values.splice(2, 0, 'x', 'y');
console.log(values); // [1, 2, 'x', 'y', 4, 5]

// Replace elements
values.splice(1, 2, 'a', 'b', 'c');
console.log(values); // [1, 'a', 'b', 'c', 'y', 4, 5]

Parameters:

  • start: Index position where changes begin
  • deleteCount: Number of elements to remove (0 means no deletion)
  • item1, item2, ...: Elements to insert

Merging Arrays

concat() - Combine Multiple Arrays

const listA = [1, 2];
const listB = [3, 4];
const listC = [5, 6];

const combined = listA.concat(listB).concat(listC);
console.log(combined); // [1, 2, 3, 4, 5, 6]

Spread Operator

const first = [1, 2, 3];
const second = [4, 5, 6];
const merged = [...first, ...second];
console.log(merged); // [1, 2, 3, 4, 5, 6]

push() with apply() - Mutate Original Array

const target = [1, 2, 3];
const source = [4, 5, 6];
Array.prototype.push.apply(target, source);
console.log(target); // [1, 2, 3, 4, 5, 6]

Convreting Arrays to Strings

join() - Join Elements with Delimiter

const nums = [1, 2, 3];
console.log(nums.join());      // "1,2,3"
console.log(nums.join(''));    // "123"
console.log(nums.join('-'));   // "1-2-3"

toString() - Direct String Conversion

const letters = ['x', 'y', 'z'];
console.log(letters.toString()); // "x,y,z"

Sorting Arrays

sort() - Sort by Unicode Order

const unsorted = [36, 49, 2910, 324];
unsorted.sort();
console.log(unsorted); // [2910, 324, 36, 49]

Warning: Unicode sorting produces unexpected results for numbers.

const unsorted = [36, 49, 2910, 324];

// Ascending order
unsorted.sort((a, b) => a - b);
console.log(unsorted); // [36, 49, 324, 2910]

// Descending order
unsorted.sort((a, b) => b - a);
console.log(unsorted); // [2910, 324, 49, 36]

Reversing Arrays

reverse() - In-Place Reversal

const original = [36, 49, 2910, 324];
original.reverse();
console.log(original); // [324, 2910, 49, 36]

Iterating Arrays

forEach() - Execute Functon for Each Element

const nums = [36, 49, 2910, 324];
nums.forEach((val, idx) => {
    nums[idx] = val + 1;
});
console.log(nums); // [37, 50, 2911, 325]

Callback parameters: currentValue, index, array

map() - Transform and Return New Array

const original = [36, 49, 2910, 324];
const incremented = original.map(val => val + 1);
console.log(incremented); // [37, 50, 2911, 325]

filter() - Extract Matching Elements

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const greaterThanFive = numbers.filter(val => val > 5);
console.log(greaterThanFive); // [6, 7, 8, 9, 10]

every() - Check All Elements Pass Test

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const allPositive = numbers.every(val => val > 5);
console.log(allPositive); // false

some() - Check If Any Element Passes Test

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const hasPositive = numbers.some(val => val > 5);
console.log(hasPositive); // true

find() - Return First Matching Element

const data = [7, 89, 32, 384, 453];
const firstMatch = data.find(val => val > 100);
console.log(firstMatch); // 384

flat() - Flatten Nested Arrays

const nested = [7, 89, 32, 384, 453, [1, 3, 37, [24, 43]]];

const flatOneLevel = nested.flat();
console.log(flatOneLevel); // [7, 89, 32, 384, 453, 1, 3, 37, [24, 43]]

const flatTwoLevels = nested.flat(2);
console.log(flatTwoLevels); // [7, 89, 32, 384, 453, 1, 3, 37, 24, 43]

reduce() - Accumulate Single Value

let numbers = [7, 89, 32, 384, 453, 39];
let sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 1004

Signature:

array.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Finding Indexes

indexOf() / lastIndexOf() - Find Element Position

const fruits = ['apple', 'banana', 'orange', 'apple'];

const firstApple = fruits.indexOf('apple');
console.log(firstApple); // 0

const lastApple = fruits.lastIndexOf('apple');
console.log(lastApple); // 3

Static Array Methods

Array.from() - Convert Array-Like Objects

const uniqueNums = new Set([1, 2, 3]);
const doubled = Array.from(uniqueNums, num => num * 2);
console.log(doubled); // [2, 4, 6]

Array.isArray() - Type Check

console.log(Array.isArray([1, 2, 3])); // true
console.log(Array.isArray("Hello"));   // false

Array.of() - Create Array from Arguments

const newArr = Array.of(1, 2, 3);
console.log(newArr); // [1, 2, 3]

Tags: javascript array methods Frontend Development ES6

Posted on Sun, 09 Aug 2026 16:24:22 +0000 by freaka