[{"data":1,"prerenderedAt":1450},["ShallowReactive",2],{"blog-\u002Fblog\u002Fjavascript-array-methods-map-filter-reduce":3},{"id":4,"title":5,"body":6,"description":1434,"difficulty":1435,"extension":1436,"framework":1437,"frameworkSlug":1438,"meta":1439,"navigation":1440,"order":65,"path":1441,"qaPath":1442,"seo":1443,"stem":1444,"subtopic":1445,"topic":1446,"topicSlug":1447,"updated":1448,"__hash__":1449},"blog\u002Fblog\u002Fjavascript-array-methods-map-filter-reduce.md","JavaScript Array Methods Explained — map, filter, reduce and the Iteration Toolkit",{"type":7,"value":8,"toc":1419},"minimark",[9,14,33,36,40,52,168,185,189,197,283,291,341,345,357,424,437,442,503,517,521,534,586,624,628,645,713,733,737,757,825,850,854,872,979,992,996,1014,1111,1116,1120,1134,1188,1191,1195,1198,1289,1299,1303,1334,1338,1412,1415],[10,11,13],"h2",{"id":12},"thinking-in-array-methods","Thinking in array methods",[15,16,17,18,22,23,27,28,32],"p",{},"Arrays are the workhorse data structure of JavaScript, and the language gives you a rich set\nof ",[19,20,21],"strong",{},"higher-order methods"," for transforming and querying them. Instead of writing manual\n",[24,25,26],"code",{},"for"," loops, you describe ",[29,30,31],"em",{},"what"," you want — \"map each item,\" \"keep the matches,\" \"boil it\ndown to one value\" — and the method handles the iteration. This declarative style is more\nreadable, less bug-prone, and composes into expressive pipelines. Mastering these methods is\none of the highest-leverage skills in everyday JavaScript.",[15,34,35],{},"This guide walks through the core iteration methods, what each returns, and the patterns\ninterviewers and codebases lean on.",[10,37,39],{"id":38},"map-transform-every-element","map — transform every element",[15,41,42,47,48,51],{},[19,43,44],{},[24,45,46],{},"map"," creates a ",[19,49,50],{},"new array"," by applying a function to each element. The result is\nalways the same length as the input. Use it whenever you want to transform a collection.",[53,54,59],"pre",{"className":55,"code":56,"language":57,"meta":58,"style":58},"language-js shiki shiki-themes github-light github-dark","const nums = [1, 2, 3]\nconst doubled = nums.map(n => n * 2)        \u002F\u002F [2, 4, 6]\nconst names = users.map(u => u.name)        \u002F\u002F extract a field\n","js","",[24,60,61,98,140],{"__ignoreMap":58},[62,63,66,70,74,77,81,84,87,90,92,95],"span",{"class":64,"line":65},"line",1,[62,67,69],{"class":68},"szBVR","const",[62,71,73],{"class":72},"sj4cs"," nums",[62,75,76],{"class":68}," =",[62,78,80],{"class":79},"sVt8B"," [",[62,82,83],{"class":72},"1",[62,85,86],{"class":79},", ",[62,88,89],{"class":72},"2",[62,91,86],{"class":79},[62,93,94],{"class":72},"3",[62,96,97],{"class":79},"]\n",[62,99,101,103,106,108,111,114,117,121,124,127,130,133,136],{"class":64,"line":100},2,[62,102,69],{"class":68},[62,104,105],{"class":72}," doubled",[62,107,76],{"class":68},[62,109,110],{"class":79}," nums.",[62,112,46],{"class":113},"sScJk",[62,115,116],{"class":79},"(",[62,118,120],{"class":119},"s4XuR","n",[62,122,123],{"class":68}," =>",[62,125,126],{"class":79}," n ",[62,128,129],{"class":68},"*",[62,131,132],{"class":72}," 2",[62,134,135],{"class":79},")        ",[62,137,139],{"class":138},"sJ8bj","\u002F\u002F [2, 4, 6]\n",[62,141,143,145,148,150,153,155,157,160,162,165],{"class":64,"line":142},3,[62,144,69],{"class":68},[62,146,147],{"class":72}," names",[62,149,76],{"class":68},[62,151,152],{"class":79}," users.",[62,154,46],{"class":113},[62,156,116],{"class":79},[62,158,159],{"class":119},"u",[62,161,123],{"class":68},[62,163,164],{"class":79}," u.name)        ",[62,166,167],{"class":138},"\u002F\u002F extract a field\n",[15,169,170,171,173,174,177,178,180,181,184],{},"The key property: ",[24,172,46],{}," is ",[19,175,176],{},"non-mutating"," and length-preserving. A common mistake is using\n",[24,179,46],{}," for side effects (like logging) and ignoring the return value — if you don't need the\nnew array, use ",[24,182,183],{},"forEach"," instead.",[10,186,188],{"id":187},"filter-keep-what-matches","filter — keep what matches",[15,190,191,196],{},[19,192,193],{},[24,194,195],{},"filter"," returns a new array containing only the elements for which the predicate returns\ntruthy. The result is the same length or shorter.",[53,198,200],{"className":55,"code":199,"language":57,"meta":58,"style":58},"const evens = [1, 2, 3, 4].filter(n => n % 2 === 0)   \u002F\u002F [2, 4]\nconst active = users.filter(u => u.isActive)           \u002F\u002F subset\n",[24,201,202,258],{"__ignoreMap":58},[62,203,204,206,209,211,213,215,217,219,221,223,225,228,231,233,235,237,239,241,244,246,249,252,255],{"class":64,"line":65},[62,205,69],{"class":68},[62,207,208],{"class":72}," evens",[62,210,76],{"class":68},[62,212,80],{"class":79},[62,214,83],{"class":72},[62,216,86],{"class":79},[62,218,89],{"class":72},[62,220,86],{"class":79},[62,222,94],{"class":72},[62,224,86],{"class":79},[62,226,227],{"class":72},"4",[62,229,230],{"class":79},"].",[62,232,195],{"class":113},[62,234,116],{"class":79},[62,236,120],{"class":119},[62,238,123],{"class":68},[62,240,126],{"class":79},[62,242,243],{"class":68},"%",[62,245,132],{"class":72},[62,247,248],{"class":68}," ===",[62,250,251],{"class":72}," 0",[62,253,254],{"class":79},")   ",[62,256,257],{"class":138},"\u002F\u002F [2, 4]\n",[62,259,260,262,265,267,269,271,273,275,277,280],{"class":64,"line":100},[62,261,69],{"class":68},[62,263,264],{"class":72}," active",[62,266,76],{"class":68},[62,268,152],{"class":79},[62,270,195],{"class":113},[62,272,116],{"class":79},[62,274,159],{"class":119},[62,276,123],{"class":68},[62,278,279],{"class":79}," u.isActive)           ",[62,281,282],{"class":138},"\u002F\u002F subset\n",[15,284,285,287,288,290],{},[24,286,195],{}," pairs naturally with ",[24,289,46],{},": filter first to narrow, then map to transform. Chaining\nthem reads top-to-bottom like a description of the data flow.",[53,292,294],{"className":55,"code":293,"language":57,"meta":58,"style":58},"const activeNames = users\n  .filter(u => u.isActive)\n  .map(u => u.name)        \u002F\u002F clear pipeline\n",[24,295,296,308,324],{"__ignoreMap":58},[62,297,298,300,303,305],{"class":64,"line":65},[62,299,69],{"class":68},[62,301,302],{"class":72}," activeNames",[62,304,76],{"class":68},[62,306,307],{"class":79}," users\n",[62,309,310,313,315,317,319,321],{"class":64,"line":100},[62,311,312],{"class":79},"  .",[62,314,195],{"class":113},[62,316,116],{"class":79},[62,318,159],{"class":119},[62,320,123],{"class":68},[62,322,323],{"class":79}," u.isActive)\n",[62,325,326,328,330,332,334,336,338],{"class":64,"line":142},[62,327,312],{"class":79},[62,329,46],{"class":113},[62,331,116],{"class":79},[62,333,159],{"class":119},[62,335,123],{"class":68},[62,337,164],{"class":79},[62,339,340],{"class":138},"\u002F\u002F clear pipeline\n",[10,342,344],{"id":343},"reduce-boil-down-to-one-value","reduce — boil down to one value",[15,346,347,352,353,356],{},[19,348,349],{},[24,350,351],{},"reduce"," is the most general method: it walks the array carrying an ",[19,354,355],{},"accumulator",",\ncombining each element into a single result. That result can be a number, string, object, or\neven another array.",[53,358,360],{"className":55,"code":359,"language":57,"meta":58,"style":58},"const sum = [1, 2, 3, 4].reduce((acc, n) => acc + n, 0)   \u002F\u002F 10\n",[24,361,362],{"__ignoreMap":58},[62,363,364,366,369,371,373,375,377,379,381,383,385,387,389,391,394,397,399,401,404,407,410,413,416,419,421],{"class":64,"line":65},[62,365,69],{"class":68},[62,367,368],{"class":72}," sum",[62,370,76],{"class":68},[62,372,80],{"class":79},[62,374,83],{"class":72},[62,376,86],{"class":79},[62,378,89],{"class":72},[62,380,86],{"class":79},[62,382,94],{"class":72},[62,384,86],{"class":79},[62,386,227],{"class":72},[62,388,230],{"class":79},[62,390,351],{"class":113},[62,392,393],{"class":79},"((",[62,395,396],{"class":119},"acc",[62,398,86],{"class":79},[62,400,120],{"class":119},[62,402,403],{"class":79},") ",[62,405,406],{"class":68},"=>",[62,408,409],{"class":79}," acc ",[62,411,412],{"class":68},"+",[62,414,415],{"class":79}," n, ",[62,417,418],{"class":72},"0",[62,420,254],{"class":79},[62,422,423],{"class":138},"\u002F\u002F 10\n",[15,425,426,427,429,430,433,434,436],{},"The second argument (",[24,428,418],{}," here) is the ",[19,431,432],{},"initial value"," — always provide it. Without it,\n",[24,435,351],{}," uses the first element as the seed, which breaks on empty arrays (throws) and can\ncause subtle off-by-one bugs.",[15,438,439,441],{},[24,440,351],{}," shines for building objects, such as grouping or indexing:",[53,443,445],{"className":55,"code":444,"language":57,"meta":58,"style":58},"const byId = users.reduce((acc, u) => {\n  acc[u.id] = u\n  return acc          \u002F\u002F must return the accumulator\n}, {})\n",[24,446,447,475,486,497],{"__ignoreMap":58},[62,448,449,451,454,456,458,460,462,464,466,468,470,472],{"class":64,"line":65},[62,450,69],{"class":68},[62,452,453],{"class":72}," byId",[62,455,76],{"class":68},[62,457,152],{"class":79},[62,459,351],{"class":113},[62,461,393],{"class":79},[62,463,396],{"class":119},[62,465,86],{"class":79},[62,467,159],{"class":119},[62,469,403],{"class":79},[62,471,406],{"class":68},[62,473,474],{"class":79}," {\n",[62,476,477,480,483],{"class":64,"line":100},[62,478,479],{"class":79},"  acc[u.id] ",[62,481,482],{"class":68},"=",[62,484,485],{"class":79}," u\n",[62,487,488,491,494],{"class":64,"line":142},[62,489,490],{"class":68},"  return",[62,492,493],{"class":79}," acc          ",[62,495,496],{"class":138},"\u002F\u002F must return the accumulator\n",[62,498,500],{"class":64,"line":499},4,[62,501,502],{"class":79},"}, {})\n",[15,504,505,506,509,510,512,513,516],{},"Forgetting to ",[24,507,508],{},"return acc"," is the number-one ",[24,511,351],{}," bug — the accumulator becomes\n",[24,514,515],{},"undefined"," on the next iteration.",[10,518,520],{"id":519},"foreach-iterate-for-side-effects","forEach — iterate for side effects",[15,522,523,527,528,533],{},[19,524,525],{},[24,526,183],{}," runs a function for each element but ",[19,529,530,531],{},"returns ",[24,532,515],{}," — it's for side\neffects, not transformation.",[53,535,537],{"className":55,"code":536,"language":57,"meta":58,"style":58},"items.forEach(item => console.log(item))   \u002F\u002F logging\nitems.forEach(item => save(item))          \u002F\u002F side effect\n",[24,538,539,565],{"__ignoreMap":58},[62,540,541,544,546,548,551,553,556,559,562],{"class":64,"line":65},[62,542,543],{"class":79},"items.",[62,545,183],{"class":113},[62,547,116],{"class":79},[62,549,550],{"class":119},"item",[62,552,123],{"class":68},[62,554,555],{"class":79}," console.",[62,557,558],{"class":113},"log",[62,560,561],{"class":79},"(item))   ",[62,563,564],{"class":138},"\u002F\u002F logging\n",[62,566,567,569,571,573,575,577,580,583],{"class":64,"line":100},[62,568,543],{"class":79},[62,570,183],{"class":113},[62,572,116],{"class":79},[62,574,550],{"class":119},[62,576,123],{"class":68},[62,578,579],{"class":113}," save",[62,581,582],{"class":79},"(item))          ",[62,584,585],{"class":138},"\u002F\u002F side effect\n",[15,587,588,589,591,592,598,599,601,602,605,606,609,610,613,614,616,617,609,619,609,621,623],{},"Unlike a ",[24,590,26],{}," loop, you ",[19,593,594,595],{},"cannot ",[24,596,597],{},"break"," out of ",[24,600,183],{}," early. If you need early exit,\nuse a ",[24,603,604],{},"for...of"," loop or ",[24,607,608],{},"some","\u002F",[24,611,612],{},"find",". Don't reach for ",[24,615,183],{}," when ",[24,618,46],{},[24,620,195],{},[24,622,351],{},"\nexpresses the intent better.",[10,625,627],{"id":626},"some-and-every-boolean-queries","some and every — boolean queries",[15,629,630,634,635,640,641,644],{},[19,631,632],{},[24,633,608],{}," asks \"does at least one element match?\" and ",[19,636,637],{},[24,638,639],{},"every"," asks \"do all elements\nmatch?\" Both return a boolean and ",[19,642,643],{},"short-circuit"," as soon as the answer is determined.",[53,646,648],{"className":55,"code":647,"language":57,"meta":58,"style":58},"const hasNegative = nums.some(n => n \u003C 0)    \u002F\u002F stops at first match\nconst allPositive = nums.every(n => n > 0)   \u002F\u002F stops at first failure\n",[24,649,650,682],{"__ignoreMap":58},[62,651,652,654,657,659,661,663,665,667,669,671,674,676,679],{"class":64,"line":65},[62,653,69],{"class":68},[62,655,656],{"class":72}," hasNegative",[62,658,76],{"class":68},[62,660,110],{"class":79},[62,662,608],{"class":113},[62,664,116],{"class":79},[62,666,120],{"class":119},[62,668,123],{"class":68},[62,670,126],{"class":79},[62,672,673],{"class":68},"\u003C",[62,675,251],{"class":72},[62,677,678],{"class":79},")    ",[62,680,681],{"class":138},"\u002F\u002F stops at first match\n",[62,683,684,686,689,691,693,695,697,699,701,703,706,708,710],{"class":64,"line":100},[62,685,69],{"class":68},[62,687,688],{"class":72}," allPositive",[62,690,76],{"class":68},[62,692,110],{"class":79},[62,694,639],{"class":113},[62,696,116],{"class":79},[62,698,120],{"class":119},[62,700,123],{"class":68},[62,702,126],{"class":79},[62,704,705],{"class":68},">",[62,707,251],{"class":72},[62,709,254],{"class":79},[62,711,712],{"class":138},"\u002F\u002F stops at first failure\n",[15,714,715,716,718,719,725,726,728,729,732],{},"A gotcha worth remembering: ",[24,717,639],{}," on an ",[19,720,721,722],{},"empty array returns ",[24,723,724],{},"true"," (vacuous truth) and\n",[24,727,608],{}," returns ",[24,730,731],{},"false",". Guard for emptiness if \"all valid\" shouldn't pass when there's no\ndata.",[10,734,736],{"id":735},"find-and-findindex-locate-one-element","find and findIndex — locate one element",[15,738,739,743,744,746,747,752,753,756],{},[19,740,741],{},[24,742,612],{}," returns the first element matching a predicate (or ",[24,745,515],{},"); ",[19,748,749],{},[24,750,751],{},"findIndex","\nreturns its index (or ",[24,754,755],{},"-1","). Both short-circuit on the first match.",[53,758,760],{"className":55,"code":759,"language":57,"meta":58,"style":58},"const user = users.find(u => u.id === 7)        \u002F\u002F the object, or undefined\nconst idx = users.findIndex(u => u.id === 7)    \u002F\u002F its index, or -1\n",[24,761,762,795],{"__ignoreMap":58},[62,763,764,766,769,771,773,775,777,779,781,784,787,790,792],{"class":64,"line":65},[62,765,69],{"class":68},[62,767,768],{"class":72}," user",[62,770,76],{"class":68},[62,772,152],{"class":79},[62,774,612],{"class":113},[62,776,116],{"class":79},[62,778,159],{"class":119},[62,780,123],{"class":68},[62,782,783],{"class":79}," u.id ",[62,785,786],{"class":68},"===",[62,788,789],{"class":72}," 7",[62,791,135],{"class":79},[62,793,794],{"class":138},"\u002F\u002F the object, or undefined\n",[62,796,797,799,802,804,806,808,810,812,814,816,818,820,822],{"class":64,"line":100},[62,798,69],{"class":68},[62,800,801],{"class":72}," idx",[62,803,76],{"class":68},[62,805,152],{"class":79},[62,807,751],{"class":113},[62,809,116],{"class":79},[62,811,159],{"class":119},[62,813,123],{"class":68},[62,815,783],{"class":79},[62,817,786],{"class":68},[62,819,789],{"class":72},[62,821,678],{"class":79},[62,823,824],{"class":138},"\u002F\u002F its index, or -1\n",[15,826,827,828,830,831,834,835,837,838,841,842,845,846,849],{},"Use ",[24,829,612],{}," instead of ",[24,832,833],{},"filter(...)[0]"," — it stops at the first match rather than scanning the\nwhole array. Always treat the result as possibly ",[24,836,515],{}," (optional chaining helps:\n",[24,839,840],{},"user?.name","). The reverse-direction variants ",[24,843,844],{},"findLast"," and ",[24,847,848],{},"findLastIndex"," search from the\nend.",[10,851,853],{"id":852},"flat-and-flatmap-flattening","flat and flatMap — flattening",[15,855,856,861,862,865,866,871],{},[19,857,858],{},[24,859,860],{},"flat"," flattens nested arrays one level by default (pass a depth, or ",[24,863,864],{},"Infinity",", for\ndeeper). ",[19,867,868],{},[24,869,870],{},"flatMap"," maps and then flattens one level in a single pass — perfect for\n\"expand each element into zero or more.\"",[53,873,875],{"className":55,"code":874,"language":57,"meta":58,"style":58},"[[1, 2], [3, 4]].flat()              \u002F\u002F [1, 2, 3, 4]\n[1, 2, 3].flatMap(n => [n, n * 10])  \u002F\u002F [1, 10, 2, 20, 3, 30]\nwords.flatMap(w => w.split(''))      \u002F\u002F explode into characters\n",[24,876,877,908,947],{"__ignoreMap":58},[62,878,879,882,884,886,888,891,893,895,897,900,902,905],{"class":64,"line":65},[62,880,881],{"class":79},"[[",[62,883,83],{"class":72},[62,885,86],{"class":79},[62,887,89],{"class":72},[62,889,890],{"class":79},"], [",[62,892,94],{"class":72},[62,894,86],{"class":79},[62,896,227],{"class":72},[62,898,899],{"class":79},"]].",[62,901,860],{"class":113},[62,903,904],{"class":79},"()              ",[62,906,907],{"class":138},"\u002F\u002F [1, 2, 3, 4]\n",[62,909,910,913,915,917,919,921,923,925,927,929,931,933,936,938,941,944],{"class":64,"line":100},[62,911,912],{"class":79},"[",[62,914,83],{"class":72},[62,916,86],{"class":79},[62,918,89],{"class":72},[62,920,86],{"class":79},[62,922,94],{"class":72},[62,924,230],{"class":79},[62,926,870],{"class":113},[62,928,116],{"class":79},[62,930,120],{"class":119},[62,932,123],{"class":68},[62,934,935],{"class":79}," [n, n ",[62,937,129],{"class":68},[62,939,940],{"class":72}," 10",[62,942,943],{"class":79},"])  ",[62,945,946],{"class":138},"\u002F\u002F [1, 10, 2, 20, 3, 30]\n",[62,948,949,952,954,956,959,961,964,967,969,973,976],{"class":64,"line":142},[62,950,951],{"class":79},"words.",[62,953,870],{"class":113},[62,955,116],{"class":79},[62,957,958],{"class":119},"w",[62,960,123],{"class":68},[62,962,963],{"class":79}," w.",[62,965,966],{"class":113},"split",[62,968,116],{"class":79},[62,970,972],{"class":971},"sZZnC","''",[62,974,975],{"class":79},"))      ",[62,977,978],{"class":138},"\u002F\u002F explode into characters\n",[15,980,981,983,984,987,988,991],{},[24,982,870],{}," is also handy for filtering-while-mapping: return ",[24,985,986],{},"[]"," to drop an element and\n",[24,989,990],{},"[value]"," to keep it.",[10,993,995],{"id":994},"arrayfrom-and-arrayof-creation","Array.from and Array.of — creation",[15,997,998,1003,1004,1009,1010,1013],{},[19,999,1000],{},[24,1001,1002],{},"Array.from"," builds an array from anything iterable or array-like, with an optional\nmapping function. ",[19,1005,1006],{},[24,1007,1008],{},"Array.of"," creates an array from its arguments (avoiding the confusing\nsingle-number ",[24,1011,1012],{},"Array(3)"," behavior).",[53,1015,1017],{"className":55,"code":1016,"language":57,"meta":58,"style":58},"Array.from('abc')                       \u002F\u002F ['a', 'b', 'c']\nArray.from({ length: 3 }, (_, i) => i)  \u002F\u002F [0, 1, 2] array-like + map\nArray.from(document.querySelectorAll('li'))  \u002F\u002F NodeList -> real array\nArray.of(7)                             \u002F\u002F [7] (vs Array(7) = empty length-7)\n",[24,1018,1019,1038,1070,1093],{"__ignoreMap":58},[62,1020,1021,1024,1027,1029,1032,1035],{"class":64,"line":65},[62,1022,1023],{"class":79},"Array.",[62,1025,1026],{"class":113},"from",[62,1028,116],{"class":79},[62,1030,1031],{"class":971},"'abc'",[62,1033,1034],{"class":79},")                       ",[62,1036,1037],{"class":138},"\u002F\u002F ['a', 'b', 'c']\n",[62,1039,1040,1042,1044,1047,1049,1052,1055,1057,1060,1062,1064,1067],{"class":64,"line":100},[62,1041,1023],{"class":79},[62,1043,1026],{"class":113},[62,1045,1046],{"class":79},"({ length: ",[62,1048,94],{"class":72},[62,1050,1051],{"class":79}," }, (",[62,1053,1054],{"class":119},"_",[62,1056,86],{"class":79},[62,1058,1059],{"class":119},"i",[62,1061,403],{"class":79},[62,1063,406],{"class":68},[62,1065,1066],{"class":79}," i)  ",[62,1068,1069],{"class":138},"\u002F\u002F [0, 1, 2] array-like + map\n",[62,1071,1072,1074,1076,1079,1082,1084,1087,1090],{"class":64,"line":142},[62,1073,1023],{"class":79},[62,1075,1026],{"class":113},[62,1077,1078],{"class":79},"(document.",[62,1080,1081],{"class":113},"querySelectorAll",[62,1083,116],{"class":79},[62,1085,1086],{"class":971},"'li'",[62,1088,1089],{"class":79},"))  ",[62,1091,1092],{"class":138},"\u002F\u002F NodeList -> real array\n",[62,1094,1095,1097,1100,1102,1105,1108],{"class":64,"line":499},[62,1096,1023],{"class":79},[62,1098,1099],{"class":113},"of",[62,1101,116],{"class":79},[62,1103,1104],{"class":72},"7",[62,1106,1107],{"class":79},")                             ",[62,1109,1110],{"class":138},"\u002F\u002F [7] (vs Array(7) = empty length-7)\n",[15,1112,1113,1115],{},[24,1114,1002],{}," with a mapping function is the cleanest way to generate sequences.",[10,1117,1119],{"id":1118},"entries-keys-and-values-iterators","entries, keys, and values — iterators",[15,1121,1122,1123,1126,1127,1129,1130,1133],{},"These return ",[19,1124,1125],{},"iterators"," for use with ",[24,1128,604],{}," and destructuring. ",[24,1131,1132],{},"entries"," is especially\nuseful when you need both index and value.",[53,1135,1137],{"className":55,"code":1136,"language":57,"meta":58,"style":58},"for (const [i, value] of arr.entries()) {\n  console.log(i, value)   \u002F\u002F index AND value\n}\n",[24,1138,1139,1170,1183],{"__ignoreMap":58},[62,1140,1141,1143,1146,1148,1150,1152,1154,1157,1160,1162,1165,1167],{"class":64,"line":65},[62,1142,26],{"class":68},[62,1144,1145],{"class":79}," (",[62,1147,69],{"class":68},[62,1149,80],{"class":79},[62,1151,1059],{"class":72},[62,1153,86],{"class":79},[62,1155,1156],{"class":72},"value",[62,1158,1159],{"class":79},"] ",[62,1161,1099],{"class":68},[62,1163,1164],{"class":79}," arr.",[62,1166,1132],{"class":113},[62,1168,1169],{"class":79},"()) {\n",[62,1171,1172,1175,1177,1180],{"class":64,"line":100},[62,1173,1174],{"class":79},"  console.",[62,1176,558],{"class":113},[62,1178,1179],{"class":79},"(i, value)   ",[62,1181,1182],{"class":138},"\u002F\u002F index AND value\n",[62,1184,1185],{"class":64,"line":142},[62,1186,1187],{"class":79},"}\n",[15,1189,1190],{},"This is cleaner than tracking an index manually and pairs perfectly with array destructuring.",[10,1192,1194],{"id":1193},"chaining-and-performance","Chaining and performance",[15,1196,1197],{},"The real power emerges when you chain methods into a readable pipeline:",[53,1199,1201],{"className":55,"code":1200,"language":57,"meta":58,"style":58},"const result = orders\n  .filter(o => o.status === 'paid')\n  .map(o => o.total)\n  .reduce((sum, t) => sum + t, 0)   \u002F\u002F total revenue from paid orders\n",[24,1202,1203,1215,1239,1254],{"__ignoreMap":58},[62,1204,1205,1207,1210,1212],{"class":64,"line":65},[62,1206,69],{"class":68},[62,1208,1209],{"class":72}," result",[62,1211,76],{"class":68},[62,1213,1214],{"class":79}," orders\n",[62,1216,1217,1219,1221,1223,1226,1228,1231,1233,1236],{"class":64,"line":100},[62,1218,312],{"class":79},[62,1220,195],{"class":113},[62,1222,116],{"class":79},[62,1224,1225],{"class":119},"o",[62,1227,123],{"class":68},[62,1229,1230],{"class":79}," o.status ",[62,1232,786],{"class":68},[62,1234,1235],{"class":971}," 'paid'",[62,1237,1238],{"class":79},")\n",[62,1240,1241,1243,1245,1247,1249,1251],{"class":64,"line":142},[62,1242,312],{"class":79},[62,1244,46],{"class":113},[62,1246,116],{"class":79},[62,1248,1225],{"class":119},[62,1250,123],{"class":68},[62,1252,1253],{"class":79}," o.total)\n",[62,1255,1256,1258,1260,1262,1265,1267,1270,1272,1274,1277,1279,1282,1284,1286],{"class":64,"line":499},[62,1257,312],{"class":79},[62,1259,351],{"class":113},[62,1261,393],{"class":79},[62,1263,1264],{"class":119},"sum",[62,1266,86],{"class":79},[62,1268,1269],{"class":119},"t",[62,1271,403],{"class":79},[62,1273,406],{"class":68},[62,1275,1276],{"class":79}," sum ",[62,1278,412],{"class":68},[62,1280,1281],{"class":79}," t, ",[62,1283,418],{"class":72},[62,1285,254],{"class":79},[62,1287,1288],{"class":138},"\u002F\u002F total revenue from paid orders\n",[15,1290,1291,1292,1295,1296,1298],{},"Each step creates an intermediate array, so for ",[19,1293,1294],{},"very large"," datasets or hot paths, a\nsingle ",[24,1297,351],{}," or a plain loop can be more efficient (no intermediates). But for the vast\nmajority of code, clarity wins — chain freely and optimize only when profiling shows a real\nproblem.",[10,1300,1302],{"id":1301},"choosing-the-right-method","Choosing the right method",[15,1304,1305,1306,1308,1309,1311,1312,1314,1315,1317,1318,1320,1321,1323,1324,609,1326,1328,1329,609,1331,1333],{},"A quick mental map: transform -> ",[24,1307,46],{},"; select a subset -> ",[24,1310,195],{},"; combine to one value ->\n",[24,1313,351],{},"; just do something per item -> ",[24,1316,183],{},"; existence\u002Funiversality checks -> ",[24,1319,608],{},"\u002F\n",[24,1322,639],{},"; locate one -> ",[24,1325,612],{},[24,1327,751],{},"; expand\u002Fflatten -> ",[24,1330,870],{},[24,1332,860],{},". Picking the\nmethod that names your intent makes code self-documenting.",[10,1335,1337],{"id":1336},"key-takeaways","Key takeaways",[1339,1340,1341,1353,1359,1375,1387,1400],"ul",{},[1342,1343,1344,1346,1347,1349,1350,1352],"li",{},[24,1345,46],{}," transforms (same length, new array); ",[24,1348,195],{}," selects a subset; ",[24,1351,351],{}," folds to a\nsingle value — the three pillars.",[1342,1354,1355,1356,1358],{},"Always pass ",[24,1357,351],{}," an initial value and remember to return the accumulator.",[1342,1360,1361,1363,1364,1366,1367,1369,1370,609,1372,1374],{},[24,1362,183],{}," is for side effects and can't ",[24,1365,597],{},"; use ",[24,1368,604],{}," or ",[24,1371,608],{},[24,1373,612],{}," for early\nexit.",[1342,1376,1377,609,1379,1381,1382,173,1384,1386],{},[24,1378,608],{},[24,1380,639],{}," short-circuit and return booleans; ",[24,1383,639],{},[24,1385,724],{}," on an empty array.",[1342,1388,1389,609,1391,1393,1394,1396,1397,1399],{},[24,1390,612],{},[24,1392,751],{}," locate one element; treat ",[24,1395,612],{},"'s result as possibly ",[24,1398,515],{},".",[1342,1401,1402,86,1404,86,1406,1408,1409,1411],{},[24,1403,870],{},[24,1405,860],{},[24,1407,1002],{},", and ",[24,1410,1132],{}," round out the toolkit for flattening,\ncreation, and index-aware iteration.",[15,1413,1414],{},"These methods turn loops into declarative pipelines — learn them well and most array work\nbecomes a one-line expression of intent.",[1416,1417,1418],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":58,"searchDepth":100,"depth":100,"links":1420},[1421,1422,1423,1424,1425,1426,1427,1428,1429,1430,1431,1432,1433],{"id":12,"depth":100,"text":13},{"id":38,"depth":100,"text":39},{"id":187,"depth":100,"text":188},{"id":343,"depth":100,"text":344},{"id":519,"depth":100,"text":520},{"id":626,"depth":100,"text":627},{"id":735,"depth":100,"text":736},{"id":852,"depth":100,"text":853},{"id":994,"depth":100,"text":995},{"id":1118,"depth":100,"text":1119},{"id":1193,"depth":100,"text":1194},{"id":1301,"depth":100,"text":1302},{"id":1336,"depth":100,"text":1337},"Master JavaScript array iteration methods — map, filter, reduce, forEach, some, every, find, flatMap and more. Learn what each does, when to use it, and the patterns that matter.","medium","md","JavaScript","javascript",{},true,"\u002Fblog\u002Fjavascript-array-methods-map-filter-reduce","\u002Fjavascript\u002Farrays\u002Farray-methods",{"title":5,"description":1434},"blog\u002Fjavascript-array-methods-map-filter-reduce","Array Methods","Arrays & Iteration","arrays","2026-06-18","ln5tBYHO9Kwc1USq-Ey6Z9bMo0yaQLkmvafNsQuC34E",1781808673080]