Introduction:
If you are anything like me, when you began learning to code, you were bombarded from the get-go with both arrays and objects; the various methods of interacting with, iterating through and changing them. One method, when specifically working with arrays is the Array.map() method. In this post, I will give a beginner-friendly explanation of Array.map() and provide a personal example of why this method can be so helpful
So, what exactly is Array.map() ?
In JavaScript the Array.map() method non-destructively creates a new array of elements, these elements are the result of calling a callback function on every element of the original array.
In other words, this method is used when you need to modify ALL of the elements in an array, without changing or destroying the original array. Below I have provided a very basic example of using Array.map() to multiply the values in an array
//function to multiply array
const evenTestier = testItem => testItem *2
//initial array
const smolTest = [2,4,6,8]
//using .map to make a new array
const lessSmolTest = smolTest.map(eventTestier)
//console log to see results
console.log(lessSmolTest)
In this example the evenTestier function is the callback function, smolTest is the original array and lessSmolTest is the returned or mapped array. By using .map as the method and evenTestieras the callback function I am telling JavaScript to make a new array titled lessSmolTest by calling the evenTestier function on the original array.
This allows for the data within the original array to be preserved for use later if needed while still allowing for the use of the modified data created and stored in the new array.
A Personal Example - Using Array.map()
Based on the example above, the usefulness of the Array.map() method already begins to make itself apparent. But if you are anything like myself, it is not until you use something personally and in a challenging new way that its uses and usefulness truly make themselves known to you. Below I have included an example of a time I used Array.map() to solve a difficult problem, as well as some explanations.
/*this function is intended to act as a search filter,
allowing users to enter an ingredient and recieve back
a list of drinks that can be made with that ingredient */
const userSearchByIngredient = () => {
//the input is taken from the value the user typed into the search bar
const input = formSearchInput.value;
//ensure any spaces, which cannot be read in a URL are removed
URLinput = encodeURI(input.replace(" ", "_"));
//create a fetch request to the dataBase
const searchNameUrl =
"https://www.thecocktaildb.com/api/json/v2/[API KEY]/filter.php?i=" +
URLinput;
fetch(searchNameUrl)
.then((res) => res.json())
//the data from our promise which we call "searchedArray",
//however the returned data is not in a format which works
//with the rest of the code
.then((searchedArray) => {
//when searching by ingredient, only the name and picture of the drink
//are given back which is NOT the format I want it in -->
//use .map to create an array with the name of each drink
const namesArray = searchedArray.drinks.map((drink) => {
return drink.strDrink;
});
//for each drink name pulled out of the list created by the fetch
//sent to a function which is able to render them in a format useable
//by the code
namesArray.forEach(userSearchByName);
});
};
In this example, I am creating a filter option, allowing users to search for drinks containing a specific ingredient for a search bar, the program is supposed to then create a card for each drink containing its information. However, the data returned from the fetch is not in a format workable in the code. To fix this the Array.map() method is called on the list of drinks, searchedArray creating a new array with the name of each drink. That new array namesArray is then sent to another function userSearchByName where it can be processed properly by the code.
Conclusion and Resources:
Thank you for taking the time to stop and read through my quick guide to using the Array.map() method. I hope you found it both instruction and interesting.
Code for the Above Project: Phase-1 Flatiron Virtual Bar
More about me:
*include some links here eventually but right now I dont have any links to add really :(