## Heyo 👋

# An introduction to `.map, .filter, .reduce` by making a fresh fruit salad (🥗).

Any good fruit salad should be brimming with nice stuff; carefully selected, chopped and mixed into a tasty bowl of goodness.

They're also great for explaining JavaScript's more functional methods, which undoubtedly will be a good addition to your developer skills.

Hungry yet? Good. Let's get chopping with some basic examples.

array.map(x => x.value)

Since there's not much fun with a fruit salad if we just throw in our fruits as they are into a bowl and call it a day (that's just a bowl of fruit, eck...), we'll chop them into pieces first. `.map` works wonders for this. Let's try it out.

const fruits = ['🍎', '🍌', '🍈', '🍉', '🌶️', '🍊'] const chop = (fruits, pieces = 4) => fruits.map(type => ({ type, pieces }) /* ☝️ ES6 allows us to avoid typing unnecessary key, value pairs if there are arguments with the same name within the same scope. Also ({ type, pieces }) is simply shorthand for "return { type, pieces }". */ ) const choppedFruits = chop(fruits)

What! Our fruits got sliced and diced into 4 pieces each and returned to us in a neat container arranged by type. I wish my kitchen could do that in real life.

So, what's happening? By running the `.map` method on our `fruits Array` , we end up with this neat Array of Objects:

console.log(choppedFruits) /* [ { type: '🍎', pieces: 4 }, { type: '🍌', pieces: 4 } ... etc. ] */

Behind the scenes, `.map` will loop through your array, apply the transformations that you defined, and finally return a new array with the transformed data back to you. What's key here is that the new array it's own copy, and not that the original array was altered (or "mutated").

Since it's a completely new array, we don't have to worry about our original array being permanently changed. It's not, which allows us to keep transforming the original into many different directions, if you need to.

This "immutability" is a common trait for both `.map, .filter, and .reduce` , and it's generally a good thing to keep in mind when you want to avoid unwanted side effects when working with arrays.

array.filter(x => x !== y)

Oh no! We've accidentally chopped a super spicy chili pepper into our lovely fruit salad. That won't do - unless you like a fiery kick with your fruit.

If this was in a real kitchen, we'd have to tediously pick out all the pepper pieces, wasting our time. Luckily, we don't have this problem in JavaScript as we can just use `.filter` to pick out that chili in a zinch. Let's give it a shot.

const removeChilis = fruits => fruits.filter(fruit => fruit.type !== '🌶️') const fruitsWithoutChilis = removeChilis(choppedFruits) console.log(fruitsWithoutChilis) /* Chili's out. All good. [ { "type": "🍎", "pieces": 4 }, { "type": "🍌", "pieces": 4 }, { "type": "🍈", "pieces": 4 }, { "type": "🍉", "pieces": 4 }, { "type": "🍊", "pieces": 4 }, { "type": "🍓", "pieces": 4 } ] */

Ah, much better. The `.filter` method makes it easy for us to include or exclude items in an array (or arrays of Objects) and continue using the newly returned, and filtered, array for new stuff.

Keep in mind, that filtering doesn't always mean filtering things out as in a `x !== y` fashion. It can just as well be the other way around as in "give me only that 🌶️ and leave out the rest", by saying `fruit.type === '🌶️'` .

array.reduce((a, b) => a + b, c)

Finally, without any fiery surprises, we can mix our tasty fruit pieces together into a grand fruit salad. The `.reduce` method is great for this, since it allows us to loop through all of our chopped fruits and add them into the bowl one by one until we end up with one, finished and mixed bowl.

Let's have a look at that.

const mix = (fruits, bowl = '') => fruits.reduce( (content, fruit) => content + fruit.type , bowl) /* This yields a String `🍎🍌🍈🍉🍊🍓` because we're just concatinating these guys together. */ const fruitSalad = mix(fruitsWithoutChilis) // But is it really a fruit salad? Let's check... console.log(fruitSalad === `🍎🍌🍈🍉🍊🍓` ? '🥗' : '😱') // 🥗, yay!

We did it! With a little help from `.reduce` we could mix all our fruit pieces into one bowl. So, what happened here?

`.reduce` is a very interesting method that can do tons of complex stuff, which is out of scope for this piece, but the gist of is that you "take multiple values and calculate them into one final value" .

A typical use case is summing up stuff, like counting how many fruit pieces there were in total. The uses are endless when you start to really get a grasp of it.

One gotcha is the initial value that you can pass a `.reduce` method. In our case we pass an empty `bowl String` , but it can basically be anything. A number, an Array, an Object, etc.

The initial value can be a bit strange at first, but in our fruit salad example you can try and think of it as the empty bowl itself. It is "connected" to the `content` variable, so whenever we do an operation, we're looking into the bowl and adding more stuff to it's current content.

Until we don't have anything left, that is. Then `.reduce` stops and returns the final result.