{"id":4326,"date":"2023-05-03T22:18:00","date_gmt":"2023-05-03T22:18:00","guid":{"rendered":"https:\/\/reviewnprep.com\/blog\/?p=4326"},"modified":"2023-04-29T22:22:42","modified_gmt":"2023-04-29T22:22:42","slug":"quick-tutorial-map-filter-reduce-in-javascript","status":"publish","type":"post","link":"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/","title":{"rendered":"Quick Tutorial: Map, Filter, Reduce in Javascript"},"content":{"rendered":"\n<p>In JavaScript, <code>map()<\/code>, <code>filter()<\/code>, and <code>reduce()<\/code> are used to process and manipulate arrays of data. They are functional programming methods that can be used to transform, filter, and aggregate data in a declarative and concise way.<\/p>\n\n\n\n<p>Here&#8217;s a brief overview of when to use each method.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_66_1 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69e3c0f5e3bf1\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69e3c0f5e3bf1\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Transforming_an_array_using_map\" title=\"Transforming an array using map()\">Transforming an array using map()<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Syntax_of_map\" title=\"Syntax of map()\">Syntax of map()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Example_of_map\" title=\"Example of map()\">Example of map()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Filtering_an_array_using_filter\" title=\"Filtering an array using filter()\">Filtering an array using filter()<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Syntax_of_filter\" title=\"Syntax of filter()\">Syntax of filter()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Example_of_filter\" title=\"Example of filter()\">Example of filter()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Reducing_an_array_using_reduce\" title=\"Reducing an array using reduce()\">Reducing an array using reduce()<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Syntax_of_reduce\" title=\"Syntax of reduce()\">Syntax of reduce()<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Example_of_reduce\" title=\"Example of reduce()\">Example of reduce()<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Examples_using_map_filter_reduce_all_at_once\" title=\"Examples using map, filter, reduce all at once\">Examples using map, filter, reduce all at once<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/reviewnprep.com\/blog\/quick-tutorial-map-filter-reduce-in-javascript\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Transforming_an_array_using_map\"><\/span><strong>Transforming an array<\/strong> using map()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>map()<\/code> is used to transform an array by applying a function to each element and returning a new array of the same length. Use <code>map()<\/code> when you need to apply the same operation to every element in an array and generate a new array with the transformed values.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Syntax_of_map\"><\/span><strong>Syntax<\/strong> of map()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>const newArray = originalArray.map((currentValue, index, array) => {\n  \/\/ return the new value of the current element\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_map\"><\/span>Example of map()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The following code creates a new array that contains the square of each number in the original array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const numbers = &#91;1, 2, 3, 4, 5];\n\nconst squares = numbers.map(n => n * n);\n\nconsole.log(squares); \/\/ &#91;1, 4, 9, 16, 25]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Filtering_an_array_using_filter\"><\/span><strong>Filtering an array<\/strong> using filter()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>filter()<\/code> is used to create a new array containing only the elements that pass a given test. Use <code>filter()<\/code> when you need to select a subset of the elements in an array based on some condition and generate a new array with only the selected elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Syntax_of_filter\"><\/span>Syntax of filter()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>const newArray = originalArray.filter((currentValue, index, array) => {\n  \/\/ return true if the current element should be included in the new array\n});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_filter\"><\/span>Example of filter()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The following code creates a new array that contains only the even numbers in the original array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const numbers = &#91;1, 2, 3, 4, 5];\n\nconst evenNumbers = numbers.filter(n => n % 2 === 0);\n\nconsole.log(evenNumbers); \/\/ &#91;2, 4]<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Reducing_an_array_using_reduce\"><\/span><strong>Reducing an array<\/strong> using reduce()<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><code>reduce()<\/code> is used to aggregate the values of an array into a single value. Use <code>reduce()<\/code> when you need to perform some operation on every element in an array and combine the results into a single value.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Syntax_of_reduce\"><\/span>Syntax of reduce()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>const result = originalArray.reduce((accumulator, currentValue, index, array) => {\n  \/\/ return the new value of the accumulator\n}, initialValue);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Example_of_reduce\"><\/span>Example of reduce()<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The following code uses the reduce() method to add up all of the numbers in an array:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const numbers = &#91;1, 2, 3, 4, 5];\n\nconst sum = numbers.reduce((a, b) => a + b);\n\nconsole.log(sum); \/\/ 15<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Examples_using_map_filter_reduce_all_at_once\"><\/span>Examples using map, filter, reduce all at once<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><strong>Example-1:<\/strong> <\/p>\n\n\n\n<p>Below example gives the name and total age of persons above 25. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const users = &#91;\n  { name: \"John Doe\", age: 26 },\n  { name: \"Jane Doe\", age: 23 },\n  { name: \"Peter Smith\", age: 30 },\n];\n\n\/\/ Create a new array that contains only the users who are over the age of 25.\nconst adults = users.filter(user => user.age >= 25);\n\n\/\/ Create a new array that contains the names of all the adults.\nconst adultNames = adults.map(user => user.name);\n\n\/\/ Add up the ages of all the adults.\nconst totalAge = adults.reduce((a, b) => a + b.age);\n\nconsole.log(adults); \/\/ &#91;{ name: \"John Doe\", age: 25 }, { name: \"Peter Smith\", age: 30 }]\nconsole.log(adultNames); \/\/ &#91;\"John Doe\", \"Peter Smith\"]\nconsole.log(totalAge); \/\/ 55<\/code><\/pre>\n\n\n\n<p><strong>Example-2:<\/strong><\/p>\n\n\n\n<p>Let&#8217;s say you have an array of user objects, each containing the user&#8217;s name, age, and email address. You want to find the total number of users who are over 18 years old and have a Gmail email address, and also get the average age of those users.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>const users = &#91;\n  { name: 'Alice', age: 25, email: 'alice@gmail.com' },\n  { name: 'Bob', age: 30, email: 'bob@yahoo.com' },\n  { name: 'Charlie', age: 20, email: 'charlie@gmail.com' },\n  { name: 'Dave', age: 18, email: 'dave@gmail.com' },\n  { name: 'Emily', age: 22, email: 'emily@hotmail.com' },\n  { name: 'Frank', age: 28, email: 'frank@gmail.com' },\n];\n\nconst gmailUsersOver18 = users.filter(user => user.age > 18 &amp;&amp; user.email.endsWith('@gmail.com'));\nconst gmailUsersOver18Count = gmailUsersOver18.length;\nconst gmailUsersOver18TotalAge = gmailUsersOver18.reduce((totalAge, user) => totalAge + user.age, 0);\nconst gmailUsersOver18AvgAge = gmailUsersOver18TotalAge \/ gmailUsersOver18Count;\n\nconsole.log(`There are ${gmailUsersOver18Count} Gmail users over 18 years old with an average age of ${gmailUsersOver18AvgAge}.`);<\/code><\/pre>\n\n\n\n<p>In this example, we use <code>filter()<\/code> to find all the users who are over 18 years old and have a Gmail email address. Then, we use <code>length<\/code> to get the total number of users who meet this criteria. We also use <code>reduce()<\/code> to calculate the total age of those users, and then divide by the count to get the average age.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Getting into coding has become easier with lots of tools at your disposal. Go to job sites like <a href=\"https:\/\/indeed.com\" target=\"_blank\" rel=\"noreferrer noopener\">indeed.com<\/a> or <a href=\"https:\/\/dice.com\" target=\"_blank\" rel=\"noreferrer noopener\">dice.com<\/a> and you&#8217;d see a plethora of well paying software development related jobs. However, it is important that to land these jobs, you have the right skills. Check out the <a href=\"https:\/\/reviewnprep.com\/marketplace\/rnp_search_result?course_type=coding\" target=\"_blank\" rel=\"noreferrer noopener\">coding video courses on ReviewNPrep<\/a> to master the languages.<\/p>\n\n\n\n<p>Did you know that with ReviewNPrep CodeHub, you can practice coding online with exercises baked into the platform. Check out <a href=\"https:\/\/reviewnprep.com\/ide\" target=\"_blank\" rel=\"noreferrer noopener\">ReviewNPrep Code Hub<\/a> today.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\"><p>Further Reading:<\/p><p><a href=\"https:\/\/reviewnprep.com\/blog\/web-development-vs-web-design-similarities-differences\/\" target=\"_blank\" rel=\"noreferrer noopener\">Understand the differences between web developer and web designer in this blog.<\/a><\/p><p><a href=\"https:\/\/reviewnprep.com\/blog\/python-vs-java-full-stack-developer\/\" target=\"_blank\" rel=\"noreferrer noopener\">Starting your dev career? Check out this blog to understand Python vs Java Full Stack Development.<\/a><\/p><\/blockquote>\n\n\n\n<p><a href=\"https:\/\/www.freepik.com\/free-photo\/close-up-image-programer-working-his-desk-office_5698344.htm#query=javascript&amp;position=13&amp;from_view=search&amp;track=robertav1_2_sidr\"><em>Image by pressfoto<\/em><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn about map(), filter(), and reduce(), the functional programming methods in JavaScript that are used to transform, filter, and aggregate data in arrays.<\/p>\n","protected":false},"author":1,"featured_media":4330,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"footnotes":""},"categories":[253],"tags":[342,343],"class_list":["post-4326","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","tag-coding","tag-javascript"],"_links":{"self":[{"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/posts\/4326"}],"collection":[{"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/comments?post=4326"}],"version-history":[{"count":1,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/posts\/4326\/revisions"}],"predecessor-version":[{"id":4328,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/posts\/4326\/revisions\/4328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/media\/4330"}],"wp:attachment":[{"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/media?parent=4326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/categories?post=4326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/reviewnprep.com\/blog\/wp-json\/wp\/v2\/tags?post=4326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}