JavaScript Array Methods

Common Array Methods

The concat() method joins two or more arrays together and returns a new combined array without modifying the originals. You can concat multiple arrays: arr1.concat(arr2, arr3). You can also concat individual values: arr.concat(1, 2, 3). While concat() works well, modern JavaScript often uses the spread operator [...arr1, ...arr2] for the same purpose, which is more concise and flexible.

The join() method joins all elements of an array into a string, separated by a specified separator. The default separator is a comma. For example, ["a", "b", "c"].join("-") returns "a-b-c". join() is the opposite of the string split() method. It's useful for creating CSV data, formatted lists, or converting arrays to strings for display.

The slice() method extracts a portion of an array and returns it as a new array without modifying the original. It takes two parameters: start index (inclusive) and end index (exclusive). Negative indices count from the end. If you omit the end, slice() extracts to the end of the array. slice() is one of the safest methods because it never mutates the original array.

The splice() method adds, removes, or replaces elements in an array, modifying the original array. It takes a start index, a delete count, and optional elements to insert. splice(1, 0, "new") inserts without deleting. splice(1, 1) deletes one element. splice(1, 1, "new") replaces one element. splice() is powerful but can be confusing—it both modifies the array and returns the deleted elements.

The indexOf() method finds the first index where a given element appears in an array, or returns -1 if not found. The search is done with strict equality (===). You can provide a second parameter to specify where to start searching. For finding objects or using custom comparisons, use find() or findIndex() instead.

The includes() method checks if an array contains a specific element, returning true or false. It uses the SameValueZero algorithm (similar to === but treats NaN as equal to NaN). includes() is more readable than indexOf() !== -1 for existence checks. You can provide a second parameter to specify where to start searching.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

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

// join
const fruits = ["Apple", "Banana", "Orange"];
console.log(fruits.join(", ")); // "Apple, Banana, Orange"

// slice
console.log(fruits.slice(1, 3)); // ["Banana", "Orange"]

// splice (removes 1 element at index 1)
fruits.splice(1, 1);
console.log(fruits); // ["Apple", "Orange"]

// indexOf
console.log(fruits.indexOf("Orange")); // 1

// includes
console.log(fruits.includes("Apple")); // true

Higher-Order Array Methods

The map() method creates a new array by calling a function on every element of the original array. The function's return value becomes the corresponding element in the new array. map() doesn't modify the original array. For example, [1, 2, 3].map(n => n * 2) returns [2, 4, 6]. map() is essential for transforming data—converting objects, formatting values, or applying calculations to every element.

The filter() method creates a new array containing only elements that pass a test function. The test function should return true to keep an element or false to exclude it. For example, [1, 2, 3, 4].filter(n => n % 2 === 0) returns [2, 4]. filter() is perfect for searching, removing unwanted elements, or extracting subsets of data based on conditions.

The reduce() method reduces an array to a single value by applying a function to each element and accumulating a result. It takes a reducer function and an optional initial value. The reducer receives the accumulator and current element. For example, [1, 2, 3].reduce((sum, n) => sum + n, 0) returns 6. reduce() can sum numbers, concatenate strings, flatten arrays, group data, or perform complex transformations.

The forEach() method executes a provided function once for each array element. Unlike map(), forEach() doesn't return anything (returns undefined)—it's used purely for side effects like logging, updating external variables, or modifying DOM elements. You cannot break or return early from forEach(). For simple iteration, for...of loops are often preferred in modern JavaScript.

The find() method returns the first element that passes a test function, or undefined if none pass. Unlike filter() which returns all matches, find() stops at the first match and returns that single element. For example, [1, 2, 3, 4].find(n => n > 2) returns 3. find() is perfect for locating a specific object in an array based on some property.

The some() method tests whether at least one element passes a test function, returning true or false. It stops testing once it finds a passing element. For example, [1, 2, 3].some(n => n > 2) returns true. The every() method (similar to some()) tests whether all elements pass the test. some() and every() are perfect for validation and conditional logic based on array contents.

const numbers = [1, 2, 3, 4, 5];

// map
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

// filter
const evens = numbers.filter(n => n % 2 === 0);
console.log(evens); // [2, 4]

// reduce
const sum = numbers.reduce((total, n) => total + n, 0);
console.log(sum); // 15

// forEach
numbers.forEach(n => console.log(n));

// find
const found = numbers.find(n => n > 3);
console.log(found); // 4

// some
console.log(numbers.some(n => n > 4)); // true