[{"data":1,"prerenderedAt":2981},["ShallowReactive",2],{"blog-\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push":3,"blog-\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push-surround":2941,"blog-related":2947},{"id":4,"title":5,"body":6,"date":2928,"description":2929,"extension":2930,"meta":2931,"minutes":872,"navigation":573,"path":2932,"seo":2933,"stem":2934,"subtitle":2935,"tags":2936,"__hash__":2940},"blog\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push.md","Demystifying the ECMAScript Spec: Array.prototype.push",{"type":7,"value":8,"toc":2911},"minimark",[9,14,23,31,34,51,54,58,64,158,160,164,181,286,293,295,303,309,429,438,453,516,587,589,593,606,652,673,679,914,916,920,941,985,1295,1297,1301,1335,1340,1361,1365,1419,1423,1442,1815,1817,1821,1844,1848,1885,1889,1898,1910,1953,1955,1959,1966,2438,2441,2443,2447,2450,2889,2891,2895,2898,2907],[10,11,13],"h2",{"id":12},"introduction","Introduction",[15,16,17,18,22],"p",{},"Throughout my career, many engineers with 20+ YoE always told me: ",[19,20,21],"em",{},"\"Read the JavaScript specification.\""," Early in my career, opening the ECMAScript spec felt like reading legal code written for compiler authors—dense, foreign, and overwhelming. But over time, learning to parse the spec became one of the most effective ways to truly understand how JavaScript executes under the hood.",[15,24,25,26,30],{},"This post is the first in a series breaking down the fundamentals of ECMAScript specifications by building our own polyfills directly from the official algorithm. We will start with a method every JavaScript developer uses daily: ",[27,28,29],"code",{},"Array.prototype.push()",".",[15,32,33],{},"By the end of this tutorial, you will know:",[35,36,37,41,44],"ol",{},[38,39,40],"li",{},"How to navigate and read your very first method from the ECMAScript spec.",[38,42,43],{},"How to map abstract operations to real JavaScript code.",[38,45,46,47,50],{},"Why ",[27,48,49],{},"push()"," is generic and works on objects that aren't arrays.",[52,53],"hr",{},[10,55,57],{"id":56},"the-spec-decoder-ring","The Spec \"Decoder Ring\"",[15,59,60,61,63],{},"Before jumping into reading the spec and building our own version of ",[27,62,29],{},", let's cover some of the syntax and terminology that TC39 uses across the specification:",[65,66,67,81],"table",{},[68,69,70],"thead",{},[71,72,73,78],"tr",{},[74,75,77],"th",{"align":76},"left","Spec Notation",[74,79,80],{"align":76},"Meaning in Plain JavaScript",[82,83,84,101,116,131],"tbody",{},[71,85,86,95],{},[87,88,89],"td",{"align":76},[90,91,92],"strong",{},[27,93,94],{},"? Operation()",[87,96,97,100],{"align":76},[90,98,99],{},"Return if abrupt:"," Run the operation. If it throws an error, immediately rethrow\u002Fpropagate that error.",[71,102,103,110],{},[87,104,105],{"align":76},[90,106,107],{},[27,108,109],{},"! Operation()",[87,111,112,115],{"align":76},[90,113,114],{},"Assert success:"," This operation is guaranteed by invariants never to fail or throw an error under these conditions.",[71,117,118,125],{},[87,119,120],{"align":76},[90,121,122],{},[27,123,124],{},"𝔽(number)",[87,126,127,130],{"align":76},[90,128,129],{},"Number conversion:"," Converts an internal mathematical real number into an ECMAScript double-precision 64-bit float.",[71,132,133,140],{},[87,134,135],{"align":76},[90,136,137],{},[27,138,139],{},"ToObject(val)",[87,141,142,143,146,147,150,151,154,155,30],{"align":76},"Wraps primitives into their object counterparts (",[27,144,145],{},"Object(val)","); throws a ",[27,148,149],{},"TypeError"," if given ",[27,152,153],{},"null"," or ",[27,156,157],{},"undefined",[52,159],{},[10,161,163],{"id":162},"the-official-specification","The Official Specification",[15,165,166,167,177,178,180],{},"According to the ",[168,169,173,174],"a",{"href":170,"rel":171},"https:\u002F\u002F262.ecma-international.org\u002F#sec-array.prototype.push",[172],"nofollow","ECMAScript Specification for ",[27,175,176],{},"Array.prototype.push",", when we use ",[27,179,29],{}," these steps occur:",[35,182,183,198,208,217,229,265,281],{},[38,184,185,186,189,190,193,194,197],{},"Let ",[19,187,188],{},"O"," be ? ",[27,191,192],{},"ToObject","(",[19,195,196],{},"this value",").",[38,199,185,200,189,203,193,206,197],{},[19,201,202],{},"len",[27,204,205],{},"LengthOfArrayLike",[19,207,188],{},[38,209,185,210,213,214,30],{},[19,211,212],{},"argCount"," be the number of elements in ",[19,215,216],{},"items",[38,218,219,220,222,223,225,226,228],{},"If ",[19,221,202],{}," + ",[19,224,212],{}," > $2^{53} - 1$, throw a ",[90,227,149],{}," exception.",[38,230,231,232,235,236,238,239,193,242,244,245,248,249,251,252,254,255,258,259,261,262,264],{},"For each element ",[19,233,234],{},"E"," of ",[19,237,216],{},", do:\na. Perform ? ",[27,240,241],{},"Set",[19,243,188],{},", ! ",[27,246,247],{},"ToString","(𝔽(",[19,250,202],{},")), ",[19,253,234],{},", ",[90,256,257],{},"true",").\nb. Set ",[19,260,202],{}," to ",[19,263,202],{}," + 1.",[38,266,267,268,193,270,254,272,275,276,278,279,197],{},"Perform ? ",[27,269,241],{},[19,271,188],{},[27,273,274],{},"\"length\"",", 𝔽(",[19,277,202],{},"), ",[90,280,257],{},[38,282,283,284,197],{},"Return 𝔽(",[19,285,202],{},[15,287,288,289,292],{},"Let's translate this specification into a custom method called ",[27,290,291],{},"austinPush"," (fancy naming, i know 😎).",[52,294],{},[10,296,298,299,302],{"id":297},"building-austinpush-step-by-step","Building ",[27,300,301],{},"austinPush()",": Step-by-Step",[15,304,305,306,308],{},"This code snippet will be our reference for understanding how ",[27,307,49],{}," works.",[310,311,316],"pre",{"className":312,"code":313,"language":314,"meta":315,"style":315},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const months = ['Jan', 'Mar', 'Apr', 'May'];\nmonths.push('Feb');\nconsole.log(months); \u002F\u002F Array ['Jan', 'Mar', 'Apr', 'May', 'Feb']\n","javascript","",[27,317,318,382,408],{"__ignoreMap":315},[319,320,323,327,331,335,338,341,345,347,350,353,356,358,360,362,365,367,369,371,374,376,379],"span",{"class":321,"line":322},"line",1,[319,324,326],{"class":325},"spNyl","const",[319,328,330],{"class":329},"sTEyZ"," months ",[319,332,334],{"class":333},"sMK4o","=",[319,336,337],{"class":329}," [",[319,339,340],{"class":333},"'",[319,342,344],{"class":343},"sfazB","Jan",[319,346,340],{"class":333},[319,348,349],{"class":333},",",[319,351,352],{"class":333}," '",[319,354,355],{"class":343},"Mar",[319,357,340],{"class":333},[319,359,349],{"class":333},[319,361,352],{"class":333},[319,363,364],{"class":343},"Apr",[319,366,340],{"class":333},[319,368,349],{"class":333},[319,370,352],{"class":333},[319,372,373],{"class":343},"May",[319,375,340],{"class":333},[319,377,378],{"class":329},"]",[319,380,381],{"class":333},";\n",[319,383,385,388,390,394,396,398,401,403,406],{"class":321,"line":384},2,[319,386,387],{"class":329},"months",[319,389,30],{"class":333},[319,391,393],{"class":392},"s2Zo4","push",[319,395,193],{"class":329},[319,397,340],{"class":333},[319,399,400],{"class":343},"Feb",[319,402,340],{"class":333},[319,404,405],{"class":329},")",[319,407,381],{"class":333},[319,409,411,414,416,419,422,425],{"class":321,"line":410},3,[319,412,413],{"class":329},"console",[319,415,30],{"class":333},[319,417,418],{"class":392},"log",[319,420,421],{"class":329},"(months)",[319,423,424],{"class":333},";",[319,426,428],{"class":427},"sHwdD"," \u002F\u002F Array ['Jan', 'Mar', 'Apr', 'May', 'Feb']\n",[430,431,433,434,437],"h3",{"id":432},"step-1-coerce-this-to-an-object","Step 1: Coerce ",[27,435,436],{},"this"," to an Object",[439,440,441],"blockquote",{},[15,442,443,446,447,189,449,193,451,197],{},[90,444,445],{},"Spec:"," 1. Let ",[19,448,188],{},[27,450,192],{},[19,452,196],{},[454,455,456,472,498],"ul",{},[38,457,458,459,461,462],{},"This is saying: \"Get the object (Array) that the ",[27,460,49],{}," method is being called on.\"\n",[454,463,464],{},[38,465,466,467,469,470],{},"Refrencing the code example above, ",[27,468,387],{}," is ",[27,471,196],{},[38,473,474,475,478,479,482,483],{},"The ",[27,476,477],{},"?"," is used for error handling. If ",[27,480,481],{},"ToObject(this value)"," throws an error, the function will throw an error.\n",[454,484,485],{},[38,486,219,487,489,490,154,492,494,495,497],{},[27,488,387],{}," was ",[27,491,153],{},[27,493,157],{},", this method, ",[27,496,49],{},", would throw an error.",[38,499,500,502,503,505,506],{},[27,501,192],{}," is an abstract operation that converts ",[27,504,196],{}," to an object. It is used to ensure that the object that the method is called on is an object.\n",[454,507,508],{},[38,509,510,513,514,30],{},[27,511,512],{},"Object(months)"," would return the object ",[27,515,387],{},[310,517,519],{"className":312,"code":518,"language":314,"meta":315,"style":315},"function austinPush(...items) {\n    \u002F\u002F 1. Let O be ? ToObject(this value).\n    let O = Object(this);\n\n    \u002F\u002F ...\n}\n\n",[27,520,521,540,545,568,575,581],{"__ignoreMap":315},[319,522,523,526,529,532,535,537],{"class":321,"line":322},[319,524,525],{"class":325},"function",[319,527,528],{"class":392}," austinPush",[319,530,531],{"class":333},"(...",[319,533,216],{"class":534},"sHdIc",[319,536,405],{"class":333},[319,538,539],{"class":333}," {\n",[319,541,542],{"class":321,"line":384},[319,543,544],{"class":427},"    \u002F\u002F 1. Let O be ? ToObject(this value).\n",[319,546,547,550,553,556,559,562,564,566],{"class":321,"line":410},[319,548,549],{"class":325},"    let",[319,551,552],{"class":329}," O",[319,554,555],{"class":333}," =",[319,557,558],{"class":392}," Object",[319,560,193],{"class":561},"swJcz",[319,563,436],{"class":333},[319,565,405],{"class":561},[319,567,381],{"class":333},[319,569,571],{"class":321,"line":570},4,[319,572,574],{"emptyLinePlaceholder":573},true,"\n",[319,576,578],{"class":321,"line":577},5,[319,579,580],{"class":427},"    \u002F\u002F ...\n",[319,582,584],{"class":321,"line":583},6,[319,585,586],{"class":333},"}\n",[52,588],{},[430,590,592],{"id":591},"step-2-determine-current-length","Step 2: Determine Current Length",[439,594,595],{},[15,596,597,599,600,189,602,193,604,197],{},[90,598,445],{}," 2. Let ",[19,601,202],{},[27,603,205],{},[19,605,188],{},[454,607,608,620,638],{},[38,609,458,610,461,612],{},[27,611,49],{},[454,613,614],{},[38,615,466,616,469,618],{},[27,617,387],{},[27,619,196],{},[38,621,474,622,478,624,482,626],{},[27,623,477],{},[27,625,481],{},[454,627,628],{},[38,629,219,630,489,632,154,634,494,636,497],{},[27,631,387],{},[27,633,153],{},[27,635,157],{},[27,637,49],{},[38,639,640,502,642,505,644],{},[27,641,192],{},[27,643,196],{},[454,645,646],{},[38,647,648,513,650,30],{},[27,649,512],{},[27,651,387],{},[15,653,654,655,658,659,661,662,665,666,669,670,672],{},"Notice that the spec does ",[90,656,657],{},"not"," check if ",[27,660,188],{}," is an array. It only checks ",[27,663,664],{},"LengthOfArrayLike(O)",". This operation reads the ",[27,667,668],{},"length"," property of ",[27,671,188],{},", coerces it into a non-negative integer, and caps it at $2^{53} - 1$.",[15,674,675,676,678],{},"Let's write a small helper that mirrors ",[27,677,664],{},":",[310,680,682],{"className":312,"code":681,"language":314,"meta":315,"style":315},"const toLength = (value) => {\n  const len = Number(value);\n  if (Number.isNaN(len) || len \u003C= 0) return 0;\n  return Math.min(Math.floor(len), Number.MAX_SAFE_INTEGER);\n};\n\nfunction austinPush(...items) {\n    \u002F\u002F 1. Let O be ? ToObject(this value).\n    let O = Object(this);\n\n    \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n    let len = toLength(O.length); \n    \n  \u002F\u002F ...\n}\n\n",[27,683,684,706,727,771,811,816,820,835,840,859,864,870,897,903,909],{"__ignoreMap":315},[319,685,686,688,691,693,696,699,701,704],{"class":321,"line":322},[319,687,326],{"class":325},[319,689,690],{"class":329}," toLength ",[319,692,334],{"class":333},[319,694,695],{"class":333}," (",[319,697,698],{"class":534},"value",[319,700,405],{"class":333},[319,702,703],{"class":325}," =>",[319,705,539],{"class":333},[319,707,708,711,714,716,719,721,723,725],{"class":321,"line":384},[319,709,710],{"class":325},"  const",[319,712,713],{"class":329}," len",[319,715,555],{"class":333},[319,717,718],{"class":392}," Number",[319,720,193],{"class":561},[319,722,698],{"class":329},[319,724,405],{"class":561},[319,726,381],{"class":333},[319,728,729,733,735,738,740,743,745,747,750,753,755,758,762,764,767,769],{"class":321,"line":410},[319,730,732],{"class":731},"s7zQu","  if",[319,734,695],{"class":561},[319,736,737],{"class":329},"Number",[319,739,30],{"class":333},[319,741,742],{"class":392},"isNaN",[319,744,193],{"class":561},[319,746,202],{"class":329},[319,748,749],{"class":561},") ",[319,751,752],{"class":333},"||",[319,754,713],{"class":329},[319,756,757],{"class":333}," \u003C=",[319,759,761],{"class":760},"sbssI"," 0",[319,763,749],{"class":561},[319,765,766],{"class":731},"return",[319,768,761],{"class":760},[319,770,381],{"class":333},[319,772,773,776,779,781,784,786,789,791,794,796,798,800,802,804,806,809],{"class":321,"line":570},[319,774,775],{"class":731},"  return",[319,777,778],{"class":329}," Math",[319,780,30],{"class":333},[319,782,783],{"class":392},"min",[319,785,193],{"class":561},[319,787,788],{"class":329},"Math",[319,790,30],{"class":333},[319,792,793],{"class":392},"floor",[319,795,193],{"class":561},[319,797,202],{"class":329},[319,799,405],{"class":561},[319,801,349],{"class":333},[319,803,718],{"class":329},[319,805,30],{"class":333},[319,807,808],{"class":561},"MAX_SAFE_INTEGER)",[319,810,381],{"class":333},[319,812,813],{"class":321,"line":577},[319,814,815],{"class":333},"};\n",[319,817,818],{"class":321,"line":583},[319,819,574],{"emptyLinePlaceholder":573},[319,821,823,825,827,829,831,833],{"class":321,"line":822},7,[319,824,525],{"class":325},[319,826,528],{"class":392},[319,828,531],{"class":333},[319,830,216],{"class":534},[319,832,405],{"class":333},[319,834,539],{"class":333},[319,836,838],{"class":321,"line":837},8,[319,839,544],{"class":427},[319,841,843,845,847,849,851,853,855,857],{"class":321,"line":842},9,[319,844,549],{"class":325},[319,846,552],{"class":329},[319,848,555],{"class":333},[319,850,558],{"class":392},[319,852,193],{"class":561},[319,854,436],{"class":333},[319,856,405],{"class":561},[319,858,381],{"class":333},[319,860,862],{"class":321,"line":861},10,[319,863,574],{"emptyLinePlaceholder":573},[319,865,867],{"class":321,"line":866},11,[319,868,869],{"class":427},"    \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n",[319,871,873,875,877,879,882,884,886,888,890,892,894],{"class":321,"line":872},12,[319,874,549],{"class":325},[319,876,713],{"class":329},[319,878,555],{"class":333},[319,880,881],{"class":392}," toLength",[319,883,193],{"class":561},[319,885,188],{"class":329},[319,887,30],{"class":333},[319,889,668],{"class":329},[319,891,405],{"class":561},[319,893,424],{"class":333},[319,895,896],{"class":561}," \n",[319,898,900],{"class":321,"line":899},13,[319,901,902],{"class":561},"    \n",[319,904,906],{"class":321,"line":905},14,[319,907,908],{"class":427},"  \u002F\u002F ...\n",[319,910,912],{"class":321,"line":911},15,[319,913,586],{"class":333},[52,915],{},[430,917,919],{"id":918},"step-3-4-count-arguments-and-check-safe-limits","Step 3 & 4: Count Arguments and Check Safe Limits",[439,921,922,931],{},[15,923,924,926,927,213,929,30],{},[90,925,445],{},"\n3. Let ",[19,928,212],{},[19,930,216],{},[35,932,933],{"start":570},[38,934,219,935,222,937,225,939,228],{},[19,936,202],{},[19,938,212],{},[90,940,149],{},[454,942,943,951,962,973],{},[38,944,945,947,948,950],{},[27,946,216],{}," is the array of arguments that are passed to the ",[27,949,49],{}," method.",[38,952,953,955,956,958,959,961],{},[27,954,212],{}," is the number of arguments that are passed to the ",[27,957,49],{}," method(",[27,960,301],{}," for us).",[38,963,964,966,967,970,971,30],{},[27,965,202],{}," is the current length of the object. It is calculated using ",[27,968,969],{},"toLength()"," which is a helper function that mirrors ",[27,972,664],{},[38,974,975,978,979,982,983,30],{},[27,976,977],{},"$2^{53} - 1$"," JavaScript represents numbers using 64-bit binary floating-point values (IEEE 754). Integers beyond $2^{53} - 1$ (",[27,980,981],{},"Number.MAX_SAFE_INTEGER",") cannot be uniquely represented. If adding your arguments would cause the array length to exceed that limit, the engine aborts immediately with a ",[27,984,149],{},[310,986,988],{"className":312,"code":987,"language":314,"meta":315,"style":315},"const toLength = (value) => {\n  const len = Number(value);\n  if (Number.isNaN(len) || len \u003C= 0) return 0;\n  return Math.min(Math.floor(len), Number.MAX_SAFE_INTEGER);\n};\n\nfunction austinPush(...items) {\n    \u002F\u002F 1. Let O be ? ToObject(this value).\n    let O = Object(this);\n\n    \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n    let len = toLength(O.length);\n\n    \u002F\u002F 3. Let argCount be the number of elements in items.\n    let argCount = items.length\n\n    \u002F\u002F 4. If len + argCount > 2****53 - 1, throw a TypeError exception.\n    if ((len + argCount) > (2 ** 53 - 1)) {\n      throw new TypeError('Operation could not be performed, exceeded max safe integer in JavaScript');\n    }\n    \n  \u002F\u002F ...\n}\n\n",[27,989,990,1008,1026,1060,1094,1098,1102,1116,1120,1138,1142,1146,1168,1172,1177,1194,1199,1205,1249,1274,1280,1285,1290],{"__ignoreMap":315},[319,991,992,994,996,998,1000,1002,1004,1006],{"class":321,"line":322},[319,993,326],{"class":325},[319,995,690],{"class":329},[319,997,334],{"class":333},[319,999,695],{"class":333},[319,1001,698],{"class":534},[319,1003,405],{"class":333},[319,1005,703],{"class":325},[319,1007,539],{"class":333},[319,1009,1010,1012,1014,1016,1018,1020,1022,1024],{"class":321,"line":384},[319,1011,710],{"class":325},[319,1013,713],{"class":329},[319,1015,555],{"class":333},[319,1017,718],{"class":392},[319,1019,193],{"class":561},[319,1021,698],{"class":329},[319,1023,405],{"class":561},[319,1025,381],{"class":333},[319,1027,1028,1030,1032,1034,1036,1038,1040,1042,1044,1046,1048,1050,1052,1054,1056,1058],{"class":321,"line":410},[319,1029,732],{"class":731},[319,1031,695],{"class":561},[319,1033,737],{"class":329},[319,1035,30],{"class":333},[319,1037,742],{"class":392},[319,1039,193],{"class":561},[319,1041,202],{"class":329},[319,1043,749],{"class":561},[319,1045,752],{"class":333},[319,1047,713],{"class":329},[319,1049,757],{"class":333},[319,1051,761],{"class":760},[319,1053,749],{"class":561},[319,1055,766],{"class":731},[319,1057,761],{"class":760},[319,1059,381],{"class":333},[319,1061,1062,1064,1066,1068,1070,1072,1074,1076,1078,1080,1082,1084,1086,1088,1090,1092],{"class":321,"line":570},[319,1063,775],{"class":731},[319,1065,778],{"class":329},[319,1067,30],{"class":333},[319,1069,783],{"class":392},[319,1071,193],{"class":561},[319,1073,788],{"class":329},[319,1075,30],{"class":333},[319,1077,793],{"class":392},[319,1079,193],{"class":561},[319,1081,202],{"class":329},[319,1083,405],{"class":561},[319,1085,349],{"class":333},[319,1087,718],{"class":329},[319,1089,30],{"class":333},[319,1091,808],{"class":561},[319,1093,381],{"class":333},[319,1095,1096],{"class":321,"line":577},[319,1097,815],{"class":333},[319,1099,1100],{"class":321,"line":583},[319,1101,574],{"emptyLinePlaceholder":573},[319,1103,1104,1106,1108,1110,1112,1114],{"class":321,"line":822},[319,1105,525],{"class":325},[319,1107,528],{"class":392},[319,1109,531],{"class":333},[319,1111,216],{"class":534},[319,1113,405],{"class":333},[319,1115,539],{"class":333},[319,1117,1118],{"class":321,"line":837},[319,1119,544],{"class":427},[319,1121,1122,1124,1126,1128,1130,1132,1134,1136],{"class":321,"line":842},[319,1123,549],{"class":325},[319,1125,552],{"class":329},[319,1127,555],{"class":333},[319,1129,558],{"class":392},[319,1131,193],{"class":561},[319,1133,436],{"class":333},[319,1135,405],{"class":561},[319,1137,381],{"class":333},[319,1139,1140],{"class":321,"line":861},[319,1141,574],{"emptyLinePlaceholder":573},[319,1143,1144],{"class":321,"line":866},[319,1145,869],{"class":427},[319,1147,1148,1150,1152,1154,1156,1158,1160,1162,1164,1166],{"class":321,"line":872},[319,1149,549],{"class":325},[319,1151,713],{"class":329},[319,1153,555],{"class":333},[319,1155,881],{"class":392},[319,1157,193],{"class":561},[319,1159,188],{"class":329},[319,1161,30],{"class":333},[319,1163,668],{"class":329},[319,1165,405],{"class":561},[319,1167,381],{"class":333},[319,1169,1170],{"class":321,"line":899},[319,1171,574],{"emptyLinePlaceholder":573},[319,1173,1174],{"class":321,"line":905},[319,1175,1176],{"class":427},"    \u002F\u002F 3. Let argCount be the number of elements in items.\n",[319,1178,1179,1181,1184,1186,1189,1191],{"class":321,"line":911},[319,1180,549],{"class":325},[319,1182,1183],{"class":329}," argCount",[319,1185,555],{"class":333},[319,1187,1188],{"class":329}," items",[319,1190,30],{"class":333},[319,1192,1193],{"class":329},"length\n",[319,1195,1197],{"class":321,"line":1196},16,[319,1198,574],{"emptyLinePlaceholder":573},[319,1200,1202],{"class":321,"line":1201},17,[319,1203,1204],{"class":427},"    \u002F\u002F 4. If len + argCount > 2****53 - 1, throw a TypeError exception.\n",[319,1206,1208,1211,1214,1216,1219,1221,1223,1226,1228,1231,1234,1237,1240,1243,1246],{"class":321,"line":1207},18,[319,1209,1210],{"class":731},"    if",[319,1212,1213],{"class":561}," ((",[319,1215,202],{"class":329},[319,1217,1218],{"class":333}," +",[319,1220,1183],{"class":329},[319,1222,749],{"class":561},[319,1224,1225],{"class":333},">",[319,1227,695],{"class":561},[319,1229,1230],{"class":760},"2",[319,1232,1233],{"class":333}," **",[319,1235,1236],{"class":760}," 53",[319,1238,1239],{"class":333}," -",[319,1241,1242],{"class":760}," 1",[319,1244,1245],{"class":561},")) ",[319,1247,1248],{"class":333},"{\n",[319,1250,1252,1255,1258,1261,1263,1265,1268,1270,1272],{"class":321,"line":1251},19,[319,1253,1254],{"class":731},"      throw",[319,1256,1257],{"class":333}," new",[319,1259,1260],{"class":392}," TypeError",[319,1262,193],{"class":561},[319,1264,340],{"class":333},[319,1266,1267],{"class":343},"Operation could not be performed, exceeded max safe integer in JavaScript",[319,1269,340],{"class":333},[319,1271,405],{"class":561},[319,1273,381],{"class":333},[319,1275,1277],{"class":321,"line":1276},20,[319,1278,1279],{"class":333},"    }\n",[319,1281,1283],{"class":321,"line":1282},21,[319,1284,902],{"class":561},[319,1286,1288],{"class":321,"line":1287},22,[319,1289,908],{"class":427},[319,1291,1293],{"class":321,"line":1292},23,[319,1294,586],{"class":333},[52,1296],{},[430,1298,1300],{"id":1299},"step-5-append-elements-to-the-object","Step 5: Append Elements to the Object",[439,1302,1303,1313,1328],{},[15,1304,1305,1307,1308,235,1310,1312],{},[90,1306,445],{},"\n5. For each element ",[19,1309,234],{},[19,1311,216],{},", do:",[15,1314,1315,1316,193,1318,244,1320,248,1322,251,1324,254,1326,197],{},"a. Perform ? ",[27,1317,241],{},[19,1319,188],{},[27,1321,247],{},[19,1323,202],{},[19,1325,234],{},[90,1327,257],{},[15,1329,1330,1331,261,1333,264],{},"b. Set ",[19,1332,202],{},[19,1334,202],{},[1336,1337,1339],"h4",{"id":1338},"step-5","Step 5:",[454,1341,1342,1345,1350,1356],{},[38,1343,1344],{},"At this point we're creating a foreach loop and running it for each element inside of items. We take the first element and add it to the end of the object.",[38,1346,1347,1349],{},[27,1348,234],{}," is an element of the array of arguments.",[38,1351,1352,947,1354,950],{},[27,1353,216],{},[27,1355,49],{},[38,1357,1358,1360],{},[27,1359,202],{}," is the current length of the object.",[1336,1362,1364],{"id":1363},"step-5a","Step 5a:",[454,1366,1367,1383,1396,1401,1406,1411],{},[38,1368,1369,1370,1372,1373,1376,1377,1379,1380,1382],{},"This the point where we append each element to the end of the array. if ",[27,1371,387],{}," is the array and we are pushing ",[27,1374,1375],{},"'Feb'"," into it, then we are adding the element ",[27,1378,1375],{}," to the end of the array ",[27,1381,387],{},". This is where that happens",[38,1384,1385,1387,1388,261,1391,1393,1394,30],{},[27,1386,241],{}," is an abstract operation that sets the value of the property ",[27,1389,1390],{},"! ToString(𝔽(len))",[27,1392,234],{}," on the object ",[27,1395,188],{},[38,1397,1398,1400],{},[27,1399,1390],{}," is the property name that is used to store the element in the array.",[38,1402,1403,1405],{},[27,1404,234],{}," is the element that is being added to the array.",[38,1407,1408,1410],{},[27,1409,257],{}," is a boolean value that indicates whether the property should be set.",[38,1412,1413,478,1415,1418],{},[27,1414,477],{},[27,1416,1417],{},"Set(O, ! ToString(𝔽(len)), E, true)"," throws an error, the function will throw an error.",[1336,1420,1422],{"id":1421},"step-5b","Step 5b:",[454,1424,1425,1428,1433,1439],{},[38,1426,1427],{},"This is incrementing the length of the array by 1, because we are adding a new element to the array.",[38,1429,1430,1432],{},[27,1431,202],{}," is the length of the array.",[38,1434,1435,1438],{},[27,1436,1437],{},"len + 1"," is the new length of the array.",[38,1440,1441],{},"This will increment the length of the array by 1.",[310,1443,1445],{"className":312,"code":1444,"language":314,"meta":315,"style":315},"const toLength = (value) => {\n  const len = Number(value);\n  if (Number.isNaN(len) || len \u003C= 0) return 0;\n  return Math.min(Math.floor(len), Number.MAX_SAFE_INTEGER);\n};\n\nfunction austinPush(...items) {\n    \u002F\u002F 1. Let O be ? ToObject(this value).\n    let O = Object(this);\n\n    \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n    let len = toLength(O.length);\n\n    \u002F\u002F 3. Let argCount be the number of elements in items.\n    let argCount = items.length\n\n    \u002F\u002F 4. If len + argCount > 2****53 - 1, throw a TypeError exception.\n    if ((len + argCount) > (2 ** 53 - 1)) {\n      throw new TypeError('Operation could not be performed, exceeded max safe integer in JavaScript');\n    }\n\n    \u002F\u002F 5. For each element E of items, do\n    items.forEach((E) => {\n      \u002F\u002F a. Perform ? Set(O, ! ToString(𝔽(len)), E, true).\n      O[len] = E;\n      \u002F\u002F b. Set len to len + 1.\n      len = len + 1;\n    })\n\n  \u002F\u002F ...\n}\n\n\n",[27,1446,1447,1465,1483,1517,1551,1555,1559,1573,1577,1595,1599,1603,1625,1629,1633,1647,1651,1655,1687,1707,1711,1715,1720,1742,1748,1769,1775,1791,1800,1805,1810],{"__ignoreMap":315},[319,1448,1449,1451,1453,1455,1457,1459,1461,1463],{"class":321,"line":322},[319,1450,326],{"class":325},[319,1452,690],{"class":329},[319,1454,334],{"class":333},[319,1456,695],{"class":333},[319,1458,698],{"class":534},[319,1460,405],{"class":333},[319,1462,703],{"class":325},[319,1464,539],{"class":333},[319,1466,1467,1469,1471,1473,1475,1477,1479,1481],{"class":321,"line":384},[319,1468,710],{"class":325},[319,1470,713],{"class":329},[319,1472,555],{"class":333},[319,1474,718],{"class":392},[319,1476,193],{"class":561},[319,1478,698],{"class":329},[319,1480,405],{"class":561},[319,1482,381],{"class":333},[319,1484,1485,1487,1489,1491,1493,1495,1497,1499,1501,1503,1505,1507,1509,1511,1513,1515],{"class":321,"line":410},[319,1486,732],{"class":731},[319,1488,695],{"class":561},[319,1490,737],{"class":329},[319,1492,30],{"class":333},[319,1494,742],{"class":392},[319,1496,193],{"class":561},[319,1498,202],{"class":329},[319,1500,749],{"class":561},[319,1502,752],{"class":333},[319,1504,713],{"class":329},[319,1506,757],{"class":333},[319,1508,761],{"class":760},[319,1510,749],{"class":561},[319,1512,766],{"class":731},[319,1514,761],{"class":760},[319,1516,381],{"class":333},[319,1518,1519,1521,1523,1525,1527,1529,1531,1533,1535,1537,1539,1541,1543,1545,1547,1549],{"class":321,"line":570},[319,1520,775],{"class":731},[319,1522,778],{"class":329},[319,1524,30],{"class":333},[319,1526,783],{"class":392},[319,1528,193],{"class":561},[319,1530,788],{"class":329},[319,1532,30],{"class":333},[319,1534,793],{"class":392},[319,1536,193],{"class":561},[319,1538,202],{"class":329},[319,1540,405],{"class":561},[319,1542,349],{"class":333},[319,1544,718],{"class":329},[319,1546,30],{"class":333},[319,1548,808],{"class":561},[319,1550,381],{"class":333},[319,1552,1553],{"class":321,"line":577},[319,1554,815],{"class":333},[319,1556,1557],{"class":321,"line":583},[319,1558,574],{"emptyLinePlaceholder":573},[319,1560,1561,1563,1565,1567,1569,1571],{"class":321,"line":822},[319,1562,525],{"class":325},[319,1564,528],{"class":392},[319,1566,531],{"class":333},[319,1568,216],{"class":534},[319,1570,405],{"class":333},[319,1572,539],{"class":333},[319,1574,1575],{"class":321,"line":837},[319,1576,544],{"class":427},[319,1578,1579,1581,1583,1585,1587,1589,1591,1593],{"class":321,"line":842},[319,1580,549],{"class":325},[319,1582,552],{"class":329},[319,1584,555],{"class":333},[319,1586,558],{"class":392},[319,1588,193],{"class":561},[319,1590,436],{"class":333},[319,1592,405],{"class":561},[319,1594,381],{"class":333},[319,1596,1597],{"class":321,"line":861},[319,1598,574],{"emptyLinePlaceholder":573},[319,1600,1601],{"class":321,"line":866},[319,1602,869],{"class":427},[319,1604,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623],{"class":321,"line":872},[319,1606,549],{"class":325},[319,1608,713],{"class":329},[319,1610,555],{"class":333},[319,1612,881],{"class":392},[319,1614,193],{"class":561},[319,1616,188],{"class":329},[319,1618,30],{"class":333},[319,1620,668],{"class":329},[319,1622,405],{"class":561},[319,1624,381],{"class":333},[319,1626,1627],{"class":321,"line":899},[319,1628,574],{"emptyLinePlaceholder":573},[319,1630,1631],{"class":321,"line":905},[319,1632,1176],{"class":427},[319,1634,1635,1637,1639,1641,1643,1645],{"class":321,"line":911},[319,1636,549],{"class":325},[319,1638,1183],{"class":329},[319,1640,555],{"class":333},[319,1642,1188],{"class":329},[319,1644,30],{"class":333},[319,1646,1193],{"class":329},[319,1648,1649],{"class":321,"line":1196},[319,1650,574],{"emptyLinePlaceholder":573},[319,1652,1653],{"class":321,"line":1201},[319,1654,1204],{"class":427},[319,1656,1657,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677,1679,1681,1683,1685],{"class":321,"line":1207},[319,1658,1210],{"class":731},[319,1660,1213],{"class":561},[319,1662,202],{"class":329},[319,1664,1218],{"class":333},[319,1666,1183],{"class":329},[319,1668,749],{"class":561},[319,1670,1225],{"class":333},[319,1672,695],{"class":561},[319,1674,1230],{"class":760},[319,1676,1233],{"class":333},[319,1678,1236],{"class":760},[319,1680,1239],{"class":333},[319,1682,1242],{"class":760},[319,1684,1245],{"class":561},[319,1686,1248],{"class":333},[319,1688,1689,1691,1693,1695,1697,1699,1701,1703,1705],{"class":321,"line":1251},[319,1690,1254],{"class":731},[319,1692,1257],{"class":333},[319,1694,1260],{"class":392},[319,1696,193],{"class":561},[319,1698,340],{"class":333},[319,1700,1267],{"class":343},[319,1702,340],{"class":333},[319,1704,405],{"class":561},[319,1706,381],{"class":333},[319,1708,1709],{"class":321,"line":1276},[319,1710,1279],{"class":333},[319,1712,1713],{"class":321,"line":1282},[319,1714,574],{"emptyLinePlaceholder":573},[319,1716,1717],{"class":321,"line":1287},[319,1718,1719],{"class":427},"    \u002F\u002F 5. For each element E of items, do\n",[319,1721,1722,1725,1727,1730,1732,1734,1736,1738,1740],{"class":321,"line":1292},[319,1723,1724],{"class":329},"    items",[319,1726,30],{"class":333},[319,1728,1729],{"class":392},"forEach",[319,1731,193],{"class":561},[319,1733,193],{"class":333},[319,1735,234],{"class":534},[319,1737,405],{"class":333},[319,1739,703],{"class":325},[319,1741,539],{"class":333},[319,1743,1745],{"class":321,"line":1744},24,[319,1746,1747],{"class":427},"      \u002F\u002F a. Perform ? Set(O, ! ToString(𝔽(len)), E, true).\n",[319,1749,1751,1754,1757,1759,1762,1764,1767],{"class":321,"line":1750},25,[319,1752,1753],{"class":329},"      O",[319,1755,1756],{"class":561},"[",[319,1758,202],{"class":329},[319,1760,1761],{"class":561},"] ",[319,1763,334],{"class":333},[319,1765,1766],{"class":329}," E",[319,1768,381],{"class":333},[319,1770,1772],{"class":321,"line":1771},26,[319,1773,1774],{"class":427},"      \u002F\u002F b. Set len to len + 1.\n",[319,1776,1778,1781,1783,1785,1787,1789],{"class":321,"line":1777},27,[319,1779,1780],{"class":329},"      len",[319,1782,555],{"class":333},[319,1784,713],{"class":329},[319,1786,1218],{"class":333},[319,1788,1242],{"class":760},[319,1790,381],{"class":333},[319,1792,1794,1797],{"class":321,"line":1793},28,[319,1795,1796],{"class":333},"    }",[319,1798,1799],{"class":561},")\n",[319,1801,1803],{"class":321,"line":1802},29,[319,1804,574],{"emptyLinePlaceholder":573},[319,1806,1808],{"class":321,"line":1807},30,[319,1809,908],{"class":427},[319,1811,1813],{"class":321,"line":1812},31,[319,1814,586],{"class":333},[52,1816],{},[430,1818,1820],{"id":1819},"step-6-7-commit-new-length-return","Step 6 & 7: Commit New Length & Return",[439,1822,1823,1838],{},[15,1824,1825,1827,1828,193,1830,254,1832,275,1834,278,1836,197],{},[90,1826,445],{},"\n6. Perform ? ",[27,1829,241],{},[19,1831,188],{},[27,1833,274],{},[19,1835,202],{},[90,1837,257],{},[35,1839,1840],{"start":822},[38,1841,283,1842,197],{},[19,1843,202],{},[1336,1845,1847],{"id":1846},"step-6","Step 6",[454,1849,1850,1853,1860,1871,1876,1881],{},[38,1851,1852],{},"This is updating the length property of the array to the new length.",[38,1854,1855,478,1857,1418],{},[27,1856,477],{},[27,1858,1859],{},"Set(O, \"length\", 𝔽(len), true)",[38,1861,1862,1387,1864,261,1866,1393,1869,30],{},[27,1863,1859],{},[27,1865,274],{},[27,1867,1868],{},"𝔽(len)",[27,1870,188],{},[38,1872,1873,1875],{},[27,1874,274],{}," is the property name that is used to store the length of the array.",[38,1877,1878,1880],{},[27,1879,1868],{}," is the value of the length of the array.",[38,1882,1883,1410],{},[27,1884,257],{},[1336,1886,1888],{"id":1887},"step-7","Step 7",[454,1890,1891,1894],{},[38,1892,1893],{},"This is returning the new length of the array.",[38,1895,1896,1880],{},[27,1897,1868],{},[15,1899,1900,1901,1903,1904,1906,1907,1909],{},"A common beginner slip-up is assuming ",[27,1902,49],{}," returns the modified array. The spec shows that it explicitly writes the final count to ",[27,1905,274],{}," on ",[19,1908,188],{}," and returns that numeric count.",[310,1911,1913],{"className":312,"code":1912,"language":314,"meta":315,"style":315},"  \u002F\u002F Step 6: Update the length property on O\n  O.length = len;\n\n  \u002F\u002F Step 7: Return the new length\n  return len;\n\n",[27,1914,1915,1920,1936,1940,1945],{"__ignoreMap":315},[319,1916,1917],{"class":321,"line":322},[319,1918,1919],{"class":427},"  \u002F\u002F Step 6: Update the length property on O\n",[319,1921,1922,1925,1927,1930,1932,1934],{"class":321,"line":384},[319,1923,1924],{"class":329},"  O",[319,1926,30],{"class":333},[319,1928,1929],{"class":329},"length ",[319,1931,334],{"class":333},[319,1933,713],{"class":329},[319,1935,381],{"class":333},[319,1937,1938],{"class":321,"line":410},[319,1939,574],{"emptyLinePlaceholder":573},[319,1941,1942],{"class":321,"line":570},[319,1943,1944],{"class":427},"  \u002F\u002F Step 7: Return the new length\n",[319,1946,1947,1949,1951],{"class":321,"line":577},[319,1948,775],{"class":731},[319,1950,713],{"class":329},[319,1952,381],{"class":333},[52,1954],{},[10,1956,1958],{"id":1957},"the-complete-implementation","The Complete Implementation",[15,1960,1961,1962,1965],{},"Here is our complete spec-compliant implementation, attached to ",[27,1963,1964],{},"Array.prototype"," for educational exploration:",[310,1967,1969],{"className":312,"code":1968,"language":314,"meta":315,"style":315},"const toLength = (value) => {\n  const len = Number(value);\n  if (Number.isNaN(len) || len \u003C= 0) return 0;\n  return Math.min(Math.floor(len), Number.MAX_SAFE_INTEGER);\n};\n\nfunction austinPush(...items) {\n  \u002F\u002F 1. Let O be ? ToObject(this value).\n  if (this == null) {\n    throw new TypeError('Array.prototype.austinPush called on null or undefined');\n  }\n  const O = Object(this);\n\n  \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n  let len = toLength(O.length);\n\n  \u002F\u002F 3. Let argCount be the number of elements in items.\n  const argCount = items.length;\n\n  \u002F\u002F 4. If len + argCount > 2**53 - 1, throw a TypeError exception.\n  if (len + argCount > Number.MAX_SAFE_INTEGER) {\n    throw new TypeError('Exceeded maximum safe array length');\n  }\n\n  \u002F\u002F 5. For each element E of items, do\n  for (const element of items) {\n    \u002F\u002F a. Perform ? Set(O, ! ToString(𝔽(len)), E, true).\n    O[len] = element;\n    \u002F\u002F b. Set len to len + 1.\n    len += 1;\n  }\n\n  \u002F\u002F 6. Perform ? Set(O, \"length\", 𝔽(len), true).\n  O.length = len;\n\n  \u002F\u002F 7. Return 𝔽(len).\n  return len;\n}\n\n\u002F\u002F Attach custom implementation to prototype for testing\nArray.prototype.austinPush = austinPush;\n\n",[27,1970,1971,1989,2007,2041,2075,2079,2083,2097,2102,2120,2142,2147,2165,2169,2174,2197,2201,2206,2222,2226,2231,2255,2276,2280,2284,2289,2310,2315,2332,2337,2349,2353,2358,2364,2379,2384,2390,2399,2404,2409,2415],{"__ignoreMap":315},[319,1972,1973,1975,1977,1979,1981,1983,1985,1987],{"class":321,"line":322},[319,1974,326],{"class":325},[319,1976,690],{"class":329},[319,1978,334],{"class":333},[319,1980,695],{"class":333},[319,1982,698],{"class":534},[319,1984,405],{"class":333},[319,1986,703],{"class":325},[319,1988,539],{"class":333},[319,1990,1991,1993,1995,1997,1999,2001,2003,2005],{"class":321,"line":384},[319,1992,710],{"class":325},[319,1994,713],{"class":329},[319,1996,555],{"class":333},[319,1998,718],{"class":392},[319,2000,193],{"class":561},[319,2002,698],{"class":329},[319,2004,405],{"class":561},[319,2006,381],{"class":333},[319,2008,2009,2011,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035,2037,2039],{"class":321,"line":410},[319,2010,732],{"class":731},[319,2012,695],{"class":561},[319,2014,737],{"class":329},[319,2016,30],{"class":333},[319,2018,742],{"class":392},[319,2020,193],{"class":561},[319,2022,202],{"class":329},[319,2024,749],{"class":561},[319,2026,752],{"class":333},[319,2028,713],{"class":329},[319,2030,757],{"class":333},[319,2032,761],{"class":760},[319,2034,749],{"class":561},[319,2036,766],{"class":731},[319,2038,761],{"class":760},[319,2040,381],{"class":333},[319,2042,2043,2045,2047,2049,2051,2053,2055,2057,2059,2061,2063,2065,2067,2069,2071,2073],{"class":321,"line":570},[319,2044,775],{"class":731},[319,2046,778],{"class":329},[319,2048,30],{"class":333},[319,2050,783],{"class":392},[319,2052,193],{"class":561},[319,2054,788],{"class":329},[319,2056,30],{"class":333},[319,2058,793],{"class":392},[319,2060,193],{"class":561},[319,2062,202],{"class":329},[319,2064,405],{"class":561},[319,2066,349],{"class":333},[319,2068,718],{"class":329},[319,2070,30],{"class":333},[319,2072,808],{"class":561},[319,2074,381],{"class":333},[319,2076,2077],{"class":321,"line":577},[319,2078,815],{"class":333},[319,2080,2081],{"class":321,"line":583},[319,2082,574],{"emptyLinePlaceholder":573},[319,2084,2085,2087,2089,2091,2093,2095],{"class":321,"line":822},[319,2086,525],{"class":325},[319,2088,528],{"class":392},[319,2090,531],{"class":333},[319,2092,216],{"class":534},[319,2094,405],{"class":333},[319,2096,539],{"class":333},[319,2098,2099],{"class":321,"line":837},[319,2100,2101],{"class":427},"  \u002F\u002F 1. Let O be ? ToObject(this value).\n",[319,2103,2104,2106,2108,2110,2113,2116,2118],{"class":321,"line":842},[319,2105,732],{"class":731},[319,2107,695],{"class":561},[319,2109,436],{"class":333},[319,2111,2112],{"class":333}," ==",[319,2114,2115],{"class":333}," null",[319,2117,749],{"class":561},[319,2119,1248],{"class":333},[319,2121,2122,2125,2127,2129,2131,2133,2136,2138,2140],{"class":321,"line":861},[319,2123,2124],{"class":731},"    throw",[319,2126,1257],{"class":333},[319,2128,1260],{"class":392},[319,2130,193],{"class":561},[319,2132,340],{"class":333},[319,2134,2135],{"class":343},"Array.prototype.austinPush called on null or undefined",[319,2137,340],{"class":333},[319,2139,405],{"class":561},[319,2141,381],{"class":333},[319,2143,2144],{"class":321,"line":866},[319,2145,2146],{"class":333},"  }\n",[319,2148,2149,2151,2153,2155,2157,2159,2161,2163],{"class":321,"line":872},[319,2150,710],{"class":325},[319,2152,552],{"class":329},[319,2154,555],{"class":333},[319,2156,558],{"class":392},[319,2158,193],{"class":561},[319,2160,436],{"class":333},[319,2162,405],{"class":561},[319,2164,381],{"class":333},[319,2166,2167],{"class":321,"line":899},[319,2168,574],{"emptyLinePlaceholder":573},[319,2170,2171],{"class":321,"line":905},[319,2172,2173],{"class":427},"  \u002F\u002F 2. Let len be ? LengthOfArrayLike(O).\n",[319,2175,2176,2179,2181,2183,2185,2187,2189,2191,2193,2195],{"class":321,"line":911},[319,2177,2178],{"class":325},"  let",[319,2180,713],{"class":329},[319,2182,555],{"class":333},[319,2184,881],{"class":392},[319,2186,193],{"class":561},[319,2188,188],{"class":329},[319,2190,30],{"class":333},[319,2192,668],{"class":329},[319,2194,405],{"class":561},[319,2196,381],{"class":333},[319,2198,2199],{"class":321,"line":1196},[319,2200,574],{"emptyLinePlaceholder":573},[319,2202,2203],{"class":321,"line":1201},[319,2204,2205],{"class":427},"  \u002F\u002F 3. Let argCount be the number of elements in items.\n",[319,2207,2208,2210,2212,2214,2216,2218,2220],{"class":321,"line":1207},[319,2209,710],{"class":325},[319,2211,1183],{"class":329},[319,2213,555],{"class":333},[319,2215,1188],{"class":329},[319,2217,30],{"class":333},[319,2219,668],{"class":329},[319,2221,381],{"class":333},[319,2223,2224],{"class":321,"line":1251},[319,2225,574],{"emptyLinePlaceholder":573},[319,2227,2228],{"class":321,"line":1276},[319,2229,2230],{"class":427},"  \u002F\u002F 4. If len + argCount > 2**53 - 1, throw a TypeError exception.\n",[319,2232,2233,2235,2237,2239,2241,2243,2246,2248,2250,2253],{"class":321,"line":1282},[319,2234,732],{"class":731},[319,2236,695],{"class":561},[319,2238,202],{"class":329},[319,2240,1218],{"class":333},[319,2242,1183],{"class":329},[319,2244,2245],{"class":333}," >",[319,2247,718],{"class":329},[319,2249,30],{"class":333},[319,2251,2252],{"class":561},"MAX_SAFE_INTEGER) ",[319,2254,1248],{"class":333},[319,2256,2257,2259,2261,2263,2265,2267,2270,2272,2274],{"class":321,"line":1287},[319,2258,2124],{"class":731},[319,2260,1257],{"class":333},[319,2262,1260],{"class":392},[319,2264,193],{"class":561},[319,2266,340],{"class":333},[319,2268,2269],{"class":343},"Exceeded maximum safe array length",[319,2271,340],{"class":333},[319,2273,405],{"class":561},[319,2275,381],{"class":333},[319,2277,2278],{"class":321,"line":1292},[319,2279,2146],{"class":333},[319,2281,2282],{"class":321,"line":1744},[319,2283,574],{"emptyLinePlaceholder":573},[319,2285,2286],{"class":321,"line":1750},[319,2287,2288],{"class":427},"  \u002F\u002F 5. For each element E of items, do\n",[319,2290,2291,2294,2296,2298,2301,2304,2306,2308],{"class":321,"line":1771},[319,2292,2293],{"class":731},"  for",[319,2295,695],{"class":561},[319,2297,326],{"class":325},[319,2299,2300],{"class":329}," element",[319,2302,2303],{"class":333}," of",[319,2305,1188],{"class":329},[319,2307,749],{"class":561},[319,2309,1248],{"class":333},[319,2311,2312],{"class":321,"line":1777},[319,2313,2314],{"class":427},"    \u002F\u002F a. Perform ? Set(O, ! ToString(𝔽(len)), E, true).\n",[319,2316,2317,2320,2322,2324,2326,2328,2330],{"class":321,"line":1793},[319,2318,2319],{"class":329},"    O",[319,2321,1756],{"class":561},[319,2323,202],{"class":329},[319,2325,1761],{"class":561},[319,2327,334],{"class":333},[319,2329,2300],{"class":329},[319,2331,381],{"class":333},[319,2333,2334],{"class":321,"line":1802},[319,2335,2336],{"class":427},"    \u002F\u002F b. Set len to len + 1.\n",[319,2338,2339,2342,2345,2347],{"class":321,"line":1807},[319,2340,2341],{"class":329},"    len",[319,2343,2344],{"class":333}," +=",[319,2346,1242],{"class":760},[319,2348,381],{"class":333},[319,2350,2351],{"class":321,"line":1812},[319,2352,2146],{"class":333},[319,2354,2356],{"class":321,"line":2355},32,[319,2357,574],{"emptyLinePlaceholder":573},[319,2359,2361],{"class":321,"line":2360},33,[319,2362,2363],{"class":427},"  \u002F\u002F 6. Perform ? Set(O, \"length\", 𝔽(len), true).\n",[319,2365,2367,2369,2371,2373,2375,2377],{"class":321,"line":2366},34,[319,2368,1924],{"class":329},[319,2370,30],{"class":333},[319,2372,668],{"class":329},[319,2374,555],{"class":333},[319,2376,713],{"class":329},[319,2378,381],{"class":333},[319,2380,2382],{"class":321,"line":2381},35,[319,2383,574],{"emptyLinePlaceholder":573},[319,2385,2387],{"class":321,"line":2386},36,[319,2388,2389],{"class":427},"  \u002F\u002F 7. Return 𝔽(len).\n",[319,2391,2393,2395,2397],{"class":321,"line":2392},37,[319,2394,775],{"class":731},[319,2396,713],{"class":329},[319,2398,381],{"class":333},[319,2400,2402],{"class":321,"line":2401},38,[319,2403,586],{"class":333},[319,2405,2407],{"class":321,"line":2406},39,[319,2408,574],{"emptyLinePlaceholder":573},[319,2410,2412],{"class":321,"line":2411},40,[319,2413,2414],{"class":427},"\u002F\u002F Attach custom implementation to prototype for testing\n",[319,2416,2418,2422,2424,2427,2429,2432,2434,2436],{"class":321,"line":2417},41,[319,2419,2421],{"class":2420},"sBMFI","Array",[319,2423,30],{"class":333},[319,2425,2426],{"class":329},"prototype",[319,2428,30],{"class":333},[319,2430,2431],{"class":329},"austinPush ",[319,2433,334],{"class":333},[319,2435,528],{"class":329},[319,2437,381],{"class":333},[15,2439,2440],{},"(Note: Monkey patching built-in prototypes in production applications is discouraged. It's used here to study native behavior.)",[52,2442],{},[10,2444,2446],{"id":2445},"verifying-our-implementation","Verifying Our Implementation",[15,2448,2449],{},"Run this test suite in your console to verify that our polyfill handles typical usages, edge cases, and generic bindings:",[310,2451,2453],{"className":312,"code":2452,"language":314,"meta":315,"style":315},"\u002F\u002F Test 1: Standard push and return value\nconst months = ['Jan', 'Mar', 'Apr', 'May'];\nconst resultLength = months.austinPush('Feb');\nconsole.assert(resultLength === 5, `Expected 5, got ${resultLength}`);\nconsole.assert(months[4] === 'Feb', 'Element not inserted at index 4');\n\n\u002F\u002F Test 2: Appending multiple arguments\nconst numbers = [1, 2];\nnumbers.austinPush(3, 4, 5);\nconsole.assert(numbers.length === 5, `Expected length 5, got ${numbers.length}`);\nconsole.assert(numbers[4] === 5, 'Element not inserted at index 4');\n\n\u002F\u002F Test 4: Null \u002F Undefined check\ntry {\n  Array.prototype.austinPush.call(null, 'fail');\n  console.assert(false, 'Should have thrown TypeError');\n} catch (err) {\n  console.assert(err instanceof TypeError, 'Expected TypeError on null context');\n}\n\nconsole.log('All tests passed successfully!');\n\n",[27,2454,2455,2460,2504,2532,2571,2608,2612,2617,2640,2667,2707,2738,2742,2747,2754,2788,2816,2829,2860,2864,2868],{"__ignoreMap":315},[319,2456,2457],{"class":321,"line":322},[319,2458,2459],{"class":427},"\u002F\u002F Test 1: Standard push and return value\n",[319,2461,2462,2464,2466,2468,2470,2472,2474,2476,2478,2480,2482,2484,2486,2488,2490,2492,2494,2496,2498,2500,2502],{"class":321,"line":384},[319,2463,326],{"class":325},[319,2465,330],{"class":329},[319,2467,334],{"class":333},[319,2469,337],{"class":329},[319,2471,340],{"class":333},[319,2473,344],{"class":343},[319,2475,340],{"class":333},[319,2477,349],{"class":333},[319,2479,352],{"class":333},[319,2481,355],{"class":343},[319,2483,340],{"class":333},[319,2485,349],{"class":333},[319,2487,352],{"class":333},[319,2489,364],{"class":343},[319,2491,340],{"class":333},[319,2493,349],{"class":333},[319,2495,352],{"class":333},[319,2497,373],{"class":343},[319,2499,340],{"class":333},[319,2501,378],{"class":329},[319,2503,381],{"class":333},[319,2505,2506,2508,2511,2513,2516,2518,2520,2522,2524,2526,2528,2530],{"class":321,"line":410},[319,2507,326],{"class":325},[319,2509,2510],{"class":329}," resultLength ",[319,2512,334],{"class":333},[319,2514,2515],{"class":329}," months",[319,2517,30],{"class":333},[319,2519,291],{"class":392},[319,2521,193],{"class":329},[319,2523,340],{"class":333},[319,2525,400],{"class":343},[319,2527,340],{"class":333},[319,2529,405],{"class":329},[319,2531,381],{"class":333},[319,2533,2534,2536,2538,2541,2544,2547,2550,2552,2555,2558,2561,2564,2567,2569],{"class":321,"line":570},[319,2535,413],{"class":329},[319,2537,30],{"class":333},[319,2539,2540],{"class":392},"assert",[319,2542,2543],{"class":329},"(resultLength ",[319,2545,2546],{"class":333},"===",[319,2548,2549],{"class":760}," 5",[319,2551,349],{"class":333},[319,2553,2554],{"class":333}," `",[319,2556,2557],{"class":343},"Expected 5, got ",[319,2559,2560],{"class":333},"${",[319,2562,2563],{"class":329},"resultLength",[319,2565,2566],{"class":333},"}`",[319,2568,405],{"class":329},[319,2570,381],{"class":333},[319,2572,2573,2575,2577,2579,2582,2585,2587,2589,2591,2593,2595,2597,2599,2602,2604,2606],{"class":321,"line":577},[319,2574,413],{"class":329},[319,2576,30],{"class":333},[319,2578,2540],{"class":392},[319,2580,2581],{"class":329},"(months[",[319,2583,2584],{"class":760},"4",[319,2586,1761],{"class":329},[319,2588,2546],{"class":333},[319,2590,352],{"class":333},[319,2592,400],{"class":343},[319,2594,340],{"class":333},[319,2596,349],{"class":333},[319,2598,352],{"class":333},[319,2600,2601],{"class":343},"Element not inserted at index 4",[319,2603,340],{"class":333},[319,2605,405],{"class":329},[319,2607,381],{"class":333},[319,2609,2610],{"class":321,"line":583},[319,2611,574],{"emptyLinePlaceholder":573},[319,2613,2614],{"class":321,"line":822},[319,2615,2616],{"class":427},"\u002F\u002F Test 2: Appending multiple arguments\n",[319,2618,2619,2621,2624,2626,2628,2631,2633,2636,2638],{"class":321,"line":837},[319,2620,326],{"class":325},[319,2622,2623],{"class":329}," numbers ",[319,2625,334],{"class":333},[319,2627,337],{"class":329},[319,2629,2630],{"class":760},"1",[319,2632,349],{"class":333},[319,2634,2635],{"class":760}," 2",[319,2637,378],{"class":329},[319,2639,381],{"class":333},[319,2641,2642,2645,2647,2649,2651,2654,2656,2659,2661,2663,2665],{"class":321,"line":842},[319,2643,2644],{"class":329},"numbers",[319,2646,30],{"class":333},[319,2648,291],{"class":392},[319,2650,193],{"class":329},[319,2652,2653],{"class":760},"3",[319,2655,349],{"class":333},[319,2657,2658],{"class":760}," 4",[319,2660,349],{"class":333},[319,2662,2549],{"class":760},[319,2664,405],{"class":329},[319,2666,381],{"class":333},[319,2668,2669,2671,2673,2675,2678,2680,2682,2684,2686,2688,2690,2693,2695,2697,2699,2701,2703,2705],{"class":321,"line":861},[319,2670,413],{"class":329},[319,2672,30],{"class":333},[319,2674,2540],{"class":392},[319,2676,2677],{"class":329},"(numbers",[319,2679,30],{"class":333},[319,2681,1929],{"class":329},[319,2683,2546],{"class":333},[319,2685,2549],{"class":760},[319,2687,349],{"class":333},[319,2689,2554],{"class":333},[319,2691,2692],{"class":343},"Expected length 5, got ",[319,2694,2560],{"class":333},[319,2696,2644],{"class":329},[319,2698,30],{"class":333},[319,2700,668],{"class":329},[319,2702,2566],{"class":333},[319,2704,405],{"class":329},[319,2706,381],{"class":333},[319,2708,2709,2711,2713,2715,2718,2720,2722,2724,2726,2728,2730,2732,2734,2736],{"class":321,"line":866},[319,2710,413],{"class":329},[319,2712,30],{"class":333},[319,2714,2540],{"class":392},[319,2716,2717],{"class":329},"(numbers[",[319,2719,2584],{"class":760},[319,2721,1761],{"class":329},[319,2723,2546],{"class":333},[319,2725,2549],{"class":760},[319,2727,349],{"class":333},[319,2729,352],{"class":333},[319,2731,2601],{"class":343},[319,2733,340],{"class":333},[319,2735,405],{"class":329},[319,2737,381],{"class":333},[319,2739,2740],{"class":321,"line":872},[319,2741,574],{"emptyLinePlaceholder":573},[319,2743,2744],{"class":321,"line":899},[319,2745,2746],{"class":427},"\u002F\u002F Test 4: Null \u002F Undefined check\n",[319,2748,2749,2752],{"class":321,"line":905},[319,2750,2751],{"class":731},"try",[319,2753,539],{"class":333},[319,2755,2756,2759,2761,2763,2765,2767,2769,2772,2774,2777,2779,2782,2784,2786],{"class":321,"line":911},[319,2757,2758],{"class":2420},"  Array",[319,2760,30],{"class":333},[319,2762,2426],{"class":329},[319,2764,30],{"class":333},[319,2766,291],{"class":329},[319,2768,30],{"class":333},[319,2770,2771],{"class":392},"call",[319,2773,193],{"class":561},[319,2775,2776],{"class":333},"null,",[319,2778,352],{"class":333},[319,2780,2781],{"class":343},"fail",[319,2783,340],{"class":333},[319,2785,405],{"class":561},[319,2787,381],{"class":333},[319,2789,2790,2793,2795,2797,2799,2803,2805,2807,2810,2812,2814],{"class":321,"line":1196},[319,2791,2792],{"class":329},"  console",[319,2794,30],{"class":333},[319,2796,2540],{"class":392},[319,2798,193],{"class":561},[319,2800,2802],{"class":2801},"sfNiH","false",[319,2804,349],{"class":333},[319,2806,352],{"class":333},[319,2808,2809],{"class":343},"Should have thrown TypeError",[319,2811,340],{"class":333},[319,2813,405],{"class":561},[319,2815,381],{"class":333},[319,2817,2818,2821,2824,2827],{"class":321,"line":1201},[319,2819,2820],{"class":333},"}",[319,2822,2823],{"class":731}," catch",[319,2825,2826],{"class":329}," (err) ",[319,2828,1248],{"class":333},[319,2830,2831,2833,2835,2837,2839,2842,2845,2847,2849,2851,2854,2856,2858],{"class":321,"line":1207},[319,2832,2792],{"class":329},[319,2834,30],{"class":333},[319,2836,2540],{"class":392},[319,2838,193],{"class":561},[319,2840,2841],{"class":329},"err",[319,2843,2844],{"class":333}," instanceof",[319,2846,1260],{"class":2420},[319,2848,349],{"class":333},[319,2850,352],{"class":333},[319,2852,2853],{"class":343},"Expected TypeError on null context",[319,2855,340],{"class":333},[319,2857,405],{"class":561},[319,2859,381],{"class":333},[319,2861,2862],{"class":321,"line":1251},[319,2863,586],{"class":333},[319,2865,2866],{"class":321,"line":1276},[319,2867,574],{"emptyLinePlaceholder":573},[319,2869,2870,2872,2874,2876,2878,2880,2883,2885,2887],{"class":321,"line":1282},[319,2871,413],{"class":329},[319,2873,30],{"class":333},[319,2875,418],{"class":392},[319,2877,193],{"class":329},[319,2879,340],{"class":333},[319,2881,2882],{"class":343},"All tests passed successfully!",[319,2884,340],{"class":333},[319,2886,405],{"class":329},[319,2888,381],{"class":333},[52,2890],{},[10,2892,2894],{"id":2893},"conclusion","Conclusion",[15,2896,2897],{},"Reading the ECMAScript specification might seem intimidating initially, but every built-in method follows the same predictable pattern: input coercion, validation, state mutation, and result return. Breaking it down into executable code turns abstract standards into clear mental models. Hopefully this helped!",[15,2899,2900,2901,2906],{},"If you want to explore the official specification directly, check out ",[168,2902,2905],{"href":2903,"rel":2904},"https:\u002F\u002Ftc39.es\u002Fecma262\u002F?utm_source=gemini",[172],"tc39.es\u002Fecma262"," and if you like this follow me on social media and message me. I'd be happy to do more tutorials like this!",[2908,2909,2910],"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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 .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 .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}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":315,"searchDepth":384,"depth":384,"links":2912},[2913,2914,2915,2916,2925,2926,2927],{"id":12,"depth":384,"text":13},{"id":56,"depth":384,"text":57},{"id":162,"depth":384,"text":163},{"id":297,"depth":384,"text":2917,"children":2918},"Building austinPush(): Step-by-Step",[2919,2921,2922,2923,2924],{"id":432,"depth":410,"text":2920},"Step 1: Coerce this to an Object",{"id":591,"depth":410,"text":592},{"id":918,"depth":410,"text":919},{"id":1299,"depth":410,"text":1300},{"id":1819,"depth":410,"text":1820},{"id":1957,"depth":384,"text":1958},{"id":2445,"depth":384,"text":2446},{"id":2893,"depth":384,"text":2894},"2026-09-22","A step-by-step tutorial on translating the ECMAScript specification for Array.prototype.push into working JavaScript.","md",{},"\u002Fblog\u002Fdemystifying-the-ecmascript-spec-array-push",{"title":5,"description":2929},"blog\u002Fdemystifying-the-ecmascript-spec-array-push",null,[2937,2938,314,2939],"intermediate","ecmascript","tutorial","auHhdc5irjMMKmscMArMX2WQNxl3YOc09FPGZTOsC-0",[2935,2942],{"title":2943,"path":2944,"stem":2945,"description":2946,"children":-1},"Getting Started With The Beacon API","\u002Fblog\u002Fgetting-started-with-the-beacon-api","blog\u002Fgetting-started-with-the-beacon-api","A tutorial of the Beacon API for web",[2948,2950,2958,2962,2967,2974],{"title":5,"date":2928,"tags":2949,"path":2932},[2937,2938,314,2939],{"title":2951,"date":2952,"tags":2953,"path":2957},"V-Card In Depth","2023-03-08",[2954,2955,2956,314],"beginners","vuetify","vue","\u002Fblog\u002Fv-card-in-depth",{"title":2943,"date":2959,"tags":2960,"path":2944},"2020-06-25",[314,2961,2939],"web api",{"title":2963,"date":2964,"tags":2965,"path":2966},"What is Tree Shaking","2020-05-29",[2954,2955,2956,314],"\u002Fblog\u002Fwhat-is-tree-shaking",{"title":2968,"date":2969,"tags":2970,"path":2973},"What is a CLI","2020-05-11",[2971,2955,2972],"vue3","typescript","\u002Fblog\u002Fwhat-is-a-cli",{"title":2975,"date":2976,"tags":2977,"path":2980},"Let's build a Github Profile Search Web App","2019-07-03",[2978,314,2979,2939],"web project","github api","\u002Fblog\u002Flets-build-a-github-profile-search-web-app",1790185051664]