{"id":677,"date":"2024-01-06T18:54:00","date_gmt":"2024-01-06T18:54:00","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=677"},"modified":"2024-02-05T10:30:21","modified_gmt":"2024-02-05T10:30:21","slug":"map-reduce-and-filter-method-in-javascript","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/map-reduce-and-filter-method-in-javascript\/","title":{"rendered":"Map, Reduce and Filter Method in JavaScript"},"content":{"rendered":"\n<p><code>map<\/code>, <code>filter<\/code>, and <code>reduce<\/code> are higher-order array methods in JavaScript that provide powerful ways to manipulate arrays and transform data. Here&#8217;s an overview of each method:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. <code>map()<\/code> Method:<\/h3>\n\n\n\n<p>The <code>map()<\/code> method creates a new array by applying a function to each element of an existing array. It returns a new array with the results of calling the provided function on every element in the original array.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numbers = &#91;1, 2, 3, 4, 5];\n\nlet doubled = numbers.map(num =&gt; num * 2);\nconsole.log(doubled); \/\/ Output: &#91;2, 4, 6, 8, 10]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">2. <code>filter()<\/code> Method:<\/h3>\n\n\n\n<p>The <code>filter()<\/code> method creates a new array with all elements that pass a test provided by a callback function. It returns a new array containing only the elements for which the callback function returns <code>true<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numbers = &#91;1, 2, 3, 4, 5];\n\nlet evens = numbers.filter(num =&gt; num % 2 === 0);\nconsole.log(evens); \/\/ Output: &#91;2, 4]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">3. <code>reduce()<\/code> Method:<\/h3>\n\n\n\n<p>The <code>reduce()<\/code> method executes a reducer function on each element of the array, resulting in a single output value. It&#8217;s useful for calculating sums, aggregating data, or performing any operation that requires combining elements of an array.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>let numbers = &#91;1, 2, 3, 4, 5];\n\nlet sum = numbers.reduce((accumulator, currentValue) =&gt; accumulator + currentValue, 0);\nconsole.log(sum); \/\/ Output: 15 (1 + 2 + 3 + 4 + 5)<\/code><\/pre>\n\n\n\n<p>In the <code>reduce()<\/code> method:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>The <code>accumulator<\/code> parameter stores the accumulated result of the computation.<\/li>\n\n\n\n<li>The <code>currentValue<\/code> parameter represents the current element being processed.<\/li>\n\n\n\n<li>The <code>0<\/code> at the end of the <code>reduce()<\/code> call is the initial value of the accumulator.<\/li>\n<\/ul>\n\n\n\n<p>These array methods are powerful tools for transforming and manipulating data in JavaScript. They allow you to write concise and expressive code for common array operations, making your code more readable and maintainable.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>map, filter, and reduce are higher-order array methods in JavaScript that provide powerful ways to manipulate arrays and transform data.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-677","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/677","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=677"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/677\/revisions"}],"predecessor-version":[{"id":678,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/677\/revisions\/678"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}