DEV Community

Muhammad Muhktar Musa
Muhammad Muhktar Musa

Posted on • Updated on

7 javaScript Array methods you should know

Arrays are one of the most common things a programmer uses or is likely to come across in a project. In this regard the array method we are going to look into should come in handy.
We are going to use a single array for our examples

const clubs = [
  { name: "All-stars", fans: 20000 },
  { name: "Bay", fans: 30000 },
  { name: "C-stars", fans: 25000 },
  { name: "D-pillars", fans: 40000 },
  { name: "Clos", fans: 60000 },
  { name: "Magic", fans: 45000 }
]
Enter fullscreen mode Exit fullscreen mode

Let us take a look at this methods and what they do to an array

filter

The filter method is used to filter out or remove all elements from an array that affirms the subject in the proposition logic and they are returned in a new array without altering the original array
for example

const filterClub = clubs.filter((item) => {
  return item.fans <= 30000;
});
Enter fullscreen mode Exit fullscreen mode

All the clubs having fans of less than or equal to 30000 fans are going to be returned to a new array.

Screenshot (91)

The filter method is a simple method to use. It returns true or false for each item. If the item is true, it is included in the new array and if it is false it is not included. The filter method does not change the array or object it is being filtered over. This method is convenient because we do not have to worry about the old array being changed when using it subsequently.

map

This method allows the taking of an array and converting it to a new array so that all items in the array are going to look slightly different. Let us say we want to get the names of every clubs in the array sample. We can use the map method for this.
Example

const clubNames = clubs.map((item) => {
  return item.name
});
Enter fullscreen mode Exit fullscreen mode

Screenshot (92)

We get a new array that prints out the names of the club in the original array without altering the original array. This is super convenient when you want to get the items in an object or the keys of an object or convert an array from one form to another. It has millions of uses.

find

This method allows a single object to be found in an array of objects. The method takes a single item as a parameter and returns the first item that returns true for the statement.

const findClub = clubs.find((item) => {
  return item.name === "All-stars"
});
Enter fullscreen mode Exit fullscreen mode

Screenshot (93)

forEach

This method does not return anything unlike the methods we covered previously. It works very similarly to a forLoop but it takes a function instead and takes a single parameter

clubs.forEach((item) => {
  console.log(item.name);
});
Enter fullscreen mode Exit fullscreen mode

For every single element inside the array, it prints out the names. The method makes working with an array where you have to loop through them much easier so that you don't have to write clunky, long forLoop syntax.

some

This function does not return a brand new array. Instead what it does is to return true or false. We can check if some items in the array affirms or denies the subject in the proposition logic. example

const highestFans = clubs.some((item) => {
  return item.fans <= 30000
});
Enter fullscreen mode Exit fullscreen mode

Screenshot (94)

It checks if any item value returns true and returns the first item that matches the criteria.

every

This method checks if every single item in the array affirms the subject proposition logic and returns true or false
example

const highestFans = clubs.every((item) => {
  return item.fans <= 30000
});
Enter fullscreen mode Exit fullscreen mode

Screenshot (95)

reduce

This method performs an operation on the array and returns a combination of all the different operations. To get the total of all the fans in our clubs array we use the reduce method in the following way

const totalFans = clubs.reduce((x, item) => {
  return item.fans + x;
}, 0);
Enter fullscreen mode Exit fullscreen mode

Screenshot (96)

It takes a property and an item we want the property to be reduced to. It also takes a second parameter which is where we want to start the reduce from. In our case it starts from 0.

Discussion (2)

Collapse
lukeshiru profile image
LUKESHIRU

If you put the language after the triple backtick in you get syntax highlight, which makes the post way easier to read, like this:

const totalFans = clubs.reduce((total, { fans }) => total + fans, 0);
Enter fullscreen mode Exit fullscreen mode

Cheers!

Collapse
mcube25 profile image
Muhammad Muhktar Musa Author

wow
thanks