When developing an application, there will be so many chances where you’ll need features like searching or filtering a list(aka an array), or may you need to create new list based on an existing list, as well as sorting the list.

In my own experience when developing app with JS frameworks and libraries, i found that i would need to use these 3 array methods (map, filter, and sort) most often when dealing with arrays. So i think you may need to getting familiar with these array methods as well.

Before we jump to the detail of each method, let us see some of prerequisites that may will help remove some barriers to fully understand these methods.

1. Why they're called methods They are methods because they are not separate function in other library or something, they are functions that attached to the arrays. So, to call these methods we will call them directly from the array variable. For example you have an array of numbers, named arr. You will apply these methods on that array this way: arr.map(...), arr.filter(...), arr.sort(...). In real implementation, we will need to replace the ... inside parentheses of each function with what we call callback function.

2. The callback function Callback function is the function we define/mention inside the parentheses when we call the array functions. This function will be applied to each item of the array, and we can define this function either as a regular function or an arrow function.

3. Notes: map and filter call will returned a new array, not changing the array that call these methods, but sort does.

That's it for the prerequisites. Now, let's take a look at these array function in more detail:

1. Map

The map method is used whenever we want to create a new array based on an existing array's values. The map method will go through each element of the existing array and use each of them to create a new value. At the end, these new values will be returned by the map method as a new array that we can use latter on.

Let's say we have an array of numbers called nums which contain numbers [1, 2, 3, 4, 5]. For some reasons, we want to create a new array which contain values of nums that increase by 2 [3, 4, 5, 6, 7]. Instead of using for loop with additional variables to count the index, we can apply map method to the nums variable. I'll use arrow function here:

let nums = [1, 2, 3, 4, 5];
let nums_plus_two = nums.map(item=>item+2);

In the sample above, the callback function(arrow function) inside the map method is taking each element of nums (one by one orderly) and put it to the variable item (you can name it whatever you want), and then returned new value (item+2). At the end, these new values will be returned as new array so we may need to keep it to another variable.

The above implementation is much simpler and more readable compare to using for for the same purpose. Let's see the implementation if we use for loop to get the same result.

let nums = [1, 2, 3, 4, 5];
let nums_plus_two = [];
for(let i=0;i<nums.lenght; i++){
  let new_item = nums[i] + 2;
  nums_plus_two.push(new_item);
}

You can see how much the map method simplified things for you.

2. Filter

As the name suggest, we apply the filter to an array in order to get only some items that comply with specific condition. The callback function inside the filter method will test the specific condition to each element of the array. If the test logic is true for the element, that element will be returned(included in the resulting array). Otherwise it will be skipped.

Let's use our previous nums variable that contain values [1, 2, 3, 4, 5]. This time we want to only get items with values greater than 3. Here is the implementation:

let nums = [1, 2, 3, 4, 5];
let gt_three = nums.filter(item=>item>3);

The arrow function inside filter method item=>item>3 will take each value of nums as item. The item then being tested to item > 3 condition. Only item with value greater then three will passed this test thus will be returned as item on the resulting array. The gt_three variable will contain [4,5].

3. Sort

Different than map and filter, this method will change the array that called it in place. It doesn't return new array. It's usage is also very simple. Just called it on any array you wanted to sort.

let nums = [5,2,7,7,6,8,4];
nums.sort();//[2,4,5,6,7,7,8]

let months = ['Oct','March', 'Jan', 'Feb', 'Dec'];
months.sort();//["Dec", "Feb", "Jan", "March", "Oct"]

You can also sort array of objects as well as shown in this blog.