Experimenting around with arrays in JavaScript can be enjoyable, particularly for someone in the early stages of learning about JavaScript – I certainly found this to be true in my case. Writing functions to manipulate or interact with arrays will always have its advantages, but JavaScript does provide different built-in approaches to problem-solving.
An advantageous way of interacting with arrays besides using functions is utilizing JavaScript Array methods. There are plenty of different methods out there, you can find an extensive list of array methods in this MDN web doc. In this blog post, we will focus on those methods that take in callback functions, particularly these three which caught my interest rapidly during my phase 1 studies in Flatiron School:
.filter()
.find()
.map()
I will use the operatingSystemArray array to provide an example of each array method. Screenshots are taken from my personal Replit.com account.
.filter()
One of my favorite methods! The .filter() method iterates through EACH element, creates and displays a new array that contains all of the elements in the original array that meet the condition/s specified by the callback function.
In the example below, we are using the filter method to go through each element of the original array and console logging a new array with the system name and system id of the systems that have a computerName of "Anthony". In this case, Android and Unix meet the conditions of the callback.
.find()
The .find() method will go through each element in a given array and as a result, unlike the .filter() method, .find() will provide the FIRST element that meets the condition/s provided in the callback.
In the example below, the .find() method is being used to iterate through each element and provide the first element that meets the condition of the computerName strictly equalling the string "Anthony". In this case, the system, Android, meets this condition first.
.map()
This method is pretty simple to apply and extremely useful when you want to manipulate each element in an array while ensuring the original array referenced is unaltered. The .map() method can sometimes be a great substitute for for loop statements... sometimes.
Below you can see an example where we are utilizing the map method to append the string '[Ready Status]' to each operatingSystemArray element's name and create a new array systemMapReadyStatus with the new results. I provided a console log for each array to compare the results.
Thanks for taking some time to read through my post, if you have any feedback, please do feel free to make suggestions! I am more than happy to learn and iterate through this post.