8 Must Know JavaScript Array Methods | JavaScript Array operations

By Gyanendra Kumar Knojiya
Oct 20, 2021 2:27 PM

We are going to talk about top JavaScript Array methods that you should know. By using these methods, you can speed up your development.

1. Filter:

Here we have an array of items-

const list = [
  { name: "book", price: 2 },
  { name: "book", price: 2 },
  { name: "pen", price: 12 },
  { name: "ink", price: 14 },
  { name: "rubber", price: 6 },
  { name: "pencil", price: 4 },
  { name: "notebook", price: 3 },
  { name: "camera", price: 20 },
];

Now, we want to filter items that have a price less than 10. To do that, we can filter method-

const filterList = list.filter(item=> item.price < 10)// Output
[{name: 'book', price: 2},
{name: 'book', price: 2},
{name: 'rubber', price: 6},
{name: 'pencil', price: 4},
{name: 'notebook', price: 3}]

2. Map:

By using this method, we can loop through all array elements and can create a new array. For example, if we want to create an array of items name only, then we can use the map.

const newArray = list.map(item=> item.name)

//Output
['book', 'book', 'pen', 'ink', 'rubber', 'pencil', 'notebook', 'camera']

3. Find:

By using the find method, we can find a single item in the array. To find an item, we add a true or false statement and it will return the first item where the condition is true.

const findItem = list.find(item=> item.name === "camera")

//Output
{name: 'camera', price: 20}

4. forEach

It is like for loop in javaScript, but it does not return an array. Just we can loop through all elements in the array.

list.forEach(item=> console.log(item.name));

//Output
'book'
'book'
'pen'
'ink'
'rubber'
'pencil'
'notebook'
'camera'

5. Some

Some functions return true or false when a condition is satisfied. It loops through all elements until it finds the condition. If find the condition, it will return true otherwise false.

const hasCamera = list.some(item=> item.name === "camera")

//Output
true

6. Every

It is similar to some but instead of checking one item, it will check every item. If anyone's condition failed, it will return false.

const hasMoreLess20 = list.every(item=> item.price < 20)
//Output
false

const hasMoreLess21 = list.every(item=> item.price < 21)
//Output
true

7. Reduce

Reduce loops through all array elements and give an accumulated result.

Syntax: array.reduce( function(total, currentValue), initialValue )

Here, we want to calculate the total price of all items in the array-

const total = list.reduce((total,item)=> total + item.price, 0)

//Output
63

8. Includes

It will check whether the element is present in the array or not. It takes a single argument as input and returns true or false.

const numbers = [2, 5, 8, 9, 8, 6];

Here we are checking if 9 is in the array or not-

const isNine = numbers.includes(9);

//Output
true

Thanks for reading this article. You can play with this codepen https://codepen.io/gyanendraknojiya/pen/GRvjZvZ to explore more.

If you have any queries, feel free to contact me: https://gyanendra.tech/#contact