[{"data":1,"prerenderedAt":3710},["ShallowReactive",2],{"page-\u002Fjs\u002F08-arrays-and-array-methods":3},{"id":4,"title":5,"body":6,"description":30,"extension":3704,"meta":3705,"navigation":96,"path":3706,"seo":3707,"stem":3708,"__hash__":3709},"content\u002Fjs\u002F08-arrays-and-array-methods.md","08 — Arrays & Array Methods",{"type":7,"value":8,"toc":3681},"minimark",[9,13,262,402,542,718,899,1085,1234,1463,1603,1744,1996,2188,2339,2498,2636,2789,2975,3181,3457,3677],[10,11,5],"h1",{"id":12},"_08-arrays-array-methods",[14,15,17,22,170,203],"question-wrapper",{"language":16},"javascript",[18,19,21],"h3",{"id":20},"q1-what-does-the-following-log","Q1. What does the following log?",[23,24,25],"code-wrapper",{"language":16},[26,27,31],"pre",{"className":28,"code":29,"language":16,"meta":30,"style":30},"language-javascript shiki shiki-themes github-light github-dark","function addItem(cart, item) {\n  cart.push(item);\n  return cart;\n}\n\nconst original = ['apple'];\nconst updated = addItem(original, 'banana');\n\nconsole.log(original === updated, original.length);\n","",[32,33,34,64,76,85,91,98,121,142,147],"code",{"__ignoreMap":30},[35,36,39,43,47,51,55,58,61],"span",{"class":37,"line":38},"line",1,[35,40,42],{"class":41},"svdQ7","function",[35,44,46],{"class":45},"sIsaT"," addItem",[35,48,50],{"class":49},"ssxIu","(",[35,52,54],{"class":53},"sCrzJ","cart",[35,56,57],{"class":49},", ",[35,59,60],{"class":53},"item",[35,62,63],{"class":49},") {\n",[35,65,67,70,73],{"class":37,"line":66},2,[35,68,69],{"class":49},"  cart.",[35,71,72],{"class":45},"push",[35,74,75],{"class":49},"(item);\n",[35,77,79,82],{"class":37,"line":78},3,[35,80,81],{"class":41},"  return",[35,83,84],{"class":49}," cart;\n",[35,86,88],{"class":37,"line":87},4,[35,89,90],{"class":49},"}\n",[35,92,94],{"class":37,"line":93},5,[35,95,97],{"emptyLinePlaceholder":96},true,"\n",[35,99,101,104,108,111,114,118],{"class":37,"line":100},6,[35,102,103],{"class":41},"const",[35,105,107],{"class":106},"snvgF"," original",[35,109,110],{"class":41}," =",[35,112,113],{"class":49}," [",[35,115,117],{"class":116},"sJ6F3","'apple'",[35,119,120],{"class":49},"];\n",[35,122,124,126,129,131,133,136,139],{"class":37,"line":123},7,[35,125,103],{"class":41},[35,127,128],{"class":106}," updated",[35,130,110],{"class":41},[35,132,46],{"class":45},[35,134,135],{"class":49},"(original, ",[35,137,138],{"class":116},"'banana'",[35,140,141],{"class":49},");\n",[35,143,145],{"class":37,"line":144},8,[35,146,97],{"emptyLinePlaceholder":96},[35,148,150,153,156,159,162,165,168],{"class":37,"line":149},9,[35,151,152],{"class":49},"console.",[35,154,155],{"class":45},"log",[35,157,158],{"class":49},"(original ",[35,160,161],{"class":41},"===",[35,163,164],{"class":49}," updated, original.",[35,166,167],{"class":106},"length",[35,169,141],{"class":49},[171,172,175,185,191,197],"ul",{"className":173},[174],"contains-task-list",[176,177,180,184],"li",{"className":178},[179],"task-list-item",[181,182],"input",{"disabled":96,"type":183},"checkbox"," true, 2",[176,186,188,190],{"className":187},[179],[181,189],{"disabled":96,"type":183}," false, 1",[176,192,194,196],{"className":193},[179],[181,195],{"disabled":96,"type":183}," true, 1",[176,198,200,202],{"className":199},[179],[181,201],{"disabled":96,"type":183}," false, 2",[204,205,206,210,218],"details",{},[207,208,209],"summary",{},"Show Answer",[211,212,213,217],"p",{},[214,215,216],"strong",{},"Answer:"," A — true, 2",[211,219,220,223,224,226,227,230,231,234,235,237,238,240,241,244,245,247,248,250,251,254,255,258,259,261],{},[214,221,222],{},"Explanation:"," Arrays are passed by reference, so ",[32,225,54],{}," inside ",[32,228,229],{},"addItem"," refers to the very same array as ",[32,232,233],{},"original",". ",[32,236,72],{}," mutates that array in place and the function returns ",[32,239,54],{},", meaning ",[32,242,243],{},"updated"," and ",[32,246,233],{}," point to the identical object — hence ",[32,249,161],{}," is ",[32,252,253],{},"true"," — and the length is now ",[32,256,257],{},"2",". The distractors assume ",[32,260,72],{}," either returns a fresh array or silently fails to mutate the shared reference, which is the opposite of how mutating array methods work.",[14,263,264,268,329,356],{"language":16},[18,265,267],{"id":266},"q2-what-does-this-log","Q2. What does this log?",[23,269,270],{"language":16},[26,271,273],{"className":28,"code":272,"language":16,"meta":30,"style":30},"const arr = [1, 2, 3];\nconsole.log(typeof arr);\nconsole.log(Array.isArray(arr));\n",[32,274,275,300,314],{"__ignoreMap":30},[35,276,277,279,282,284,286,289,291,293,295,298],{"class":37,"line":38},[35,278,103],{"class":41},[35,280,281],{"class":106}," arr",[35,283,110],{"class":41},[35,285,113],{"class":49},[35,287,288],{"class":106},"1",[35,290,57],{"class":49},[35,292,257],{"class":106},[35,294,57],{"class":49},[35,296,297],{"class":106},"3",[35,299,120],{"class":49},[35,301,302,304,306,308,311],{"class":37,"line":66},[35,303,152],{"class":49},[35,305,155],{"class":45},[35,307,50],{"class":49},[35,309,310],{"class":41},"typeof",[35,312,313],{"class":49}," arr);\n",[35,315,316,318,320,323,326],{"class":37,"line":78},[35,317,152],{"class":49},[35,319,155],{"class":45},[35,321,322],{"class":49},"(Array.",[35,324,325],{"class":45},"isArray",[35,327,328],{"class":49},"(arr));\n",[171,330,332,338,344,350],{"className":331},[174],[176,333,335,337],{"className":334},[179],[181,336],{"disabled":96,"type":183}," \"array\", true",[176,339,341,343],{"className":340},[179],[181,342],{"disabled":96,"type":183}," \"object\", true",[176,345,347,349],{"className":346},[179],[181,348],{"disabled":96,"type":183}," \"object\", false",[176,351,353,355],{"className":352},[179],[181,354],{"disabled":96,"type":183}," \"array\", false",[204,357,358,360,365],{},[207,359,209],{},[211,361,362,364],{},[214,363,216],{}," B — \"object\", true",[211,366,367,369,370,372,373,376,377,234,380,383,384,386,387,390,391,394,395,397,398,401],{},[214,368,222],{}," JavaScript has no distinct ",[32,371,310],{}," tag for arrays — they are a specialized kind of object, so ",[32,374,375],{},"typeof arr"," always returns ",[32,378,379],{},"\"object\"",[32,381,382],{},"Array.isArray()"," is the correct and reliable way to detect an array because it inspects the actual internal class of the value rather than the loose ",[32,385,310],{}," result (it even works correctly across iframes\u002Frealms, where ",[32,388,389],{},"instanceof Array"," can fail). ",[214,392,393],{},"Idiom:"," always reach for ",[32,396,382],{},", never ",[32,399,400],{},"typeof x === 'object'",", when you need to confirm a value is an array.",[14,403,404,412,468,504],{"language":16},[18,405,407,408,411],{"id":406},"q3-what-does-sort-produce-here","Q3. What does ",[32,409,410],{},".sort()"," produce here?",[23,413,414],{"language":16},[26,415,417],{"className":28,"code":416,"language":16,"meta":30,"style":30},"const scores = [10, 2, 1, 20];\nscores.sort();\nconsole.log(scores);\n",[32,418,419,448,459],{"__ignoreMap":30},[35,420,421,423,426,428,430,433,435,437,439,441,443,446],{"class":37,"line":38},[35,422,103],{"class":41},[35,424,425],{"class":106}," scores",[35,427,110],{"class":41},[35,429,113],{"class":49},[35,431,432],{"class":106},"10",[35,434,57],{"class":49},[35,436,257],{"class":106},[35,438,57],{"class":49},[35,440,288],{"class":106},[35,442,57],{"class":49},[35,444,445],{"class":106},"20",[35,447,120],{"class":49},[35,449,450,453,456],{"class":37,"line":66},[35,451,452],{"class":49},"scores.",[35,454,455],{"class":45},"sort",[35,457,458],{"class":49},"();\n",[35,460,461,463,465],{"class":37,"line":78},[35,462,152],{"class":49},[35,464,155],{"class":45},[35,466,467],{"class":49},"(scores);\n",[171,469,471,480,488,496],{"className":470},[174],[176,472,474,476,477],{"className":473},[179],[181,475],{"disabled":96,"type":183}," ",[35,478,479],{},"1, 2, 10, 20",[176,481,483,476,485],{"className":482},[179],[181,484],{"disabled":96,"type":183},[35,486,487],{},"10, 2, 1, 20",[176,489,491,476,493],{"className":490},[179],[181,492],{"disabled":96,"type":183},[35,494,495],{},"1, 10, 2, 20",[176,497,499,476,501],{"className":498},[179],[181,500],{"disabled":96,"type":183},[35,502,503],{},"20, 10, 2, 1",[204,505,506,508,515],{},[207,507,209],{},[211,509,510,512,513],{},[214,511,216],{}," C — ",[35,514,495],{},[211,516,517,519,520,522,523,526,527,530,531,533,534,537,538,541],{},[214,518,222],{}," With no comparator, ",[32,521,410],{}," converts every element to a string and compares them by UTF-16 code unit, not numeric value: ",[32,524,525],{},"\"1\" \u003C \"10\" \u003C \"2\" \u003C \"20\""," lexicographically. ",[214,528,529],{},"Debug:"," this is the single most common ",[32,532,410],{}," bug — to get real numeric order you must pass a comparator, e.g. ",[32,535,536],{},"scores.sort((a, b) => a - b)",". The tempting ",[32,539,540],{},"[1, 2, 10, 20]"," is what a numeric sort would give, not the default string sort.",[14,543,544,548,632,667],{"language":16},[18,545,547],{"id":546},"q4-what-does-this-log","Q4. What does this log?",[23,549,550],{"language":16},[26,551,553],{"className":28,"code":552,"language":16,"meta":30,"style":30},"const nums = [3, 1, 2];\nconst result = nums.sort((a, b) => a - b);\nconsole.log(result === nums, nums);\n",[32,554,555,578,618],{"__ignoreMap":30},[35,556,557,559,562,564,566,568,570,572,574,576],{"class":37,"line":38},[35,558,103],{"class":41},[35,560,561],{"class":106}," nums",[35,563,110],{"class":41},[35,565,113],{"class":49},[35,567,297],{"class":106},[35,569,57],{"class":49},[35,571,288],{"class":106},[35,573,57],{"class":49},[35,575,257],{"class":106},[35,577,120],{"class":49},[35,579,580,582,585,587,590,592,595,598,600,603,606,609,612,615],{"class":37,"line":66},[35,581,103],{"class":41},[35,583,584],{"class":106}," result",[35,586,110],{"class":41},[35,588,589],{"class":49}," nums.",[35,591,455],{"class":45},[35,593,594],{"class":49},"((",[35,596,597],{"class":53},"a",[35,599,57],{"class":49},[35,601,602],{"class":53},"b",[35,604,605],{"class":49},") ",[35,607,608],{"class":41},"=>",[35,610,611],{"class":49}," a ",[35,613,614],{"class":41},"-",[35,616,617],{"class":49}," b);\n",[35,619,620,622,624,627,629],{"class":37,"line":78},[35,621,152],{"class":49},[35,623,155],{"class":45},[35,625,626],{"class":49},"(result ",[35,628,161],{"class":41},[35,630,631],{"class":49}," nums, nums);\n",[171,633,635,644,653,660],{"className":634},[174],[176,636,638,640,641],{"className":637},[179],[181,639],{"disabled":96,"type":183}," false, ",[35,642,643],{},"1, 2, 3",[176,645,647,649,650],{"className":646},[179],[181,648],{"disabled":96,"type":183}," true, ",[35,651,652],{},"3, 1, 2",[176,654,656,640,658],{"className":655},[179],[181,657],{"disabled":96,"type":183},[35,659,652],{},[176,661,663,649,665],{"className":662},[179],[181,664],{"disabled":96,"type":183},[35,666,643],{},[204,668,669,671,678],{},[207,670,209],{},[211,672,673,675,676],{},[214,674,216],{}," D — true, ",[35,677,643],{},[211,679,680,476,682,684,685,250,688,690,691,694,695,698,699,702,703,705,706,709,710,713,714,717],{},[214,681,222],{},[32,683,410],{}," reorders the array in place and returns a reference to that same array — it does not build a new one. So ",[32,686,687],{},"result === nums",[32,689,253],{},", and ",[32,692,693],{},"nums"," itself has been reordered to ",[32,696,697],{},"[1, 2, 3]",". The ",[32,700,701],{},"false"," distractors wrongly assume ",[32,704,455],{}," behaves like ",[32,707,708],{},"map","\u002F",[32,711,712],{},"filter"," and returns a new array; the ",[32,715,716],{},"[3, 1, 2]"," distractors wrongly assume the original stays untouched.",[14,719,720,724,821,848],{"language":16},[18,721,723],{"id":722},"q5-what-does-this-log","Q5. What does this log?",[23,725,726],{"language":16},[26,727,729],{"className":28,"code":728,"language":16,"meta":30,"style":30},"const a = [1, 2, 3];\nconst b = [1, 2, 3];\nconsole.log(a === b, a == b, JSON.stringify(a) === JSON.stringify(b));\n",[32,730,731,754,777],{"__ignoreMap":30},[35,732,733,735,738,740,742,744,746,748,750,752],{"class":37,"line":38},[35,734,103],{"class":41},[35,736,737],{"class":106}," a",[35,739,110],{"class":41},[35,741,113],{"class":49},[35,743,288],{"class":106},[35,745,57],{"class":49},[35,747,257],{"class":106},[35,749,57],{"class":49},[35,751,297],{"class":106},[35,753,120],{"class":49},[35,755,756,758,761,763,765,767,769,771,773,775],{"class":37,"line":66},[35,757,103],{"class":41},[35,759,760],{"class":106}," b",[35,762,110],{"class":41},[35,764,113],{"class":49},[35,766,288],{"class":106},[35,768,57],{"class":49},[35,770,257],{"class":106},[35,772,57],{"class":49},[35,774,297],{"class":106},[35,776,120],{"class":49},[35,778,779,781,783,786,788,791,794,797,800,803,806,809,811,814,816,818],{"class":37,"line":78},[35,780,152],{"class":49},[35,782,155],{"class":45},[35,784,785],{"class":49},"(a ",[35,787,161],{"class":41},[35,789,790],{"class":49}," b, a ",[35,792,793],{"class":41},"==",[35,795,796],{"class":49}," b, ",[35,798,799],{"class":106},"JSON",[35,801,802],{"class":49},".",[35,804,805],{"class":45},"stringify",[35,807,808],{"class":49},"(a) ",[35,810,161],{"class":41},[35,812,813],{"class":106}," JSON",[35,815,802],{"class":49},[35,817,805],{"class":45},[35,819,820],{"class":49},"(b));\n",[171,822,824,830,836,842],{"className":823},[174],[176,825,827,829],{"className":826},[179],[181,828],{"disabled":96,"type":183}," false, false, true",[176,831,833,835],{"className":832},[179],[181,834],{"disabled":96,"type":183}," true, true, true",[176,837,839,841],{"className":838},[179],[181,840],{"disabled":96,"type":183}," false, false, false",[176,843,845,847],{"className":844},[179],[181,846],{"disabled":96,"type":183}," true, false, true",[204,849,850,852,857],{},[207,851,209],{},[211,853,854,856],{},[214,855,216],{}," A — false, false, true",[211,858,859,861,862,244,864,866,867,869,870,244,872,874,875,877,878,881,882,885,886,234,888,890,891,709,893,895,896,898],{},[214,860,222],{}," Both ",[32,863,161],{},[32,865,793],{}," compare arrays (and objects in general) by reference, not by contents — since neither operand is a primitive, ",[32,868,793],{}," doesn't attempt any coercion and falls straight to a reference check. ",[32,871,597],{},[32,873,602],{}," are two distinct array instances, so both comparisons are ",[32,876,701],{}," even though the elements match. ",[32,879,880],{},"JSON.stringify"," turns each into the identical string ",[32,883,884],{},"\"[1,2,3]\"",", so that comparison is ",[32,887,253],{},[214,889,529],{}," this is why you never compare arrays with ",[32,892,161],{},[32,894,793],{}," for value equality — use a deep-equality check, or ",[32,897,880],{}," for simple cases.",[14,900,901,905,1007,1034],{"language":16},[18,902,904],{"id":903},"q6-what-happens-when-this-runs","Q6. What happens when this runs?",[23,906,907],{"language":16},[26,908,910],{"className":28,"code":909,"language":16,"meta":30,"style":30},"function sumAll(nums) {\n  return nums.reduce((acc, n) => acc + n);\n}\n\nconsole.log(sumAll([5, 10, 15]));\nconsole.log(sumAll([]));\n",[32,911,912,925,957,961,965,994],{"__ignoreMap":30},[35,913,914,916,919,921,923],{"class":37,"line":38},[35,915,42],{"class":41},[35,917,918],{"class":45}," sumAll",[35,920,50],{"class":49},[35,922,693],{"class":53},[35,924,63],{"class":49},[35,926,927,929,931,934,936,939,941,944,946,948,951,954],{"class":37,"line":66},[35,928,81],{"class":41},[35,930,589],{"class":49},[35,932,933],{"class":45},"reduce",[35,935,594],{"class":49},[35,937,938],{"class":53},"acc",[35,940,57],{"class":49},[35,942,943],{"class":53},"n",[35,945,605],{"class":49},[35,947,608],{"class":41},[35,949,950],{"class":49}," acc ",[35,952,953],{"class":41},"+",[35,955,956],{"class":49}," n);\n",[35,958,959],{"class":37,"line":78},[35,960,90],{"class":49},[35,962,963],{"class":37,"line":87},[35,964,97],{"emptyLinePlaceholder":96},[35,966,967,969,971,973,976,979,982,984,986,988,991],{"class":37,"line":93},[35,968,152],{"class":49},[35,970,155],{"class":45},[35,972,50],{"class":49},[35,974,975],{"class":45},"sumAll",[35,977,978],{"class":49},"([",[35,980,981],{"class":106},"5",[35,983,57],{"class":49},[35,985,432],{"class":106},[35,987,57],{"class":49},[35,989,990],{"class":106},"15",[35,992,993],{"class":49},"]));\n",[35,995,996,998,1000,1002,1004],{"class":37,"line":100},[35,997,152],{"class":49},[35,999,155],{"class":45},[35,1001,50],{"class":49},[35,1003,975],{"class":45},[35,1005,1006],{"class":49},"([]));\n",[171,1008,1010,1016,1022,1028],{"className":1009},[174],[176,1011,1013,1015],{"className":1012},[179],[181,1014],{"disabled":96,"type":183}," 30 then 0",[176,1017,1019,1021],{"className":1018},[179],[181,1020],{"disabled":96,"type":183}," 30 then a TypeError is thrown",[176,1023,1025,1027],{"className":1024},[179],[181,1026],{"disabled":96,"type":183}," 30 then undefined",[176,1029,1031,1033],{"className":1030},[179],[181,1032],{"disabled":96,"type":183}," NaN then a TypeError is thrown",[204,1035,1036,1038,1043],{},[207,1037,209],{},[211,1039,1040,1042],{},[214,1041,216],{}," B — 30 then a TypeError is thrown",[211,1044,1045,1047,1048,1051,1052,1055,1056,1059,1060,1062,1063,1066,1067,1070,1071,234,1074,1077,1078,1081,1082,1084],{},[214,1046,222],{}," Without an initial value, ",[32,1049,1050],{},".reduce()"," uses the array's first element as the starting accumulator and begins iterating from index 1, so ",[32,1053,1054],{},"sumAll([5, 10, 15])"," correctly computes ",[32,1057,1058],{},"30",". But an empty array has no first element to seed the accumulator and nothing to iterate, so ",[32,1061,1050],{}," throws ",[32,1064,1065],{},"TypeError: Reduce of empty array with no initial value"," instead of silently returning ",[32,1068,1069],{},"0"," or ",[32,1072,1073],{},"undefined",[214,1075,1076],{},"Safety:"," always pass an explicit initial value — ",[32,1079,1080],{},"nums.reduce((acc, n) => acc + n, 0)"," — to make ",[32,1083,933],{}," safe on empty arrays.",[14,1086,1087,1091,1151,1178],{"language":16},[18,1088,1090],{"id":1089},"q7-what-does-this-log","Q7. What does this log?",[23,1092,1093],{"language":16},[26,1094,1096],{"className":28,"code":1095,"language":16,"meta":30,"style":30},"const values = [1, NaN, 3];\nconsole.log(values.indexOf(NaN), values.includes(NaN));\n",[32,1097,1098,1122],{"__ignoreMap":30},[35,1099,1100,1102,1105,1107,1109,1111,1113,1116,1118,1120],{"class":37,"line":38},[35,1101,103],{"class":41},[35,1103,1104],{"class":106}," values",[35,1106,110],{"class":41},[35,1108,113],{"class":49},[35,1110,288],{"class":106},[35,1112,57],{"class":49},[35,1114,1115],{"class":106},"NaN",[35,1117,57],{"class":49},[35,1119,297],{"class":106},[35,1121,120],{"class":49},[35,1123,1124,1126,1128,1131,1134,1136,1138,1141,1144,1146,1148],{"class":37,"line":66},[35,1125,152],{"class":49},[35,1127,155],{"class":45},[35,1129,1130],{"class":49},"(values.",[35,1132,1133],{"class":45},"indexOf",[35,1135,50],{"class":49},[35,1137,1115],{"class":106},[35,1139,1140],{"class":49},"), values.",[35,1142,1143],{"class":45},"includes",[35,1145,50],{"class":49},[35,1147,1115],{"class":106},[35,1149,1150],{"class":49},"));\n",[171,1152,1154,1160,1166,1172],{"className":1153},[174],[176,1155,1157,1159],{"className":1156},[179],[181,1158],{"disabled":96,"type":183}," 1, true",[176,1161,1163,1165],{"className":1162},[179],[181,1164],{"disabled":96,"type":183}," -1, false",[176,1167,1169,1171],{"className":1168},[179],[181,1170],{"disabled":96,"type":183}," -1, true",[176,1173,1175,1177],{"className":1174},[179],[181,1176],{"disabled":96,"type":183}," 1, false",[204,1179,1180,1182,1187],{},[207,1181,209],{},[211,1183,1184,1186],{},[214,1185,216],{}," C — -1, true",[211,1188,1189,476,1191,1194,1195,1197,1198,1201,1202,1204,1205,1207,1208,1210,1211,234,1214,1217,1218,1220,1221,234,1223,1225,1226,1228,1229,1231,1232,802],{},[214,1190,222],{},[32,1192,1193],{},".indexOf()"," compares elements using strict equality (",[32,1196,161],{},"), and ",[32,1199,1200],{},"NaN === NaN"," is always ",[32,1203,701],{}," by IEEE-754 rules, so ",[32,1206,1193],{}," can never locate ",[32,1209,1115],{}," and returns ",[32,1212,1213],{},"-1",[32,1215,1216],{},".includes()"," uses the SameValueZero algorithm instead, which specifically treats ",[32,1219,1115],{}," as equal to itself, so it correctly returns ",[32,1222,253],{},[214,1224,529],{}," if you need to check for ",[32,1227,1115],{}," membership, use ",[32,1230,1216],{},", not ",[32,1233,1193],{},[14,1235,1236,1240,1385,1412],{"language":16},[18,1237,1239],{"id":1238},"q8-what-does-this-log","Q8. What does this log?",[23,1241,1242],{"language":16},[26,1243,1245],{"className":28,"code":1244,"language":16,"meta":30,"style":30},"const sparse = new Array(3);\nlet count = 0;\nsparse.forEach(() => count++);\n\nlet loopCount = 0;\nfor (let i = 0; i \u003C sparse.length; i++) {\n  loopCount++;\n}\n\nconsole.log(count, loopCount);\n",[32,1246,1247,1268,1285,1306,1310,1323,1358,1367,1371,1375],{"__ignoreMap":30},[35,1248,1249,1251,1254,1256,1259,1262,1264,1266],{"class":37,"line":38},[35,1250,103],{"class":41},[35,1252,1253],{"class":106}," sparse",[35,1255,110],{"class":41},[35,1257,1258],{"class":41}," new",[35,1260,1261],{"class":45}," Array",[35,1263,50],{"class":49},[35,1265,297],{"class":106},[35,1267,141],{"class":49},[35,1269,1270,1273,1276,1279,1282],{"class":37,"line":66},[35,1271,1272],{"class":41},"let",[35,1274,1275],{"class":49}," count ",[35,1277,1278],{"class":41},"=",[35,1280,1281],{"class":106}," 0",[35,1283,1284],{"class":49},";\n",[35,1286,1287,1290,1293,1296,1298,1301,1304],{"class":37,"line":78},[35,1288,1289],{"class":49},"sparse.",[35,1291,1292],{"class":45},"forEach",[35,1294,1295],{"class":49},"(() ",[35,1297,608],{"class":41},[35,1299,1300],{"class":49}," count",[35,1302,1303],{"class":41},"++",[35,1305,141],{"class":49},[35,1307,1308],{"class":37,"line":87},[35,1309,97],{"emptyLinePlaceholder":96},[35,1311,1312,1314,1317,1319,1321],{"class":37,"line":93},[35,1313,1272],{"class":41},[35,1315,1316],{"class":49}," loopCount ",[35,1318,1278],{"class":41},[35,1320,1281],{"class":106},[35,1322,1284],{"class":49},[35,1324,1325,1328,1331,1333,1336,1338,1340,1343,1346,1349,1351,1354,1356],{"class":37,"line":100},[35,1326,1327],{"class":41},"for",[35,1329,1330],{"class":49}," (",[35,1332,1272],{"class":41},[35,1334,1335],{"class":49}," i ",[35,1337,1278],{"class":41},[35,1339,1281],{"class":106},[35,1341,1342],{"class":49},"; i ",[35,1344,1345],{"class":41},"\u003C",[35,1347,1348],{"class":49}," sparse.",[35,1350,167],{"class":106},[35,1352,1353],{"class":49},"; i",[35,1355,1303],{"class":41},[35,1357,63],{"class":49},[35,1359,1360,1363,1365],{"class":37,"line":123},[35,1361,1362],{"class":49},"  loopCount",[35,1364,1303],{"class":41},[35,1366,1284],{"class":49},[35,1368,1369],{"class":37,"line":144},[35,1370,90],{"class":49},[35,1372,1373],{"class":37,"line":149},[35,1374,97],{"emptyLinePlaceholder":96},[35,1376,1378,1380,1382],{"class":37,"line":1377},10,[35,1379,152],{"class":49},[35,1381,155],{"class":45},[35,1383,1384],{"class":49},"(count, loopCount);\n",[171,1386,1388,1394,1400,1406],{"className":1387},[174],[176,1389,1391,1393],{"className":1390},[179],[181,1392],{"disabled":96,"type":183}," 3, 3",[176,1395,1397,1399],{"className":1396},[179],[181,1398],{"disabled":96,"type":183}," 0, 0",[176,1401,1403,1405],{"className":1402},[179],[181,1404],{"disabled":96,"type":183}," 3, 0",[176,1407,1409,1411],{"className":1408},[179],[181,1410],{"disabled":96,"type":183}," 0, 3",[204,1413,1414,1416,1421],{},[207,1415,209],{},[211,1417,1418,1420],{},[214,1419,216],{}," D — 0, 3",[211,1422,1423,476,1425,1428,1429,1431,1432,1435,1436,244,1439,1442,1443,1446,1447,1449,1450,1452,1453,1456,1457,1459,1460,1462],{},[214,1424,222],{},[32,1426,1427],{},"new Array(3)"," creates an array with ",[32,1430,167],{}," 3 but no actual elements — just empty \"holes\" with no own property at any index. ",[32,1433,1434],{},".forEach()"," (like ",[32,1437,1438],{},".map()",[32,1440,1441],{},".filter()",") only invokes its callback for indices that actually exist, so it skips every hole entirely, leaving ",[32,1444,1445],{},"count"," at ",[32,1448,1069],{},". A classic index-based ",[32,1451,1327],{}," loop only checks ",[32,1454,1455],{},"i \u003C length",", with no awareness of holes, so it runs the full 3 iterations regardless. ",[214,1458,529],{}," iteration methods and manual index loops disagree on sparse arrays — this is a frequent source of \"why didn't my ",[32,1461,1434],{}," run\" bugs.",[14,1464,1465,1469,1537,1564],{"language":16},[18,1466,1468],{"id":1467},"q9-what-does-this-log","Q9. What does this log?",[23,1470,1471],{"language":16},[26,1472,1474],{"className":28,"code":1473,"language":16,"meta":30,"style":30},"const arr = [1, 2, 3];\narr.length = 5;\nconsole.log(arr.length, arr[3], arr[4]);\n",[32,1475,1476,1498,1512],{"__ignoreMap":30},[35,1477,1478,1480,1482,1484,1486,1488,1490,1492,1494,1496],{"class":37,"line":38},[35,1479,103],{"class":41},[35,1481,281],{"class":106},[35,1483,110],{"class":41},[35,1485,113],{"class":49},[35,1487,288],{"class":106},[35,1489,57],{"class":49},[35,1491,257],{"class":106},[35,1493,57],{"class":49},[35,1495,297],{"class":106},[35,1497,120],{"class":49},[35,1499,1500,1503,1505,1507,1510],{"class":37,"line":66},[35,1501,1502],{"class":49},"arr.",[35,1504,167],{"class":106},[35,1506,110],{"class":41},[35,1508,1509],{"class":106}," 5",[35,1511,1284],{"class":49},[35,1513,1514,1516,1518,1521,1523,1526,1528,1531,1534],{"class":37,"line":78},[35,1515,152],{"class":49},[35,1517,155],{"class":45},[35,1519,1520],{"class":49},"(arr.",[35,1522,167],{"class":106},[35,1524,1525],{"class":49},", arr[",[35,1527,297],{"class":106},[35,1529,1530],{"class":49},"], arr[",[35,1532,1533],{"class":106},"4",[35,1535,1536],{"class":49},"]);\n",[171,1538,1540,1546,1552,1558],{"className":1539},[174],[176,1541,1543,1545],{"className":1542},[179],[181,1544],{"disabled":96,"type":183}," 5, undefined, undefined",[176,1547,1549,1551],{"className":1548},[179],[181,1550],{"disabled":96,"type":183}," 3, undefined, undefined",[176,1553,1555,1557],{"className":1554},[179],[181,1556],{"disabled":96,"type":183}," 5, 0, 0",[176,1559,1561,1563],{"className":1560},[179],[181,1562],{"disabled":96,"type":183}," 5, null, null",[204,1565,1566,1568,1573],{},[207,1567,209],{},[211,1569,1570,1572],{},[214,1571,216],{}," A — 5, undefined, undefined",[211,1574,1575,476,1577,1580,1581,1583,1584,1586,1587,1589,1590,1592,1593,1596,1597,1599,1600,1602],{},[214,1576,222],{},[32,1578,1579],{},".length"," is a writable property; setting it larger than the current size extends the array with trailing empty slots (holes), and ",[32,1582,1579],{}," itself updates to reflect the new size (",[32,1585,981],{},"). Reading a hole returns ",[32,1588,1073],{},", the same value you'd get from reading any nonexistent property — not ",[32,1591,1069],{}," and not ",[32,1594,1595],{},"null",", which are actual stored values, not \"nothing is there\" markers. ",[214,1598,529],{}," growing ",[32,1601,1579],{}," manually is a common way to accidentally introduce holes into what looked like a dense array.",[14,1604,1605,1609,1668,1702],{"language":16},[18,1606,1608],{"id":1607},"q10-what-does-this-log","Q10. What does this log?",[23,1610,1611],{"language":16},[26,1612,1614],{"className":28,"code":1613,"language":16,"meta":30,"style":30},"const arr = [1, 2, 3, 4, 5];\narr.length = 2;\nconsole.log(arr);\n",[32,1615,1616,1646,1659],{"__ignoreMap":30},[35,1617,1618,1620,1622,1624,1626,1628,1630,1632,1634,1636,1638,1640,1642,1644],{"class":37,"line":38},[35,1619,103],{"class":41},[35,1621,281],{"class":106},[35,1623,110],{"class":41},[35,1625,113],{"class":49},[35,1627,288],{"class":106},[35,1629,57],{"class":49},[35,1631,257],{"class":106},[35,1633,57],{"class":49},[35,1635,297],{"class":106},[35,1637,57],{"class":49},[35,1639,1533],{"class":106},[35,1641,57],{"class":49},[35,1643,981],{"class":106},[35,1645,120],{"class":49},[35,1647,1648,1650,1652,1654,1657],{"class":37,"line":66},[35,1649,1502],{"class":49},[35,1651,167],{"class":106},[35,1653,110],{"class":41},[35,1655,1656],{"class":106}," 2",[35,1658,1284],{"class":49},[35,1660,1661,1663,1665],{"class":37,"line":78},[35,1662,152],{"class":49},[35,1664,155],{"class":45},[35,1666,1667],{"class":49},"(arr);\n",[171,1669,1671,1679,1687,1695],{"className":1670},[174],[176,1672,1674,476,1676],{"className":1673},[179],[181,1675],{"disabled":96,"type":183},[35,1677,1678],{},"1, 2, 3, 4, 5",[176,1680,1682,476,1684],{"className":1681},[179],[181,1683],{"disabled":96,"type":183},[35,1685,1686],{},"1, 2",[176,1688,1690,476,1692],{"className":1689},[179],[181,1691],{"disabled":96,"type":183},[35,1693,1694],{},"4, 5",[176,1696,1698,476,1700],{"className":1697},[179],[181,1699],{"disabled":96,"type":183},[35,1701],{},[204,1703,1704,1706,1713],{},[207,1705,209],{},[211,1707,1708,1710,1711],{},[214,1709,216],{}," B — ",[35,1712,1686],{},[211,1714,1715,1717,1718,1720,1721,1724,1725,1728,1729,1732,1733,1736,1737,1739,1740,1743],{},[214,1716,222],{}," Setting ",[32,1719,1579],{}," to a value smaller than the current length truncates the array in place: every element at an index ",[32,1722,1723],{},">="," the new length is permanently deleted, keeping only the elements from the front. So ",[32,1726,1727],{},"[1, 2, 3, 4, 5]"," becomes ",[32,1730,1731],{},"[1, 2]",", not the tail ",[32,1734,1735],{},"[4, 5]"," and not fully emptied. ",[214,1738,393],{}," this truncation behavior is exactly what powers the ",[32,1741,1742],{},"arr.length = 0"," clear-in-place pattern covered next.",[14,1745,1746,1750,1879,1936],{"language":16},[18,1747,1749],{"id":1748},"q11-what-does-this-log","Q11. What does this log?",[23,1751,1752],{"language":16},[26,1753,1755],{"className":28,"code":1754,"language":16,"meta":30,"style":30},"let list = [1, 2, 3];\nconst ref = list;\n\nfunction clearWithReassign(a) { a = []; }\nfunction clearWithLength(a) { a.length = 0; }\n\nclearWithReassign(list);\nconsole.log(list, ref);\n\nclearWithLength(list);\nconsole.log(list, ref);\n",[32,1756,1757,1780,1792,1796,1815,1838,1842,1850,1859,1863,1870],{"__ignoreMap":30},[35,1758,1759,1761,1764,1766,1768,1770,1772,1774,1776,1778],{"class":37,"line":38},[35,1760,1272],{"class":41},[35,1762,1763],{"class":49}," list ",[35,1765,1278],{"class":41},[35,1767,113],{"class":49},[35,1769,288],{"class":106},[35,1771,57],{"class":49},[35,1773,257],{"class":106},[35,1775,57],{"class":49},[35,1777,297],{"class":106},[35,1779,120],{"class":49},[35,1781,1782,1784,1787,1789],{"class":37,"line":66},[35,1783,103],{"class":41},[35,1785,1786],{"class":106}," ref",[35,1788,110],{"class":41},[35,1790,1791],{"class":49}," list;\n",[35,1793,1794],{"class":37,"line":78},[35,1795,97],{"emptyLinePlaceholder":96},[35,1797,1798,1800,1803,1805,1807,1810,1812],{"class":37,"line":87},[35,1799,42],{"class":41},[35,1801,1802],{"class":45}," clearWithReassign",[35,1804,50],{"class":49},[35,1806,597],{"class":53},[35,1808,1809],{"class":49},") { a ",[35,1811,1278],{"class":41},[35,1813,1814],{"class":49}," []; }\n",[35,1816,1817,1819,1822,1824,1826,1829,1831,1833,1835],{"class":37,"line":93},[35,1818,42],{"class":41},[35,1820,1821],{"class":45}," clearWithLength",[35,1823,50],{"class":49},[35,1825,597],{"class":53},[35,1827,1828],{"class":49},") { a.",[35,1830,167],{"class":106},[35,1832,110],{"class":41},[35,1834,1281],{"class":106},[35,1836,1837],{"class":49},"; }\n",[35,1839,1840],{"class":37,"line":100},[35,1841,97],{"emptyLinePlaceholder":96},[35,1843,1844,1847],{"class":37,"line":123},[35,1845,1846],{"class":45},"clearWithReassign",[35,1848,1849],{"class":49},"(list);\n",[35,1851,1852,1854,1856],{"class":37,"line":144},[35,1853,152],{"class":49},[35,1855,155],{"class":45},[35,1857,1858],{"class":49},"(list, ref);\n",[35,1860,1861],{"class":37,"line":149},[35,1862,97],{"emptyLinePlaceholder":96},[35,1864,1865,1868],{"class":37,"line":1377},[35,1866,1867],{"class":45},"clearWithLength",[35,1869,1849],{"class":49},[35,1871,1873,1875,1877],{"class":37,"line":1872},11,[35,1874,152],{"class":49},[35,1876,155],{"class":45},[35,1878,1858],{"class":49},[171,1880,1882,1896,1910,1923],{"className":1881},[174],[176,1883,1885,476,1887,476,1889,1891,1892,476,1894],{"className":1884},[179],[181,1886],{"disabled":96,"type":183},[35,1888],{},[35,1890],{}," then ",[35,1893],{},[35,1895],{},[176,1897,1899,476,1901,476,1903,1891,1906,476,1908],{"className":1898},[179],[181,1900],{"disabled":96,"type":183},[35,1902],{},[35,1904,1905],{},"1,2,3",[35,1907],{},[35,1909],{},[176,1911,1913,476,1915,476,1917,1891,1919,476,1921],{"className":1912},[179],[181,1914],{"disabled":96,"type":183},[35,1916,1905],{},[35,1918,1905],{},[35,1920],{},[35,1922],{},[176,1924,1926,476,1928,476,1930,1891,1932,476,1934],{"className":1925},[179],[181,1927],{"disabled":96,"type":183},[35,1929,1905],{},[35,1931,1905],{},[35,1933,1905],{},[35,1935,1905],{},[204,1937,1938,1940,1952],{},[207,1939,209],{},[211,1941,1942,512,1944,476,1946,1891,1948,476,1950],{},[214,1943,216],{},[35,1945,1905],{},[35,1947,1905],{},[35,1949],{},[35,1951],{},[211,1953,1954,476,1956,1958,1959,1961,1962,244,1965,1968,1969,234,1971,1973,1974,1977,1978,244,1980,1982,1983,1986,1987,476,1989,1992,1993,1995],{},[214,1955,222],{},[32,1957,1846],{}," only rebinds its local parameter ",[32,1960,597],{}," to a brand-new empty array; the object that ",[32,1963,1964],{},"list",[32,1966,1967],{},"ref"," point to is never touched, so both still log ",[32,1970,697],{},[32,1972,1867],{}," instead mutates the shared array object via ",[32,1975,1976],{},"a.length = 0",", so both ",[32,1979,1964],{},[32,1981,1967],{}," — which reference that same object — become ",[32,1984,1985],{},"[]"," together. ",[214,1988,393],{},[32,1990,1991],{},"array.length = 0"," is the standard way to clear an array in place precisely because other variables or closures holding the same reference need to observe the change; reassigning a local variable to ",[32,1994,1985],{}," never does.",[14,1997,1998,2002,2079,2132],{"language":16},[18,1999,2001],{"id":2000},"q12-what-do-these-two-calls-log","Q12. What do these two calls log?",[23,2003,2004],{"language":16},[26,2005,2007],{"className":28,"code":2006,"language":16,"meta":30,"style":30},"const nested = [1, [2, 3], [4, [5, 6]]];\nconsole.log(nested.flat());\nconsole.log(nested.flat(2));\n",[32,2008,2009,2048,2063],{"__ignoreMap":30},[35,2010,2011,2013,2016,2018,2020,2022,2025,2027,2029,2031,2034,2036,2038,2040,2042,2045],{"class":37,"line":38},[35,2012,103],{"class":41},[35,2014,2015],{"class":106}," nested",[35,2017,110],{"class":41},[35,2019,113],{"class":49},[35,2021,288],{"class":106},[35,2023,2024],{"class":49},", [",[35,2026,257],{"class":106},[35,2028,57],{"class":49},[35,2030,297],{"class":106},[35,2032,2033],{"class":49},"], [",[35,2035,1533],{"class":106},[35,2037,2024],{"class":49},[35,2039,981],{"class":106},[35,2041,57],{"class":49},[35,2043,2044],{"class":106},"6",[35,2046,2047],{"class":49},"]]];\n",[35,2049,2050,2052,2054,2057,2060],{"class":37,"line":66},[35,2051,152],{"class":49},[35,2053,155],{"class":45},[35,2055,2056],{"class":49},"(nested.",[35,2058,2059],{"class":45},"flat",[35,2061,2062],{"class":49},"());\n",[35,2064,2065,2067,2069,2071,2073,2075,2077],{"class":37,"line":78},[35,2066,152],{"class":49},[35,2068,155],{"class":45},[35,2070,2056],{"class":49},[35,2072,2059],{"class":45},[35,2074,50],{"class":49},[35,2076,257],{"class":106},[35,2078,1150],{"class":49},[171,2080,2082,2092,2105,2121],{"className":2081},[174],[176,2083,2085,476,2087,1891,2090],{"className":2084},[179],[181,2086],{"disabled":96,"type":183},[35,2088,2089],{},"1,2,3,4,5,6",[35,2091,2089],{},[176,2093,2095,476,2097,1891,2099],{"className":2094},[179],[181,2096],{"disabled":96,"type":183},[35,2098,2089],{},[35,2100,2101,2102],{},"1,2,3,4,",[35,2103,2104],{},"5,6",[176,2106,2108,476,2110,1891,2119],{"className":2107},[179],[181,2109],{"disabled":96,"type":183},[35,2111,2112,2113,2116,2117],{},"1,",[35,2114,2115],{},"2,3",",4,",[35,2118,2104],{},[35,2120,2089],{},[176,2122,2124,476,2126,1891,2130],{"className":2123},[179],[181,2125],{"disabled":96,"type":183},[35,2127,2101,2128],{},[35,2129,2104],{},[35,2131,2089],{},[204,2133,2134,2136,2147],{},[207,2135,209],{},[211,2137,2138,2140,2141,1891,2145],{},[214,2139,216],{}," D — ",[35,2142,2101,2143],{},[35,2144,2104],{},[35,2146,2089],{},[211,2148,2149,476,2151,2154,2155,2157,2158,244,2161,2164,2165,2168,2169,2171,2172,2174,2175,2177,2178,2180,2181,2183,2184,2187],{},[214,2150,222],{},[32,2152,2153],{},".flat()"," called with no argument defaults to a depth of ",[32,2156,288],{},", so it only unwraps one level: the top-level ",[32,2159,2160],{},"[2, 3]",[32,2162,2163],{},"[4, [5, 6]]"," each get flattened once, but the inner ",[32,2166,2167],{},"[5, 6]"," — nested two levels deep — stays wrapped. Passing an explicit depth of ",[32,2170,257],{}," flattens two levels, fully unwrapping ",[32,2173,2167],{}," too. ",[214,2176,529],{}," forgetting that ",[32,2179,2153],{},"'s default depth is only ",[32,2182,288],{},", not \"flatten completely,\" is a common surprise — use ",[32,2185,2186],{},"Infinity"," as the depth if you want to fully flatten an arbitrarily nested array.",[14,2189,2190,2194,2267,2304],{"language":16},[18,2191,2193],{"id":2192},"q13-what-does-this-log","Q13. What does this log?",[23,2195,2196],{"language":16},[26,2197,2199],{"className":28,"code":2198,"language":16,"meta":30,"style":30},"const sentences = ['hello world', 'foo bar baz'];\nconst words = sentences.flatMap(s => s.split(' '));\nconsole.log(words);\n",[32,2200,2201,2222,2258],{"__ignoreMap":30},[35,2202,2203,2205,2208,2210,2212,2215,2217,2220],{"class":37,"line":38},[35,2204,103],{"class":41},[35,2206,2207],{"class":106}," sentences",[35,2209,110],{"class":41},[35,2211,113],{"class":49},[35,2213,2214],{"class":116},"'hello world'",[35,2216,57],{"class":49},[35,2218,2219],{"class":116},"'foo bar baz'",[35,2221,120],{"class":49},[35,2223,2224,2226,2229,2231,2234,2237,2239,2242,2245,2248,2251,2253,2256],{"class":37,"line":66},[35,2225,103],{"class":41},[35,2227,2228],{"class":106}," words",[35,2230,110],{"class":41},[35,2232,2233],{"class":49}," sentences.",[35,2235,2236],{"class":45},"flatMap",[35,2238,50],{"class":49},[35,2240,2241],{"class":53},"s",[35,2243,2244],{"class":41}," =>",[35,2246,2247],{"class":49}," s.",[35,2249,2250],{"class":45},"split",[35,2252,50],{"class":49},[35,2254,2255],{"class":116},"' '",[35,2257,1150],{"class":49},[35,2259,2260,2262,2264],{"class":37,"line":78},[35,2261,152],{"class":49},[35,2263,155],{"class":45},[35,2265,2266],{"class":49},"(words);\n",[171,2268,2270,2278,2288,2296],{"className":2269},[174],[176,2271,2273,476,2275],{"className":2272},[179],[181,2274],{"disabled":96,"type":183},[35,2276,2277],{},"'hello', 'world', 'foo', 'bar', 'baz'",[176,2279,2281,2283,2284,2287],{"className":2280},[179],[181,2282],{"disabled":96,"type":183}," [['hello','world'], ",[35,2285,2286],{},"'foo','bar','baz'","]",[176,2289,2291,476,2293],{"className":2290},[179],[181,2292],{"disabled":96,"type":183},[35,2294,2295],{},"'hello world', 'foo bar baz'",[176,2297,2299,476,2301],{"className":2298},[179],[181,2300],{"disabled":96,"type":183},[35,2302,2303],{},"5, 5, 3, 3, 3",[204,2305,2306,2308,2315],{},[207,2307,209],{},[211,2309,2310,2312,2313],{},[214,2311,216],{}," A — ",[35,2314,2277],{},[211,2316,2317,476,2319,2322,2323,2326,2327,2329,2330,476,2332,2334,2335,2338],{},[214,2318,222],{},[32,2320,2321],{},".flatMap()"," first maps each element with the callback — here producing an array of words per sentence via ",[32,2324,2325],{},".split(' ')"," — then flattens the result by exactly one level, merging those per-sentence word arrays into a single flat array. Plain ",[32,2328,1438],{}," without the flattening step is what would give the nested array-of-arrays distractor. ",[214,2331,393],{},[32,2333,2321],{}," is more efficient than chaining ",[32,2336,2337],{},".map().flat()"," because it avoids building the intermediate nested array.",[14,2340,2341,2345,2423,2450],{"language":16},[18,2342,2344],{"id":2343},"q14-what-happens-when-this-runs","Q14. What happens when this runs?",[23,2346,2347],{"language":16},[26,2348,2350],{"className":28,"code":2349,"language":16,"meta":30,"style":30},"function sumPositive() {\n  return arguments.filter(n => n > 0).length;\n}\n\nsumPositive(1, -2, 3);\n",[32,2351,2352,2362,2394,2398,2402],{"__ignoreMap":30},[35,2353,2354,2356,2359],{"class":37,"line":38},[35,2355,42],{"class":41},[35,2357,2358],{"class":45}," sumPositive",[35,2360,2361],{"class":49},"() {\n",[35,2363,2364,2366,2369,2371,2373,2375,2377,2379,2382,2385,2387,2390,2392],{"class":37,"line":66},[35,2365,81],{"class":41},[35,2367,2368],{"class":106}," arguments",[35,2370,802],{"class":49},[35,2372,712],{"class":45},[35,2374,50],{"class":49},[35,2376,943],{"class":53},[35,2378,2244],{"class":41},[35,2380,2381],{"class":49}," n ",[35,2383,2384],{"class":41},">",[35,2386,1281],{"class":106},[35,2388,2389],{"class":49},").",[35,2391,167],{"class":106},[35,2393,1284],{"class":49},[35,2395,2396],{"class":37,"line":78},[35,2397,90],{"class":49},[35,2399,2400],{"class":37,"line":87},[35,2401,97],{"emptyLinePlaceholder":96},[35,2403,2404,2407,2409,2411,2413,2415,2417,2419,2421],{"class":37,"line":93},[35,2405,2406],{"class":45},"sumPositive",[35,2408,50],{"class":49},[35,2410,288],{"class":106},[35,2412,57],{"class":49},[35,2414,614],{"class":41},[35,2416,257],{"class":106},[35,2418,57],{"class":49},[35,2420,297],{"class":106},[35,2422,141],{"class":49},[171,2424,2426,2432,2438,2444],{"className":2425},[174],[176,2427,2429,2431],{"className":2428},[179],[181,2430],{"disabled":96,"type":183}," Returns 2",[176,2433,2435,2437],{"className":2434},[179],[181,2436],{"disabled":96,"type":183}," Throws a TypeError because arguments has no filter method",[176,2439,2441,2443],{"className":2440},[179],[181,2442],{"disabled":96,"type":183}," Returns 3",[176,2445,2447,2449],{"className":2446},[179],[181,2448],{"disabled":96,"type":183}," Returns undefined silently",[204,2451,2452,2454,2459],{},[207,2453,209],{},[211,2455,2456,2458],{},[214,2457,216],{}," B — Throws a TypeError because arguments has no filter method",[211,2460,2461,476,2463,2466,2467,2469,2470,2473,2474,57,2476,690,2478,2480,2481,234,2484,2486,2487,1070,2490,2493,2494,2497],{},[214,2462,222],{},[32,2464,2465],{},"arguments"," is array-like — it has indexed properties and a ",[32,2468,167],{}," — but it does not inherit from ",[32,2471,2472],{},"Array.prototype",", so array methods like ",[32,2475,1441],{},[32,2477,1438],{},[32,2479,1050],{}," simply don't exist on it, and calling one throws ",[32,2482,2483],{},"TypeError: arguments.filter is not a function",[214,2485,1076],{}," convert it to a real array first with ",[32,2488,2489],{},"Array.from(arguments)",[32,2491,2492],{},"[...arguments]"," (or just use a rest parameter ",[32,2495,2496],{},"...args",", which is already a real array) before using array methods on it.",[14,2499,2500,2504,2557,2584],{"language":16},[18,2501,2503],{"id":2502},"q15-what-happens-when-this-runs-in-a-browser","Q15. What happens when this runs in a browser?",[23,2505,2506],{"language":16},[26,2507,2509],{"className":28,"code":2508,"language":16,"meta":30,"style":30},"const items = document.querySelectorAll('li');\nconst texts = items.map(el => el.textContent);\n",[32,2510,2511,2533],{"__ignoreMap":30},[35,2512,2513,2515,2518,2520,2523,2526,2528,2531],{"class":37,"line":38},[35,2514,103],{"class":41},[35,2516,2517],{"class":106}," items",[35,2519,110],{"class":41},[35,2521,2522],{"class":49}," document.",[35,2524,2525],{"class":45},"querySelectorAll",[35,2527,50],{"class":49},[35,2529,2530],{"class":116},"'li'",[35,2532,141],{"class":49},[35,2534,2535,2537,2540,2542,2545,2547,2549,2552,2554],{"class":37,"line":66},[35,2536,103],{"class":41},[35,2538,2539],{"class":106}," texts",[35,2541,110],{"class":41},[35,2543,2544],{"class":49}," items.",[35,2546,708],{"class":45},[35,2548,50],{"class":49},[35,2550,2551],{"class":53},"el",[35,2553,2244],{"class":41},[35,2555,2556],{"class":49}," el.textContent);\n",[171,2558,2560,2566,2572,2578],{"className":2559},[174],[176,2561,2563,2565],{"className":2562},[179],[181,2564],{"disabled":96,"type":183}," Works fine, texts is an array of strings",[176,2567,2569,2571],{"className":2568},[179],[181,2570],{"disabled":96,"type":183}," items is automatically a real Array so this always works",[176,2573,2575,2577],{"className":2574},[179],[181,2576],{"disabled":96,"type":183}," Throws a TypeError because NodeList has no map method",[176,2579,2581,2583],{"className":2580},[179],[181,2582],{"disabled":96,"type":183}," Returns a new NodeList instead of an array",[204,2585,2586,2588,2593],{},[207,2587,209],{},[211,2589,2590,2592],{},[214,2591,216],{}," C — Throws a TypeError because NodeList has no map method",[211,2594,2595,476,2597,2599,2600,2603,2604,2606,2607,2609,2610,57,2612,690,2614,2616,2617,234,2620,250,2623,2625,2626,2628,2629,1070,2632,2635],{},[214,2596,222],{},[32,2598,2525],{}," returns a static ",[32,2601,2602],{},"NodeList"," — an array-like, iterable object that supports ",[32,2605,1434],{}," in modern browsers but does not inherit from ",[32,2608,2472],{},", so ",[32,2611,1438],{},[32,2613,1441],{},[32,2615,1050],{}," are missing and calling them throws a ",[32,2618,2619],{},"TypeError",[32,2621,2622],{},"Array.isArray(items)",[32,2624,701],{},", confirming it isn't a real array. ",[214,2627,529],{}," convert with ",[32,2630,2631],{},"Array.from(items)",[32,2633,2634],{},"[...items]"," first to unlock the full array method set.",[14,2637,2638,2642,2706,2746],{"language":16},[18,2639,2641],{"id":2640},"q16-what-does-this-log","Q16. What does this log?",[23,2643,2644],{"language":16},[26,2645,2647],{"className":28,"code":2646,"language":16,"meta":30,"style":30},"const arr = [1, 2, 3, 4, 5];\nconsole.log(arr.slice(-2));\nconsole.log(arr);\n",[32,2648,2649,2679,2698],{"__ignoreMap":30},[35,2650,2651,2653,2655,2657,2659,2661,2663,2665,2667,2669,2671,2673,2675,2677],{"class":37,"line":38},[35,2652,103],{"class":41},[35,2654,281],{"class":106},[35,2656,110],{"class":41},[35,2658,113],{"class":49},[35,2660,288],{"class":106},[35,2662,57],{"class":49},[35,2664,257],{"class":106},[35,2666,57],{"class":49},[35,2668,297],{"class":106},[35,2670,57],{"class":49},[35,2672,1533],{"class":106},[35,2674,57],{"class":49},[35,2676,981],{"class":106},[35,2678,120],{"class":49},[35,2680,2681,2683,2685,2687,2690,2692,2694,2696],{"class":37,"line":66},[35,2682,152],{"class":49},[35,2684,155],{"class":45},[35,2686,1520],{"class":49},[35,2688,2689],{"class":45},"slice",[35,2691,50],{"class":49},[35,2693,614],{"class":41},[35,2695,257],{"class":106},[35,2697,1150],{"class":49},[35,2699,2700,2702,2704],{"class":37,"line":78},[35,2701,152],{"class":49},[35,2703,155],{"class":45},[35,2705,1667],{"class":49},[171,2707,2709,2718,2727,2737],{"className":2708},[174],[176,2710,2712,476,2714,1891,2716],{"className":2711},[179],[181,2713],{"disabled":96,"type":183},[35,2715,643],{},[35,2717,1678],{},[176,2719,2721,476,2723,1891,2725],{"className":2720},[179],[181,2722],{"disabled":96,"type":183},[35,2724,1694],{},[35,2726,643],{},[176,2728,2730,476,2732,1891,2735],{"className":2729},[179],[181,2731],{"disabled":96,"type":183},[35,2733,2734],{},"3, 4, 5",[35,2736,1678],{},[176,2738,2740,476,2742,1891,2744],{"className":2739},[179],[181,2741],{"disabled":96,"type":183},[35,2743,1694],{},[35,2745,1678],{},[204,2747,2748,2750,2758],{},[207,2749,209],{},[211,2751,2752,2140,2754,1891,2756],{},[214,2753,216],{},[35,2755,1694],{},[35,2757,1678],{},[211,2759,2760,2762,2763,2766,2767,2770,2771,234,2773,2775,2776,2779,2780,2782,2783,705,2785,2788],{},[214,2761,222],{}," A negative index in ",[32,2764,2765],{},".slice()"," counts back from the end, so ",[32,2768,2769],{},"slice(-2)"," extracts the last two elements, ",[32,2772,1735],{},[32,2774,2765],{}," never mutates its source — it always returns a shallow copy of the requested range — so ",[32,2777,2778],{},"arr"," is unchanged afterward. The ",[32,2781,697],{},"-then-mutated distractor wrongly assumes ",[32,2784,2765],{},[32,2786,2787],{},".splice()",", which does mutate.",[14,2790,2791,2795,2868,2910],{"language":16},[18,2792,2794],{"id":2793},"q17-what-does-this-log","Q17. What does this log?",[23,2796,2797],{"language":16},[26,2798,2800],{"className":28,"code":2799,"language":16,"meta":30,"style":30},"const arr = [1, 2, 3, 4, 5];\nconst removed = arr.splice(-2, 1);\nconsole.log(removed, arr);\n",[32,2801,2802,2832,2859],{"__ignoreMap":30},[35,2803,2804,2806,2808,2810,2812,2814,2816,2818,2820,2822,2824,2826,2828,2830],{"class":37,"line":38},[35,2805,103],{"class":41},[35,2807,281],{"class":106},[35,2809,110],{"class":41},[35,2811,113],{"class":49},[35,2813,288],{"class":106},[35,2815,57],{"class":49},[35,2817,257],{"class":106},[35,2819,57],{"class":49},[35,2821,297],{"class":106},[35,2823,57],{"class":49},[35,2825,1533],{"class":106},[35,2827,57],{"class":49},[35,2829,981],{"class":106},[35,2831,120],{"class":49},[35,2833,2834,2836,2839,2841,2844,2847,2849,2851,2853,2855,2857],{"class":37,"line":66},[35,2835,103],{"class":41},[35,2837,2838],{"class":106}," removed",[35,2840,110],{"class":41},[35,2842,2843],{"class":49}," arr.",[35,2845,2846],{"class":45},"splice",[35,2848,50],{"class":49},[35,2850,614],{"class":41},[35,2852,257],{"class":106},[35,2854,57],{"class":49},[35,2856,288],{"class":106},[35,2858,141],{"class":49},[35,2860,2861,2863,2865],{"class":37,"line":78},[35,2862,152],{"class":49},[35,2864,155],{"class":45},[35,2866,2867],{"class":49},"(removed, arr);\n",[171,2869,2871,2881,2890,2900],{"className":2870},[174],[176,2872,2874,476,2876,57,2878],{"className":2873},[179],[181,2875],{"disabled":96,"type":183},[35,2877,1533],{},[35,2879,2880],{},"1, 2, 3, 5",[176,2882,2884,476,2886,57,2888],{"className":2883},[179],[181,2885],{"disabled":96,"type":183},[35,2887,1694],{},[35,2889,643],{},[176,2891,2893,476,2895,57,2897],{"className":2892},[179],[181,2894],{"disabled":96,"type":183},[35,2896,981],{},[35,2898,2899],{},"1, 2, 3, 4",[176,2901,2903,476,2905,57,2908],{"className":2902},[179],[181,2904],{"disabled":96,"type":183},[35,2906,2907],{},"-2",[35,2909,1678],{},[204,2911,2912,2914,2922],{},[207,2913,209],{},[211,2915,2916,2312,2918,57,2920],{},[214,2917,216],{},[35,2919,1533],{},[35,2921,2880],{},[211,2923,2924,2926,2927,2929,2930,2766,2932,2934,2935,2937,2938,2940,2941,2944,2945,2947,2948,2951,2952,57,2954,2956,2957,2959,2960,234,2963,2965,2966,2968,2969,2971,2972,2974],{},[214,2925,222],{}," Like ",[32,2928,2765],{},", a negative start in ",[32,2931,2787],{},[32,2933,2907],{}," points at index ",[32,2936,297],{}," (the value ",[32,2939,1533],{},"). ",[32,2942,2943],{},".splice(-2, 1)"," deletes just ",[32,2946,288],{}," element starting there and returns it as ",[32,2949,2950],{},"[4]"," — unlike ",[32,2953,2765],{},[32,2955,2787],{}," mutates the original array in place, leaving ",[32,2958,2778],{}," as ",[32,2961,2962],{},"[1, 2, 3, 5]",[214,2964,529],{}," the ",[32,2967,1735],{},"-removed distractor applies ",[32,2970,2765],{},"'s \"grab to the end\" instinct to ",[32,2973,2787],{},", forgetting that the second argument caps how many elements get deleted.",[14,2976,2977,2981,3098,3132],{"language":16},[18,2978,2980],{"id":2979},"q18-what-does-this-log","Q18. What does this log?",[23,2982,2983],{"language":16},[26,2984,2986],{"className":28,"code":2985,"language":16,"meta":30,"style":30},"const nums = [1, 2, 4, 3, 5];\nfor (let i = 0; i \u003C nums.length; i++) {\n  if (nums[i] % 2 === 0) {\n    nums.splice(i, 1);\n  }\n}\nconsole.log(nums);\n",[32,2987,2988,3018,3046,3066,3080,3085,3089],{"__ignoreMap":30},[35,2989,2990,2992,2994,2996,2998,3000,3002,3004,3006,3008,3010,3012,3014,3016],{"class":37,"line":38},[35,2991,103],{"class":41},[35,2993,561],{"class":106},[35,2995,110],{"class":41},[35,2997,113],{"class":49},[35,2999,288],{"class":106},[35,3001,57],{"class":49},[35,3003,257],{"class":106},[35,3005,57],{"class":49},[35,3007,1533],{"class":106},[35,3009,57],{"class":49},[35,3011,297],{"class":106},[35,3013,57],{"class":49},[35,3015,981],{"class":106},[35,3017,120],{"class":49},[35,3019,3020,3022,3024,3026,3028,3030,3032,3034,3036,3038,3040,3042,3044],{"class":37,"line":66},[35,3021,1327],{"class":41},[35,3023,1330],{"class":49},[35,3025,1272],{"class":41},[35,3027,1335],{"class":49},[35,3029,1278],{"class":41},[35,3031,1281],{"class":106},[35,3033,1342],{"class":49},[35,3035,1345],{"class":41},[35,3037,589],{"class":49},[35,3039,167],{"class":106},[35,3041,1353],{"class":49},[35,3043,1303],{"class":41},[35,3045,63],{"class":49},[35,3047,3048,3051,3054,3057,3059,3062,3064],{"class":37,"line":78},[35,3049,3050],{"class":41},"  if",[35,3052,3053],{"class":49}," (nums[i] ",[35,3055,3056],{"class":41},"%",[35,3058,1656],{"class":106},[35,3060,3061],{"class":41}," ===",[35,3063,1281],{"class":106},[35,3065,63],{"class":49},[35,3067,3068,3071,3073,3076,3078],{"class":37,"line":87},[35,3069,3070],{"class":49},"    nums.",[35,3072,2846],{"class":45},[35,3074,3075],{"class":49},"(i, ",[35,3077,288],{"class":106},[35,3079,141],{"class":49},[35,3081,3082],{"class":37,"line":93},[35,3083,3084],{"class":49},"  }\n",[35,3086,3087],{"class":37,"line":100},[35,3088,90],{"class":49},[35,3090,3091,3093,3095],{"class":37,"line":123},[35,3092,152],{"class":49},[35,3094,155],{"class":45},[35,3096,3097],{"class":49},"(nums);\n",[171,3099,3101,3109,3117,3125],{"className":3100},[174],[176,3102,3104,476,3106],{"className":3103},[179],[181,3105],{"disabled":96,"type":183},[35,3107,3108],{},"1, 3, 5",[176,3110,3112,476,3114],{"className":3111},[179],[181,3113],{"disabled":96,"type":183},[35,3115,3116],{},"1, 4, 3, 5",[176,3118,3120,476,3122],{"className":3119},[179],[181,3121],{"disabled":96,"type":183},[35,3123,3124],{},"1, 2, 4, 3, 5",[176,3126,3128,476,3130],{"className":3127},[179],[181,3129],{"disabled":96,"type":183},[35,3131],{},[204,3133,3134,3136,3142],{},[207,3135,209],{},[211,3137,3138,1710,3140],{},[214,3139,216],{},[35,3141,3116],{},[211,3143,3144,476,3146,3148,3149,3151,3152,3154,3155,3157,3158,3160,3161,3163,3164,3166,3167,1330,3169,3171,3172,3174,3175,3177,3178,3180],{},[214,3145,222],{},[32,3147,2787],{}," mutates the array in place, shifting every later element one index to the left. When the loop removes ",[32,3150,257],{}," at index ",[32,3153,288],{},", the next value ",[32,3156,1533],{}," slides into index ",[32,3159,288],{}," — but the ",[32,3162,1327],{}," loop's counter has no idea a shift happened and moves straight on to index ",[32,3165,257],{},", so the element now sitting at index ",[32,3168,288],{},[32,3170,1533],{},") is never re-examined and survives untouched. ",[214,3173,529],{}," mutating an array with ",[32,3176,2787],{}," while walking it forward with a plain index loop silently skips the element that shifts into the just-vacated slot. The safe patterns are to loop backwards, iterate over a copy while mutating the original, or just use a non-mutating ",[32,3179,1441],{}," instead.",[14,3182,3183,3187,3366,3392],{"language":16},[18,3184,3186],{"id":3185},"q19-what-does-this-log","Q19. What does this log?",[23,3188,3189],{"language":16},[26,3190,3192],{"className":28,"code":3191,"language":16,"meta":30,"style":30},"const nums = [1, 2, 3, 4, 5];\nlet visits = 0;\nnums.forEach(n => {\n  visits++;\n  if (n === 3) return;\n});\n\nlet loopVisits = 0;\nfor (const n of nums) {\n  loopVisits++;\n  if (n === 3) break;\n}\n\nconsole.log(visits, loopVisits);\n",[32,3193,3194,3224,3237,3253,3262,3281,3286,3290,3303,3320,3329,3346,3351,3356],{"__ignoreMap":30},[35,3195,3196,3198,3200,3202,3204,3206,3208,3210,3212,3214,3216,3218,3220,3222],{"class":37,"line":38},[35,3197,103],{"class":41},[35,3199,561],{"class":106},[35,3201,110],{"class":41},[35,3203,113],{"class":49},[35,3205,288],{"class":106},[35,3207,57],{"class":49},[35,3209,257],{"class":106},[35,3211,57],{"class":49},[35,3213,297],{"class":106},[35,3215,57],{"class":49},[35,3217,1533],{"class":106},[35,3219,57],{"class":49},[35,3221,981],{"class":106},[35,3223,120],{"class":49},[35,3225,3226,3228,3231,3233,3235],{"class":37,"line":66},[35,3227,1272],{"class":41},[35,3229,3230],{"class":49}," visits ",[35,3232,1278],{"class":41},[35,3234,1281],{"class":106},[35,3236,1284],{"class":49},[35,3238,3239,3242,3244,3246,3248,3250],{"class":37,"line":78},[35,3240,3241],{"class":49},"nums.",[35,3243,1292],{"class":45},[35,3245,50],{"class":49},[35,3247,943],{"class":53},[35,3249,2244],{"class":41},[35,3251,3252],{"class":49}," {\n",[35,3254,3255,3258,3260],{"class":37,"line":87},[35,3256,3257],{"class":49},"  visits",[35,3259,1303],{"class":41},[35,3261,1284],{"class":49},[35,3263,3264,3266,3269,3271,3274,3276,3279],{"class":37,"line":93},[35,3265,3050],{"class":41},[35,3267,3268],{"class":49}," (n ",[35,3270,161],{"class":41},[35,3272,3273],{"class":106}," 3",[35,3275,605],{"class":49},[35,3277,3278],{"class":41},"return",[35,3280,1284],{"class":49},[35,3282,3283],{"class":37,"line":100},[35,3284,3285],{"class":49},"});\n",[35,3287,3288],{"class":37,"line":123},[35,3289,97],{"emptyLinePlaceholder":96},[35,3291,3292,3294,3297,3299,3301],{"class":37,"line":144},[35,3293,1272],{"class":41},[35,3295,3296],{"class":49}," loopVisits ",[35,3298,1278],{"class":41},[35,3300,1281],{"class":106},[35,3302,1284],{"class":49},[35,3304,3305,3307,3309,3311,3314,3317],{"class":37,"line":149},[35,3306,1327],{"class":41},[35,3308,1330],{"class":49},[35,3310,103],{"class":41},[35,3312,3313],{"class":106}," n",[35,3315,3316],{"class":41}," of",[35,3318,3319],{"class":49}," nums) {\n",[35,3321,3322,3325,3327],{"class":37,"line":1377},[35,3323,3324],{"class":49},"  loopVisits",[35,3326,1303],{"class":41},[35,3328,1284],{"class":49},[35,3330,3331,3333,3335,3337,3339,3341,3344],{"class":37,"line":1872},[35,3332,3050],{"class":41},[35,3334,3268],{"class":49},[35,3336,161],{"class":41},[35,3338,3273],{"class":106},[35,3340,605],{"class":49},[35,3342,3343],{"class":41},"break",[35,3345,1284],{"class":49},[35,3347,3349],{"class":37,"line":3348},12,[35,3350,90],{"class":49},[35,3352,3354],{"class":37,"line":3353},13,[35,3355,97],{"emptyLinePlaceholder":96},[35,3357,3359,3361,3363],{"class":37,"line":3358},14,[35,3360,152],{"class":49},[35,3362,155],{"class":45},[35,3364,3365],{"class":49},"(visits, loopVisits);\n",[171,3367,3369,3375,3380,3386],{"className":3368},[174],[176,3370,3372,3374],{"className":3371},[179],[181,3373],{"disabled":96,"type":183}," 5, 5",[176,3376,3378,1393],{"className":3377},[179],[181,3379],{"disabled":96,"type":183},[176,3381,3383,3385],{"className":3382},[179],[181,3384],{"disabled":96,"type":183}," 5, 3",[176,3387,3389,3391],{"className":3388},[179],[181,3390],{"disabled":96,"type":183}," 3, 5",[204,3393,3394,3396,3401],{},[207,3395,209],{},[211,3397,3398,3400],{},[214,3399,216],{}," C — 5, 3",[211,3402,3403,3405,3406,3408,3409,3411,3412,3415,3416,3418,3419,3421,3422,3425,3426,3429,3430,3432,3433,3436,3437,3440,3441,234,3444,3447,3448,3450,3451,3453,3454,3456],{},[214,3404,222],{}," Inside a ",[32,3407,1434],{}," callback, ",[32,3410,3278],{}," only exits that single invocation — it behaves like ",[32,3413,3414],{},"continue",", never like a loop-level ",[32,3417,3343],{}," — so ",[32,3420,1434],{}," always calls the callback once per element no matter what, giving ",[32,3423,3424],{},"visits = 5",". A ",[32,3427,3428],{},"for...of"," loop's ",[32,3431,3343],{}," is a genuine loop-control statement that exits the loop entirely, so ",[32,3434,3435],{},"loopVisits"," stops incrementing right after ",[32,3438,3439],{},"n === 3",", giving ",[32,3442,3443],{},"loopVisits = 3",[214,3445,3446],{},"Performance:"," there is no way to stop ",[32,3449,1434],{}," early — reaching for it when you actually need an early exit means either silently doing extra work or, worse, assuming it stopped when it didn't; use a ",[32,3452,3428],{}," or plain ",[32,3455,1327],{}," loop whenever short-circuiting matters.",[14,3458,3459,3463,3591,3618],{"language":16},[18,3460,3462],{"id":3461},"q20-what-does-this-log","Q20. What does this log?",[23,3464,3465],{"language":16},[26,3466,3468],{"className":28,"code":3467,"language":16,"meta":30,"style":30},"function renderLeaderboard(players) {\n  return players.sort((a, b) => b.score - a.score);\n}\n\nconst players = [{ name: 'A', score: 10 }, { name: 'B', score: 30 }];\nconst original = players;\n\nrenderLeaderboard(players);\nconsole.log(original[0].name);\n",[32,3469,3470,3484,3513,3517,3521,3554,3565,3569,3577],{"__ignoreMap":30},[35,3471,3472,3474,3477,3479,3482],{"class":37,"line":38},[35,3473,42],{"class":41},[35,3475,3476],{"class":45}," renderLeaderboard",[35,3478,50],{"class":49},[35,3480,3481],{"class":53},"players",[35,3483,63],{"class":49},[35,3485,3486,3488,3491,3493,3495,3497,3499,3501,3503,3505,3508,3510],{"class":37,"line":66},[35,3487,81],{"class":41},[35,3489,3490],{"class":49}," players.",[35,3492,455],{"class":45},[35,3494,594],{"class":49},[35,3496,597],{"class":53},[35,3498,57],{"class":49},[35,3500,602],{"class":53},[35,3502,605],{"class":49},[35,3504,608],{"class":41},[35,3506,3507],{"class":49}," b.score ",[35,3509,614],{"class":41},[35,3511,3512],{"class":49}," a.score);\n",[35,3514,3515],{"class":37,"line":78},[35,3516,90],{"class":49},[35,3518,3519],{"class":37,"line":87},[35,3520,97],{"emptyLinePlaceholder":96},[35,3522,3523,3525,3528,3530,3533,3536,3539,3541,3544,3547,3549,3551],{"class":37,"line":93},[35,3524,103],{"class":41},[35,3526,3527],{"class":106}," players",[35,3529,110],{"class":41},[35,3531,3532],{"class":49}," [{ name: ",[35,3534,3535],{"class":116},"'A'",[35,3537,3538],{"class":49},", score: ",[35,3540,432],{"class":106},[35,3542,3543],{"class":49}," }, { name: ",[35,3545,3546],{"class":116},"'B'",[35,3548,3538],{"class":49},[35,3550,1058],{"class":106},[35,3552,3553],{"class":49}," }];\n",[35,3555,3556,3558,3560,3562],{"class":37,"line":100},[35,3557,103],{"class":41},[35,3559,107],{"class":106},[35,3561,110],{"class":41},[35,3563,3564],{"class":49}," players;\n",[35,3566,3567],{"class":37,"line":123},[35,3568,97],{"emptyLinePlaceholder":96},[35,3570,3571,3574],{"class":37,"line":144},[35,3572,3573],{"class":45},"renderLeaderboard",[35,3575,3576],{"class":49},"(players);\n",[35,3578,3579,3581,3583,3586,3588],{"class":37,"line":149},[35,3580,152],{"class":49},[35,3582,155],{"class":45},[35,3584,3585],{"class":49},"(original[",[35,3587,1069],{"class":106},[35,3589,3590],{"class":49},"].name);\n",[171,3592,3594,3600,3606,3612],{"className":3593},[174],[176,3595,3597,3599],{"className":3596},[179],[181,3598],{"disabled":96,"type":183}," \"A\" — original stays in its initial order since sort only affects the returned copy",[176,3601,3603,3605],{"className":3602},[179],[181,3604],{"disabled":96,"type":183}," undefined — sort empties the array before reordering it",[176,3607,3609,3611],{"className":3608},[179],[181,3610],{"disabled":96,"type":183}," \"A\" — renderLeaderboard receives a separate copy of the array by value",[176,3613,3615,3617],{"className":3614},[179],[181,3616],{"disabled":96,"type":183}," \"B\" — sort mutated the shared array in place, so original reflects the new order too",[204,3619,3620,3622,3627],{},[207,3621,209],{},[211,3623,3624,3626],{},[214,3625,216],{}," D — \"B\" — sort mutated the shared array in place, so original reflects the new order too",[211,3628,3629,3631,3632,3634,3635,244,3637,3639,3640,3642,3643,3645,3646,3649,3650,3653,3654,57,3657,690,3660,3663,3664,3666,3667,3669,3670,3672,3673,3676],{},[214,3630,222],{}," Arrays are passed by reference, and ",[32,3633,410],{}," mutates in place rather than returning a new array; since ",[32,3636,3481],{},[32,3638,233],{}," are the same array object, sorting inside ",[32,3641,3573],{}," silently reorders ",[32,3644,233],{}," too, putting the higher-scoring ",[32,3647,3648],{},"\"B\""," first. This is exactly the bug that ES2023's ",[32,3651,3652],{},".toSorted()"," (along with ",[32,3655,3656],{},".toReversed()",[32,3658,3659],{},".toSpliced()",[32,3661,3662],{},".with()",") exists to prevent — these non-mutating counterparts return a new array and leave the original untouched. ",[214,3665,1076],{}," prefer ",[32,3668,3652],{}," over ",[32,3671,410],{}," (or explicitly copy first with ",[32,3674,3675],{},"[...players].sort(...)",") whenever a function receives an array reference that other code also holds onto.",[3678,3679,3680],"style",{},"html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}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 .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}",{"title":30,"searchDepth":66,"depth":66,"links":3682},[3683,3684,3685,3687,3688,3689,3690,3691,3692,3693,3694,3695,3696,3697,3698,3699,3700,3701,3702,3703],{"id":20,"depth":78,"text":21},{"id":266,"depth":78,"text":267},{"id":406,"depth":78,"text":3686},"Q3. What does .sort() produce here?",{"id":546,"depth":78,"text":547},{"id":722,"depth":78,"text":723},{"id":903,"depth":78,"text":904},{"id":1089,"depth":78,"text":1090},{"id":1238,"depth":78,"text":1239},{"id":1467,"depth":78,"text":1468},{"id":1607,"depth":78,"text":1608},{"id":1748,"depth":78,"text":1749},{"id":2000,"depth":78,"text":2001},{"id":2192,"depth":78,"text":2193},{"id":2343,"depth":78,"text":2344},{"id":2502,"depth":78,"text":2503},{"id":2640,"depth":78,"text":2641},{"id":2793,"depth":78,"text":2794},{"id":2979,"depth":78,"text":2980},{"id":3185,"depth":78,"text":3186},{"id":3461,"depth":78,"text":3462},"md",{},"\u002Fjs\u002F08-arrays-and-array-methods",{"title":5,"description":30},"js\u002F08-arrays-and-array-methods","4NA5TzpTKb2UeeZVnni4DRqjyvhkZrq3FeaTAC_Wj1U",1787335397333]