Programmers like to reduce repetition in their code. The more you repeat your code, the less maintainable it is, and the slower your programs will run. That\u2019s the reason why there are various methods in JavaScript to iterate through datasets.
<\/p>\n\n\n\n
One of these methods is called the In this guide, we\u2019re going to talk about how to use the JavaScript The JavaScript For instance, suppose you want to multiply every item in an array by two. You could do so by creating a function that multiplies every array item by two, and moving that function into a The syntax of the The map method creates a new array based on the results of the callback function. The You\u2019ll also find the function used to render lists in JavaScript libraries such as React or Vue.js.<\/p>\n\n\n\n The Let\u2019s say that you own a cookie store and you are going to raise the prices of each cookie by 5%. Rather than calculating all of the new prices individually, you could use the Here\u2019s the code you would use:<\/p>\n\n\n\n Our code returns:<\/p>\n\n\n\n In this example, we\u2019ve increased the price of every cookie by 5%. First, we declared a list of cookie prices in the variable \u201ccookiePrices\u201d. Then, we used the \u201ccookie * 1.05\u201d calculated the percentage increase, then we returned that increase, rounded to the nearest two decimal places. Finally, we printed the new array to the console using the We could also move our function into its own function to make our code more readable:<\/p>\n\n\n\n Our code returns the same values from earlier, but is more readable:<\/p>\n\n\n\n The The following program would allow us to accomplish this task: Our code returns:<\/p>\n\n\n\n In this example, we\u2019ve calculated the total number of points each customer should be awarded based on how many cookies they have purchased. First, we declared an array of objects called \u201ccustomers\u201d. This list stores the names of our customers and how many cookies they have purchased using key:value pairs. Then, we declared a function called We use the The Suppose we want to show a list of the cookies our store sells on our website. We could do so using this code:<\/p>\n\n\n\n This code creates a component in React which renders a list. Each list item is contained within a <li> tag which is rendered using Map is an example of an iterator method in JavaScript. These methods allow you to loop through all the items in a list and perform some action. When you\u2019re deciding to use the Here are the other iterator methods that exist in JavaScript: You may be thinking to yourself, \u201cmap sounds really similar to the The The map()<\/code> method. This method loops through an existing array and performs a specific function on all items in that array.
<\/p>\n\n\n\nmap()<\/code> function. We\u2019ll walk through three common examples of the map()<\/code> function in action to help you get started.<\/p>\n\n\n\nWhat Is the map Function?<\/h2>\n\n\n\n
map()<\/code> method calls a specific function on each item in an array. The result of this function is then moved into its own array.
<\/p>\n\n\n\nmap()<\/code> method.
<\/p>\n\n\n\nmap()<\/code> function is:<\/p>\n\n\n\nconst newArray = oldArray.map(function, thisValue);<\/pre><\/div>\n\n\n\n
function<\/code> is the callback function that will be run on each element in the array. To learn more about functions, you can read our ultimate guide to JavaScript functions. thisValue<\/code> is the default value that will be stored in the this<\/code> variable in the function. By default, this is undefined.
<\/p>\n\n\n\n
<\/p>\n\n\n\nmap()<\/code> method has a number of uses. The most common is to call a function on a list of array elements. An example of this would be multiplying every number in a list of numbers, or finding the length of each string in a list of strings.
<\/p>\n\n\n\nCalling a Function with Map<\/h2>\n\n\n\n
map()<\/code> method allows you to perform a repetitive task on every item in a list, which makes it useful in a number of cases.
<\/p>\n\n\n\nmap()<\/code> method.
<\/p>\n\n\n\nconst cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];\nconst newCookiePrices = cookiePrices.map(cookie => {\n\tvar price = cookie * 1.05;\n\treturn price.toFixed(2);\n});\nconsole.log(newCookiePrices);<\/pre><\/div>\n\n\n\n[\"1.58\", \"1.84\", \"1.68\", \"2.10\", \"2.15\", \"1.52\"]<\/pre><\/div>\n\n\n\n
map()<\/code> method with a function that calculates a 5% price increase for each cookie.
<\/p>\n\n\n\nconsole.log()<\/code> method.
<\/p>\n\n\n\nfunction calculateIncrease(cookie) {\n\tvar price = cookie * 1.05;\n\treturn price.toFixed(2);\n}\nconst cookiePrices = [1.50, 1.75, 1.60, 2.00, 2.05, 1.45];\nconst newCookiePrices = cookiePrices.map(calculateIncrease);\nconsole.log(newCookiePrices);<\/pre><\/div>\n\n\n\n[\"1.58\", \"1.84\", \"1.68\", \"2.10\", \"2.15\", \"1.52\"]<\/pre><\/div>\n\n\n\n
Change Items in an Array<\/h2>\n\n\n\n
map()<\/code> method is often used to change the items in an array. Let\u2019s suppose that our cookie shop is building a loyalty program for its customers. Every cookie you purchase earns you 10 points, and if you earn 100 points, you will earn a free cookie.
<\/p>\n\n\n\n
<\/p>\n\n\n\nvar customers = [\n\t{ name: \"Hannah Geoffrey\", cookiesPurchased: 2 },\n\t{ name: \"Peter Clarkson\", cookiesPurchased: 3 },\n\t{ name: \"Steven Hanson\", cookiesPurchased: 7 }\n]\nfunction calculateLoyaltyPoints(customer) {\n\tvar newCustomer = {\n\t\tname: customer.name,\n\t\tcookiesPurchased: customer.cookiesPurchased,\n\t\tpoints: customer.cookiesPurchased * 10\n\t}\n\treturn newCustomer;\n}\nvar customersWithPoints = customers.map(calculateLoyaltyPoints);\nconsole.log(customersWithPoints);<\/pre><\/div>\n\n\n\n[{ cookiesPurchased: 2, name: \"Hannah Geoffrey\", points: 20 }, { cookiesPurchased: 3, name: \"Peter Clarkson\", points: 30 }, { cookiesPurchased: 7, name: \"Steven Hanson\", points: 70 }]<\/pre><\/div>\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\ncalculateLoyaltyPoints()<\/code>. This function adds a new item to each customer item called \u201cpoints\u201d which is calculated by multiplying the number of cookies each customer has purchased by 10.
<\/p>\n\n\n\nmap()<\/code> method to iterate through our list of customers and apply our calculateLoyaltyPoints()<\/code> function. Finally, we print out the revised list of customers. This list now reflects our \u201cpoints\u201d value we added to each customer\u2019s entry.<\/p>\n\n\n\nRender a List Using a Library<\/h2>\n\n\n\n
map()<\/code> method is commonly used in JavaScript libraries like React. The purpose of this method is to render the items in a list. Let\u2019s walk through an example of map()<\/code> in React.
<\/p>\n\n\n\nimport React from \"react\";\nimport ReactDOM from \"react-dom\";\nvar cookies = [\"Raspberry Chocolate Chip\", \"White Chocolate Chip\", \"Oat\", \"Milk Chocolate Chip\"];\nconst CookieList = () => (\n\t<div>\n\t\t<ul>{cookies.map((cookie, i) => \n\t\t\t<li key={i}>{cookie}<\/li>\n\t\t )}\n\t\t<\/ul>\n\t<\/div>\n);\nconst root = document.getElementById(\"root\");\nReactDOM.render(<CookieList \/>, root);<\/pre><\/div>\n\n\n\nmap()<\/code>. map()<\/code> creates an individual <li> tag for each item in the list, and the \u201ci\u201d variable assigns each list item a unique key.<\/p>\n\n\n\nMap vs. Iterator Methods<\/h2>\n\n\n\n
<\/p>\n\n\n\nmap()<\/code> function, it\u2019s good practice to first ask whether another iterator method would be better. This will ensure that you choose the right tool for the job.
<\/p>\n\n\n\n
<\/p>\n\n\n\n\n
forEach()<\/code> method. Are they the same?\u201d That\u2019s a good question. There is a subtle difference between these two methods.
<\/p>\n\n\n\nmap()<\/code> function iterates over a list, changes each item in the list and returns a new list. The forEach()<\/code> function, on the other hand, iterates over a list and, as a side effect, applies some operation to the list.
<\/p>\n\n\n\nmap()<\/code> function is best used if you need to call a function on every item in a list, declare a list component in a framework like React, or change the content of a list.<\/p>\n\n\n\n