JavaScript Array methods: Filter, Map, Reduce, and Sort
Tags: javascript, webdev, tutorial
Published: 2021-04-02 02:21:19


Functions are a very important part of JavaScript, and you will use them all the time. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. There are several ways to define functions, the most common one is to define functions with a function declaration. Example:

```
function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6));
//-------> Output: 30
```

### Term "callback"
When we pass a function expression (an anonymous function) or the pointer (variable name, declared function name) to a function as an argument, the passed function is called a callback. Since the receiving function will execute, or call that function at a later time; that is, it will call it back, it is called a callback.

### Let's learn more about Array methods: Filter, Map, Reduce, and Sort
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcpniz4b2c2s7nv4azxw.png)

Arrays provide a lot of methods. JavaScript already has methods built into its Array data type. Follows the examples of how to use it.

## Use `.filter()` to filter an Array

`filter()` returns a new array of filter elements that meet a certain condition. The `filter()` method creates a new array with all elements that pass the test implemented by the provided function.
`filter()` does not execute the function for array elements without values and doesn't change the original array.

### Syntax:
```
array.filter(function(currentValue, index, arr), thisValue)
```
`function(currentValue, index,arr)` is required. 

A function to be run for each element in the array, function arguments are:
`currentValue`- required, the value of the current element
`index` - optional, the array index of the current element
`arr` -	optional, the array object the current element belongs to.
`thisValue`- optional. A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value.

### Example
```
const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//-------> Output: Array ["exuberant", "destruction", "present"]

//-------> Output: ["exuberant", "destruction", "present"]
```
### Example:
```
[10, 20, 30, 40].filter(function() {
    return true;
  }) //=> [10, 20, 30, 40] (map, basically)
 
  [10, 20, 30, 40].filter(function(e) {
    return e < 30;
  }) //=> [10, 20]
 
  [10, 20, 30, 40].filter(function(e, index) {
    return index % 2 === 0;
  }) //=> [10, 30] (elements with an even-numbered index)
```
### Example:
```
const myArray = [
  { id: 1, name: "Mark" },
  { id: 2, name: "Sam" },
  { id: 3, name: "Sandy" },
  { id: 4, name: "Mark" },
]

myArray.filter(element => element.name === "Mark")
//-------> Output : 0:{id: 1, name: "Mark"},
//                  1:{id: 4, name: "Mark"}

```
## Use `.map()` to transform an Array

The `map()` method calls a callback function on every element of an array and returns a new array that contains the results.

The `map()` method takes two named arguments, the first one is required whereas the second one is optional.

### Syntax: 
```
const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});
```

`newArr` - the new array that is returned
`oldArr` - the old array being operated on. This array will not be changed
`currentValue` - the current value being processed
`index` - the current index of the value being processed
`array` - the original array

### Example: 
```
const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
//-------> Output: [2, 8, 18, 32]
```
### Example: 
```
[10, 20, 30, 40].map(function(a) {
  return a * 2;
}); 
//-------> Output: [20, 40, 60, 80]
```

### ES6 Example:

```
const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]
```

## Use `.reduce()` to reduce an Array to a value

The `reduce()` method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The `reduce()` method executes a provided function for each value of the array (from left-to-right).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nc1bxwewgyp6m2hss9n4.jpg)
The return value of the function is stored in an accumulator (result/total).

Note: `reduce()` does not execute the function for array elements without values.

This method does not change the original array.

### Syntax:
```
array.reduce( function(total, currentValue, currentIndex, arr), 
initialValue )
```
This method accepts five parameters:

`function(total, currentValue, index, arr)`: It is the required parameter and used to run for each element of the array. It contains four-parameter which are listed below:
`total`: It is a required parameter and used to specify the initialValue, or the previously returned value of the function.
`currentValue`: It is a required parameter and used to specify the value of the current element.
`currentIndex`: It is an optional parameter and used to specify the array index of the current element.
`arr`: It is an optional parameter and used to specify the array object the current element belongs to.
initialValue: It is an optional parameter and used to specify the value to be passed to the function as the initial value.
```
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }) //=> 100
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }, 100) //=> 200
```

### Example
Subtract the numbers in the array, starting from the beginning:
```
var numbers = [125, 20, 25, 30];

document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}
//=> 50

```
Let's see how `.reduce()` works. The callback would be invoked four times, with the arguments and return values in each call being as follows:

```
[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue
})
```

| callback iteration| accumulator| currentValue | currentIndex       | array | returnValue|
| --- | :---: | :---: | :---: | :---: |:---: |
| first call    | 0 | 1|1 | [0, 1, 2, 3, 4] | 1 |
| second call   | 1 | 2|2 | [0, 1, 2, 3, 4] | 3 |
| third call    | 3 | 3|3 | [0, 1, 2, 3, 4] | 6 |
| fourth call   | 6 | 4|4 | [0, 1, 2, 3, 4] |10 |

## Use `sort()`
The `sort()` method sorts the elements of an array in place and returns the sorted array. 

### Syntax
```
arr.sort([compareFunction])
```
Paramaters:
`compareFunction` is optional. It specifies a function that defines the sort order. 
`firstEl`, the first element for comparison.
`secondEl`, the second element for comparison.

To sort an array of objects by the values of the object’s properties, you use the `sort()` method and provide a comparison function that determines the order of objects.

### Example
Suppose that you have an array of `students` objects as follows:
```
let students = [
    {
        firstName: 'Johnny',
        lastName: 'Lee',
        age: 20,
    },

    {
        firstName: 'Anna',
        lastName: 'Zax',
        age: 19,
      
    },

    {
        firstName: 'Zion',
        lastName: 'Sanches',
        age: 22,
        
    }
];
```
The following statement snippet sorts the students array by ages in ascending order:

```
students.sort((a, b) => {
    return a.age - b.age;
});
```
where to display the students, you can use the forEach() method:
```
studetns.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});
```

Output:
```
Anna Zax 19
Jonny Lee 20
Zion Sanchez 22
```

To sort the students by ages in descending order, you just need to reverse the order in the comparison function like this:

```
students.sort((a, b) => b.age - a.age);

students.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});
```

output:
```
Zion Sanchez 22
Jonny Lee 20
Anna Zax 19
```

### Conclusion
We saw how `map()`, `filter()`, `reduce()` and `sort()` can ease the life of a developer by reducing the number of unnecessary explicit loops and empty array declarations. Try replacing your for loops with these state-of-the-art functions whenever you get a chance. More documentation can be found [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript).

To connect please check my [Github](https://github.com/ivanadokic), [LinkedIn](https://www.linkedin.com/in/ivana-dokic/) or [Twitter](https://twitter.com/LloydPile).

Thank you for reading!