Top 5 must know JavaScript Array methods

Table Of Content

• Prerequisites
• The .map method
• The .reduce method
• The .find method
• The .sort method
• The .filter method

Most newbie developers who are just introduced to JavaScript often become discouraged by the amount of JavaScript array methods they need to know. But on the contrary, you don't need to know the whole 31 methods to become very good at JavaScript. You just need to know enough to start making projects.
In the course of this article, you will learn the top 5 JavaScript array methods you must know as a web developer.

Prerequisites

To be able to follow this course, you must have a basic knowledge of JavaScript as this will help you to understand the course better.

The .map method

The JavaScript .map method is used to iterate through every item in the array.

It works by taking an array, looping(mapping) through it and creating a new array with the new items.

It is often used to mutate the array and change its form in some way.
Here is an example:

const firstArray = ['Alice', 'John', 'Bob', 'Lucy']
const mapped = firstArray.map(item => <p>item</p>)
console.log(mapped) 
//<p>Alice</p>, <p>John</p>, <p>Bob</p>, <p>Lucy</p>

The code above has an array with four names. A second variable called 'mapped' is created.

This variable gets the first array, uses the map method to loop through it with the condition that when it gets to each item, it should put a paragraph tag around each item.

This is the most used array method in JavaScript because it saves you the stress of rewriting a particular code.

Like in the example above, it will be time consuming to just put a tag around each name manually.

The .reduce method

This method, like the name suggests, reduces an array to a single element. It is mostly used in number arrays.

When called on an array, it takes two arguments: the accumulator and the currentValue.

The accumulator receives, adds and stores each item the currentValue passes to it.

The method iterates through each item in the array. So the currentValue is the value of the item it is currently on.

So if there are three numbers in an array, the .reduce method will loop through the array, assigning each item to the currentValue parameter one at a time.

The currentValue will not switch values until the accumulator stores that particular value. Once that is done, it will switch to the next value.

const obj = [
             {item: 'banana',
              price: 2}, 
             {item: 'Hamburger',
              price: 1}, 
             {item: 'Shirt',
              price: 2}]

const TotalAmount = obj.reduce((arr, currentValue) => {
     return acc + currentValue.price})
console.log(TotalAmount)

//5

In the code above, there is a array of objects which has 2 items in each object.

When the reduce method is used, it adds up the accumulated price with the current value until it reaches the last object.

The .find method

The .find method searches through an array and returns only the item(s) that satisfies the defined condition.

const example = [1, 2, 2, 3, 2, 5, 5]

const newArray = example.find(item => item > 2)
console.log(newArray)
//[3, 5, 5]

The code above shows an array of 7 numbers.

In the newArray, the find method is used on the example array with the condition that it should return only the items that are greater than 2.

The .sort method

This method sorts an array and rearranges the items in the array. When called on an array, the default order is ascending.

It changes the array directly and does not return a new array. So if the former array is needed, a copy of that original array must be made before the sort method is used.

const example = [5, 4, 3, 2, 1]

example.sort()
console.log(example)
//[1, 2, 3, 4, 5]

The code above shows an array with 5 numbers. When the sort method is called on the array, it rearranges the array in ascending order.

Note: You can also define your own sorting conditions mostly when working with an array of objects.

The .filter method

The filter method, removes the elements that satisfies a certain condition from an array and returns a new array.
This is very useful for deleting items in an array.

Here is an example:

const example = [1, 2, 2, 3, 4, 2, 1]

const filtered = example.filter(item => item.id !== 2)
console.log(filtered)

//[2, 2, 2]

From the example above, you can see that the original array has 7 numbers/items.

The filter method is called with the condition to remove all items that are not equal to 2.

Conclusion

Throughout the course of this article, you have learned the top 5 JavaScript methods you need to know in order to move to the next level. You do not have to cram all the other methods before moving forward. Remember, learn smart, not hard

Thanks for reading.

Resources

• W3schools
• MDN Docs