Hi everyone, today I’m going to explain how to use two of the greatest functions to work with arrays in JavaScript: reduce and map. So let’s go to the example.

Array.prototype.map (callback [, thisArg])

Map is a function that allow us creating a new array result of operate with other array elements. The resulting array will have the same length as the original array.

The callback function has 3 args:

• The current element in the array.
• The index of the current element.
• The full original array.

You can use thisArg to indicate which object will be used when you call this keyword in callback function.

Know this will allow us write a short example to show you how to use it:

var arr = [{a:5, b:2}, {a:7, b:1}, {a:2, b:7}, {a:12, b:6}];

var subtraction = arr.map(function( element, index, array) {
     return element.a - element.b;
});

console.log(subtraction); // Will show an array with [3, 6, -5, 6]

As you can see this array will have the same length as the original array used for map and the elements contained are the results from the return of callback function. Really simple and useful!

Array.prototype.reduce(callback [, initValue])

Reduce is a function which return a value after operating with all elements in an inputted array.

The callback function has 4 args:

• Previous value
• Actual value
• The index of actual value
• The full original array

You can use initValue arg to indicate which will be the first value of Previous value if no value is used then, in the first loop, Previous value will take the value of the first element of the original array, and Actual value will take the value of the second element. If initValue is used then the first loop will use it as Previous value and the first element of the array will be used as Actual value. The return value of this function can be any variable you want: a string, a number, an array, an object… You decide!

Let’s see an example,  this time we will generate an object counting the times that each character appears in a string:

var str = "Hello, this is just a reduce test!";
var strArr = str.split("");

var charCount = strArr.reduce(function( previousValue, actualValue, index, array) {
    if(previousValue[actualValue]){ 
      previousValue[actualValue]++; //if actual value has appeared in previous iterations just increase its value in our object
    } else { previousValue[actualValue] = 1; // else if it hasn't appeared yet just start count with "1" 
}
    return previousValue; //return previousValue for using it as previousValue in the next iteration 
}, {});  //We use an empty object as initialValue

console.log(charCount); // Will show in console something like "Object { H: 1, e: 4, l: 2, o: 1, ,: 1,  : 6, t: 4, h: 1, i: 2, s: 4, 7 more… }"

What a magic experience!

With this short post I hope you have understood correctly how this great functions work and now it only depends on what you do and how you use it in your awesome applications.

See you in future posts!