**Managing data with modern JavaScript: map, filter, reduce, find**

Knowledge about manipulating data in an array or object is very important if you’re working in a project that requires CRUD functions, either with or without a database. Looking back on the days when modern JavaScript was not yet put into practice, it was so difficult to manage a data. Now, it’s super easy by using the built-in functions of ES6+.

Learning the modern JavaScript can be confusing if you don’t know what its history is and how its traditional syntax works. You might have seen the term “ECMAScript” somewhere else or heard about “Javascript ES6/7/8” and wondered what it actually means. I suggest if you’re a total beginner in JS and you’re curious about what these terms are for, you might consider reading **What’s the difference between JavaScript and ECMAScript?**** **You are also encourage to brush up on the basics of JavaScript from here and continue with this article when you’re all caught up.

**.map()**

Map function translate each item from an array into another form of array. Let me give an example. Say you have an array of numbers and you want to multiply every value of each item by 2.

`// Your array of numbers`

let numbers = [12, 23, 8, 19, 10];

Using the traditional way of writing a JavaScript code, you might create an empty array and use a loop to meet your goal.

`var numbers_m2 = [];`

for (i = 0; i < numbers.length; i++) {

numbers_m2.push(numbers[i] * 2);

}

console.log(numbers_m2);

However, with map function, your code will simply look like this:

`let numbers = [12, 23, 8, 19, 10];`

let numbers_m2 = numbers.map(function(number) {

return number * 2;

});

console.log(numbers_m2);

Did you notice how I eliminated the for loop? That’s because I stored the .map() to *numbers_m2 *which takes a function as its argument and runs that function on each item in the *numbers*. The function argument itself takes one argument which is the *current item* in the *numbers *— in the code above current item is *number*.

You can even make your code shorter by using an ES6 arrow function which looks like this:

`let numbers = [12, 23, 8, 19, 10];`

let numbers_m2 = numbers.map(number => number * 2);

console.log(numbers_m2);

So how does .map() works? **Map function returns a new array of equal length, containing transformed items.** That is to say, the new array isn’t just a copy of the original array.

**.filter()**

Using also the array of numbers example above, what if you only want to get the numbers that is less than or equal to 15? That’s what filter function is for! **It is used to remove unwanted items in an array. **It returns a new array, but with fewer items than found in the original array.

`let numbers = [12, 23, 8, 19, 10];`

let numbers_less_15 = numbers.filter(function(number) {

return number <= 15;

});

console.log(numbers_less_15);

Using ES6 arrow function:

`let numbers = [12, 23, 8, 19, 10];`

let numbers_less_15 = numbers.filter(number => number <= 15);

console.log(numbers_less_15);

In in other words, .filter() is basically just like a loop with an if-statement inside: only items that meet the if-condition can make it to the new array.

**.reduce()**

Reduce is quite difficult to understand but it’s simply just used to summarize an array into a single value, which can be of any datatype: number, string or even array. It’s like map and filter as it also takes a function as its argument and runs that function on each element, however, reduce needs at least two arguments in its call back function which is an **accumulator **and the **current item in the array**. An accumulator basically accumulates all of the callbacks’ returned values.

I’m guessing you’re confused. Just keep in mind that with reduce function, you only get one value returned, and it doesn’t need to be an array — it is frequently a number, since .reduce() is good for adding stuff up.

For example, you want to get the sum of our array of numbers above. If you’re coding with an old traditional way writing JS, you might write a code that is similar to this:

`var numbers = [12, 23, 8, 19, 10];`

var total = 0;

for (i = 0; i < numbers.length; i++) {

total += numbers[i];

}

console.log(total);

With reduce function, your 6 six lines of code will only be 3. ;)

`let numbers = [12, 23, 8, 19, 10];`

let total = numbers.reduce((acc, cur) => acc + cur);

console.log(total);

The code above iterates numbers with .reduce(), getting the sum of its items by storing it in *total*. To make it easier to read, we’ll keep the function curly brackets and return the sum of accumulator and the value of current item.

`let numbers = [12, 23, 8, 19, 10];`

let total = numbers.reduce(function(acc, cur) {

return acc + cur;

});

console.log(total);

The *acc *parameter is the variable that holds the accumulating total while *cur *is the current array item.

So how does .reduce() works? Reduce function basically combine several items from an array through some calculation which later will generate a single value.

**.find() & .findIndex()**

Find function is very similar to .filter() and findIndex function is somehow like .reduce(), the difference is** .find() returns only the item’s value while .findIndex() only returns the item’s index of the first element in the array that satisfies the provided condition**, otherwise undefined or -1 is returned.

Say you want to get both value and index of an item in the array of numbers above with a condition number >= 9 and number <= 11. The way how you can do that with ES6 is:

`let numbers = [12, 23, 8, 19, 10];`

let index = numbers.findIndex(number => number >= 9 && number <= 11);

let val = numbers.find(number => number >= 9 && number <= 11);

console.log(`${index} = ${val}`); // 4 = 10

Both of these functions can be useful in cases where you need modify your array by Creating, Updating, Deleting, and Moving some elements and you want to keep the order of your initial array.

# Summary

Modern JavaScript has introduced a bunch of syntax improvements.

- Map evokes a function on every item in an array and it can return anything. It can have something to do in the current item’s value either do a mathematical equation or concatenation.
- Filter has a condition and only the items on which the condition returns true will be pushed to a new set of array.
- Reduce has an accumulator and a current value and you can do something with these two parameters like add them together to combine all the values in the array which then results to a one big single value.
- Find and findIndex is both used to find the first element that matches a condition.

Using these built-in functions of ES5/ES6+ can help you work with complex data structure easily and develop your programs effortlessly without having lots of codes.