8 Must Know JavaScript Array Methods | JavaScript Array operations

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 of 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

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

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)
const hasMoreLess21 = list.every(item=> item.price < 21)

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

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

Buy a coffee for me here https://www.buymeacoffee.com/gyanknojiya

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

Originally published at https://codingcafe.co.in.



Full Stack developer & Technical writer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store