Most Important Array Methods in JavaScript
Arrays in JavaScript are list-like objects whose prototypes have methods to perform some operations on them. In this article, we will see the most important array methods in JavaScript, and how we can use them.
find()
The find() method returns the first found element in the array, tested with the provided function. If the element is found it returns undefined.
const someArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Smith" },
{ id: 3, name: "Bob" },
]
someArray.find(element => element.id === 2)
//-------> Output : {id: 2, name: "Smith"}
findIndex()
The findIndex() method returns the index of the first found element in the array, tested with the provided function. If the index is not found it returns -1.
const someArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Smith" },
{ id: 3, name: "Bob" },
]
someArray.find(element => element.id === 2)
//-------> Output : 2
forEach()
The forEach() method uses a function on each element in the array.
const someArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Smith" },
{ id: 3, name: "Bob" },
]
myAwesomeArray.forEach(element => console.log(element.name))
//Output : John, Smith, Bob
map()
The map() method applies a function as a parameter and creates a new array populated with the results of the function on every element.
const someArray = [1, 2, 3, 4]
someArray.map(x => x * x)
// Output: 1, 4, 9, 16
If you are interested to read more in-depth about the
forEach()andmap()methods, you can check the JavaScript Map vs ForEach Method.
flat()
The flat() method creates a new array as a result that contains the element from the sub-array and flat them into the new array. Remember that this method will work only one level in depth.
const someArray = [1, [2, 3], [4, 5]]
someArray.flat()
//Output: [1, 2, 3, 4, 5]
flatMap()
The flatMap() method is a combination of the flat and map methods. This method uses a function on each element, which first maps each element using the map then flattens the result into a new array. This method only works on one level in depth.
const someArray = [[1], [2], [3], [4], [5]]
someArray.flatMap(a => a * 10)
//Output: [10, 20, 30, 40, 50]
filter()
The filter() method applies a function, which returns a new array with all elements that are passing the test.
const someArray = [
{ id: 1, name: "John" },
{ id: 2, name: "Smith" },
{ id: 3, name: "Bob" },
]
someArray.filter(element => element.name === "Bob")
//Output: 0:{id: 3, name: "Bob"}
sort()
The sort() method sorts every element of the array and returns the sorted array. The sorting order by default is ascending.
const someArray = [4, 1, 3, 2]
// Sort from smallest to largest
someArray.sort((a, b) => a - b)
//Output : [1, 2, 3, 4]
// Sort from largest to smallest
myAwesomeArray.sort((a, b) => b - a)
//Output : [4, 3, 2, 1]
The sort method is converting the elements into strings before comparing them if you want to read more about the sort method you can check the JavaScript Map vs ForEach Method.
push()
The push() method adds an element to the end of the array and returns the length of the array.
const someArray = ["Tesla", "Audi", "BMW"]
console.log(someArray.push("Toyota"));
//output: "4"
console.log(someArray);
//output: Array ["Tesla", Audi", "BMW", "Toyota"]
unshift()
The unshift() method adds an element to the start of the array and also returns the new length of the array.
const someArray = ["Tesla", "Audi", "BMW"]
console.log(someArray.unshift("Toyota"));
//output: "4"
console.log(someArray);
//output: Array ["Toyota", "Tesla", Audi", "BMW"]
shift()
The shift() method removes the first element from the array and returns the element. Remember that using the shift method will change the length of the array.
const someArray = ["Tesla", "Audi", "BMW"]
console.log(someArray.shift());
//output: "Tesla"
console.log(someArray);
//output: Array ["Audi", "BMW"]
pop()
The pop() method removes the last element from the given array and returns the element. Remember that using the pop method will also change the length of the given array.
const someArray = ["Tesla", "Audi", "BMW"]
console.log(someArray.pop());
//output: "BMW"
console.log(someArray);
//output: Array ["Tesla", "Audi"]
These methods are just a few of the array methods available, there are more of them for example concat, every, length, slice, etc. If you want to check them all you can check the JavaScript documentation
Tweet