Lets deep down into JavaScript arrays and check its functions one by one.

1. every

every test if a condition matches with all the elements of an array.

Lets say you want to check if all elements of array are greater than zero then you can use every and pass the condition in it and it will return Boolean (true or false) if all elements passes throught the conditions or not.

Remember even if one element doesn't lie in the condition it will return false.

For the above scenario code will be like this

let myArray =  [1,2,3,4,5];
myArray.every(element => element > 0);

and it will return true.

Refrences:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/every

https://www.w3schools.com/jsref/jsref_every.asp

2. filter

Filter will simply filter out elements from your array returns them in a new array.

So in the callback function you will provide a condition and if the element passes it, it will be added the new array.

So I have an array of objects with product names and their prices.

let products = [ { name: "T-shirt", price: 30}, { name: "Jeans", price: 50}, { name: "Cap", price: 20 } ];

and I want to filter out the product which have less price than 40 then I can use filter to filter out the products. Like this

products.filter(product => product.price < 40 );

and it will return me a new array with products having price less than 40.

[
    {
        "name": "T-shirt",
        "price": 30
    },
    {
        "name": "Cap",
        "price": 20
    }
]

Complete code will be like this:

let products = [ { name: "T-shirt", price: 30}, { name: "Jeans", price: 50}, { name: "Cap", price: 20 } ];
products.filter(product => product.price < 40 );

Refrences:

developer.mozilla.org/en-US/docs/Web/JavaSc..

w3schools.com/jsref/jsref_filter.asp

includes

Includes is very useful when you want to find if a certain element is present in an array.

In this Array

let fruits = ["Apple", "Banana", "Mango"];

I want to check if "Strawberry" is in the include

fruits.includes("Strawberry");

as there is no "Strawberry" element inside the array it will return false.

Code:

let fruits = ["Apple", "Banana", "Mango"];
fruits.includes("Strawberry");

Refrences: developer.mozilla.org/en-US/docs/Web/JavaSc.. w3schools.com/jsref/jsref_includes_array.asp

3. map

So map is the most used array function in my opinion, as it can be use instead of loops if you want to generate a new array by using the elements of another array.

Map returns a new array with elements you will return in the callback function. Lets take an example.

If I have an array

let numbers = [1,2,3,4,5];

and I want a new array with numbers of first array incremented by one. So we can use map function here like this,

numbers.map(number => number + 1);

as you can see in the callback function I am returning the element of first array incremented by one. In this scenario map will return

[2,3,4,5,6]

This is a very basic example but map can be used in many complex ways and can help alot specially if you want to generate dom elements using array. Lets also see an example of that.

let planets = ["Earth", "Mars", "Jupiter", "Saturn"];

so we have array of planets and we want to generate an html unordered list using this array. So simply you will run map function on this array and return the individual list items and save them inside a variable.

let planetList = planets.map(planet => '<li>'+planet+'</li>');

Now as I said before map will return a new array, this will return a new array with

elements.

[
    "<li>Earth</li>",
    "<li>Mars</li>",
    "<li>Jupiter</li>",
    "<li>Saturn</li>"
]

Now to show them inside the

tag we can use join function to join all the elements of array.

"<ul>"+ planetList.join("") + "</ul>"

4. reduce

Reduce function is used to perform calculations on array elements. It runs the user provided function on each element with the previously calculated value.

Lets look into a simple use case where we will sum up all the values of an array. Lets say we have an array

[22,100,44,3, 203]

Now we will use the reduce function on this array and sum all the integers inside it which will return 372

const numbers = [22,100,44,3,203];
const total = numbers.reduce((previousValue, currentValue) => currentValue + previousValue);

Here I have set two parameters previousValue and currentValue.

currentValue is the iteration of elements of array . previousValue is the precending calculated value which is getting sum up.

Here you can check multiple usecases of reduce function.

developer.mozilla.org/en-US/docs/Web/JavaSc..