Arrays are one of the most important and frequently used data structures in JavaScript. Whether you are manipulating data, searching for specific items, or transforming a list into a completely new format, JavaScript provides a rich set of built-in array methods to make your life easier.
In this guide, we will explore 23 essential array methods. To keep things consistent and easy to follow, we'll use a running theme of telecom network providers for our examples!
Mutator Methods (Modify the Original Array)
These methods change the array they are called upon.
1. push()
Adds one or more elements to the end of an array and returns the new length of the array.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.push('tata');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea', 'tata']
2. pop()
Removes the last element from an array and returns that element.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let last = providers.pop();
// last is 'idea', providers is ['jio', 'airtel', 'vi', 'bsnl']
3. shift()
Removes the first element from an array and returns that removed element.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let first = providers.shift();
// first is 'jio', providers is ['airtel', 'vi', 'bsnl', 'idea']
4. unshift()
Adds one or more elements to the beginning of an array and returns the new length.
let providers = ['airtel', 'vi', 'bsnl', 'idea'];
providers.unshift('jio');
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']
5. delete (Operator)
Removes a property. On arrays, it deletes the element but leaves an undefined hole without changing the array's length. (Note: Generally, it's better to use splice() instead).
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
delete providers[1];
// Result: ['jio', undefined, 'vi', 'bsnl', 'idea']
6. splice()
The Swiss Army knife of arrays. It changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.
Insert Example:
let providers = ['jio', 'airtel', 'idea'];
providers.splice(1, 0, 'vi', 'bsnl'); // Start at index 1, delete 0, insert 'vi' & 'bsnl'
// Result: ['jio', 'vi', 'bsnl', 'airtel', 'idea']
Delete Example:
let arr = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
arr.splice(2, 2); // Start at index 2, delete 2 elements
// Result: ['jio', 'airtel', 'idea']
Replace Example:
let list = ['jio', 'airtel', 'idea'];
list.splice(1, 1, 'vi'); // Start at index 1, delete 1, insert 'vi'
// Result: ['jio', 'vi', 'idea']
7. sort()
Sorts the elements of an array in place and returns the reference to the same array.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.sort();
// Result: ['airtel', 'bsnl', 'idea', 'jio', 'vi']
8. reverse()
Reverses an array in place. The first element becomes the last, and the last becomes the first.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
providers.reverse();
// Result: ['idea', 'bsnl', 'vi', 'airtel', 'jio']
Accessor & Transform Methods
These methods do not modify the original array; instead, they return a new array, string, or value.
9. slice()
Returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let sliced = providers.slice(1, 3);
// Result: ['airtel', 'vi']
10. join()
Creates and returns a new string by concatenating all of the elements in an array, separated by a specified string.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let str = providers.join('-');
// Result: 'jio-airtel-vi-bsnl-idea'
11. split() (String Method)
Divides a string into an ordered list of substrings, puts these substrings into an array, and returns the array.
let str = 'jio,airtel,vi';
let arr = str.split(',');
// Result: ['jio', 'airtel', 'vi']
12. concat()
Used to merge two or more arrays. It does not change the existing arrays, but instead returns a new array.
let group1 = ['jio', 'airtel'];
let group2 = ['vi', 'bsnl'];
let merged = group1.concat(group2);
// Result: ['jio', 'airtel', 'vi', 'bsnl']
13. flat()
Creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.
let nested = [['jio', 'airtel'], ['vi', 'bsnl'], 'idea'];
let flatArr = nested.flat();
// Result: ['jio', 'airtel', 'vi', 'bsnl', 'idea']
14. map()
Creates a new array populated with the results of calling a provided function on every element in the calling array.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let prices = arr.map(p => p.price);
// Result: [199, 299]
15. filter()
Creates a shallow copy of a portion of a given array, filtered down to just the elements that pass a test implemented by the provided function.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let affordable = arr.filter(p => p.price < 250);
// Result: [{name: 'jio', price: 199}]
Search & Iteration Methods
These methods help you loop through arrays or find specific elements.
16. forEach()
Executes a provided function once for each array element.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
arr.forEach(p => console.log(p.name));
// Output:
// jio
// airtel
17. Array.isArray()
Determines whether the passed value is an Array.
let arr = ['jio', 'airtel'];
console.log(Array.isArray(arr));
// Result: true
18. find()
Returns the first element in the provided array that satisfies the provided testing function.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let found = arr.find(p => p.name === 'airtel');
// Result: {name: 'airtel', price: 299}
19. reduce()
Executes a user-supplied "reducer" callback function on each element of the array, resulting in a single accumulated output value.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let total = arr.reduce((acc, curr) => acc + curr.price, 0);
// Result: 498
20. some()
Tests whether at least one element in the array passes the test implemented by the provided function. Returns a boolean.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let hasExpensive = arr.some(p => p.price > 250);
// Result: true
21. every()
Tests whether all elements in the array pass the test implemented by the provided function. Returns a boolean.
let arr = [{name: 'jio', price: 199}, {name: 'airtel', price: 299}];
let allUnder300 = arr.every(p => p.price < 300);
// Result: true
22. includes()
Determines whether an array includes a certain value among its entries, returning true or false as appropriate.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let hasJio = providers.includes('jio');
// Result: true
23. indexOf()
Returns the first index at which a given element can be found in the array, or -1 if it is not present.
let providers = ['jio', 'airtel', 'vi', 'bsnl', 'idea'];
let idx = providers.indexOf('vi');
// Result: 2
Top comments (0)