ES6 Array Method Helpers

I wish I would have taken more time to learn these array method helpers back when I was first starting to learn Javascript. Once I mastered these array method helpers it really made programming so much more straight forward and having a full understanding of these methods made it fun to decide which method to best use depending on the case. I highly suggest for anyone who is starting out in programming or even if you haven’t taken the time to fully understand these array method helpers to play around with them and fully learn them! They will make your life a lot easier!
FILTER
What is filter: The filter method sifts through data that is already there and if the data meets the conditions in filter then it will be included in the new array. Filter will give you a brand new array with the filtered items. Filter is like a machine where your raw material goes in, and if its conditions are met, the new array spits out!
When to use filter: Often times when you are building a search bar to filter through data the filter method is your best choice.
let cities= [‘Toronto’, ‘Vancouver’, ‘Nyc’, ‘Dubai’, ‘LA’, ‘Austin’];const result = cities.filter(city => city.length > 6);console.log(result);// expected output: ["Toronto", "Vancouver"]
MAP
What is map: The map method is the most commonly used method (or for myself at least). Map will return a new array with the results of the same amount of items being returned in the array just the data goes through map will be “massaged” in some way.
When to use map: When you are changing or altering data. A benefit of map is it returns a new array so you will not be modifying the original array of data.
const famousPeople = [ { first: 'Oprah', last: 'Winfrey', city: 'Chicago' }, { first: 'Barack', last: 'Obama', city: 'Washington' }, { first: 'Ariana', last: 'Grande', city: 'L.A' }];const fullNames = famousPeople.map(person => `${person.first} ${person.last}`);console.log(fullNames);// expected output: ["Oprah Winfrey", "Barack Obama", "Ariana Grande"]
REDUCE
What is reduce: Reduce will take in an array and reduce the elements to one single value. The reduce method applies a function against an accumulator (which you can set to where you would like the accumulator to begin) and every element in the array to reduce it to one total value.
When to use reduce: When you have an array of elements and you want to add them all up. For example if you had an array of products that have a price and you want to add up the total of the products. You can take off the price of those products and reduce them into the total amount.
let array = [10, 12, 23, 34];let arrSum = array.reduce((acc, currentVal) => (
acc + currentVal
),0);console.log(arrSum)// expected output: 79
FOREACH
What is foreach: Foreach will iterate over each item in an array. It will not return a new array.
When to use foreach: Whenever you think to iterate over an array with a for loop, you can usually use foreach instead. As long as you are okay with modifying the existing array. For each should be used when any of the other array helper methods do not meet what you are looking to achieve. It shouldn’t necessarily be your first choice because it is more of a generic helper and if something like map or filter can be used which is more specialized that should be your first way to go.
let arr = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];let newArr = arr.forEach(day => {
console.log(`'Day of the week': ${day}`)
});// expected output:
'Day of the week': Monday
'Day of the week': Tuesday
'Day of the week': Wednesday
'Day of the week': Thursday
'Day of the week': Friday
'Day of the week': Saturday
'Day of the week': Sunday
Check out my Youtube channel for more tutorials and code chats!
