[{"data":1,"prerenderedAt":778},["ShallowReactive",2],{"article:which-is-array-reduce-method-in-javascript":3,"\u002Fblog\u002Fwhich-is-array-reduce-method-in-javascript-surround":771},{"id":4,"title":5,"author":6,"body":7,"date":760,"description":761,"extension":762,"image":763,"meta":764,"minRead":96,"navigation":92,"path":765,"published":92,"seo":766,"stem":767,"tags":768,"__hash__":770},"blog\u002Fblog\u002Fwhich-is-array-reduce-method-in-javascript.md","Which is Array Reduce method in Javascript","Baljeet Singh",{"type":8,"value":9,"toc":758},"minimark",[10,23,26,31,205,210,402,407,746,754],[11,12,13,17,18,22],"p",{},[14,15,16],"strong",{},"Reduce"," method in ",[19,20,21],"em",{},"javascript"," is used to reduce the array to a single value. It takes a callback function which takes four parameters (accumulator, currentValue, index, array), but mostly we use the first two.",[11,24,25],{},"Now let's take a look at some of the examples,",[11,27,28],{},[14,29,30],{},"Calculate sum of all the elements in an array",[32,33,38],"pre",{"className":34,"code":35,"language":36,"meta":37,"style":37},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const arr = [2, 3, 5, 4];\n\n\u002F\u002F here accumulator is names sum\n\u002F\u002F item is the current value\n\u002F\u002F 0 is the initial value\nconst arraySum = arr.reduce((sum, item) => sum + item, 0);\nconsole.log('Output is: ', arraySum);\n\u002F\u002F Output is: 14\n","js","",[39,40,41,87,94,101,107,113,170,199],"code",{"__ignoreMap":37},[42,43,46,50,54,58,61,65,68,71,73,76,78,81,84],"span",{"class":44,"line":45},"line",1,[42,47,49],{"class":48},"spNyl","const",[42,51,53],{"class":52},"sTEyZ"," arr ",[42,55,57],{"class":56},"sMK4o","=",[42,59,60],{"class":52}," [",[42,62,64],{"class":63},"sbssI","2",[42,66,67],{"class":56},",",[42,69,70],{"class":63}," 3",[42,72,67],{"class":56},[42,74,75],{"class":63}," 5",[42,77,67],{"class":56},[42,79,80],{"class":63}," 4",[42,82,83],{"class":52},"]",[42,85,86],{"class":56},";\n",[42,88,90],{"class":44,"line":89},2,[42,91,93],{"emptyLinePlaceholder":92},true,"\n",[42,95,97],{"class":44,"line":96},3,[42,98,100],{"class":99},"sHwdD","\u002F\u002F here accumulator is names sum\n",[42,102,104],{"class":44,"line":103},4,[42,105,106],{"class":99},"\u002F\u002F item is the current value\n",[42,108,110],{"class":44,"line":109},5,[42,111,112],{"class":99},"\u002F\u002F 0 is the initial value\n",[42,114,116,118,121,123,126,129,133,136,138,142,144,147,150,153,156,159,161,163,166,168],{"class":44,"line":115},6,[42,117,49],{"class":48},[42,119,120],{"class":52}," arraySum ",[42,122,57],{"class":56},[42,124,125],{"class":52}," arr",[42,127,128],{"class":56},".",[42,130,132],{"class":131},"s2Zo4","reduce",[42,134,135],{"class":52},"(",[42,137,135],{"class":56},[42,139,141],{"class":140},"sHdIc","sum",[42,143,67],{"class":56},[42,145,146],{"class":140}," item",[42,148,149],{"class":56},")",[42,151,152],{"class":48}," =>",[42,154,155],{"class":52}," sum ",[42,157,158],{"class":56},"+",[42,160,146],{"class":52},[42,162,67],{"class":56},[42,164,165],{"class":63}," 0",[42,167,149],{"class":52},[42,169,86],{"class":56},[42,171,173,176,178,181,183,186,190,192,194,197],{"class":44,"line":172},7,[42,174,175],{"class":52},"console",[42,177,128],{"class":56},[42,179,180],{"class":131},"log",[42,182,135],{"class":52},[42,184,185],{"class":56},"'",[42,187,189],{"class":188},"sfazB","Output is: ",[42,191,185],{"class":56},[42,193,67],{"class":56},[42,195,196],{"class":52}," arraySum)",[42,198,86],{"class":56},[42,200,202],{"class":44,"line":201},8,[42,203,204],{"class":99},"\u002F\u002F Output is: 14\n",[11,206,207],{},[14,208,209],{},"Calculate total number of fruits in the array",[32,211,213],{"className":34,"code":212,"language":36,"meta":37,"style":37},"const fruits = [\n  { name: 'Apple', quantity: 3 },\n  { name: 'Banana', quantity: 4 },\n  { name: 'Mango', quantity: 2 },\n];\n\nconst totalFruits = fruits.reduce((total, fruit) => total + fruit.quantity, 0);\nconsole.log('Total Fruits are:', totalFruits);\n\u002F\u002F Total Fruits are: 9\n",[39,214,215,227,259,284,310,316,320,372,396],{"__ignoreMap":37},[42,216,217,219,222,224],{"class":44,"line":45},[42,218,49],{"class":48},[42,220,221],{"class":52}," fruits ",[42,223,57],{"class":56},[42,225,226],{"class":52}," [\n",[42,228,229,232,236,239,242,245,247,249,252,254,256],{"class":44,"line":89},[42,230,231],{"class":56},"  {",[42,233,235],{"class":234},"swJcz"," name",[42,237,238],{"class":56},":",[42,240,241],{"class":56}," '",[42,243,244],{"class":188},"Apple",[42,246,185],{"class":56},[42,248,67],{"class":56},[42,250,251],{"class":234}," quantity",[42,253,238],{"class":56},[42,255,70],{"class":63},[42,257,258],{"class":56}," },\n",[42,260,261,263,265,267,269,272,274,276,278,280,282],{"class":44,"line":96},[42,262,231],{"class":56},[42,264,235],{"class":234},[42,266,238],{"class":56},[42,268,241],{"class":56},[42,270,271],{"class":188},"Banana",[42,273,185],{"class":56},[42,275,67],{"class":56},[42,277,251],{"class":234},[42,279,238],{"class":56},[42,281,80],{"class":63},[42,283,258],{"class":56},[42,285,286,288,290,292,294,297,299,301,303,305,308],{"class":44,"line":103},[42,287,231],{"class":56},[42,289,235],{"class":234},[42,291,238],{"class":56},[42,293,241],{"class":56},[42,295,296],{"class":188},"Mango",[42,298,185],{"class":56},[42,300,67],{"class":56},[42,302,251],{"class":234},[42,304,238],{"class":56},[42,306,307],{"class":63}," 2",[42,309,258],{"class":56},[42,311,312,314],{"class":44,"line":109},[42,313,83],{"class":52},[42,315,86],{"class":56},[42,317,318],{"class":44,"line":115},[42,319,93],{"emptyLinePlaceholder":92},[42,321,322,324,327,329,332,334,336,338,340,343,345,348,350,352,355,357,359,361,364,366,368,370],{"class":44,"line":172},[42,323,49],{"class":48},[42,325,326],{"class":52}," totalFruits ",[42,328,57],{"class":56},[42,330,331],{"class":52}," fruits",[42,333,128],{"class":56},[42,335,132],{"class":131},[42,337,135],{"class":52},[42,339,135],{"class":56},[42,341,342],{"class":140},"total",[42,344,67],{"class":56},[42,346,347],{"class":140}," fruit",[42,349,149],{"class":56},[42,351,152],{"class":48},[42,353,354],{"class":52}," total ",[42,356,158],{"class":56},[42,358,347],{"class":52},[42,360,128],{"class":56},[42,362,363],{"class":52},"quantity",[42,365,67],{"class":56},[42,367,165],{"class":63},[42,369,149],{"class":52},[42,371,86],{"class":56},[42,373,374,376,378,380,382,384,387,389,391,394],{"class":44,"line":201},[42,375,175],{"class":52},[42,377,128],{"class":56},[42,379,180],{"class":131},[42,381,135],{"class":52},[42,383,185],{"class":56},[42,385,386],{"class":188},"Total Fruits are:",[42,388,185],{"class":56},[42,390,67],{"class":56},[42,392,393],{"class":52}," totalFruits)",[42,395,86],{"class":56},[42,397,399],{"class":44,"line":398},9,[42,400,401],{"class":99},"\u002F\u002F Total Fruits are: 9\n",[11,403,404],{},[14,405,406],{},"Group Students by ClassName",[32,408,410],{"className":34,"code":409,"language":36,"meta":37,"style":37},"const students = [\n  { name: 'Baljeet', className: 10 },\n  { name: 'Fatehjit', className: 2 },\n  { name: 'Ekjeet', className: 10 },\n  { name: 'Manvir', className: 5 },\n];\nconst output = students.reduce((groupedStudents, student) => {\n  const className = student.className;\n  if (groupedStudents[className] == null) {\n    groupedStudents[className] = [];\n  }\n  groupedStudents[className].push(student);\n  return groupedStudents;\n}, {});\nconsole.log('Grouped Students: ', output);\n\u002F* output\n{ 2: [ { name: 'Fatehjit', className: 2 } ],\n  5: [ { name: 'Manvir', className: 5 } ],\n  10: [ { name: 'Baljeet', className: 10 },\n     { name: 'Ekjeet', className: 10 } ] } *\u002F\n",[39,411,412,423,450,475,500,525,531,566,585,616,635,641,667,678,691,716,722,728,734,740],{"__ignoreMap":37},[42,413,414,416,419,421],{"class":44,"line":45},[42,415,49],{"class":48},[42,417,418],{"class":52}," students ",[42,420,57],{"class":56},[42,422,226],{"class":52},[42,424,425,427,429,431,433,436,438,440,443,445,448],{"class":44,"line":89},[42,426,231],{"class":56},[42,428,235],{"class":234},[42,430,238],{"class":56},[42,432,241],{"class":56},[42,434,435],{"class":188},"Baljeet",[42,437,185],{"class":56},[42,439,67],{"class":56},[42,441,442],{"class":234}," className",[42,444,238],{"class":56},[42,446,447],{"class":63}," 10",[42,449,258],{"class":56},[42,451,452,454,456,458,460,463,465,467,469,471,473],{"class":44,"line":96},[42,453,231],{"class":56},[42,455,235],{"class":234},[42,457,238],{"class":56},[42,459,241],{"class":56},[42,461,462],{"class":188},"Fatehjit",[42,464,185],{"class":56},[42,466,67],{"class":56},[42,468,442],{"class":234},[42,470,238],{"class":56},[42,472,307],{"class":63},[42,474,258],{"class":56},[42,476,477,479,481,483,485,488,490,492,494,496,498],{"class":44,"line":103},[42,478,231],{"class":56},[42,480,235],{"class":234},[42,482,238],{"class":56},[42,484,241],{"class":56},[42,486,487],{"class":188},"Ekjeet",[42,489,185],{"class":56},[42,491,67],{"class":56},[42,493,442],{"class":234},[42,495,238],{"class":56},[42,497,447],{"class":63},[42,499,258],{"class":56},[42,501,502,504,506,508,510,513,515,517,519,521,523],{"class":44,"line":109},[42,503,231],{"class":56},[42,505,235],{"class":234},[42,507,238],{"class":56},[42,509,241],{"class":56},[42,511,512],{"class":188},"Manvir",[42,514,185],{"class":56},[42,516,67],{"class":56},[42,518,442],{"class":234},[42,520,238],{"class":56},[42,522,75],{"class":63},[42,524,258],{"class":56},[42,526,527,529],{"class":44,"line":115},[42,528,83],{"class":52},[42,530,86],{"class":56},[42,532,533,535,538,540,543,545,547,549,551,554,556,559,561,563],{"class":44,"line":172},[42,534,49],{"class":48},[42,536,537],{"class":52}," output ",[42,539,57],{"class":56},[42,541,542],{"class":52}," students",[42,544,128],{"class":56},[42,546,132],{"class":131},[42,548,135],{"class":52},[42,550,135],{"class":56},[42,552,553],{"class":140},"groupedStudents",[42,555,67],{"class":56},[42,557,558],{"class":140}," student",[42,560,149],{"class":56},[42,562,152],{"class":48},[42,564,565],{"class":56}," {\n",[42,567,568,571,573,576,578,580,583],{"class":44,"line":201},[42,569,570],{"class":48},"  const",[42,572,442],{"class":52},[42,574,575],{"class":56}," =",[42,577,558],{"class":52},[42,579,128],{"class":56},[42,581,582],{"class":52},"className",[42,584,86],{"class":56},[42,586,587,591,594,596,599,601,604,607,610,613],{"class":44,"line":398},[42,588,590],{"class":589},"s7zQu","  if",[42,592,593],{"class":234}," (",[42,595,553],{"class":52},[42,597,598],{"class":234},"[",[42,600,582],{"class":52},[42,602,603],{"class":234},"] ",[42,605,606],{"class":56},"==",[42,608,609],{"class":56}," null",[42,611,612],{"class":234},") ",[42,614,615],{"class":56},"{\n",[42,617,619,622,624,626,628,630,633],{"class":44,"line":618},10,[42,620,621],{"class":52},"    groupedStudents",[42,623,598],{"class":234},[42,625,582],{"class":52},[42,627,603],{"class":234},[42,629,57],{"class":56},[42,631,632],{"class":234}," []",[42,634,86],{"class":56},[42,636,638],{"class":44,"line":637},11,[42,639,640],{"class":56},"  }\n",[42,642,644,647,649,651,653,655,658,660,663,665],{"class":44,"line":643},12,[42,645,646],{"class":52},"  groupedStudents",[42,648,598],{"class":234},[42,650,582],{"class":52},[42,652,83],{"class":234},[42,654,128],{"class":56},[42,656,657],{"class":131},"push",[42,659,135],{"class":234},[42,661,662],{"class":52},"student",[42,664,149],{"class":234},[42,666,86],{"class":56},[42,668,670,673,676],{"class":44,"line":669},13,[42,671,672],{"class":589},"  return",[42,674,675],{"class":52}," groupedStudents",[42,677,86],{"class":56},[42,679,681,684,687,689],{"class":44,"line":680},14,[42,682,683],{"class":56},"},",[42,685,686],{"class":56}," {}",[42,688,149],{"class":52},[42,690,86],{"class":56},[42,692,694,696,698,700,702,704,707,709,711,714],{"class":44,"line":693},15,[42,695,175],{"class":52},[42,697,128],{"class":56},[42,699,180],{"class":131},[42,701,135],{"class":52},[42,703,185],{"class":56},[42,705,706],{"class":188},"Grouped Students: ",[42,708,185],{"class":56},[42,710,67],{"class":56},[42,712,713],{"class":52}," output)",[42,715,86],{"class":56},[42,717,719],{"class":44,"line":718},16,[42,720,721],{"class":99},"\u002F* output\n",[42,723,725],{"class":44,"line":724},17,[42,726,727],{"class":99},"{ 2: [ { name: 'Fatehjit', className: 2 } ],\n",[42,729,731],{"class":44,"line":730},18,[42,732,733],{"class":99},"  5: [ { name: 'Manvir', className: 5 } ],\n",[42,735,737],{"class":44,"line":736},19,[42,738,739],{"class":99},"  10: [ { name: 'Baljeet', className: 10 },\n",[42,741,743],{"class":44,"line":742},20,[42,744,745],{"class":99},"     { name: 'Ekjeet', className: 10 } ] } *\u002F\n",[11,747,748],{},[749,750],"a",{"href":751,"rel":752},"https:\u002F\u002Ftwitter.com\u002Fmbaljeetsingh\u002Fstatus\u002F1417477108884987919\u002Fphoto\u002F1",[753],"nofollow",[755,756,757],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":37,"searchDepth":89,"depth":89,"links":759},[],"2021-07-19","Learn how the Array reduce method works in JavaScript with practical examples for summing values, flattening arrays, and more.","md","\u002Fimg\u002FWhich_is_Array_Reduce_method_in_Javascript_qki2lo.jpg",{},"\u002Fblog\u002Fwhich-is-array-reduce-method-in-javascript",{"title":5,"description":761},"blog\u002Fwhich-is-array-reduce-method-in-javascript",[769],"Web Development","XFVcvDnvLoboM1xqoweNewkKt-OXpA4cCF4nSBWvXiY",[772,777],{"title":773,"path":774,"stem":775,"description":776,"children":-1},"What is CSR, SSR, SSG, ISR (Different Rendering Strategies) and which framework does it better (Angular, React, Vue)","\u002Fblog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue","blog\u002Fwhat-is-csr-ssr-ssg-isr-different-rendering-strategies-and-which-framework-does-it-better-angular-react-vue","A comparison of CSR, SSR, SSG, and ISR rendering strategies across Angular, React, and Vue frameworks.",null,1775568346390]