Interview Questions

Map, reduce, and filter - JavaScript functional programming
Three functions that are commonly used when applying functional programming techniques in Javascript are the map, reduce, and filter functions. We'll go over each below and explain how they work.

## Map

The map function creates a new array by calling a specific function on each element in an initial array. For example, if you have an array of strings in the form "MM-DD" that represent birthdays and you want to convert each element to be in a different format, you could use the map function to create a new array with new elements.
```var bdays = ['08-14', '10-04', '04-21'];

// we want a new array where the birthdays will be in the format: MM/DD
// the elem parameter will be each element from the original array
var bdays2 = bdays.map(function(elem) {
return elem.replace('-', '/');
});

console.log(bdays2); // => ['08/14', '10/04', '04/21']
```
Another simple example using the map function to round an array of numbers up in JavaScript:
```var arr = [1.5, 2.56, 5.1, 12.33];

// round each number up in an array
var rounded = arr.map(Math.ceil);

console.log(rounded); // => [2, 3, 6, 13]
```

## Reduce

The reduce function applies a specific function to all the elements in an array and reduces it to a single value. The reduce function has actually been used in several of the challenge solutions, one example being Mean Mode. We can use the reduce function to add up all the numbers in an array for example. The four arguments the reduce function takes are: 1) previous value 2) current value 3) current index 4) original array
```var nums = [1, 2, 3, 4];

var sum = nums.reduce(function(prevVal, curVal, curIndex, origArr) {
return prevVal + curVal;
});

console.log(sum); // => 10
```

## Filter

The filter function creates a new array with all elements from an original array that pass a certain functions test. For example, you can use the filter function to create a new array of only positive values, like below. The function being called takes in an argument which is the value of the current element in the array.
```var nums = [-4, 3, 2, -21, 1];

var pos = nums.filter(function(el) {
return el > 0;
});

console.log(pos); // => [3, 2, 1]
```
You can also, for example, filter out all objects in a data file that have incorrect or undefined values. In the example below, we filter out all elements that have an incorrect age value.
```var data = [
{name: 'daniel', age: 45},
{name: 'john', age: 34},
{name: 'robert', age: null},
{name: 'jen', age: undefined},
{name: null, age: undefined}
];

// dataMod will now contain only the first two objects in the data array
var dataMod = data.filter(function(el) {
if (el.name != undefined && el.age != undefined) {
return true;
}
else {
return false;
}
});
```
These are some basic functional programming methods commonly used in JavaScript. Tutorials coming up will focus on more advanced functions and also on incorporating these methods with new ECMAScript 2015 syntax and functions as well.
mrdaniel published this on 4/12/16 |
• +
• 11
• -
• I have a question regarding the filter function above. In the if statement it tests to make sure that el.name and el.age are not undefined, but why does it filter out the el.name = 'robert' / el.age = null object? I suspect it is because el.age = null, but I guess I just don't understand why it would consider null as undefined in the el.age != undefined statement. ``` if (el.name != undefined && el.age != undefined) { return true; } ```
• +
• 3
• -
• @connorch, that element is filtered out because in JavaScript, null == undefined (because of the double equal, type coercion takes place). If, on the other hand, we tested by doing: ``` if (el.name !== undefined && el.age !== undefined) { return true; }``` then that element would not be filtered out.
• +
• 1
• -
• @mrdaniel, Ooh that makes a lot of sense. (null == undefined) is true, but (null === undefined) is false. Got it. Thanks for your help!
• +
• 0
• -
• @jaimerosales
``` Math.round(5.1) //returns 5
Math.round(5.5) //returns 6
Math.ceil(5.1) //returns 6
```
• +
• -8
• -
• I have a question, why in the Map section, in the second example the choice to round a number is the function Math.ceil() ```var rounded = arr.map(Math.ceil); // instead of rounding it by using var rounded = arr.map(Math.round); ``` Why not using Math.round(), which gives back a more accurate mathematical round result, where 5.1 would be 5 and not 6? Just a thought. not saying is wrong.