JavaScript arrays come with a wide range of built-in methods that make it easy to manipulate and interact with array elements. These methods help with adding, removing, searching, sorting, and iterating over elements.
1. Mutating Array Methods
These methods modify the original array.
push(): Adds one or more elements to the end of an array.
const fruits = ['Apple', 'Banana'];
fruits.push('Cherry');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
pop(): Removes the last element from an array.
const fruits = ['Apple', 'Banana', 'Cherry']; fruits.pop(); console.log(fruits); // Output: ['Apple', 'Banana']
shift(): Removes the first element from an array.
const fruits = ['Apple', 'Banana', 'Cherry']; fruits.shift(); console.log(fruits); // Output: ['Banana', 'Cherry']
unshift(): Adds one or more elements to the beginning of an array.
const fruits = ['Banana', 'Cherry'];
fruits.unshift('Apple');
console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
splice(): Adds or removes elements from an array.
const fruits = ['Apple', 'Banana', 'Cherry']; fruits.splice(1, 1, 'Blueberry'); // Removes 'Banana' and adds 'Blueberry' console.log(fruits); // Output: ['Apple', 'Blueberry', 'Cherry']
2. Non-Mutating Array Methods
These methods return a new array or value and do not modify the original array.
slice(): Returns a shallow copy of a portion of an array.
const fruits = ['Apple', 'Banana', 'Cherry', 'Date']; const citrus = fruits.slice(1, 3); console.log(citrus); // Output: ['Banana', 'Cherry']
concat(): Merges two or more arrays.
const arr1 = [1, 2]; const arr2 = [3, 4]; const result = arr1.concat(arr2); console.log(result); // Output: [1, 2, 3, 4]
map(): Creates a new array with the results of calling a function for every array element.
const numbers = [1, 2, 3]; const squared = numbers.map(x => x * x); console.log(squared); // Output: [1, 4, 9]
filter(): Creates a new array with all elements that pass the test implemented by the provided function.
const numbers = [1, 2, 3, 4, 5]; const evenNumbers = numbers.filter(x => x % 2 === 0); console.log(evenNumbers); // Output: [2, 4]
reduce(): Executes a reducer function on each element of the array, resulting in a single output value.
const numbers = [1, 2, 3, 4]; const sum = numbers.reduce((total, num) => total + num, 0); console.log(sum); // Output: 10
find(): Returns the value of the first element in the array that satisfies the provided testing function.
const numbers = [1, 2, 3, 4, 5]; const found = numbers.find(num => num > 3); console.log(found); // Output: 4
findIndex(): Returns the index of the first element in the array that satisfies the provided testing function.
const numbers = [1, 2, 3, 4, 5]; const index = numbers.findIndex(num => num > 3); console.log(index); // Output: 3
includes(): Determines whether an array includes a certain element.
const fruits = ['Apple', 'Banana', 'Cherry'];
console.log(fruits.includes('Banana')); // Output: true
some(): Tests whether at least one element in the array passes the test implemented by the provided function.
const numbers = [1, 2, 3, 4]; const hasEven = numbers.some(num => num % 2 === 0); console.log(hasEven); // Output: true
every(): Tests whether all elements in the array pass the test implemented by the provided function.
const numbers = [2, 4, 6]; const allEven = numbers.every(num => num % 2 === 0); console.log(allEven); // Output: true
3. Iteration Methods
forEach(): Executes a provided function once for each array element.
const fruits = ['Apple', 'Banana', 'Cherry']; fruits.forEach(fruit => console.log(fruit)); // Output: // Apple // Banana // Cherry
keys(): Returns a new Array Iterator object that contains the keys for each index in the array.
const fruits = ['Apple', 'Banana', 'Cherry'];
const keys = fruits.keys();
for (let key of keys) {
console.log(key); // Output: 0, 1, 2
}
values(): Returns a new Array Iterator object that contains the values for each index in the array.
const fruits = ['Apple', 'Banana', 'Cherry'];
const values = fruits.values();
for (let value of values) {
console.log(value); // Output: Apple, Banana, Cherry
}
entries(): Returns a new Array Iterator object that contains the key/value pairs for each index in the array.
const fruits = ['Apple', 'Banana', 'Cherry'];
const entries = fruits.entries();
for (let [index, fruit] of entries) {
console.log(index, fruit); // Output: 0 'Apple', 1 'Banana', 2 'Cherry'
}
4. Sorting and Reversing
sort(): Sorts the elements of an array in place and returns the array.
const fruits = ['Banana', 'Apple', 'Cherry']; fruits.sort(); console.log(fruits); // Output: ['Apple', 'Banana', 'Cherry']
reverse(): Reverses the order of the elements in an array.
const fruits = ['Apple', 'Banana', 'Cherry']; fruits.reverse(); console.log(fruits); // Output: ['Cherry', 'Banana', 'Apple']
5. Joining and Splitting
join(): Joins all elements of an array into a string.
const fruits = ['Apple', 'Banana', 'Cherry'];
const result = fruits.join(', ');
console.log(result); // Output: 'Apple, Banana, Cherry'
toString(): Returns a string representing the array and its elements.
const fruits = ['Apple', 'Banana', 'Cherry']; console.log(fruits.toString()); // Output: 'Apple,Banana,Cherry'