Arrays are one of the most fundamental data structures in JavaScript. With an array, you can store multiple values in a single variable. JavaScript provides numerous built-in methods to manipulate arrays, making them incredibly versatile. In this post, we'll explore all the built-in array methods and how to use them effectively in your JavaScript projects.
Core Methods
forEach()
The forEach() method allows you to iterate over an array and execute a provided function once for each element in the array. It's a simple way to loop through an array.
const array = [1, 2, 3, 4, 5];
array.forEach((element) => {
console.log(element);
});
map()
The map() method creates a new array populated with the results of calling a provided function on every element in the array. It's typically used for transforming data.
const array = [1, 2, 3, 4, 5];
const doubled = array.map((element) => element * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
filter()
The filter() method creates a new array with all elements that pass the test implemented by the provided function. It's useful when you need to filter out certain elements from an array based on a condition.
const array = [1, 2, 3, 4, 5];
const evenNumbers = array.filter((element) => element % 2 === 0);
console.log(evenNumbers); // [2, 4]
reduce()
The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It's often used for summing values, accumulating totals, or merging arrays into a single value.
const array = [1, 2, 3, 4, 5];
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15
find()
The find() method returns the value of the first element in the array that satisfies the provided testing function. It stops after finding the first match.
const array = [1, 2, 3, 4, 5];
const found = array.find((element) => element > 3);
console.log(found); // 4
findIndex()
The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no element satisfies the testing function, it returns -1.
const array = [1, 2, 3, 4, 5];
const index = array.findIndex((element) => element > 3);
console.log(index); // 3
sort()
The sort() method sorts the elements of an array in place and returns the sorted array. It's commonly used to sort strings and numbers, but it may require a compare function to sort numbers correctly.
const array = [5, 3, 8, 1, 2];
const sortedArray = array.sort((a, b) => a - b);
console.log(sortedArray); // [1, 2, 3, 5, 8]
reverse()
The reverse() method reverses the elements of an array in place. The first array element becomes the last, and the last becomes the first.
const array = [1, 2, 3, 4, 5];
const reversedArray = array.reverse();
console.log(reversedArray); // [5, 4, 3, 2, 1]
concat()
The concat() method is used to merge two or more arrays. It returns a new array, leaving the original arrays unchanged.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const concatenatedArray = array1.concat(array2);
console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]
slice()
The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
const array = [1, 2, 3, 4, 5];
const slicedArray = array.slice(1, 4);
console.log(slicedArray); // [2, 3, 4]
splice()
The splice() method changes the contents of an array by removing, replacing, or adding elements.
const array = [1, 2, 3, 4, 5];
array.splice(2, 1, 6, 7);
console.log(array); // [1, 2, 6, 7, 4, 5]
push()
The push() method adds one or more elements to the end of an array and returns the new length of the array.
const array = [1, 2, 3];
array.push(4, 5);
console.log(array); // [1, 2, 3, 4, 5]
pop()
The pop() method removes the last element from an array and returns that element.
const array = [1, 2, 3, 4, 5];
const lastElement = array.pop();
console.log(lastElement); // 5
console.log(array); // [1, 2, 3, 4]
shift()
The shift() method removes the first element from an array and returns that element.
const array = [1, 2, 3, 4, 5];
const firstElement = array.shift();
console.log(firstElement); // 1
console.log(array); // [2, 3, 4, 5]
unshift()
The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.
const array = [2, 3, 4, 5];
array.unshift(1);
console.log(array); // [1, 2, 3, 4, 5]
join()
The join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.
const array = [1, 2, 3, 4, 5];
const joinedString = array.join('-');
console.log(joinedString); // "1-2-3-4-5"
Additional Methods
every()
The every() method tests whether all elements in the array pass the provided test function.
const array = [2, 4, 6, 8];
const allEven = array.every((element) => element % 2 === 0);
console.log(allEven); // true
some()
The some() method tests whether at least one element in the array passes the provided test function.
const array = [1, 2, 3, 4, 5];
const hasEven = array.some((element) => element % 2 === 0);
console.log(hasEven); // true
flat()
The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
const array = [1, [2, [3, [4]]]];
const flattenedArray = array.flat(2);
console.log(flattenedArray); // [1, 2, 3, [4]]
flatMap()
The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It's a combination of map() and flat().
const array = [1, 2, 3, 4];
const flattened = array.flatMap((num) => [num, num * 2]);
console.log(flattened); // [1, 2, 2, 4, 3, 6, 4, 8]
fill()
The fill() method fills all the elements of an array with a static value from a start index to an end index.
const array = [1, 2, 3, 4, 5];
array.fill(0, 2, 4);
console.log(array); // [1, 2, 0, 0, 5]
copyWithin()
The copyWithin() method shallow copies part of an array to another location in the same array without modifying its length.
const array = [1, 2, 3, 4, 5];
array.copyWithin(0, 3, 5);
console.log(array); // [4, 5, 3, 4, 5]
includes()
The includes() method checks if an array contains a certain value.
const array = [1, 2, 3, 4, 5];
const hasThree =
array.includes(3);
console.log(hasThree); // true
toString()
The toString() method converts an array to a string, separated by commas.
const array = [1, 2, 3, 4, 5];
const arrayString = array.toString();
console.log(arrayString); // "1,2,3,4,5"
indexOf()
The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
const array = [1, 2, 3, 4, 5];
const index = array.indexOf(3);
console.log(index); // 2
lastIndexOf()
The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.
const array = [1, 2, 3, 4, 3, 5];
const lastIndex = array.lastIndexOf(3);
console.log(lastIndex); // 4
from()
The Array.from() method creates a new array instance from an array-like or iterable object.
const array = Array.from('hello');
console.log(array); // ['h', 'e', 'l', 'l', 'o']
isArray()
The Array.isArray() method checks whether the passed value is an array.
const array = [1, 2, 3, 4, 5];
const notArray = { a: 1, b: 2 };
console.log(Array.isArray(array)); // true
console.log(Array.isArray(notArray)); // false
of()
The Array.of() method creates a new array instance with a variable number of elements.
const array1 = Array.of(1, 2, 3);
const array2 = Array.of('a', 'b', 'c');
console.log(array1); // [1, 2, 3]
console.log(array2); // ['a', 'b', 'c']
Conclusion
JavaScript arrays come with a wide range of built-in methods that allow for powerful data manipulation. Understanding these methods will make you more efficient in writing clean and concise code. Take some time to experiment with these methods and see how they can improve your code.
Originally Published: JavaScript Array Methods Guide
Top comments (0)