ES6 provides a good list of array methods that can be used to manipulate arrays easily. If you are still using 'for loop' for every scenario to manipulate an array, checkout ES6 array methods. I’m sure you would find a function for every problem you can think of. You can sort, slice, splice, substring, map, filter, reduce, and so on. In this post, we will discuss the three most popular array methods that are asked in an interview. As a javascript developer, you are expected to know the usage of these methods. So, without any delay let us jump into them and dive into real-time examples.

MAP - This function returns an array with all the elements of the original array on which this function is used. It is an awesome feature that allows you to do a callback function, hence you have all the control on to do any operation with the elements. You can find many examples on the web showing ways of using the map function, however, one should know when to use it. Let us discuss a real-time example.

Say, we want to display a set of commodities based on their availability and type. In many cases, the data supplied by API is not straightforward for UI. Hence, we need to manipulate the data response to be able to integrate it into UI(HTML+CSS). Assuming the response from API is a JSON as follows:

Response: {
    Data: {
    Commodities: [
     {
       Name: “ABC”,
       isActive: false,
       Type: “type1”,
       Size: [
        {
         Name: ‘small’,
         isActive: true
         },
        {
         Name: ‘medium’,
         isActive: true
        },
       ]
     }    
   ]
 }
}

In order to use this array of objects to display commodities along with an image, where the image name is not provided in the response but we know that it is a combination of name and its type. In this case, we can run a map function and add a new property to each object as ‘imageName’ and then use the new array to display commodities in UI. Ex1 -
commodities.map(eachCommodity => eachCommodity)

Ex2 -

commodities.map(eachCommodity => { eachCommodity.imageName = eachCommodity.Name + eachCommodity.Type return eachCommodity })

FILTER - As the name speaks for itself, this function is used to filter out the required elements from the original array. This can be chained with a Map and vice versa. From the above example array, we can use a Filter to show only active commodities. Ex3 -

commodities.filter(eachCommodity => eachCommodity.isActive)

REDUCE - This is another array function that can be used to track array elements. I recommend this function in sorting and finding an element case. This is an underrated and less used function. Reduce function has an accumulator which can keep a track of your previous elements. You can consider this as a counter. When used in the right scenario, it saves time by improving performance. In order to better explain this better, we can find the expensive commodity. Ex4 -

let expensiveCommodity = null; commodities.reduce((previousCommodity, currentCommodity)=> { if(currentCommodity.currentPrice > previousCommodity.currentPrice){ expensiveCommodity= currentCommodity; } }, [commodities[0].currentPrice])

Reduce is something that can replace 'map' and 'filter'. Let me also show chaining these methods: Ex5 -

commodities.filter(eachCommodity => eachCommodity.isActive).map(eachCommodity => { eachCommodity.imageName = eachCommodity.Name + eachCommodity.Type return eachCommodity })

I hope this was helpful. Thank you!!