Note: I will use both es6 and pre-es6 syntax, in order to show the differences and to offer a better understanding of the methods themselves.
The map method is one of the most frequently used array methods out there. In short, the map method returns a new array with whatever values specified by the developer. For example, if we wanted to only grab the names of the items from the items array, we can use the map method. Let's see how it works.
Does it work? Sure. But there are much cleaner ways to achieve the same result! In the long run, this saves time, memory, and enhances the readability of your code, which is beneficial for everyone involved.
So what's going on here? We are declaring a variable called "itemNames" and inside of it is where all of the magic happens. All you have to do is take the name of the array, tack a .map() method onto it, and pass in a callback function as an argument. The callback function also takes a parameter, and this can be named whatever you like. In this case, it made sense to use the word "item" for iterating through our items array. Since we want the names of the items, we are simply returning item.name. This will create a brand new array (which can now be accessed by using the "itemNames" variable) containing the names of the items.
Let's break this down even more.
Thanks to ES6, we can consolidate this into ONE single line of code and achieve the same result. Pretty cool. Okay, so that's great, but what's going on here? Since we are using an ES6 arrow function and there is only one expression being executed in the callback function, we are able to eliminate the curly braces and even the return keyword(implicit return).
forEach is a bit different in that it does not return an array like map, filter, etc. So what does forEach do? When an anonymous or callback function is passed to the forEach method, it will execute that function for every item in the array. You can also pass in the index of the array item, and even the entire array itself. For this use case, we want to iterate through the items array, and console.log the item name and which position it is in. We can achieve this with a forEach method.
Arrow functions are your friend!
The filter method is one that you will grow to absolutely love. Throughout your development career, there will be many use cases where you will want only certain items in an existing array, and filter is the way you can execute that. Just like map, the filter method returns an array. However, the new array is constructed by conditionals set by the developer. Say we wanted to remove items from the array that are over $150:
So on every iteration, the filter method is looking at the price of each item, and if the conditional is met (if the price is less than or equal to 150), the item stays, if not, the item is tossed from the array.
This can be a tricky method to learn at first, but once the concept solidifies, it is extremely useful. Imagine we want to add up the prices of our items to get an idea of how much all of our assets are worth. We can use the reduce() method to "reduce" the prices in the array to one single value. Let's take a look:
Now, the callback function in a reduce method normally takes two parameters. One is the accumulator, and the other is the current value. In this example, they are represented as "a" and "c". So essentially, on every iteration, the current value is being added to the accumulator (accumulator is set to 0 by passing 0 as a second argument to the reduce method), and then ultimately returned as one single value.
It is important to note that if an initial value is not provided for the accumulator, it will default to the value of the first index of the array.
For the 5th and final method, let's talk about find(). Find is a super simple, yet useful method. Essentially, it scans the array and returns the first object that meets certain criteria. For example, if we wanted to isolate the object containing the "TV" item, we would write our code like this.
There are many different array methods out there to dry out your code and simplify your life as a developer, so take advantage of them! There's no better feeling than converting a clunky for loop into an efficient one-liner. I hope this helped solidify some of the foundational concepts of array methods and ES6 syntax. Stay well and keep coding!