[{"data":1,"prerenderedAt":3445},["ShallowReactive",2],{"en-post-\u002Fen\u002Fjavascript-higher-order-functions":3},{"id":4,"title":5,"body":6,"description":3433,"extension":3434,"meta":3435,"navigation":516,"path":3440,"seo":3441,"sitemap":3442,"stem":3443,"__hash__":3444},"blogEn\u002Fen\u002Fjavascript-higher-order-functions.md","JavaScript Higher-Order Functions Explained: From map, filter, and reduce to Building once and memoize",{"type":7,"value":8,"toc":3402},"minimark",[9,19,23,66,73,81,96,99,103,113,116,166,169,228,230,234,237,388,391,626,640,650,1475,1480,1628,1634,1639,1707,1719,1721,1725,1728,1732,1845,1855,1861,1864,2061,2067,2070,2285,2289,2292,2495,2504,2506,2510,2515,2700,2707,2709,2713,2719,2825,2834,2836,2840,2848,2864,2927,2930,2998,3013,3020,3080,3088,3096,3117,3199,3261,3267,3284,3286,3290,3380,3398],[10,11,13,14,18],"h2",{"id":12},"what-does-1-2-3mapparseint-return","What does ",[15,16,17],"code",{},"['1', '2', '3'].map(parseInt)"," return?",[20,21,22],"p",{},"Quick quiz. You want to turn an array of strings into numbers, so you write:",[24,25,30],"pre",{"className":26,"code":27,"language":28,"meta":29,"style":29},"language-js shiki shiki-themes github-light github-dark","[\"1\", \"2\", \"3\"].map(parseInt);\n","js","",[15,31,32],{"__ignoreMap":29},[33,34,37,41,45,48,51,53,56,59,63],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sVt8B","[",[33,42,44],{"class":43},"sZZnC","\"1\"",[33,46,47],{"class":39},", ",[33,49,50],{"class":43},"\"2\"",[33,52,47],{"class":39},[33,54,55],{"class":43},"\"3\"",[33,57,58],{"class":39},"].",[33,60,62],{"class":61},"sScJk","map",[33,64,65],{"class":39},"(parseInt);\n",[20,67,68,69,72],{},"You probably expect ",[15,70,71],{},"[1, 2, 3]",". The actual result is:",[24,74,79],{"className":75,"code":77,"language":78},[76],"language-text","[1, NaN, NaN]\n","text",[15,80,77],{"__ignoreMap":29},[20,82,83,84,88,89,91,92,95],{},"We'll solve that later in the post. First, let's look at what this code is built on: ",[85,86,87],"strong",{},"higher-order functions",". ",[15,90,62],{}," is one, and so is ",[15,93,94],{},"addEventListener",", which you use every day.",[97,98],"hr",{},[10,100,102],{"id":101},"what-is-a-higher-order-function","What is a higher-order function?",[104,105,106],"blockquote",{},[20,107,108,109,112],{},"A higher-order function is ",[85,110,111],{},"a function that takes a function as an argument, returns a function, or both",".",[20,114,115],{},"This works in JavaScript because functions are first-class objects: you can treat a function like any other value, such as a number or a string.",[117,118,119,132],"table",{},[120,121,122],"thead",{},[123,124,125,129],"tr",{},[126,127,128],"th",{},"First-class means you can",[126,130,131],{},"JavaScript example",[133,134,135,146,156],"tbody",{},[123,136,137,141],{},[138,139,140],"td",{},"Store it in a variable",[138,142,143],{},[15,144,145],{},"const greet = () => \"hi\";",[123,147,148,151],{},[138,149,150],{},"Pass it to another function",[138,152,153],{},[15,154,155],{},"button.addEventListener(\"click\", greet);",[123,157,158,161],{},[138,159,160],{},"Return it from another function",[138,162,163],{},[15,164,165],{},"const make = () => () => \"hi\";",[20,167,168],{},"Higher-order functions come in two broad kinds:",[117,170,171,181],{},[120,172,173],{},[123,174,175,178],{},[126,176,177],{},"Kind",[126,179,180],{},"Examples",[133,182,183,207],{},[123,184,185,192],{},[138,186,187,188,191],{},"Functions that ",[85,189,190],{},"take"," functions",[138,193,194,47,196,47,199,47,202,47,205],{},[15,195,62],{},[15,197,198],{},"filter",[15,200,201],{},"reduce",[15,203,204],{},"setTimeout",[15,206,94],{},[123,208,209,214],{},[138,210,187,211,191],{},[85,212,213],{},"return",[138,215,216,47,219,47,222,47,225],{},[15,217,218],{},"debounce",[15,220,221],{},"once",[15,223,224],{},"memoize",[15,226,227],{},"bind",[97,229],{},[10,231,233],{"id":232},"_1-functions-that-take-functions-array-methods","1. Functions that take functions: array methods",[20,235,236],{},"The higher-order functions you use most are array methods. Let's practice on this product data.",[24,238,240],{"className":26,"code":239,"language":28,"meta":29,"style":29},"const products = [\n  { name: \"Keyboard\", price: 89, category: \"Electronics\", inStock: true },\n  { name: \"Mouse\", price: 39, category: \"Electronics\", inStock: false },\n  { name: \"Mug\", price: 12, category: \"Home\", inStock: true },\n  { name: \"Monitor\", price: 259, category: \"Electronics\", inStock: true },\n  { name: \"Tumbler\", price: 25, category: \"Home\", inStock: true },\n];\n",[15,241,242,258,288,312,336,359,382],{"__ignoreMap":29},[33,243,244,248,252,255],{"class":35,"line":36},[33,245,247],{"class":246},"szBVR","const",[33,249,251],{"class":250},"sj4cs"," products",[33,253,254],{"class":246}," =",[33,256,257],{"class":39}," [\n",[33,259,261,264,267,270,273,276,279,282,285],{"class":35,"line":260},2,[33,262,263],{"class":39},"  { name: ",[33,265,266],{"class":43},"\"Keyboard\"",[33,268,269],{"class":39},", price: ",[33,271,272],{"class":250},"89",[33,274,275],{"class":39},", category: ",[33,277,278],{"class":43},"\"Electronics\"",[33,280,281],{"class":39},", inStock: ",[33,283,284],{"class":250},"true",[33,286,287],{"class":39}," },\n",[33,289,291,293,296,298,301,303,305,307,310],{"class":35,"line":290},3,[33,292,263],{"class":39},[33,294,295],{"class":43},"\"Mouse\"",[33,297,269],{"class":39},[33,299,300],{"class":250},"39",[33,302,275],{"class":39},[33,304,278],{"class":43},[33,306,281],{"class":39},[33,308,309],{"class":250},"false",[33,311,287],{"class":39},[33,313,315,317,320,322,325,327,330,332,334],{"class":35,"line":314},4,[33,316,263],{"class":39},[33,318,319],{"class":43},"\"Mug\"",[33,321,269],{"class":39},[33,323,324],{"class":250},"12",[33,326,275],{"class":39},[33,328,329],{"class":43},"\"Home\"",[33,331,281],{"class":39},[33,333,284],{"class":250},[33,335,287],{"class":39},[33,337,339,341,344,346,349,351,353,355,357],{"class":35,"line":338},5,[33,340,263],{"class":39},[33,342,343],{"class":43},"\"Monitor\"",[33,345,269],{"class":39},[33,347,348],{"class":250},"259",[33,350,275],{"class":39},[33,352,278],{"class":43},[33,354,281],{"class":39},[33,356,284],{"class":250},[33,358,287],{"class":39},[33,360,362,364,367,369,372,374,376,378,380],{"class":35,"line":361},6,[33,363,263],{"class":39},[33,365,366],{"class":43},"\"Tumbler\"",[33,368,269],{"class":39},[33,370,371],{"class":250},"25",[33,373,275],{"class":39},[33,375,329],{"class":43},[33,377,281],{"class":39},[33,379,284],{"class":250},[33,381,287],{"class":39},[33,383,385],{"class":35,"line":384},7,[33,386,387],{"class":39},"];\n",[20,389,390],{},"Let's get \"the names of in-stock products\" and \"the total price of in-stock products.\"",[24,392,394],{"className":26,"code":393,"language":28,"meta":29,"style":29},"\u002F\u002F With a for loop\nconst names = [];\nlet total = 0;\nfor (let i = 0; i \u003C products.length; i++) {\n  if (products[i].inStock) {\n    names.push(products[i].name);\n    total += products[i].price;\n  }\n}\n\n\u002F\u002F With higher-order functions\nconst inStock = products.filter((p) => p.inStock);\nconst names = inStock.map((p) => p.name); \u002F\u002F ['Keyboard', 'Mug', 'Monitor', 'Tumbler']\nconst total = inStock.reduce((sum, p) => sum + p.price, 0); \u002F\u002F 385\n",[15,395,396,402,414,431,469,477,488,499,505,511,518,524,553,581],{"__ignoreMap":29},[33,397,398],{"class":35,"line":36},[33,399,401],{"class":400},"sJ8bj","\u002F\u002F With a for loop\n",[33,403,404,406,409,411],{"class":35,"line":260},[33,405,247],{"class":246},[33,407,408],{"class":250}," names",[33,410,254],{"class":246},[33,412,413],{"class":39}," [];\n",[33,415,416,419,422,425,428],{"class":35,"line":290},[33,417,418],{"class":246},"let",[33,420,421],{"class":39}," total ",[33,423,424],{"class":246},"=",[33,426,427],{"class":250}," 0",[33,429,430],{"class":39},";\n",[33,432,433,436,439,441,444,446,448,451,454,457,460,463,466],{"class":35,"line":314},[33,434,435],{"class":246},"for",[33,437,438],{"class":39}," (",[33,440,418],{"class":246},[33,442,443],{"class":39}," i ",[33,445,424],{"class":246},[33,447,427],{"class":250},[33,449,450],{"class":39},"; i ",[33,452,453],{"class":246},"\u003C",[33,455,456],{"class":39}," products.",[33,458,459],{"class":250},"length",[33,461,462],{"class":39},"; i",[33,464,465],{"class":246},"++",[33,467,468],{"class":39},") {\n",[33,470,471,474],{"class":35,"line":338},[33,472,473],{"class":246},"  if",[33,475,476],{"class":39}," (products[i].inStock) {\n",[33,478,479,482,485],{"class":35,"line":361},[33,480,481],{"class":39},"    names.",[33,483,484],{"class":61},"push",[33,486,487],{"class":39},"(products[i].name);\n",[33,489,490,493,496],{"class":35,"line":384},[33,491,492],{"class":39},"    total ",[33,494,495],{"class":246},"+=",[33,497,498],{"class":39}," products[i].price;\n",[33,500,502],{"class":35,"line":501},8,[33,503,504],{"class":39},"  }\n",[33,506,508],{"class":35,"line":507},9,[33,509,510],{"class":39},"}\n",[33,512,514],{"class":35,"line":513},10,[33,515,517],{"emptyLinePlaceholder":516},true,"\n",[33,519,521],{"class":35,"line":520},11,[33,522,523],{"class":400},"\u002F\u002F With higher-order functions\n",[33,525,527,529,532,534,536,538,541,544,547,550],{"class":35,"line":526},12,[33,528,247],{"class":246},[33,530,531],{"class":250}," inStock",[33,533,254],{"class":246},[33,535,456],{"class":39},[33,537,198],{"class":61},[33,539,540],{"class":39},"((",[33,542,20],{"class":543},"s4XuR",[33,545,546],{"class":39},") ",[33,548,549],{"class":246},"=>",[33,551,552],{"class":39}," p.inStock);\n",[33,554,556,558,560,562,565,567,569,571,573,575,578],{"class":35,"line":555},13,[33,557,247],{"class":246},[33,559,408],{"class":250},[33,561,254],{"class":246},[33,563,564],{"class":39}," inStock.",[33,566,62],{"class":61},[33,568,540],{"class":39},[33,570,20],{"class":543},[33,572,546],{"class":39},[33,574,549],{"class":246},[33,576,577],{"class":39}," p.name); ",[33,579,580],{"class":400},"\u002F\u002F ['Keyboard', 'Mug', 'Monitor', 'Tumbler']\n",[33,582,584,586,589,591,593,595,597,600,602,604,606,608,611,614,617,620,623],{"class":35,"line":583},14,[33,585,247],{"class":246},[33,587,588],{"class":250}," total",[33,590,254],{"class":246},[33,592,564],{"class":39},[33,594,201],{"class":61},[33,596,540],{"class":39},[33,598,599],{"class":543},"sum",[33,601,47],{"class":39},[33,603,20],{"class":543},[33,605,546],{"class":39},[33,607,549],{"class":246},[33,609,610],{"class":39}," sum ",[33,612,613],{"class":246},"+",[33,615,616],{"class":39}," p.price, ",[33,618,619],{"class":250},"0",[33,621,622],{"class":39},"); ",[33,624,625],{"class":400},"\u002F\u002F 385\n",[20,627,628,629,631,632,635,636,639],{},"A ",[15,630,435],{}," loop makes you spell out ",[85,633,634],{},"how"," to iterate: the index, the condition, the push. Higher-order functions let you write only ",[85,637,638],{},"what"," to do: filter, transform, combine. The code says what it means.",[20,641,642,643,645,646,645,648,112],{},"Move the checkbox and slider in the preview below. Every change re-runs ",[15,644,198],{}," → ",[15,647,62],{},[15,649,201],{},[651,652,653,841,967],"code-group",{},[24,654,658],{"className":655,"code":656,"language":657,"meta":29,"style":29},"language-html shiki shiki-themes github-light github-dark","\u003Clabel>\u003Cinput type=\"checkbox\" id=\"stock\" checked \u002F> In-stock only\u003C\u002Flabel>\n\u003Clabel class=\"range\">\n  Max price \u003Cinput type=\"range\" id=\"max\" min=\"10\" max=\"300\" step=\"10\" value=\"100\" \u002F>\n  \u003Coutput id=\"maxOut\">\u003C\u002Foutput>\n\u003C\u002Flabel>\n\u003Cul id=\"list\">\u003C\u002Ful>\n\u003Cp id=\"total\">\u003C\u002Fp>\n","html",[15,659,660,701,717,771,793,802,822],{"__ignoreMap":29},[33,661,662,664,668,671,674,677,679,682,685,687,690,693,696,698],{"class":35,"line":36},[33,663,453],{"class":39},[33,665,667],{"class":666},"s9eBZ","label",[33,669,670],{"class":39},">\u003C",[33,672,673],{"class":666},"input",[33,675,676],{"class":61}," type",[33,678,424],{"class":39},[33,680,681],{"class":43},"\"checkbox\"",[33,683,684],{"class":61}," id",[33,686,424],{"class":39},[33,688,689],{"class":43},"\"stock\"",[33,691,692],{"class":61}," checked",[33,694,695],{"class":39}," \u002F> In-stock only\u003C\u002F",[33,697,667],{"class":666},[33,699,700],{"class":39},">\n",[33,702,703,705,707,710,712,715],{"class":35,"line":260},[33,704,453],{"class":39},[33,706,667],{"class":666},[33,708,709],{"class":61}," class",[33,711,424],{"class":39},[33,713,714],{"class":43},"\"range\"",[33,716,700],{"class":39},[33,718,719,722,724,726,728,730,732,734,737,740,742,745,748,750,753,756,758,760,763,765,768],{"class":35,"line":290},[33,720,721],{"class":39},"  Max price \u003C",[33,723,673],{"class":666},[33,725,676],{"class":61},[33,727,424],{"class":39},[33,729,714],{"class":43},[33,731,684],{"class":61},[33,733,424],{"class":39},[33,735,736],{"class":43},"\"max\"",[33,738,739],{"class":61}," min",[33,741,424],{"class":39},[33,743,744],{"class":43},"\"10\"",[33,746,747],{"class":61}," max",[33,749,424],{"class":39},[33,751,752],{"class":43},"\"300\"",[33,754,755],{"class":61}," step",[33,757,424],{"class":39},[33,759,744],{"class":43},[33,761,762],{"class":61}," value",[33,764,424],{"class":39},[33,766,767],{"class":43},"\"100\"",[33,769,770],{"class":39}," \u002F>\n",[33,772,773,776,779,781,783,786,789,791],{"class":35,"line":314},[33,774,775],{"class":39},"  \u003C",[33,777,778],{"class":666},"output",[33,780,684],{"class":61},[33,782,424],{"class":39},[33,784,785],{"class":43},"\"maxOut\"",[33,787,788],{"class":39},">\u003C\u002F",[33,790,778],{"class":666},[33,792,700],{"class":39},[33,794,795,798,800],{"class":35,"line":338},[33,796,797],{"class":39},"\u003C\u002F",[33,799,667],{"class":666},[33,801,700],{"class":39},[33,803,804,806,809,811,813,816,818,820],{"class":35,"line":361},[33,805,453],{"class":39},[33,807,808],{"class":666},"ul",[33,810,684],{"class":61},[33,812,424],{"class":39},[33,814,815],{"class":43},"\"list\"",[33,817,788],{"class":39},[33,819,808],{"class":666},[33,821,700],{"class":39},[33,823,824,826,828,830,832,835,837,839],{"class":35,"line":384},[33,825,453],{"class":39},[33,827,20],{"class":666},[33,829,684],{"class":61},[33,831,424],{"class":39},[33,833,834],{"class":43},"\"total\"",[33,836,788],{"class":39},[33,838,20],{"class":666},[33,840,700],{"class":39},[24,842,846],{"className":843,"code":844,"language":845,"meta":29,"style":29},"language-css shiki shiki-themes github-light github-dark","label { display: block; margin-bottom: 8px; }\n.range input { vertical-align: middle; }\nul { padding-left: 20px; margin: 12px 0; }\n#total { font-weight: 700; color: #b45309; margin: 0; }\n","css",[15,847,848,881,901,932],{"__ignoreMap":29},[33,849,850,852,855,858,861,864,867,870,872,875,878],{"class":35,"line":36},[33,851,667],{"class":666},[33,853,854],{"class":39}," { ",[33,856,857],{"class":250},"display",[33,859,860],{"class":39},": ",[33,862,863],{"class":250},"block",[33,865,866],{"class":39},"; ",[33,868,869],{"class":250},"margin-bottom",[33,871,860],{"class":39},[33,873,874],{"class":250},"8",[33,876,877],{"class":246},"px",[33,879,880],{"class":39},"; }\n",[33,882,883,886,889,891,894,896,899],{"class":35,"line":260},[33,884,885],{"class":61},".range",[33,887,888],{"class":666}," input",[33,890,854],{"class":39},[33,892,893],{"class":250},"vertical-align",[33,895,860],{"class":39},[33,897,898],{"class":250},"middle",[33,900,880],{"class":39},[33,902,903,905,907,910,912,915,917,919,922,924,926,928,930],{"class":35,"line":290},[33,904,808],{"class":666},[33,906,854],{"class":39},[33,908,909],{"class":250},"padding-left",[33,911,860],{"class":39},[33,913,914],{"class":250},"20",[33,916,877],{"class":246},[33,918,866],{"class":39},[33,920,921],{"class":250},"margin",[33,923,860],{"class":39},[33,925,324],{"class":250},[33,927,877],{"class":246},[33,929,427],{"class":250},[33,931,880],{"class":39},[33,933,934,937,939,942,944,947,949,952,954,957,959,961,963,965],{"class":35,"line":314},[33,935,936],{"class":61},"#total",[33,938,854],{"class":39},[33,940,941],{"class":250},"font-weight",[33,943,860],{"class":39},[33,945,946],{"class":250},"700",[33,948,866],{"class":39},[33,950,951],{"class":250},"color",[33,953,860],{"class":39},[33,955,956],{"class":250},"#b45309",[33,958,866],{"class":39},[33,960,921],{"class":250},[33,962,860],{"class":39},[33,964,619],{"class":250},[33,966,880],{"class":39},[24,968,970],{"className":26,"code":969,"language":28,"meta":29,"style":29},"const products = [\n  { name: \"Keyboard\", price: 89, inStock: true },\n  { name: \"Mouse\", price: 39, inStock: false },\n  { name: \"Mug\", price: 12, inStock: true },\n  { name: \"Monitor\", price: 259, inStock: true },\n  { name: \"Tumbler\", price: 25, inStock: true },\n];\nconst $ = (s) => document.querySelector(s);\nconst usd = (n) => \"$\" + n.toLocaleString(\"en-US\");\n\nfunction render() {\n  const max = Number($(\"#max\").value);\n  const visible = products\n    .filter((p) => !$(\"#stock\").checked || p.inStock)\n    .filter((p) => p.price \u003C= max);\n\n  $(\"#maxOut\").textContent = usd(max);\n  $(\"#list\").innerHTML = visible.map((p) => `\u003Cli>${p.name} · ${usd(p.price)}\u003C\u002Fli>`).join(\"\");\n  const total = visible.reduce((sum, p) => sum + p.price, 0);\n  $(\"#total\").textContent = `${visible.length} items · total ${usd(total)}`;\n}\n\ndocument.querySelectorAll(\"input\").forEach((el) => el.addEventListener(\"input\", render));\nrender();\n",[15,971,972,982,998,1014,1030,1046,1062,1066,1093,1132,1136,1147,1172,1184,1218,1242,1247,1268,1340,1375,1416,1421,1426,1466],{"__ignoreMap":29},[33,973,974,976,978,980],{"class":35,"line":36},[33,975,247],{"class":246},[33,977,251],{"class":250},[33,979,254],{"class":246},[33,981,257],{"class":39},[33,983,984,986,988,990,992,994,996],{"class":35,"line":260},[33,985,263],{"class":39},[33,987,266],{"class":43},[33,989,269],{"class":39},[33,991,272],{"class":250},[33,993,281],{"class":39},[33,995,284],{"class":250},[33,997,287],{"class":39},[33,999,1000,1002,1004,1006,1008,1010,1012],{"class":35,"line":290},[33,1001,263],{"class":39},[33,1003,295],{"class":43},[33,1005,269],{"class":39},[33,1007,300],{"class":250},[33,1009,281],{"class":39},[33,1011,309],{"class":250},[33,1013,287],{"class":39},[33,1015,1016,1018,1020,1022,1024,1026,1028],{"class":35,"line":314},[33,1017,263],{"class":39},[33,1019,319],{"class":43},[33,1021,269],{"class":39},[33,1023,324],{"class":250},[33,1025,281],{"class":39},[33,1027,284],{"class":250},[33,1029,287],{"class":39},[33,1031,1032,1034,1036,1038,1040,1042,1044],{"class":35,"line":338},[33,1033,263],{"class":39},[33,1035,343],{"class":43},[33,1037,269],{"class":39},[33,1039,348],{"class":250},[33,1041,281],{"class":39},[33,1043,284],{"class":250},[33,1045,287],{"class":39},[33,1047,1048,1050,1052,1054,1056,1058,1060],{"class":35,"line":361},[33,1049,263],{"class":39},[33,1051,366],{"class":43},[33,1053,269],{"class":39},[33,1055,371],{"class":250},[33,1057,281],{"class":39},[33,1059,284],{"class":250},[33,1061,287],{"class":39},[33,1063,1064],{"class":35,"line":384},[33,1065,387],{"class":39},[33,1067,1068,1070,1073,1075,1077,1080,1082,1084,1087,1090],{"class":35,"line":501},[33,1069,247],{"class":246},[33,1071,1072],{"class":61}," $",[33,1074,254],{"class":246},[33,1076,438],{"class":39},[33,1078,1079],{"class":543},"s",[33,1081,546],{"class":39},[33,1083,549],{"class":246},[33,1085,1086],{"class":39}," document.",[33,1088,1089],{"class":61},"querySelector",[33,1091,1092],{"class":39},"(s);\n",[33,1094,1095,1097,1100,1102,1104,1107,1109,1111,1114,1117,1120,1123,1126,1129],{"class":35,"line":507},[33,1096,247],{"class":246},[33,1098,1099],{"class":61}," usd",[33,1101,254],{"class":246},[33,1103,438],{"class":39},[33,1105,1106],{"class":543},"n",[33,1108,546],{"class":39},[33,1110,549],{"class":246},[33,1112,1113],{"class":43}," \"$\"",[33,1115,1116],{"class":246}," +",[33,1118,1119],{"class":39}," n.",[33,1121,1122],{"class":61},"toLocaleString",[33,1124,1125],{"class":39},"(",[33,1127,1128],{"class":43},"\"en-US\"",[33,1130,1131],{"class":39},");\n",[33,1133,1134],{"class":35,"line":513},[33,1135,517],{"emptyLinePlaceholder":516},[33,1137,1138,1141,1144],{"class":35,"line":520},[33,1139,1140],{"class":246},"function",[33,1142,1143],{"class":61}," render",[33,1145,1146],{"class":39},"() {\n",[33,1148,1149,1152,1154,1156,1159,1161,1164,1166,1169],{"class":35,"line":526},[33,1150,1151],{"class":246},"  const",[33,1153,747],{"class":250},[33,1155,254],{"class":246},[33,1157,1158],{"class":61}," Number",[33,1160,1125],{"class":39},[33,1162,1163],{"class":61},"$",[33,1165,1125],{"class":39},[33,1167,1168],{"class":43},"\"#max\"",[33,1170,1171],{"class":39},").value);\n",[33,1173,1174,1176,1179,1181],{"class":35,"line":555},[33,1175,1151],{"class":246},[33,1177,1178],{"class":250}," visible",[33,1180,254],{"class":246},[33,1182,1183],{"class":39}," products\n",[33,1185,1186,1189,1191,1193,1195,1197,1199,1202,1204,1206,1209,1212,1215],{"class":35,"line":583},[33,1187,1188],{"class":39},"    .",[33,1190,198],{"class":61},[33,1192,540],{"class":39},[33,1194,20],{"class":543},[33,1196,546],{"class":39},[33,1198,549],{"class":246},[33,1200,1201],{"class":246}," !",[33,1203,1163],{"class":61},[33,1205,1125],{"class":39},[33,1207,1208],{"class":43},"\"#stock\"",[33,1210,1211],{"class":39},").checked ",[33,1213,1214],{"class":246},"||",[33,1216,1217],{"class":39}," p.inStock)\n",[33,1219,1221,1223,1225,1227,1229,1231,1233,1236,1239],{"class":35,"line":1220},15,[33,1222,1188],{"class":39},[33,1224,198],{"class":61},[33,1226,540],{"class":39},[33,1228,20],{"class":543},[33,1230,546],{"class":39},[33,1232,549],{"class":246},[33,1234,1235],{"class":39}," p.price ",[33,1237,1238],{"class":246},"\u003C=",[33,1240,1241],{"class":39}," max);\n",[33,1243,1245],{"class":35,"line":1244},16,[33,1246,517],{"emptyLinePlaceholder":516},[33,1248,1250,1253,1255,1258,1261,1263,1265],{"class":35,"line":1249},17,[33,1251,1252],{"class":61},"  $",[33,1254,1125],{"class":39},[33,1256,1257],{"class":43},"\"#maxOut\"",[33,1259,1260],{"class":39},").textContent ",[33,1262,424],{"class":246},[33,1264,1099],{"class":61},[33,1266,1267],{"class":39},"(max);\n",[33,1269,1271,1273,1275,1278,1281,1283,1286,1288,1290,1292,1294,1296,1299,1301,1303,1306,1309,1312,1314,1316,1318,1321,1324,1327,1330,1333,1335,1338],{"class":35,"line":1270},18,[33,1272,1252],{"class":61},[33,1274,1125],{"class":39},[33,1276,1277],{"class":43},"\"#list\"",[33,1279,1280],{"class":39},").innerHTML ",[33,1282,424],{"class":246},[33,1284,1285],{"class":39}," visible.",[33,1287,62],{"class":61},[33,1289,540],{"class":39},[33,1291,20],{"class":543},[33,1293,546],{"class":39},[33,1295,549],{"class":246},[33,1297,1298],{"class":43}," `\u003Cli>${",[33,1300,20],{"class":39},[33,1302,112],{"class":43},[33,1304,1305],{"class":39},"name",[33,1307,1308],{"class":43},"} · ${",[33,1310,1311],{"class":61},"usd",[33,1313,1125],{"class":43},[33,1315,20],{"class":39},[33,1317,112],{"class":43},[33,1319,1320],{"class":39},"price",[33,1322,1323],{"class":43},")",[33,1325,1326],{"class":43},"}\u003C\u002Fli>`",[33,1328,1329],{"class":39},").",[33,1331,1332],{"class":61},"join",[33,1334,1125],{"class":39},[33,1336,1337],{"class":43},"\"\"",[33,1339,1131],{"class":39},[33,1341,1343,1345,1347,1349,1351,1353,1355,1357,1359,1361,1363,1365,1367,1369,1371,1373],{"class":35,"line":1342},19,[33,1344,1151],{"class":246},[33,1346,588],{"class":250},[33,1348,254],{"class":246},[33,1350,1285],{"class":39},[33,1352,201],{"class":61},[33,1354,540],{"class":39},[33,1356,599],{"class":543},[33,1358,47],{"class":39},[33,1360,20],{"class":543},[33,1362,546],{"class":39},[33,1364,549],{"class":246},[33,1366,610],{"class":39},[33,1368,613],{"class":246},[33,1370,616],{"class":39},[33,1372,619],{"class":250},[33,1374,1131],{"class":39},[33,1376,1378,1380,1382,1385,1387,1389,1392,1395,1397,1399,1402,1404,1406,1409,1411,1414],{"class":35,"line":1377},20,[33,1379,1252],{"class":61},[33,1381,1125],{"class":39},[33,1383,1384],{"class":43},"\"#total\"",[33,1386,1260],{"class":39},[33,1388,424],{"class":246},[33,1390,1391],{"class":43}," `${",[33,1393,1394],{"class":39},"visible",[33,1396,112],{"class":43},[33,1398,459],{"class":250},[33,1400,1401],{"class":43},"} items · total ${",[33,1403,1311],{"class":61},[33,1405,1125],{"class":43},[33,1407,1408],{"class":39},"total",[33,1410,1323],{"class":43},[33,1412,1413],{"class":43},"}`",[33,1415,430],{"class":39},[33,1417,1419],{"class":35,"line":1418},21,[33,1420,510],{"class":39},[33,1422,1424],{"class":35,"line":1423},22,[33,1425,517],{"emptyLinePlaceholder":516},[33,1427,1429,1432,1435,1437,1440,1442,1445,1447,1450,1452,1454,1457,1459,1461,1463],{"class":35,"line":1428},23,[33,1430,1431],{"class":39},"document.",[33,1433,1434],{"class":61},"querySelectorAll",[33,1436,1125],{"class":39},[33,1438,1439],{"class":43},"\"input\"",[33,1441,1329],{"class":39},[33,1443,1444],{"class":61},"forEach",[33,1446,540],{"class":39},[33,1448,1449],{"class":543},"el",[33,1451,546],{"class":39},[33,1453,549],{"class":246},[33,1455,1456],{"class":39}," el.",[33,1458,94],{"class":61},[33,1460,1125],{"class":39},[33,1462,1439],{"class":43},[33,1464,1465],{"class":39},", render));\n",[33,1467,1469,1472],{"class":35,"line":1468},24,[33,1470,1471],{"class":61},"render",[33,1473,1474],{"class":39},"();\n",[1476,1477,1479],"h3",{"id":1478},"common-array-higher-order-functions-at-a-glance","Common array higher-order functions at a glance",[117,1481,1482,1498],{},[120,1483,1484],{},[123,1485,1486,1489,1492,1495],{},[126,1487,1488],{},"Method",[126,1490,1491],{},"What it does",[126,1493,1494],{},"Returns",[126,1496,1497],{},"Example result",[133,1499,1500,1515,1530,1548,1569,1591,1612],{},[123,1501,1502,1506,1509,1512],{},[138,1503,1504],{},[15,1505,62],{},[138,1507,1508],{},"Transforms each element",[138,1510,1511],{},"A new array of the same length",[138,1513,1514],{},"Array of names",[123,1516,1517,1521,1524,1527],{},[138,1518,1519],{},[15,1520,198],{},[138,1522,1523],{},"Keeps matching elements",[138,1525,1526],{},"A new array (length ≤ original)",[138,1528,1529],{},"In-stock products",[123,1531,1532,1536,1539,1542],{},[138,1533,1534],{},[15,1535,201],{},[138,1537,1538],{},"Combines into one value",[138,1540,1541],{},"Any value (number, object, ...)",[138,1543,1544,1545],{},"Total ",[15,1546,1547],{},"385",[123,1549,1550,1555,1558,1564],{},[138,1551,1552],{},[15,1553,1554],{},"find",[138,1556,1557],{},"First matching element",[138,1559,1560,1561],{},"The element or ",[15,1562,1563],{},"undefined",[138,1565,1566,1568],{},[15,1567,343],{}," (first over $100)",[123,1570,1571,1576,1579,1586],{},[138,1572,1573],{},[15,1574,1575],{},"some",[138,1577,1578],{},"Does any element match?",[138,1580,1581,1583,1584],{},[15,1582,284],{}," \u002F ",[15,1585,309],{},[138,1587,1588,1589],{},"Anything out of stock? ",[15,1590,284],{},[123,1592,1593,1598,1601,1607],{},[138,1594,1595],{},[15,1596,1597],{},"every",[138,1599,1600],{},"Do all elements match?",[138,1602,1603,1583,1605],{},[15,1604,284],{},[15,1606,309],{},[138,1608,1609,1610],{},"All over $10? ",[15,1611,284],{},[123,1613,1614,1618,1621,1625],{},[138,1615,1616],{},[15,1617,1444],{},[138,1619,1620],{},"Runs something for each element",[138,1622,1623],{},[15,1624,1563],{},[138,1626,1627],{},"(no return value)",[1476,1629,1631,1632],{"id":1630},"grouping-with-reduce","Grouping with ",[15,1633,201],{},[20,1635,1636,1638],{},[15,1637,201],{}," is the most flexible of the bunch: it takes an array and can build a value of any shape. Let's group products by category.",[24,1640,1642],{"className":26,"code":1641,"language":28,"meta":29,"style":29},"const byCategory = products.reduce((acc, p) => {\n  (acc[p.category] ??= []).push(p.name);\n  return acc;\n}, {});\n\u002F\u002F { Electronics: ['Keyboard', 'Mouse', 'Monitor'], Home: ['Mug', 'Tumbler'] }\n",[15,1643,1644,1673,1689,1697,1702],{"__ignoreMap":29},[33,1645,1646,1648,1651,1653,1655,1657,1659,1662,1664,1666,1668,1670],{"class":35,"line":36},[33,1647,247],{"class":246},[33,1649,1650],{"class":250}," byCategory",[33,1652,254],{"class":246},[33,1654,456],{"class":39},[33,1656,201],{"class":61},[33,1658,540],{"class":39},[33,1660,1661],{"class":543},"acc",[33,1663,47],{"class":39},[33,1665,20],{"class":543},[33,1667,546],{"class":39},[33,1669,549],{"class":246},[33,1671,1672],{"class":39}," {\n",[33,1674,1675,1678,1681,1684,1686],{"class":35,"line":260},[33,1676,1677],{"class":39},"  (acc[p.category] ",[33,1679,1680],{"class":246},"??=",[33,1682,1683],{"class":39}," []).",[33,1685,484],{"class":61},[33,1687,1688],{"class":39},"(p.name);\n",[33,1690,1691,1694],{"class":35,"line":290},[33,1692,1693],{"class":246},"  return",[33,1695,1696],{"class":39}," acc;\n",[33,1698,1699],{"class":35,"line":314},[33,1700,1701],{"class":39},"}, {});\n",[33,1703,1704],{"class":35,"line":338},[33,1705,1706],{"class":400},"\u002F\u002F { Electronics: ['Keyboard', 'Mouse', 'Monitor'], Home: ['Mug', 'Tumbler'] }\n",[1708,1709,1710],"tip",{},[104,1711,1712],{},[20,1713,1714,1715,1718],{},"Grouping is common enough that it became a standard function. ",[15,1716,1717],{},"Object.groupBy(products, (p) => p.category)"," does the same thing in one line (supported in major browsers since 2024 and in Node.js 21+).",[97,1720],{},[10,1722,1724],{"id":1723},"_2-functions-that-return-functions-build-your-own","2. Functions that return functions: build your own",[20,1726,1727],{},"Higher-order functions that return functions go hand in hand with closures: the returned function keeps remembering the variables from when it was created.",[1476,1729,1731],{"id":1730},"function-factories-functions-that-remember-settings","Function factories: functions that remember settings",[24,1733,1735],{"className":26,"code":1734,"language":28,"meta":29,"style":29},"const multiplier = (n) => (x) => x * n;\n\nconst double = multiplier(2);\nconst triple = multiplier(3);\n\ndouble(5); \u002F\u002F 10\ntriple(5); \u002F\u002F 15\n",[15,1736,1737,1772,1776,1794,1812,1816,1831],{"__ignoreMap":29},[33,1738,1739,1741,1744,1746,1748,1750,1752,1754,1756,1759,1761,1763,1766,1769],{"class":35,"line":36},[33,1740,247],{"class":246},[33,1742,1743],{"class":61}," multiplier",[33,1745,254],{"class":246},[33,1747,438],{"class":39},[33,1749,1106],{"class":543},[33,1751,546],{"class":39},[33,1753,549],{"class":246},[33,1755,438],{"class":39},[33,1757,1758],{"class":543},"x",[33,1760,546],{"class":39},[33,1762,549],{"class":246},[33,1764,1765],{"class":39}," x ",[33,1767,1768],{"class":246},"*",[33,1770,1771],{"class":39}," n;\n",[33,1773,1774],{"class":35,"line":260},[33,1775,517],{"emptyLinePlaceholder":516},[33,1777,1778,1780,1783,1785,1787,1789,1792],{"class":35,"line":290},[33,1779,247],{"class":246},[33,1781,1782],{"class":250}," double",[33,1784,254],{"class":246},[33,1786,1743],{"class":61},[33,1788,1125],{"class":39},[33,1790,1791],{"class":250},"2",[33,1793,1131],{"class":39},[33,1795,1796,1798,1801,1803,1805,1807,1810],{"class":35,"line":314},[33,1797,247],{"class":246},[33,1799,1800],{"class":250}," triple",[33,1802,254],{"class":246},[33,1804,1743],{"class":61},[33,1806,1125],{"class":39},[33,1808,1809],{"class":250},"3",[33,1811,1131],{"class":39},[33,1813,1814],{"class":35,"line":338},[33,1815,517],{"emptyLinePlaceholder":516},[33,1817,1818,1821,1823,1826,1828],{"class":35,"line":361},[33,1819,1820],{"class":61},"double",[33,1822,1125],{"class":39},[33,1824,1825],{"class":250},"5",[33,1827,622],{"class":39},[33,1829,1830],{"class":400},"\u002F\u002F 10\n",[33,1832,1833,1836,1838,1840,1842],{"class":35,"line":384},[33,1834,1835],{"class":61},"triple",[33,1837,1125],{"class":39},[33,1839,1825],{"class":250},[33,1841,622],{"class":39},[33,1843,1844],{"class":400},"\u002F\u002F 15\n",[20,1846,1847,1850,1851,1854],{},[15,1848,1849],{},"multiplier(2)"," builds and returns \"a new function that remembers 2.\" ",[85,1852,1853],{},"Stamping out functions with settings baked in"," is the main use of higher-order functions that return functions.",[1476,1856,1858,1860],{"id":1857},"once-a-function-that-runs-only-once",[15,1859,221],{},": a function that runs only once",[20,1862,1863],{},"Useful for preventing double-clicked payment buttons or initialization code running twice.",[24,1865,1867],{"className":26,"code":1866,"language":28,"meta":29,"style":29},"function once(fn) {\n  let called = false;\n  let result;\n  return (...args) => {\n    if (!called) {\n      called = true;\n      result = fn(...args);\n    }\n    return result;\n  };\n}\n\nconst init = once(() => {\n  console.log(\"Initializing!\");\n  return 42;\n});\n\ninit(); \u002F\u002F logs \"Initializing!\", returns 42\ninit(); \u002F\u002F logs nothing, returns 42\n",[15,1868,1869,1883,1898,1905,1923,1936,1948,1965,1970,1977,1982,1986,1990,2008,2023,2032,2037,2041,2052],{"__ignoreMap":29},[33,1870,1871,1873,1876,1878,1881],{"class":35,"line":36},[33,1872,1140],{"class":246},[33,1874,1875],{"class":61}," once",[33,1877,1125],{"class":39},[33,1879,1880],{"class":543},"fn",[33,1882,468],{"class":39},[33,1884,1885,1888,1891,1893,1896],{"class":35,"line":260},[33,1886,1887],{"class":246},"  let",[33,1889,1890],{"class":39}," called ",[33,1892,424],{"class":246},[33,1894,1895],{"class":250}," false",[33,1897,430],{"class":39},[33,1899,1900,1902],{"class":35,"line":290},[33,1901,1887],{"class":246},[33,1903,1904],{"class":39}," result;\n",[33,1906,1907,1909,1911,1914,1917,1919,1921],{"class":35,"line":314},[33,1908,1693],{"class":246},[33,1910,438],{"class":39},[33,1912,1913],{"class":246},"...",[33,1915,1916],{"class":543},"args",[33,1918,546],{"class":39},[33,1920,549],{"class":246},[33,1922,1672],{"class":39},[33,1924,1925,1928,1930,1933],{"class":35,"line":338},[33,1926,1927],{"class":246},"    if",[33,1929,438],{"class":39},[33,1931,1932],{"class":246},"!",[33,1934,1935],{"class":39},"called) {\n",[33,1937,1938,1941,1943,1946],{"class":35,"line":361},[33,1939,1940],{"class":39},"      called ",[33,1942,424],{"class":246},[33,1944,1945],{"class":250}," true",[33,1947,430],{"class":39},[33,1949,1950,1953,1955,1958,1960,1962],{"class":35,"line":384},[33,1951,1952],{"class":39},"      result ",[33,1954,424],{"class":246},[33,1956,1957],{"class":61}," fn",[33,1959,1125],{"class":39},[33,1961,1913],{"class":246},[33,1963,1964],{"class":39},"args);\n",[33,1966,1967],{"class":35,"line":501},[33,1968,1969],{"class":39},"    }\n",[33,1971,1972,1975],{"class":35,"line":507},[33,1973,1974],{"class":246},"    return",[33,1976,1904],{"class":39},[33,1978,1979],{"class":35,"line":513},[33,1980,1981],{"class":39},"  };\n",[33,1983,1984],{"class":35,"line":520},[33,1985,510],{"class":39},[33,1987,1988],{"class":35,"line":526},[33,1989,517],{"emptyLinePlaceholder":516},[33,1991,1992,1994,1997,1999,2001,2004,2006],{"class":35,"line":555},[33,1993,247],{"class":246},[33,1995,1996],{"class":250}," init",[33,1998,254],{"class":246},[33,2000,1875],{"class":61},[33,2002,2003],{"class":39},"(() ",[33,2005,549],{"class":246},[33,2007,1672],{"class":39},[33,2009,2010,2013,2016,2018,2021],{"class":35,"line":583},[33,2011,2012],{"class":39},"  console.",[33,2014,2015],{"class":61},"log",[33,2017,1125],{"class":39},[33,2019,2020],{"class":43},"\"Initializing!\"",[33,2022,1131],{"class":39},[33,2024,2025,2027,2030],{"class":35,"line":1220},[33,2026,1693],{"class":246},[33,2028,2029],{"class":250}," 42",[33,2031,430],{"class":39},[33,2033,2034],{"class":35,"line":1244},[33,2035,2036],{"class":39},"});\n",[33,2038,2039],{"class":35,"line":1249},[33,2040,517],{"emptyLinePlaceholder":516},[33,2042,2043,2046,2049],{"class":35,"line":1270},[33,2044,2045],{"class":61},"init",[33,2047,2048],{"class":39},"(); ",[33,2050,2051],{"class":400},"\u002F\u002F logs \"Initializing!\", returns 42\n",[33,2053,2054,2056,2058],{"class":35,"line":1342},[33,2055,2045],{"class":61},[33,2057,2048],{"class":39},[33,2059,2060],{"class":400},"\u002F\u002F logs nothing, returns 42\n",[1476,2062,2064,2066],{"id":2063},"memoize-a-function-that-remembers-its-results",[15,2065,224],{},": a function that remembers its results",[20,2068,2069],{},"Caches heavy calculations that get called with the same input again and again.",[24,2071,2073],{"className":26,"code":2072,"language":28,"meta":29,"style":29},"function memoize(fn) {\n  const cache = new Map();\n  return (arg) => {\n    if (cache.has(arg)) return cache.get(arg);\n    const result = fn(arg);\n    cache.set(arg, result);\n    return result;\n  };\n}\n\nconst slowSquare = (n) => {\n  console.log(`Computing: ${n}`);\n  return n * n;\n};\nconst fastSquare = memoize(slowSquare);\n\nfastSquare(4); \u002F\u002F logs \"Computing: 4\", returns 16\nfastSquare(4); \u002F\u002F logs nothing, returns 16 straight from the cache\n",[15,2074,2075,2088,2105,2120,2144,2158,2169,2175,2179,2183,2187,2206,2223,2234,2239,2253,2257,2272],{"__ignoreMap":29},[33,2076,2077,2079,2082,2084,2086],{"class":35,"line":36},[33,2078,1140],{"class":246},[33,2080,2081],{"class":61}," memoize",[33,2083,1125],{"class":39},[33,2085,1880],{"class":543},[33,2087,468],{"class":39},[33,2089,2090,2092,2095,2097,2100,2103],{"class":35,"line":260},[33,2091,1151],{"class":246},[33,2093,2094],{"class":250}," cache",[33,2096,254],{"class":246},[33,2098,2099],{"class":246}," new",[33,2101,2102],{"class":61}," Map",[33,2104,1474],{"class":39},[33,2106,2107,2109,2111,2114,2116,2118],{"class":35,"line":290},[33,2108,1693],{"class":246},[33,2110,438],{"class":39},[33,2112,2113],{"class":543},"arg",[33,2115,546],{"class":39},[33,2117,549],{"class":246},[33,2119,1672],{"class":39},[33,2121,2122,2124,2127,2130,2133,2135,2138,2141],{"class":35,"line":314},[33,2123,1927],{"class":246},[33,2125,2126],{"class":39}," (cache.",[33,2128,2129],{"class":61},"has",[33,2131,2132],{"class":39},"(arg)) ",[33,2134,213],{"class":246},[33,2136,2137],{"class":39}," cache.",[33,2139,2140],{"class":61},"get",[33,2142,2143],{"class":39},"(arg);\n",[33,2145,2146,2149,2152,2154,2156],{"class":35,"line":338},[33,2147,2148],{"class":246},"    const",[33,2150,2151],{"class":250}," result",[33,2153,254],{"class":246},[33,2155,1957],{"class":61},[33,2157,2143],{"class":39},[33,2159,2160,2163,2166],{"class":35,"line":361},[33,2161,2162],{"class":39},"    cache.",[33,2164,2165],{"class":61},"set",[33,2167,2168],{"class":39},"(arg, result);\n",[33,2170,2171,2173],{"class":35,"line":384},[33,2172,1974],{"class":246},[33,2174,1904],{"class":39},[33,2176,2177],{"class":35,"line":501},[33,2178,1981],{"class":39},[33,2180,2181],{"class":35,"line":507},[33,2182,510],{"class":39},[33,2184,2185],{"class":35,"line":513},[33,2186,517],{"emptyLinePlaceholder":516},[33,2188,2189,2191,2194,2196,2198,2200,2202,2204],{"class":35,"line":520},[33,2190,247],{"class":246},[33,2192,2193],{"class":61}," slowSquare",[33,2195,254],{"class":246},[33,2197,438],{"class":39},[33,2199,1106],{"class":543},[33,2201,546],{"class":39},[33,2203,549],{"class":246},[33,2205,1672],{"class":39},[33,2207,2208,2210,2212,2214,2217,2219,2221],{"class":35,"line":526},[33,2209,2012],{"class":39},[33,2211,2015],{"class":61},[33,2213,1125],{"class":39},[33,2215,2216],{"class":43},"`Computing: ${",[33,2218,1106],{"class":39},[33,2220,1413],{"class":43},[33,2222,1131],{"class":39},[33,2224,2225,2227,2230,2232],{"class":35,"line":555},[33,2226,1693],{"class":246},[33,2228,2229],{"class":39}," n ",[33,2231,1768],{"class":246},[33,2233,1771],{"class":39},[33,2235,2236],{"class":35,"line":583},[33,2237,2238],{"class":39},"};\n",[33,2240,2241,2243,2246,2248,2250],{"class":35,"line":1220},[33,2242,247],{"class":246},[33,2244,2245],{"class":250}," fastSquare",[33,2247,254],{"class":246},[33,2249,2081],{"class":61},[33,2251,2252],{"class":39},"(slowSquare);\n",[33,2254,2255],{"class":35,"line":1244},[33,2256,517],{"emptyLinePlaceholder":516},[33,2258,2259,2262,2264,2267,2269],{"class":35,"line":1249},[33,2260,2261],{"class":61},"fastSquare",[33,2263,1125],{"class":39},[33,2265,2266],{"class":250},"4",[33,2268,622],{"class":39},[33,2270,2271],{"class":400},"\u002F\u002F logs \"Computing: 4\", returns 16\n",[33,2273,2274,2276,2278,2280,2282],{"class":35,"line":1270},[33,2275,2261],{"class":61},[33,2277,1125],{"class":39},[33,2279,2266],{"class":250},[33,2281,622],{"class":39},[33,2283,2284],{"class":400},"\u002F\u002F logs nothing, returns 16 straight from the cache\n",[1476,2286,2288],{"id":2287},"adding-behavior-to-an-existing-function","Adding behavior to an existing function",[20,2290,2291],{},"Without touching the original function, you can wrap it to add things like logging or permission checks before and after it runs.",[24,2293,2295],{"className":26,"code":2294,"language":28,"meta":29,"style":29},"function withLogging(fn) {\n  return (...args) => {\n    console.log(`Call: ${fn.name}(${args.join(\", \")})`);\n    const result = fn(...args);\n    console.log(`Result: ${result}`);\n    return result;\n  };\n}\n\nfunction sum(a, b) {\n  return a + b;\n}\n\nconst loggedSum = withLogging(sum);\nloggedSum(2, 3);\n\u002F\u002F Call: sum(2, 3)\n\u002F\u002F Result: 5\n",[15,2296,2297,2310,2326,2365,2381,2399,2405,2409,2413,2417,2436,2448,2452,2456,2470,2485,2490],{"__ignoreMap":29},[33,2298,2299,2301,2304,2306,2308],{"class":35,"line":36},[33,2300,1140],{"class":246},[33,2302,2303],{"class":61}," withLogging",[33,2305,1125],{"class":39},[33,2307,1880],{"class":543},[33,2309,468],{"class":39},[33,2311,2312,2314,2316,2318,2320,2322,2324],{"class":35,"line":260},[33,2313,1693],{"class":246},[33,2315,438],{"class":39},[33,2317,1913],{"class":246},[33,2319,1916],{"class":543},[33,2321,546],{"class":39},[33,2323,549],{"class":246},[33,2325,1672],{"class":39},[33,2327,2328,2331,2333,2335,2338,2340,2342,2344,2347,2349,2351,2353,2355,2358,2360,2363],{"class":35,"line":290},[33,2329,2330],{"class":39},"    console.",[33,2332,2015],{"class":61},[33,2334,1125],{"class":39},[33,2336,2337],{"class":43},"`Call: ${",[33,2339,1880],{"class":39},[33,2341,112],{"class":43},[33,2343,1305],{"class":39},[33,2345,2346],{"class":43},"}(${",[33,2348,1916],{"class":39},[33,2350,112],{"class":43},[33,2352,1332],{"class":61},[33,2354,1125],{"class":43},[33,2356,2357],{"class":43},"\", \"",[33,2359,1323],{"class":43},[33,2361,2362],{"class":43},"})`",[33,2364,1131],{"class":39},[33,2366,2367,2369,2371,2373,2375,2377,2379],{"class":35,"line":314},[33,2368,2148],{"class":246},[33,2370,2151],{"class":250},[33,2372,254],{"class":246},[33,2374,1957],{"class":61},[33,2376,1125],{"class":39},[33,2378,1913],{"class":246},[33,2380,1964],{"class":39},[33,2382,2383,2385,2387,2389,2392,2395,2397],{"class":35,"line":338},[33,2384,2330],{"class":39},[33,2386,2015],{"class":61},[33,2388,1125],{"class":39},[33,2390,2391],{"class":43},"`Result: ${",[33,2393,2394],{"class":39},"result",[33,2396,1413],{"class":43},[33,2398,1131],{"class":39},[33,2400,2401,2403],{"class":35,"line":361},[33,2402,1974],{"class":246},[33,2404,1904],{"class":39},[33,2406,2407],{"class":35,"line":384},[33,2408,1981],{"class":39},[33,2410,2411],{"class":35,"line":501},[33,2412,510],{"class":39},[33,2414,2415],{"class":35,"line":507},[33,2416,517],{"emptyLinePlaceholder":516},[33,2418,2419,2421,2424,2426,2429,2431,2434],{"class":35,"line":513},[33,2420,1140],{"class":246},[33,2422,2423],{"class":61}," sum",[33,2425,1125],{"class":39},[33,2427,2428],{"class":543},"a",[33,2430,47],{"class":39},[33,2432,2433],{"class":543},"b",[33,2435,468],{"class":39},[33,2437,2438,2440,2443,2445],{"class":35,"line":520},[33,2439,1693],{"class":246},[33,2441,2442],{"class":39}," a ",[33,2444,613],{"class":246},[33,2446,2447],{"class":39}," b;\n",[33,2449,2450],{"class":35,"line":526},[33,2451,510],{"class":39},[33,2453,2454],{"class":35,"line":555},[33,2455,517],{"emptyLinePlaceholder":516},[33,2457,2458,2460,2463,2465,2467],{"class":35,"line":583},[33,2459,247],{"class":246},[33,2461,2462],{"class":250}," loggedSum",[33,2464,254],{"class":246},[33,2466,2303],{"class":61},[33,2468,2469],{"class":39},"(sum);\n",[33,2471,2472,2475,2477,2479,2481,2483],{"class":35,"line":1220},[33,2473,2474],{"class":61},"loggedSum",[33,2476,1125],{"class":39},[33,2478,1791],{"class":250},[33,2480,47],{"class":39},[33,2482,1809],{"class":250},[33,2484,1131],{"class":39},[33,2486,2487],{"class":35,"line":1244},[33,2488,2489],{"class":400},"\u002F\u002F Call: sum(2, 3)\n",[33,2491,2492],{"class":35,"line":1249},[33,2493,2494],{"class":400},"\u002F\u002F Result: 5\n",[20,2496,2497,2499,2500,2503],{},[15,2498,218],{}," and ",[15,2501,2502],{},"throttle",", which you use to tame search-box input, follow exactly this shape: they take a function and return a new function that controls when it actually runs.",[97,2505],{},[10,2507,2509],{"id":2508},"_3-function-composition-chaining-small-functions","3. Function composition: chaining small functions",[20,2511,2512,2513,112],{},"Connecting several small functions like a pipeline to make one function is called function composition. You can build it with ",[15,2514,201],{},[24,2516,2518],{"className":26,"code":2517,"language":28,"meta":29,"style":29},"const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);\n\nconst trim = (s) => s.trim();\nconst lower = (s) => s.toLowerCase();\nconst slug = (s) => s.replace(\u002F\\s+\u002Fg, \"-\");\n\nconst toSlug = pipe(trim, lower, slug);\ntoSlug(\"  Hello World Nuxt  \"); \u002F\u002F \"hello-world-nuxt\"\n",[15,2519,2520,2570,2574,2599,2623,2667,2671,2685],{"__ignoreMap":29},[33,2521,2522,2524,2527,2529,2531,2533,2536,2538,2540,2542,2544,2546,2548,2551,2553,2555,2557,2559,2561,2563,2565,2567],{"class":35,"line":36},[33,2523,247],{"class":246},[33,2525,2526],{"class":61}," pipe",[33,2528,254],{"class":246},[33,2530,438],{"class":39},[33,2532,1913],{"class":246},[33,2534,2535],{"class":543},"fns",[33,2537,546],{"class":39},[33,2539,549],{"class":246},[33,2541,438],{"class":39},[33,2543,1758],{"class":543},[33,2545,546],{"class":39},[33,2547,549],{"class":246},[33,2549,2550],{"class":39}," fns.",[33,2552,201],{"class":61},[33,2554,540],{"class":39},[33,2556,1661],{"class":543},[33,2558,47],{"class":39},[33,2560,1880],{"class":543},[33,2562,546],{"class":39},[33,2564,549],{"class":246},[33,2566,1957],{"class":61},[33,2568,2569],{"class":39},"(acc), x);\n",[33,2571,2572],{"class":35,"line":260},[33,2573,517],{"emptyLinePlaceholder":516},[33,2575,2576,2578,2581,2583,2585,2587,2589,2591,2594,2597],{"class":35,"line":290},[33,2577,247],{"class":246},[33,2579,2580],{"class":61}," trim",[33,2582,254],{"class":246},[33,2584,438],{"class":39},[33,2586,1079],{"class":543},[33,2588,546],{"class":39},[33,2590,549],{"class":246},[33,2592,2593],{"class":39}," s.",[33,2595,2596],{"class":61},"trim",[33,2598,1474],{"class":39},[33,2600,2601,2603,2606,2608,2610,2612,2614,2616,2618,2621],{"class":35,"line":314},[33,2602,247],{"class":246},[33,2604,2605],{"class":61}," lower",[33,2607,254],{"class":246},[33,2609,438],{"class":39},[33,2611,1079],{"class":543},[33,2613,546],{"class":39},[33,2615,549],{"class":246},[33,2617,2593],{"class":39},[33,2619,2620],{"class":61},"toLowerCase",[33,2622,1474],{"class":39},[33,2624,2625,2627,2630,2632,2634,2636,2638,2640,2642,2645,2647,2650,2653,2655,2657,2660,2662,2665],{"class":35,"line":338},[33,2626,247],{"class":246},[33,2628,2629],{"class":61}," slug",[33,2631,254],{"class":246},[33,2633,438],{"class":39},[33,2635,1079],{"class":543},[33,2637,546],{"class":39},[33,2639,549],{"class":246},[33,2641,2593],{"class":39},[33,2643,2644],{"class":61},"replace",[33,2646,1125],{"class":39},[33,2648,2649],{"class":43},"\u002F",[33,2651,2652],{"class":250},"\\s",[33,2654,613],{"class":246},[33,2656,2649],{"class":43},[33,2658,2659],{"class":246},"g",[33,2661,47],{"class":39},[33,2663,2664],{"class":43},"\"-\"",[33,2666,1131],{"class":39},[33,2668,2669],{"class":35,"line":361},[33,2670,517],{"emptyLinePlaceholder":516},[33,2672,2673,2675,2678,2680,2682],{"class":35,"line":384},[33,2674,247],{"class":246},[33,2676,2677],{"class":250}," toSlug",[33,2679,254],{"class":246},[33,2681,2526],{"class":61},[33,2683,2684],{"class":39},"(trim, lower, slug);\n",[33,2686,2687,2690,2692,2695,2697],{"class":35,"line":501},[33,2688,2689],{"class":61},"toSlug",[33,2691,1125],{"class":39},[33,2693,2694],{"class":43},"\"  Hello World Nuxt  \"",[33,2696,622],{"class":39},[33,2698,2699],{"class":400},"\u002F\u002F \"hello-world-nuxt\"\n",[20,2701,2702,2703,2706],{},"Each function does one thing, and ",[15,2704,2705],{},"pipe"," runs them left to right. Reordering steps or adding new ones is easy.",[97,2708],{},[10,2710,2712],{"id":2711},"_4-currying-taking-arguments-one-at-a-time","4. Currying: taking arguments one at a time",[20,2714,2715,2716,112],{},"Currying turns a function that takes several arguments into ",[85,2717,2718],{},"a chain of functions that each take one",[24,2720,2722],{"className":26,"code":2721,"language":28,"meta":29,"style":29},"const add = (a) => (b) => a + b;\n\nadd(1)(2); \u002F\u002F 3\n\nconst add10 = add(10);\n[1, 2, 3].map(add10); \u002F\u002F [11, 12, 13]\n",[15,2723,2724,2755,2759,2779,2783,2801],{"__ignoreMap":29},[33,2725,2726,2728,2731,2733,2735,2737,2739,2741,2743,2745,2747,2749,2751,2753],{"class":35,"line":36},[33,2727,247],{"class":246},[33,2729,2730],{"class":61}," add",[33,2732,254],{"class":246},[33,2734,438],{"class":39},[33,2736,2428],{"class":543},[33,2738,546],{"class":39},[33,2740,549],{"class":246},[33,2742,438],{"class":39},[33,2744,2433],{"class":543},[33,2746,546],{"class":39},[33,2748,549],{"class":246},[33,2750,2442],{"class":39},[33,2752,613],{"class":246},[33,2754,2447],{"class":39},[33,2756,2757],{"class":35,"line":260},[33,2758,517],{"emptyLinePlaceholder":516},[33,2760,2761,2764,2766,2769,2772,2774,2776],{"class":35,"line":290},[33,2762,2763],{"class":61},"add",[33,2765,1125],{"class":39},[33,2767,2768],{"class":250},"1",[33,2770,2771],{"class":39},")(",[33,2773,1791],{"class":250},[33,2775,622],{"class":39},[33,2777,2778],{"class":400},"\u002F\u002F 3\n",[33,2780,2781],{"class":35,"line":314},[33,2782,517],{"emptyLinePlaceholder":516},[33,2784,2785,2787,2790,2792,2794,2796,2799],{"class":35,"line":338},[33,2786,247],{"class":246},[33,2788,2789],{"class":250}," add10",[33,2791,254],{"class":246},[33,2793,2730],{"class":61},[33,2795,1125],{"class":39},[33,2797,2798],{"class":250},"10",[33,2800,1131],{"class":39},[33,2802,2803,2805,2807,2809,2811,2813,2815,2817,2819,2822],{"class":35,"line":361},[33,2804,40],{"class":39},[33,2806,2768],{"class":250},[33,2808,47],{"class":39},[33,2810,1791],{"class":250},[33,2812,47],{"class":39},[33,2814,1809],{"class":250},[33,2816,58],{"class":39},[33,2818,62],{"class":61},[33,2820,2821],{"class":39},"(add10); ",[33,2823,2824],{"class":400},"\u002F\u002F [11, 12, 13]\n",[20,2826,2827,2828,2831,2832,112],{},"You can make a function with some arguments pre-filled (",[15,2829,2830],{},"add10","), which is handy for passing straight into higher-order functions like ",[15,2833,62],{},[97,2835],{},[10,2837,2839],{"id":2838},"traps-to-watch-for","Traps to watch for",[1476,2841,2843,2844,2847],{"id":2842},"trap-1-mapparseint-the-answer-to-the-quiz","Trap 1. ",[15,2845,2846],{},"map(parseInt)",": the answer to the quiz",[20,2849,2850,2852,2853,2856,2857,2860,2861,112],{},[15,2851,62],{}," passes three arguments to its callback: ",[15,2854,2855],{},"(element, index, array)",". But ",[15,2858,2859],{},"parseInt"," treats its second argument as the ",[85,2862,2863],{},"radix",[117,2865,2866,2879],{},[120,2867,2868],{},[123,2869,2870,2873,2876],{},[126,2871,2872],{},"Call",[126,2874,2875],{},"What it means",[126,2877,2878],{},"Result",[133,2880,2881,2895,2910],{},[123,2882,2883,2888,2891],{},[138,2884,2885],{},[15,2886,2887],{},"parseInt(\"1\", 0)",[138,2889,2890],{},"Radix 0 → treated as the default (base 10)",[138,2892,2893],{},[15,2894,2768],{},[123,2896,2897,2902,2905],{},[138,2898,2899],{},[15,2900,2901],{},"parseInt(\"2\", 1)",[138,2903,2904],{},"Base 1 doesn't exist",[138,2906,2907],{},[15,2908,2909],{},"NaN",[123,2911,2912,2917,2923],{},[138,2913,2914],{},[15,2915,2916],{},"parseInt(\"3\", 2)",[138,2918,2919,2920,2922],{},"There's no digit ",[15,2921,1809],{}," in binary",[138,2924,2925],{},[15,2926,2909],{},[20,2928,2929],{},"The fix is to decide yourself which arguments get passed:",[24,2931,2933],{"className":26,"code":2932,"language":28,"meta":29,"style":29},"[\"1\", \"2\", \"3\"].map(Number); \u002F\u002F [1, 2, 3]\n[\"1\", \"2\", \"3\"].map((s) => parseInt(s, 10)); \u002F\u002F [1, 2, 3]\n",[15,2934,2935,2959],{"__ignoreMap":29},[33,2936,2937,2939,2941,2943,2945,2947,2949,2951,2953,2956],{"class":35,"line":36},[33,2938,40],{"class":39},[33,2940,44],{"class":43},[33,2942,47],{"class":39},[33,2944,50],{"class":43},[33,2946,47],{"class":39},[33,2948,55],{"class":43},[33,2950,58],{"class":39},[33,2952,62],{"class":61},[33,2954,2955],{"class":39},"(Number); ",[33,2957,2958],{"class":400},"\u002F\u002F [1, 2, 3]\n",[33,2960,2961,2963,2965,2967,2969,2971,2973,2975,2977,2979,2981,2983,2985,2988,2991,2993,2996],{"class":35,"line":260},[33,2962,40],{"class":39},[33,2964,44],{"class":43},[33,2966,47],{"class":39},[33,2968,50],{"class":43},[33,2970,47],{"class":39},[33,2972,55],{"class":43},[33,2974,58],{"class":39},[33,2976,62],{"class":61},[33,2978,540],{"class":39},[33,2980,1079],{"class":543},[33,2982,546],{"class":39},[33,2984,549],{"class":246},[33,2986,2987],{"class":61}," parseInt",[33,2989,2990],{"class":39},"(s, ",[33,2992,2798],{"class":250},[33,2994,2995],{"class":39},")); ",[33,2997,2958],{"class":400},[2999,3000,3001],"warning",{},[104,3002,3003],{},[20,3004,3005,3006,3009,3010,3012],{},"When you pass a function ",[85,3007,3008],{},"directly"," to a higher-order function (",[15,3011,2846],{},"), check how it interprets extra arguments. When in doubt, wrapping it in an arrow function is the safe choice.",[1476,3014,3016,3017,3019],{"id":3015},"trap-2-foreach-returns-nothing","Trap 2. ",[15,3018,1444],{}," returns nothing",[24,3021,3023],{"className":26,"code":3022,"language":28,"meta":29,"style":29},"const result = [1, 2, 3].forEach((x) => x * 2);\nconsole.log(result); \u002F\u002F undefined\n",[15,3024,3025,3067],{"__ignoreMap":29},[33,3026,3027,3029,3031,3033,3036,3038,3040,3042,3044,3046,3048,3050,3052,3054,3056,3058,3060,3062,3065],{"class":35,"line":36},[33,3028,247],{"class":246},[33,3030,2151],{"class":250},[33,3032,254],{"class":246},[33,3034,3035],{"class":39}," [",[33,3037,2768],{"class":250},[33,3039,47],{"class":39},[33,3041,1791],{"class":250},[33,3043,47],{"class":39},[33,3045,1809],{"class":250},[33,3047,58],{"class":39},[33,3049,1444],{"class":61},[33,3051,540],{"class":39},[33,3053,1758],{"class":543},[33,3055,546],{"class":39},[33,3057,549],{"class":246},[33,3059,1765],{"class":39},[33,3061,1768],{"class":246},[33,3063,3064],{"class":250}," 2",[33,3066,1131],{"class":39},[33,3068,3069,3072,3074,3077],{"class":35,"line":260},[33,3070,3071],{"class":39},"console.",[33,3073,2015],{"class":61},[33,3075,3076],{"class":39},"(result); ",[33,3078,3079],{"class":400},"\u002F\u002F undefined\n",[20,3081,3082,3083,3085,3086,112],{},"If you need a new array, use ",[15,3084,62],{},". If you just want to run something for each element, use ",[15,3087,1444],{},[1476,3089,3091,3092,3095],{"id":3090},"trap-3-sort-mutates-the-original","Trap 3. ",[15,3093,3094],{},"sort"," mutates the original",[20,3097,3098,2499,3100,3102,3103,47,3105,3108,3109,3112,3113,3116],{},[15,3099,62],{},[15,3101,198],{}," return new arrays, but ",[15,3104,3094],{},[15,3106,3107],{},"reverse",", and ",[15,3110,3111],{},"splice"," ",[85,3114,3115],{},"change the original array itself."," That's especially dangerous with React or Vue state. To keep the original intact, use the methods added in ES2023.",[24,3118,3120],{"className":26,"code":3119,"language":28,"meta":29,"style":29},"const nums = [3, 1, 2];\nconst sorted = nums.toSorted((a, b) => a - b);\n\nnums; \u002F\u002F [3, 1, 2] (unchanged)\nsorted; \u002F\u002F [1, 2, 3]\n",[15,3121,3122,3145,3180,3184,3192],{"__ignoreMap":29},[33,3123,3124,3126,3129,3131,3133,3135,3137,3139,3141,3143],{"class":35,"line":36},[33,3125,247],{"class":246},[33,3127,3128],{"class":250}," nums",[33,3130,254],{"class":246},[33,3132,3035],{"class":39},[33,3134,1809],{"class":250},[33,3136,47],{"class":39},[33,3138,2768],{"class":250},[33,3140,47],{"class":39},[33,3142,1791],{"class":250},[33,3144,387],{"class":39},[33,3146,3147,3149,3152,3154,3157,3160,3162,3164,3166,3168,3170,3172,3174,3177],{"class":35,"line":260},[33,3148,247],{"class":246},[33,3150,3151],{"class":250}," sorted",[33,3153,254],{"class":246},[33,3155,3156],{"class":39}," nums.",[33,3158,3159],{"class":61},"toSorted",[33,3161,540],{"class":39},[33,3163,2428],{"class":543},[33,3165,47],{"class":39},[33,3167,2433],{"class":543},[33,3169,546],{"class":39},[33,3171,549],{"class":246},[33,3173,2442],{"class":39},[33,3175,3176],{"class":246},"-",[33,3178,3179],{"class":39}," b);\n",[33,3181,3182],{"class":35,"line":290},[33,3183,517],{"emptyLinePlaceholder":516},[33,3185,3186,3189],{"class":35,"line":314},[33,3187,3188],{"class":39},"nums; ",[33,3190,3191],{"class":400},"\u002F\u002F [3, 1, 2] (unchanged)\n",[33,3193,3194,3197],{"class":35,"line":338},[33,3195,3196],{"class":39},"sorted; ",[33,3198,2958],{"class":400},[117,3200,3201,3211],{},[120,3202,3203],{},[123,3204,3205,3208],{},[126,3206,3207],{},"Mutates the original",[126,3209,3210],{},"Returns a new array",[133,3212,3213,3225,3237,3249],{},[123,3214,3215,3220],{},[138,3216,3217],{},[15,3218,3219],{},"sort()",[138,3221,3222],{},[15,3223,3224],{},"toSorted()",[123,3226,3227,3232],{},[138,3228,3229],{},[15,3230,3231],{},"reverse()",[138,3233,3234],{},[15,3235,3236],{},"toReversed()",[123,3238,3239,3244],{},[138,3240,3241],{},[15,3242,3243],{},"splice()",[138,3245,3246],{},[15,3247,3248],{},"toSpliced()",[123,3250,3251,3256],{},[138,3252,3253],{},[15,3254,3255],{},"arr[i] = x",[138,3257,3258],{},[15,3259,3260],{},"with(i, x)",[1476,3262,3264,3265],{"id":3263},"trap-4-side-effects-inside-map","Trap 4. Side effects inside ",[15,3266,62],{},[20,3268,628,3269,3271,3272,3274,3275,3277,3278,3280,3281,112],{},[15,3270,62],{}," callback is for \"transforming a value and returning it.\" If you call an API or change outside variables inside it, a reader looking at ",[15,3273,62],{}," can't tell that's happening. Keep the roles separate: transform with ",[15,3276,62],{},", run things with ",[15,3279,1444],{}," or ",[15,3282,3283],{},"for...of",[97,3285],{},[10,3287,3289],{"id":3288},"summary-why-this-is-worth-knowing","Summary: why this is worth knowing",[117,3291,3292,3302],{},[120,3293,3294],{},[123,3295,3296,3299],{},[126,3297,3298],{},"What you want",[126,3300,3301],{},"Higher-order function",[133,3303,3304,3317,3329,3340,3349,3358,3371],{},[123,3305,3306,3309],{},[138,3307,3308],{},"Transform \u002F filter \u002F combine an array",[138,3310,3311,1583,3313,1583,3315],{},[15,3312,62],{},[15,3314,198],{},[15,3316,201],{},[123,3318,3319,3322],{},[138,3320,3321],{},"Group items",[138,3323,3324,3280,3326],{},[15,3325,201],{},[15,3327,3328],{},"Object.groupBy",[123,3330,3331,3334],{},[138,3332,3333],{},"Stamp out functions with settings baked in",[138,3335,3336,3337,1323],{},"A function that returns a function (",[15,3338,3339],{},"multiplier",[123,3341,3342,3345],{},[138,3343,3344],{},"Run only once",[138,3346,3347],{},[15,3348,221],{},[123,3350,3351,3354],{},[138,3352,3353],{},"Cache results",[138,3355,3356],{},[15,3357,224],{},[123,3359,3360,3363],{},[138,3361,3362],{},"Add behavior to an existing function",[138,3364,3365,3366,47,3369,1323],{},"A wrapper (",[15,3367,3368],{},"withLogging",[15,3370,218],{},[123,3372,3373,3376],{},[138,3374,3375],{},"Chain small functions",[138,3377,3378],{},[15,3379,2705],{},[20,3381,3382,3383,3386,3387,3389,3390,47,3392,3394,3395,3397],{},"The heart of higher-order functions is ",[85,3384,3385],{},"separating \"what to do\" from \"how to iterate.\""," Hand the \"how\" (looping, caching, limiting how often something runs) to a higher-order function, and you only write the small functions that describe the \"what.\" Those small functions are easy to test and easy to reuse. Next time you're about to write a ",[15,3388,435],{}," loop with a temporary array, first check whether ",[15,3391,62],{},[15,3393,198],{},", or ",[15,3396,201],{}," can say what you mean in one line.",[3399,3400,3401],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}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 .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 .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":29,"searchDepth":260,"depth":260,"links":3403},[3404,3406,3407,3412,3420,3421,3422,3432],{"id":12,"depth":260,"text":3405},"What does ['1', '2', '3'].map(parseInt) return?",{"id":101,"depth":260,"text":102},{"id":232,"depth":260,"text":233,"children":3408},[3409,3410],{"id":1478,"depth":290,"text":1479},{"id":1630,"depth":290,"text":3411},"Grouping with reduce",{"id":1723,"depth":260,"text":1724,"children":3413},[3414,3415,3417,3419],{"id":1730,"depth":290,"text":1731},{"id":1857,"depth":290,"text":3416},"once: a function that runs only once",{"id":2063,"depth":290,"text":3418},"memoize: a function that remembers its results",{"id":2287,"depth":290,"text":2288},{"id":2508,"depth":260,"text":2509},{"id":2711,"depth":260,"text":2712},{"id":2838,"depth":260,"text":2839,"children":3423},[3424,3426,3428,3430],{"id":2842,"depth":290,"text":3425},"Trap 1. map(parseInt): the answer to the quiz",{"id":3015,"depth":290,"text":3427},"Trap 2. forEach returns nothing",{"id":3090,"depth":290,"text":3429},"Trap 3. sort mutates the original",{"id":3263,"depth":290,"text":3431},"Trap 4. Side effects inside map",{"id":3288,"depth":260,"text":3289},"Functions that take functions or return functions. How to use map, filter, and reduce well, how to build practical higher-order functions like once, memoize, pipe, and curried helpers yourself, and traps like ['1','2','3'].map(parseInt).","md",{"date":3436,"field":3437,"tags":3438},"2026.10.08","frontend",[3439],"javascript","\u002Fen\u002Fjavascript-higher-order-functions",{"title":5,"description":3433},{"loc":3440},"en\u002Fjavascript-higher-order-functions","imouuzQsH4nUYgwXRNYdOxYA7HvSJSSAk5cgGI20R7Q",1791476826281]