8 Must Know JavaScript Array Methods - No Fuss!

8 Must Know JavaScript Array Methods - No Fuss!

Arrays are one of the most common things that you're going to use as a programmer, so today I'm going to be teaching you eight JavaScript array methods that are going to make your life so much easier and more enjoyable. So make sure you stick around till the end.

To get started, we have an array of objects

const items = [
    { name: 'Bike',      price: 100 },
    { name: 'TV',        price: 200 },
    { name: 'Album',     price: 10 },
    { name: 'Book',      price: 5 },
    { name: 'Phone',     price: 500 },
    { name: 'Computer',  price: 1000 },
    { name: 'Keyboard',  price: 25 }   
]

1. Filter - items.filter()

First method that we're going to talk about is the filter(). So let's assume that we want to get all the items in this list that are less than or equal to a hundred dollars of price. All we would need to use is the filter() method to filter out everything that's not under a hundred dollars.

const filteredItems = items.filter( item => {
    return item.price<100;
});

Let's say we have a variable filteredItems which will hold the array of values after filtering. We need to filter over the items array, where filter takes one function with a parameter item - which is an individual item in the items array. Then we need to return a true or false statement on whether or not we want to include that in the new array, so we can just say return item.price<100. So this will return the solution as

0: {name: "Album", price: 10}
1: {name: "Book", price: 5}
2: {name: "Keyboard", price: 25}
length: 3

The great thing about this filter method and all the other methods for arrays that we're going to be covering is that they actually don't change the underlying object that you're filtering.

The complete flow of filter method is as shown in below picture.

image.png


2. Map - map()

Now let's cover in the next array method which is going to be map() and map allows you to take one array and convert it into a new array so all the items in the array are going to look slightly different.

const namesArray = items.map( item => {
    return item.name;
})

So let's just say we want to get the name of every item so we can get an array of the item names by using map. It looks very similar to above filter method signature, all we need to do is change filter to map and takes one function with a parameter item - which is an individual item in the items array. Here we just returned what we want in the newer array, i.e., return item.name.

["Bike", "TV", "Album", "Book", "Phone", "Computer", "Keyboard"]

The complete flow of map method is as shown in below picture.

image.png


3. Find - find()

Next up we will learn about find() method which allows you to find a single object in an array. All we need to do is we have a true or false statement here and find() method is going to return the item for the first one where it's true in the array.

const foundItem = items.find( item => {
    return item.name === 'Book';
});

Let's say, we want to find an object whose name of the item is Book. Again the method signature looks very similar, find() takes one function with a parameter item - which is an individual item in the items array. Here we need to ask the method like return item.name === 'Book'.

{name: "Book", price: 5}

The complete flow of find method is as shown in below picture.

image.png


4. ForEach - forEach()

The next one is 'forEach()' which is kind of similar to for() loop, but in for loop we cannot use actual item of object as iterable but in forEach we can. Unlike other array methods, forEach will not return any array. Instead, it will be used when we want to iterate over all the array elements and do something with them.

items.forEach(item => {
    console.log(item.name)
})

Bike
TV
Album
Book
Phone
Computer

The complete flow of forEach method is as shown in below picture.

image.png


5. Some - some()

The next method in the list is some() which is little bit different from the other methods. Because instead of returning a brand new array, it will return true or false. So we can check if some of the items in this array have a price less than $100. All we do is say items.some and this is going to take that same exact syntax as all these other array methods but it's just going to check our return value and as soon as a single item returns true it's going to return true for the entire thing.

const hasInexpensiveItem = items.some( item => {
    return item.price < 100;
} );

The above method returns true as there are atleast one item in items array whose price is less than 100.

hasInexpensiveItem
true

The complete flow of some method is as shown in below picture.

image.png


6. Every - every()

The next method every() is almost similar to some(), except that every() checks for the condition to be present in all objects in the array.

const checkEvery = items.every( item => {
    return item.price < 100;
} );

The above method returns false because price of every object in items array is less than 100.

checkEvery
false

The complete flow of every method is as shown in below picture.

image.png


7. Reduce - reduce()

The next method is the reduce() method which is a bit different than all of the other methods since it's actually doing some operation on the array and returning a combination of all those different operations. So if we wanted to get the total price of all the different items in this array normally what you would do is you would just do a for loop and add the price of your single item and at the end of the for loop you would print out the price. But you can use the reduce method to do this instead in a single line.

const total = items.reduce((currentTotal,item) => {
    return item.price + currentTotal;
},0);

The syntax for the reduced method is a bit different. Instead of taking an item, it takes an item and a property for what we want to reduce everything into. In our case this is just going to be the currentTotal so this is going to be the total after each iteration of the array. Then, it also takes a second parameter which is going to be your starting point. In our case we want to start our total at zero and then all we do is return the price of the item and we add it to whatever the currentTotal is. Now we will get the result.

total
1840

The complete flow of every method is as shown in below picture.

image.png


8. Includes - includes()

The last method that I want to let you know is the includes() method and this is a bit different because it doesn't actually take a function. It's just going to take a single argument so instead of passing a bunch of objects in our array we're just going to do an array of numbers 1 2 3 4 5.

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

Let's say if we want to find out if the array includes the number 2, we can simply write

const isTwoExist = items.includes(2)

What the above statement do is simply checks if the items array has value 2 and if yes, it returns true else false.

The complete flow of every method is as shown in below picture.

image.png

That's all eight of the incredibly useful JavaScript array methods that I want to cover. Hopefully from this tutorial you guys were able to learn why these JavaScript array methods are so useful for not only cleaning up your code but allowing you to do complex logic in such a small amount of code.

There are many methods in JavaScript where you can learn from here .

Let me know what are your thoughts in the comments below.

Did you find this article valuable?

Support Devalla Sai Charan by becoming a sponsor. Any amount is appreciated!