Cara menggunakan filter vs reduce javascript

If you want to learn React, it's important to get a fair understanding of some core JavaScript concepts first.

So if that's what you're doing, first of all – great job! You have made a wise decision by not starting directly with React.

Second, React builds on key concepts like the map(), filter(), and reduce() JavaScript methods (after all – React is a JavaScript library). So this makes these methods a must-learn.

Map, filter, and reduce are three of the most useful and powerful high-order array methods. In this tutorial, you'll see how each of these high-order array methods work. You'll also learn where you'll want to use them and how to use them, with the help of analogies and examples. It’ll be fun!

How to Use the map() Method

Suppose you have an array

arrOne.map(value/element, index, array)

This is where map() comes into the picture. The

arrOne.map(value/element, index, array)

let arrOne = [32, 45, 63, 36, 24, 11]

map() takes a maximum of three arguments, which are value/element, index, and array.

arrOne.map(value/element, index, array)

Let’s say you want to multiply each element by 5 while not changing the original array.

Here's the code to do that:

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

And here's the output:

[ 160, 225, 315, 180, 120, 55 ]

So what's going on here? Well, I have an

arrOne.map(value/element, index, array)

arrOne.map(value/element, index, array)

arrOne.map(value/element, index, array)

If you’re new to arrow functions but are familiar with regular functions, an arrow function is the same as this:

function(num) 
	{  
    	return num * 5;
    }

Then, I initialized another variable

arrOne.map(value/element, index, array)

On the right-hand side, I called the map() method on the ‘arrOne’ array. So, the map() method will pick each value of that array starting from the index[0] and perform the desired calculation on each value. Then it'll form a new array with the calculated values.

Important: Notice how I’m stressing not changing the original array. That is because this property is what makes the map() method different from the ‘forEach()’ method. The map() method makes a new array whereas the ‘forEach()’ method mutates/changes the original array with the calculated array.

How to Use the arrOne.map(value/element, index, array)7 Method

The name kind of gives it away, doesn't it? You use this method to filter the array based on conditions you provide. The filter() method also creates a new array.

Let’s take an example: Suppose you have an array

arrOne.map(value/element, index, array)

Here's the code to do that:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function divByFive(num) {
  return num % 3 == 0
}
let arrNewNum = arrNum.filter(divByFive)
console.log(arrNewNum)

And here's the output:

[ 15, 39, 30, 45 ]

Let's break down this code. Here, I have an array

arrOne.map(value/element, index, array)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

Then, I initialized another variable

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

On the right-hand side, I called the filter() method on the

arrOne.map(value/element, index, array)

How to Use the reduce() Method

Let’s say you are asked to find the sum of all elements of an array. Now, you could use a for loop or the forEach() method, but reduce is built for this kind of task.

The

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

Let’s take the above example and use reduce on it:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function sumOfEle(num, ind) {
  return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle)
console.log(arrNum2)

Here's the output:

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

Everything is the same as the map() and filter() methods – but what’s important to understand is how the reduce method works under the hood.

There’s not a definite of the reduce() method. Let’s see the simplest one and that will give you the gist of all the ways you can use reduce().

Here's some example syntax for

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

//Taking the above array for an example
let arrNum = [15, 39, 20, 32, 30, 45, 22]arr.reduce((a1, a2) => { 
 return a1 + a2
})

Take a look at this syntax. Here, reduce is taking two arguments,

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

Now, on the first run the accumulator is equal to zero and

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

So, basically

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

So,

[ 160, 225, 315, 180, 120, 55 ]

Now, on second run, reduce throws

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

So,

[ 160, 225, 315, 180, 120, 55 ]

Now, on the third run, the accumulator has a sum of 15 and 39 which is 54.

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

[ 160, 225, 315, 180, 120, 55 ]

This process keeps on going until the end of the array.

Signing Off

Well, that’s it, everyone! Hope you have a good idea of how these high-order array methods work now. Consider sharing if you had a good time reading it and find it helpful.

Check out my latest story here, and for my Git eBook, check here.

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Bhavesh Rawat

20, Writer, Curator @FreemiumStuff, Developer

If you read this far, tweet to the author to show them you care. Tweet a thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Apa itu Reduce di JavaScript?

Method apa yang dapat kita gunakan untuk memilah elemen array berdasarkan kondisi tertentu dan akan membuat sebuah array baru?

Apa itu Map di JavaScript?