During my prework era (my coding bootcamp required completion of about 3 weeks' worth of learning materials before the cohort started which was called prework), I first came across the concept of array. It was when the lesson material briefly explained what the array is, what it looks like, and what it's used for. Very concise and straightforward. "I like this," I thought--only to find two weeks later thinking of arrays makes me want to throw up. Why are there so many methods, why is it such a difficult and complicated process to access one single value, and to make things even worse, how do I link them to my assigned function, etc.? WHY ISN'T ANYTHING I DO WORKING?!
I started hating almost everything about arrays, and almost lost interests in knowing more about it. Then I gave it a second thought, "maybe we can work this out." Just like any other love and hate relationships, I decided to look more closely into this and become better friends with it. Then I was mesmerized by how their methods can make things so convenient and make your life so much easier. Among various methods available for arrays to use in JavaScript, I would like to share some of my favorite iterator methods: .filter(), .map(), and .forEach().
* These are all built-in methods
.filter() "Hey, create a new array with elements I want only!"
.filter() searches through an array, passes each element to a provided callback function. Then it returns a brand new array including elements only that passed the callback function.
Example:
[5, 6, 7, 8, 9].filter(function (num) {
return num < 8;
});
// => [5, 6, 7]
.map() "Hey, create a new array with each element transformed!"
.map() transforms every element in an array to another value. Like .filter(), it accepts a callback function and passes each element in turn to the callback. The difference, though, is that .map() will return an array of same number of elements in transformed version, while .filter() will give an array with elements that passed the callback function only.
Example:
[1, 3, 5].map(function (num) {
return num ** 2;
});
// => [1, 9, 25]
.forEach() "Hey, perform this action for each element in my array!"
.forEach() loops through an array and passes a callback function on each element. This does NOT create a new array (like .filter() or .map()), and therefore is useful when you want to iterate through an array to log values.
Example:
weather = [
"sunny",
"cloudy",
"rainy",
"windy"
];
weather.forEach(function(status) {
console.log(`Tomorrow's weather could be ${status}.`);
});
// =>
Tomorrow's weather could be sunny.
Tomorrow's weather could be cloudy.
Tomorrow's weather could be rainy.
Tomorrow's weather could be windy.
While I like the nature of arrays and how it can do so much, I'm frankly still far from fully grasping each and every method. But hey, practice makes permanent, and getting to know more about something(or someone) always helps to understand better. That's how all relationship works anyway. I hope my relationship with arrays soon will lean more towards the 'love' side and move away from the 'hate' side. (It will take some time)
Reference Sources:
Top comments (0)