Map behave just like filter. It too is a function on the array object. Map will be passed each item in the elements array. But here is where map and filter are different.

Filter expects it’s callback function to return true or false indicating whether the element should be included in the newly returned array or not.

Map on the other hand will include all items in the array, but instead it expects the callback function to return a transformed object that it will put into the new array instead of the original animal. In this case – the name.

Screen Shot 2017-10-12 at 6.22.12 AM.png

Using map to return a subset of an object, is common. However, since map expects the callback to return any object, we can use it to return completely new objects.

Screen Shot 2017-10-12 at 6.27.41 AM.png

Screen Shot 2017-10-12 at 6.27.46 AM.png

The nice thing about methods like filter and map is it saves us from having to loop over each element in the array explicitly. It’s a lot less code.

And in ECMA6 it gets even better with arrow functions.

Screen Shot 2017-10-12 at 6.30.34 AM.png

Which can be further simplified to

Screen Shot 2017-10-12 at 6.31.18 AM.png

And it’s conventionally to not even include the object name. Just use x instead.

Screen Shot 2017-10-12 at 6.32.35 AM.png