[{"data":1,"prerenderedAt":3862},["ShallowReactive",2],{"page-\u002Fjs\u002F05-functions-and-scope":3},{"id":4,"title":5,"body":6,"description":3855,"extension":3856,"meta":3857,"navigation":92,"path":3858,"seo":3859,"stem":3860,"__hash__":3861},"content\u002Fjs\u002F05-functions-and-scope.md","JavaScript 05 — Function Internals: Hoisting, Arrow Lexical `this` & Arguments Object",{"type":7,"value":8,"toc":3842},"minimark",[9,19,24,498,508,1078,1082,1434,1440,1922,1926,2405,2409,2762,2766,3215,3219,3648,3652,3656,3755,3838],[10,11,13,14,18],"h1",{"id":12},"_05-function-internals-hoisting-arrow-lexical-this-arguments-object","05 — Function Internals: Hoisting, Arrow Lexical ",[15,16,17],"code",{},"this"," & Arguments Object",[20,21,23],"h2",{"id":22},"function-declarations-vs-expressions-hoisting-internals","Function Declarations vs Expressions: Hoisting Internals",[25,26,28],"code-wrapper",{"language":27},"javascript",[29,30,34],"pre",{"className":31,"code":32,"language":27,"meta":33,"style":33},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F ── Function declaration: fully hoisted (declaration + body) ──\n\u002F\u002F Available throughout the entire scope, even before the declaration line.\nconsole.log(typeof greet); \u002F\u002F \"function\" — already defined\ngreet(); \u002F\u002F \"hello\" — can call before declaration\n\nfunction greet() { console.log(\"hello\"); } \u002F\u002F declaration: hoisted entirely\n\n\u002F\u002F ── Function expression: NOT hoisted (only the variable, in TDZ or undefined) ──\nconsole.log(typeof greet2); \u002F\u002F \"undefined\" (var) or ReferenceError (let\u002Fconst TDZ)\n\u002F\u002F greet2(); \u002F\u002F TypeError: greet2 is not a function (var) or ReferenceError (let\u002Fconst)\n\nvar greet2 = function() { console.log(\"hello\"); }; \u002F\u002F expression: only the var is hoisted\n\u002F\u002F const greet2 = () => console.log(\"hello\"); \u002F\u002F let\u002Fconst: TDZ until this line\n\n\u002F\u002F ── Why declarations are hoisted but expressions aren't ──\n\u002F\u002F Function declarations are processed in the \"creation phase\" of the execution context:\n\u002F\u002F 1. Variable Environment: var declarations → initialized to undefined\n\u002F\u002F 2. Function declarations: fully created and assigned (name → function object)\n\u002F\u002F 3. let\u002Fconst: created but in TDZ (uninitialized)\n\u002F\u002F Function expressions: the function object is created at runtime when the line executes,\n\u002F\u002F and assigned to the variable (which was hoisted as undefined or TDZ).\n\n\u002F\u002F ── Named function expression (the name is only visible inside the function) ──\nconst factorial = function fib(n) {\n \u002F\u002F `fib` is only visible inside this function (for recursion)\n \u002F\u002F `factorial` is visible outside (the variable it's assigned to)\n return n \u003C= 1 ? n : fib(n - 1) + fib(n - 2); \u002F\u002F recursion via the internal name\n};\n\u002F\u002F console.log(typeof fib); \u002F\u002F ReferenceError: fib is not defined (only inside)\nfactorial(10); \u002F\u002F works — uses `factorial` from outside or `fib` from inside\n\n\u002F\u002F ── Anti-pattern: conditional function declaration (not reliable) ──\n\u002F\u002F ❌ Function declarations inside if-blocks are hoisted in non-strict mode (inconsistent)\nif (true) {\n function f() { return \"yes\"; }\n}\n\u002F\u002F f(); \u002F\u002F Works in some engines, not others — undefined behavior\n\u002F\u002F ✅ Use function expressions for conditional assignment:\nlet f2;\nif (true) {\n f2 = function() { return \"yes\"; };\n}\n","",[15,35,36,45,51,75,87,94,120,125,131,148,157,162,191,200,205,211,217,223,229,235,241,247,252,258,283,289,295,350,356,365,381,386,392,398,412,433,439,448,454,463,474,493],{"__ignoreMap":33},[37,38,41],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sdCPZ","\u002F\u002F ── Function declaration: fully hoisted (declaration + body) ──\n",[37,46,48],{"class":39,"line":47},2,[37,49,50],{"class":43},"\u002F\u002F Available throughout the entire scope, even before the declaration line.\n",[37,52,54,58,62,65,69,72],{"class":39,"line":53},3,[37,55,57],{"class":56},"ssxIu","console.",[37,59,61],{"class":60},"sIsaT","log",[37,63,64],{"class":56},"(",[37,66,68],{"class":67},"svdQ7","typeof",[37,70,71],{"class":56}," greet); ",[37,73,74],{"class":43},"\u002F\u002F \"function\" — already defined\n",[37,76,78,81,84],{"class":39,"line":77},4,[37,79,80],{"class":60},"greet",[37,82,83],{"class":56},"(); ",[37,85,86],{"class":43},"\u002F\u002F \"hello\" — can call before declaration\n",[37,88,90],{"class":39,"line":89},5,[37,91,93],{"emptyLinePlaceholder":92},true,"\n",[37,95,97,100,103,106,108,110,114,117],{"class":39,"line":96},6,[37,98,99],{"class":67},"function",[37,101,102],{"class":60}," greet",[37,104,105],{"class":56},"() { console.",[37,107,61],{"class":60},[37,109,64],{"class":56},[37,111,113],{"class":112},"sJ6F3","\"hello\"",[37,115,116],{"class":56},"); } ",[37,118,119],{"class":43},"\u002F\u002F declaration: hoisted entirely\n",[37,121,123],{"class":39,"line":122},7,[37,124,93],{"emptyLinePlaceholder":92},[37,126,128],{"class":39,"line":127},8,[37,129,130],{"class":43},"\u002F\u002F ── Function expression: NOT hoisted (only the variable, in TDZ or undefined) ──\n",[37,132,134,136,138,140,142,145],{"class":39,"line":133},9,[37,135,57],{"class":56},[37,137,61],{"class":60},[37,139,64],{"class":56},[37,141,68],{"class":67},[37,143,144],{"class":56}," greet2); ",[37,146,147],{"class":43},"\u002F\u002F \"undefined\" (var) or ReferenceError (let\u002Fconst TDZ)\n",[37,149,151,154],{"class":39,"line":150},10,[37,152,153],{"class":43},"\u002F\u002F greet2();",[37,155,156],{"class":43}," \u002F\u002F TypeError: greet2 is not a function (var) or ReferenceError (let\u002Fconst)\n",[37,158,160],{"class":39,"line":159},11,[37,161,93],{"emptyLinePlaceholder":92},[37,163,165,168,171,174,177,179,181,183,185,188],{"class":39,"line":164},12,[37,166,167],{"class":67},"var",[37,169,170],{"class":60}," greet2",[37,172,173],{"class":67}," =",[37,175,176],{"class":67}," function",[37,178,105],{"class":56},[37,180,61],{"class":60},[37,182,64],{"class":56},[37,184,113],{"class":112},[37,186,187],{"class":56},"); }; ",[37,189,190],{"class":43},"\u002F\u002F expression: only the var is hoisted\n",[37,192,194,197],{"class":39,"line":193},13,[37,195,196],{"class":43},"\u002F\u002F const greet2 = () => console.log(\"hello\");",[37,198,199],{"class":43}," \u002F\u002F let\u002Fconst: TDZ until this line\n",[37,201,203],{"class":39,"line":202},14,[37,204,93],{"emptyLinePlaceholder":92},[37,206,208],{"class":39,"line":207},15,[37,209,210],{"class":43},"\u002F\u002F ── Why declarations are hoisted but expressions aren't ──\n",[37,212,214],{"class":39,"line":213},16,[37,215,216],{"class":43},"\u002F\u002F Function declarations are processed in the \"creation phase\" of the execution context:\n",[37,218,220],{"class":39,"line":219},17,[37,221,222],{"class":43},"\u002F\u002F 1. Variable Environment: var declarations → initialized to undefined\n",[37,224,226],{"class":39,"line":225},18,[37,227,228],{"class":43},"\u002F\u002F 2. Function declarations: fully created and assigned (name → function object)\n",[37,230,232],{"class":39,"line":231},19,[37,233,234],{"class":43},"\u002F\u002F 3. let\u002Fconst: created but in TDZ (uninitialized)\n",[37,236,238],{"class":39,"line":237},20,[37,239,240],{"class":43},"\u002F\u002F Function expressions: the function object is created at runtime when the line executes,\n",[37,242,244],{"class":39,"line":243},21,[37,245,246],{"class":43},"\u002F\u002F and assigned to the variable (which was hoisted as undefined or TDZ).\n",[37,248,250],{"class":39,"line":249},22,[37,251,93],{"emptyLinePlaceholder":92},[37,253,255],{"class":39,"line":254},23,[37,256,257],{"class":43},"\u002F\u002F ── Named function expression (the name is only visible inside the function) ──\n",[37,259,261,264,267,269,271,274,276,280],{"class":39,"line":260},24,[37,262,263],{"class":67},"const",[37,265,266],{"class":60}," factorial",[37,268,173],{"class":67},[37,270,176],{"class":67},[37,272,273],{"class":60}," fib",[37,275,64],{"class":56},[37,277,279],{"class":278},"sCrzJ","n",[37,281,282],{"class":56},") {\n",[37,284,286],{"class":39,"line":285},25,[37,287,288],{"class":43}," \u002F\u002F `fib` is only visible inside this function (for recursion)\n",[37,290,292],{"class":39,"line":291},26,[37,293,294],{"class":43}," \u002F\u002F `factorial` is visible outside (the variable it's assigned to)\n",[37,296,298,301,304,307,311,314,316,319,321,324,327,329,332,335,337,339,341,344,347],{"class":39,"line":297},27,[37,299,300],{"class":67}," return",[37,302,303],{"class":56}," n ",[37,305,306],{"class":67},"\u003C=",[37,308,310],{"class":309},"snvgF"," 1",[37,312,313],{"class":67}," ?",[37,315,303],{"class":56},[37,317,318],{"class":67},":",[37,320,273],{"class":60},[37,322,323],{"class":56},"(n ",[37,325,326],{"class":67},"-",[37,328,310],{"class":309},[37,330,331],{"class":56},") ",[37,333,334],{"class":67},"+",[37,336,273],{"class":60},[37,338,323],{"class":56},[37,340,326],{"class":67},[37,342,343],{"class":309}," 2",[37,345,346],{"class":56},"); ",[37,348,349],{"class":43},"\u002F\u002F recursion via the internal name\n",[37,351,353],{"class":39,"line":352},28,[37,354,355],{"class":56},"};\n",[37,357,359,362],{"class":39,"line":358},29,[37,360,361],{"class":43},"\u002F\u002F console.log(typeof fib);",[37,363,364],{"class":43}," \u002F\u002F ReferenceError: fib is not defined (only inside)\n",[37,366,368,371,373,376,378],{"class":39,"line":367},30,[37,369,370],{"class":60},"factorial",[37,372,64],{"class":56},[37,374,375],{"class":309},"10",[37,377,346],{"class":56},[37,379,380],{"class":43},"\u002F\u002F works — uses `factorial` from outside or `fib` from inside\n",[37,382,384],{"class":39,"line":383},31,[37,385,93],{"emptyLinePlaceholder":92},[37,387,389],{"class":39,"line":388},32,[37,390,391],{"class":43},"\u002F\u002F ── Anti-pattern: conditional function declaration (not reliable) ──\n",[37,393,395],{"class":39,"line":394},33,[37,396,397],{"class":43},"\u002F\u002F ❌ Function declarations inside if-blocks are hoisted in non-strict mode (inconsistent)\n",[37,399,401,404,407,410],{"class":39,"line":400},34,[37,402,403],{"class":67},"if",[37,405,406],{"class":56}," (",[37,408,409],{"class":309},"true",[37,411,282],{"class":56},[37,413,415,418,421,424,427,430],{"class":39,"line":414},35,[37,416,417],{"class":67}," function",[37,419,420],{"class":60}," f",[37,422,423],{"class":56},"() { ",[37,425,426],{"class":67},"return",[37,428,429],{"class":112}," \"yes\"",[37,431,432],{"class":56},"; }\n",[37,434,436],{"class":39,"line":435},36,[37,437,438],{"class":56},"}\n",[37,440,442,445],{"class":39,"line":441},37,[37,443,444],{"class":43},"\u002F\u002F f();",[37,446,447],{"class":43}," \u002F\u002F Works in some engines, not others — undefined behavior\n",[37,449,451],{"class":39,"line":450},38,[37,452,453],{"class":43},"\u002F\u002F ✅ Use function expressions for conditional assignment:\n",[37,455,457,460],{"class":39,"line":456},39,[37,458,459],{"class":67},"let",[37,461,462],{"class":56}," f2;\n",[37,464,466,468,470,472],{"class":39,"line":465},40,[37,467,403],{"class":67},[37,469,406],{"class":56},[37,471,409],{"class":309},[37,473,282],{"class":56},[37,475,477,480,482,484,486,488,490],{"class":39,"line":476},41,[37,478,479],{"class":60}," f2",[37,481,173],{"class":67},[37,483,176],{"class":67},[37,485,423],{"class":56},[37,487,426],{"class":67},[37,489,429],{"class":112},[37,491,492],{"class":56},"; };\n",[37,494,496],{"class":39,"line":495},42,[37,497,438],{"class":56},[20,499,501,502,504,505],{"id":500},"arrow-functions-lexical-this-and-no-arguments","Arrow Functions: Lexical ",[15,503,17],{}," and No ",[15,506,507],{},"arguments",[25,509,510],{"language":27},[29,511,513],{"className":31,"code":512,"language":27,"meta":33,"style":33},"\u002F\u002F ── Arrow function syntax variants ──\nconst fn1 = (x) => x * 2; \u002F\u002F single param: parens optional\nconst fn2 = x => x * 2; \u002F\u002F no parens needed for single param\nconst fn3 = (a, b) => a + b; \u002F\u002F multiple params: parens required\nconst fn4 = () => 42; \u002F\u002F no params: empty parens required\nconst fn5 = (a, b) => { \u002F\u002F block body: needs return\n const sum = a + b;\n return sum;\n};\nconst fn6 = (a, b) => ({ x: a, y: b }); \u002F\u002F returning object literal: wrap in parens\n\n\u002F\u002F ── Arrow functions have LEXICAL `this` (inherited from enclosing scope) ──\n\u002F\u002F Regular functions: `this` is determined by HOW the function is called\n\u002F\u002F Arrow functions: `this` is determined by WHERE the function is defined (lexical)\n\nfunction Counter() {\n this.count = 0;\n\n \u002F\u002F ── Regular function: `this` is lost when used as a callback ──\n setInterval(function() {\n this.count++; \u002F\u002F ✗ `this` is NOT the Counter instance here\n \u002F\u002F In a regular function called by setInterval, `this` is the global object\n \u002F\u002F (or undefined in strict mode) — NOT the Counter instance\n }, 1000);\n\n \u002F\u002F ── Arrow function: `this` is lexically inherited from Counter ──\n setInterval(() => {\n this.count++; \u002F\u002F ✓ `this` IS the Counter instance (lexical)\n }, 1000);\n}\n\n\u002F\u002F ── Arrow functions have NO `arguments` object ──\nfunction regular() {\n console.log(arguments); \u002F\u002F [Arguments] { '0': 1, '1': 2 } — array-like\n}\nregular(1, 2);\n\nconst arrow = () => {\n \u002F\u002F console.log(arguments); \u002F\u002F ReferenceError: arguments is not defined\n \u002F\u002F Arrow functions don't have their own `arguments` — they use the enclosing scope's\n};\n\u002F\u002F ✅ Use rest params instead (...args):\nconst arrow2 = (...args) => console.log(args); \u002F\u002F [1, 2] — a real Array\narrow2(1, 2);\n\n\u002F\u002F ── Arrow functions have NO `new.target`, NO `prototype`, can't be constructors ──\nconst Arrow = () => {};\n\u002F\u002F new Arrow(); \u002F\u002F TypeError: Arrow is not a constructor\nconsole.log(Arrow.prototype); \u002F\u002F undefined (arrows have no prototype)\n",[15,514,515,520,553,580,615,638,665,682,689,693,720,724,729,734,739,743,753,770,774,779,790,806,811,816,827,831,836,848,861,869,873,877,882,891,907,911,928,932,947,955,960,964,969,1002,1018,1023,1029,1046,1055],{"__ignoreMap":33},[37,516,517],{"class":39,"line":40},[37,518,519],{"class":43},"\u002F\u002F ── Arrow function syntax variants ──\n",[37,521,522,524,527,529,531,534,536,539,542,545,547,550],{"class":39,"line":47},[37,523,263],{"class":67},[37,525,526],{"class":60}," fn1",[37,528,173],{"class":67},[37,530,406],{"class":56},[37,532,533],{"class":278},"x",[37,535,331],{"class":56},[37,537,538],{"class":67},"=>",[37,540,541],{"class":56}," x ",[37,543,544],{"class":67},"*",[37,546,343],{"class":309},[37,548,549],{"class":56},"; ",[37,551,552],{"class":43},"\u002F\u002F single param: parens optional\n",[37,554,555,557,560,562,565,568,570,572,574,577],{"class":39,"line":53},[37,556,263],{"class":67},[37,558,559],{"class":60}," fn2",[37,561,173],{"class":67},[37,563,564],{"class":278}," x",[37,566,567],{"class":67}," =>",[37,569,541],{"class":56},[37,571,544],{"class":67},[37,573,343],{"class":309},[37,575,576],{"class":56},"; ",[37,578,579],{"class":43},"\u002F\u002F no parens needed for single param\n",[37,581,582,584,587,589,591,594,597,600,602,604,607,609,612],{"class":39,"line":77},[37,583,263],{"class":67},[37,585,586],{"class":60}," fn3",[37,588,173],{"class":67},[37,590,406],{"class":56},[37,592,593],{"class":278},"a",[37,595,596],{"class":56},", ",[37,598,599],{"class":278},"b",[37,601,331],{"class":56},[37,603,538],{"class":67},[37,605,606],{"class":56}," a ",[37,608,334],{"class":67},[37,610,611],{"class":56}," b; ",[37,613,614],{"class":43},"\u002F\u002F multiple params: parens required\n",[37,616,617,619,622,624,627,629,632,635],{"class":39,"line":89},[37,618,263],{"class":67},[37,620,621],{"class":60}," fn4",[37,623,173],{"class":67},[37,625,626],{"class":56}," () ",[37,628,538],{"class":67},[37,630,631],{"class":309}," 42",[37,633,634],{"class":56},"; ",[37,636,637],{"class":43},"\u002F\u002F no params: empty parens required\n",[37,639,640,642,645,647,649,651,653,655,657,659,662],{"class":39,"line":96},[37,641,263],{"class":67},[37,643,644],{"class":60}," fn5",[37,646,173],{"class":67},[37,648,406],{"class":56},[37,650,593],{"class":278},[37,652,596],{"class":56},[37,654,599],{"class":278},[37,656,331],{"class":56},[37,658,538],{"class":67},[37,660,661],{"class":56}," { ",[37,663,664],{"class":43},"\u002F\u002F block body: needs return\n",[37,666,667,670,673,675,677,679],{"class":39,"line":122},[37,668,669],{"class":67}," const",[37,671,672],{"class":309}," sum",[37,674,173],{"class":67},[37,676,606],{"class":56},[37,678,334],{"class":67},[37,680,681],{"class":56}," b;\n",[37,683,684,686],{"class":39,"line":127},[37,685,300],{"class":67},[37,687,688],{"class":56}," sum;\n",[37,690,691],{"class":39,"line":133},[37,692,355],{"class":56},[37,694,695,697,700,702,704,706,708,710,712,714,717],{"class":39,"line":150},[37,696,263],{"class":67},[37,698,699],{"class":60}," fn6",[37,701,173],{"class":67},[37,703,406],{"class":56},[37,705,593],{"class":278},[37,707,596],{"class":56},[37,709,599],{"class":278},[37,711,331],{"class":56},[37,713,538],{"class":67},[37,715,716],{"class":56}," ({ x: a, y: b }); ",[37,718,719],{"class":43},"\u002F\u002F returning object literal: wrap in parens\n",[37,721,722],{"class":39,"line":159},[37,723,93],{"emptyLinePlaceholder":92},[37,725,726],{"class":39,"line":164},[37,727,728],{"class":43},"\u002F\u002F ── Arrow functions have LEXICAL `this` (inherited from enclosing scope) ──\n",[37,730,731],{"class":39,"line":193},[37,732,733],{"class":43},"\u002F\u002F Regular functions: `this` is determined by HOW the function is called\n",[37,735,736],{"class":39,"line":202},[37,737,738],{"class":43},"\u002F\u002F Arrow functions: `this` is determined by WHERE the function is defined (lexical)\n",[37,740,741],{"class":39,"line":207},[37,742,93],{"emptyLinePlaceholder":92},[37,744,745,747,750],{"class":39,"line":213},[37,746,99],{"class":67},[37,748,749],{"class":60}," Counter",[37,751,752],{"class":56},"() {\n",[37,754,755,758,761,764,767],{"class":39,"line":219},[37,756,757],{"class":309}," this",[37,759,760],{"class":56},".count ",[37,762,763],{"class":67},"=",[37,765,766],{"class":309}," 0",[37,768,769],{"class":56},";\n",[37,771,772],{"class":39,"line":225},[37,773,93],{"emptyLinePlaceholder":92},[37,775,776],{"class":39,"line":231},[37,777,778],{"class":43}," \u002F\u002F ── Regular function: `this` is lost when used as a callback ──\n",[37,780,781,784,786,788],{"class":39,"line":237},[37,782,783],{"class":60}," setInterval",[37,785,64],{"class":56},[37,787,99],{"class":67},[37,789,752],{"class":56},[37,791,792,795,798,801,803],{"class":39,"line":243},[37,793,794],{"class":309}," this",[37,796,797],{"class":56},".count",[37,799,800],{"class":67},"++",[37,802,549],{"class":56},[37,804,805],{"class":43},"\u002F\u002F ✗ `this` is NOT the Counter instance here\n",[37,807,808],{"class":39,"line":249},[37,809,810],{"class":43}," \u002F\u002F In a regular function called by setInterval, `this` is the global object\n",[37,812,813],{"class":39,"line":254},[37,814,815],{"class":43}," \u002F\u002F (or undefined in strict mode) — NOT the Counter instance\n",[37,817,818,821,824],{"class":39,"line":260},[37,819,820],{"class":56}," }, ",[37,822,823],{"class":309},"1000",[37,825,826],{"class":56},");\n",[37,828,829],{"class":39,"line":285},[37,830,93],{"emptyLinePlaceholder":92},[37,832,833],{"class":39,"line":291},[37,834,835],{"class":43}," \u002F\u002F ── Arrow function: `this` is lexically inherited from Counter ──\n",[37,837,838,840,843,845],{"class":39,"line":297},[37,839,783],{"class":60},[37,841,842],{"class":56},"(() ",[37,844,538],{"class":67},[37,846,847],{"class":56}," {\n",[37,849,850,852,854,856,858],{"class":39,"line":352},[37,851,794],{"class":309},[37,853,797],{"class":56},[37,855,800],{"class":67},[37,857,549],{"class":56},[37,859,860],{"class":43},"\u002F\u002F ✓ `this` IS the Counter instance (lexical)\n",[37,862,863,865,867],{"class":39,"line":358},[37,864,820],{"class":56},[37,866,823],{"class":309},[37,868,826],{"class":56},[37,870,871],{"class":39,"line":367},[37,872,438],{"class":56},[37,874,875],{"class":39,"line":383},[37,876,93],{"emptyLinePlaceholder":92},[37,878,879],{"class":39,"line":388},[37,880,881],{"class":43},"\u002F\u002F ── Arrow functions have NO `arguments` object ──\n",[37,883,884,886,889],{"class":39,"line":394},[37,885,99],{"class":67},[37,887,888],{"class":60}," regular",[37,890,752],{"class":56},[37,892,893,896,898,900,902,904],{"class":39,"line":400},[37,894,895],{"class":56}," console.",[37,897,61],{"class":60},[37,899,64],{"class":56},[37,901,507],{"class":309},[37,903,346],{"class":56},[37,905,906],{"class":43},"\u002F\u002F [Arguments] { '0': 1, '1': 2 } — array-like\n",[37,908,909],{"class":39,"line":414},[37,910,438],{"class":56},[37,912,913,916,918,921,923,926],{"class":39,"line":435},[37,914,915],{"class":60},"regular",[37,917,64],{"class":56},[37,919,920],{"class":309},"1",[37,922,596],{"class":56},[37,924,925],{"class":309},"2",[37,927,826],{"class":56},[37,929,930],{"class":39,"line":441},[37,931,93],{"emptyLinePlaceholder":92},[37,933,934,936,939,941,943,945],{"class":39,"line":450},[37,935,263],{"class":67},[37,937,938],{"class":60}," arrow",[37,940,173],{"class":67},[37,942,626],{"class":56},[37,944,538],{"class":67},[37,946,847],{"class":56},[37,948,949,952],{"class":39,"line":456},[37,950,951],{"class":43}," \u002F\u002F console.log(arguments);",[37,953,954],{"class":43}," \u002F\u002F ReferenceError: arguments is not defined\n",[37,956,957],{"class":39,"line":465},[37,958,959],{"class":43}," \u002F\u002F Arrow functions don't have their own `arguments` — they use the enclosing scope's\n",[37,961,962],{"class":39,"line":476},[37,963,355],{"class":56},[37,965,966],{"class":39,"line":495},[37,967,968],{"class":43},"\u002F\u002F ✅ Use rest params instead (...args):\n",[37,970,972,974,977,979,981,984,987,989,991,994,996,999],{"class":39,"line":971},43,[37,973,263],{"class":67},[37,975,976],{"class":60}," arrow2",[37,978,173],{"class":67},[37,980,406],{"class":56},[37,982,983],{"class":67},"...",[37,985,986],{"class":278},"args",[37,988,331],{"class":56},[37,990,538],{"class":67},[37,992,993],{"class":56}," console.",[37,995,61],{"class":60},[37,997,998],{"class":56},"(args); ",[37,1000,1001],{"class":43},"\u002F\u002F [1, 2] — a real Array\n",[37,1003,1005,1008,1010,1012,1014,1016],{"class":39,"line":1004},44,[37,1006,1007],{"class":60},"arrow2",[37,1009,64],{"class":56},[37,1011,920],{"class":309},[37,1013,596],{"class":56},[37,1015,925],{"class":309},[37,1017,826],{"class":56},[37,1019,1021],{"class":39,"line":1020},45,[37,1022,93],{"emptyLinePlaceholder":92},[37,1024,1026],{"class":39,"line":1025},46,[37,1027,1028],{"class":43},"\u002F\u002F ── Arrow functions have NO `new.target`, NO `prototype`, can't be constructors ──\n",[37,1030,1032,1034,1037,1039,1041,1043],{"class":39,"line":1031},47,[37,1033,263],{"class":67},[37,1035,1036],{"class":60}," Arrow",[37,1038,173],{"class":67},[37,1040,626],{"class":56},[37,1042,538],{"class":67},[37,1044,1045],{"class":56}," {};\n",[37,1047,1049,1052],{"class":39,"line":1048},48,[37,1050,1051],{"class":43},"\u002F\u002F new Arrow();",[37,1053,1054],{"class":43}," \u002F\u002F TypeError: Arrow is not a constructor\n",[37,1056,1058,1060,1062,1064,1067,1070,1073,1075],{"class":39,"line":1057},49,[37,1059,57],{"class":56},[37,1061,61],{"class":60},[37,1063,64],{"class":56},[37,1065,1066],{"class":309},"Arrow",[37,1068,1069],{"class":56},".",[37,1071,1072],{"class":309},"prototype",[37,1074,346],{"class":56},[37,1076,1077],{"class":43},"\u002F\u002F undefined (arrows have no prototype)\n",[20,1079,1081],{"id":1080},"anti-pattern-arrow-functions-as-object-methods","Anti-Pattern: Arrow Functions as Object Methods",[25,1083,1084],{"language":27},[29,1085,1087],{"className":31,"code":1086,"language":27,"meta":33,"style":33},"\u002F\u002F ❌ NAIVE — arrow function as method loses `this` (lexical, not dynamic)\nconst obj = {\n name: \"Alice\",\n greet: () => console.log(`Hi, ${this.name}`), \u002F\u002F this is NOT obj (lexical → outer)\n \u002F\u002F this.name is undefined or window.name (the enclosing scope's this)\n};\nobj.greet(); \u002F\u002F \"Hi, undefined\" (arrow's `this` is the module\u002Fglobal scope, not obj)\n\n\u002F\u002F ✅ CORRECT — regular function or shorthand method syntax for methods\nconst obj2 = {\n name: \"Alice\",\n greet() { console.log(`Hi, ${this.name}`); }, \u002F\u002F method shorthand: dynamic `this`\n};\nobj2.greet(); \u002F\u002F \"Hi, Alice\" (this is obj2 when called as obj2.greet())\n\n\u002F\u002F ── Arrow functions ARE correct for callbacks INSIDE methods ──\nconst obj3 = {\n name: \"Alice\",\n friends: [\"Bob\", \"Charlie\"],\n greetFriends() {\n \u002F\u002F `this` here is obj3 (regular method call)\n this.friends.forEach(friend => {\n \u002F\u002F Arrow inside method: `this` is lexically inherited from greetFriends\n console.log(`${this.name} greets ${friend}`); \u002F\u002F ✓ this.name = \"Alice\"\n });\n },\n};\nobj3.greetFriends(); \u002F\u002F \"Alice greets Bob\" \u002F \"Alice greets Charlie\"\n\n\u002F\u002F ── Rules for arrow vs regular function ──\n\u002F\u002F Use ARROW when:\n\u002F\u002F - You need lexical `this` (callbacks, closures, array methods inside a class\u002Fmethod)\n\u002F\u002F - You don't need `arguments`, `this`, or `new`\n\u002F\u002F - Concise one-liners (map, filter, reduce callbacks)\n\u002F\u002F Use REGULAR when:\n\u002F\u002F - Object methods (need dynamic `this`)\n\u002F\u002F - Constructors (need `new`)\n\u002F\u002F - You need `arguments` (or use rest params instead)\n\u002F\u002F - Event handlers that use `this` (e.g., this.value, this.dataset)\n",[15,1088,1089,1094,1105,1116,1151,1156,1160,1173,1177,1182,1193,1201,1227,1231,1243,1247,1252,1263,1271,1287,1294,1299,1318,1323,1353,1358,1363,1367,1380,1384,1389,1394,1399,1404,1409,1414,1419,1424,1429],{"__ignoreMap":33},[37,1090,1091],{"class":39,"line":40},[37,1092,1093],{"class":43},"\u002F\u002F ❌ NAIVE — arrow function as method loses `this` (lexical, not dynamic)\n",[37,1095,1096,1098,1101,1103],{"class":39,"line":47},[37,1097,263],{"class":67},[37,1099,1100],{"class":309}," obj",[37,1102,173],{"class":67},[37,1104,847],{"class":56},[37,1106,1107,1110,1113],{"class":39,"line":53},[37,1108,1109],{"class":56}," name: ",[37,1111,1112],{"class":112},"\"Alice\"",[37,1114,1115],{"class":56},",\n",[37,1117,1118,1121,1124,1126,1128,1130,1132,1135,1137,1139,1142,1145,1148],{"class":39,"line":77},[37,1119,1120],{"class":60}," greet",[37,1122,1123],{"class":56},": () ",[37,1125,538],{"class":67},[37,1127,993],{"class":56},[37,1129,61],{"class":60},[37,1131,64],{"class":56},[37,1133,1134],{"class":112},"`Hi, ${",[37,1136,17],{"class":309},[37,1138,1069],{"class":112},[37,1140,1141],{"class":56},"name",[37,1143,1144],{"class":112},"}`",[37,1146,1147],{"class":56},"), ",[37,1149,1150],{"class":43},"\u002F\u002F this is NOT obj (lexical → outer)\n",[37,1152,1153],{"class":39,"line":89},[37,1154,1155],{"class":43}," \u002F\u002F this.name is undefined or window.name (the enclosing scope's this)\n",[37,1157,1158],{"class":39,"line":96},[37,1159,355],{"class":56},[37,1161,1162,1165,1167,1170],{"class":39,"line":122},[37,1163,1164],{"class":56},"obj.",[37,1166,80],{"class":60},[37,1168,1169],{"class":56},"(); ",[37,1171,1172],{"class":43},"\u002F\u002F \"Hi, undefined\" (arrow's `this` is the module\u002Fglobal scope, not obj)\n",[37,1174,1175],{"class":39,"line":127},[37,1176,93],{"emptyLinePlaceholder":92},[37,1178,1179],{"class":39,"line":133},[37,1180,1181],{"class":43},"\u002F\u002F ✅ CORRECT — regular function or shorthand method syntax for methods\n",[37,1183,1184,1186,1189,1191],{"class":39,"line":150},[37,1185,263],{"class":67},[37,1187,1188],{"class":309}," obj2",[37,1190,173],{"class":67},[37,1192,847],{"class":56},[37,1194,1195,1197,1199],{"class":39,"line":159},[37,1196,1109],{"class":56},[37,1198,1112],{"class":112},[37,1200,1115],{"class":56},[37,1202,1203,1205,1207,1209,1211,1213,1215,1217,1219,1221,1224],{"class":39,"line":164},[37,1204,1120],{"class":60},[37,1206,105],{"class":56},[37,1208,61],{"class":60},[37,1210,64],{"class":56},[37,1212,1134],{"class":112},[37,1214,17],{"class":309},[37,1216,1069],{"class":112},[37,1218,1141],{"class":56},[37,1220,1144],{"class":112},[37,1222,1223],{"class":56},"); }, ",[37,1225,1226],{"class":43},"\u002F\u002F method shorthand: dynamic `this`\n",[37,1228,1229],{"class":39,"line":193},[37,1230,355],{"class":56},[37,1232,1233,1236,1238,1240],{"class":39,"line":202},[37,1234,1235],{"class":56},"obj2.",[37,1237,80],{"class":60},[37,1239,1169],{"class":56},[37,1241,1242],{"class":43},"\u002F\u002F \"Hi, Alice\" (this is obj2 when called as obj2.greet())\n",[37,1244,1245],{"class":39,"line":207},[37,1246,93],{"emptyLinePlaceholder":92},[37,1248,1249],{"class":39,"line":213},[37,1250,1251],{"class":43},"\u002F\u002F ── Arrow functions ARE correct for callbacks INSIDE methods ──\n",[37,1253,1254,1256,1259,1261],{"class":39,"line":219},[37,1255,263],{"class":67},[37,1257,1258],{"class":309}," obj3",[37,1260,173],{"class":67},[37,1262,847],{"class":56},[37,1264,1265,1267,1269],{"class":39,"line":225},[37,1266,1109],{"class":56},[37,1268,1112],{"class":112},[37,1270,1115],{"class":56},[37,1272,1273,1276,1279,1281,1284],{"class":39,"line":231},[37,1274,1275],{"class":56}," friends: [",[37,1277,1278],{"class":112},"\"Bob\"",[37,1280,596],{"class":56},[37,1282,1283],{"class":112},"\"Charlie\"",[37,1285,1286],{"class":56},"],\n",[37,1288,1289,1292],{"class":39,"line":237},[37,1290,1291],{"class":60}," greetFriends",[37,1293,752],{"class":56},[37,1295,1296],{"class":39,"line":243},[37,1297,1298],{"class":43}," \u002F\u002F `this` here is obj3 (regular method call)\n",[37,1300,1301,1303,1306,1309,1311,1314,1316],{"class":39,"line":249},[37,1302,794],{"class":309},[37,1304,1305],{"class":56},".friends.",[37,1307,1308],{"class":60},"forEach",[37,1310,64],{"class":56},[37,1312,1313],{"class":278},"friend",[37,1315,567],{"class":67},[37,1317,847],{"class":56},[37,1319,1320],{"class":39,"line":254},[37,1321,1322],{"class":43}," \u002F\u002F Arrow inside method: `this` is lexically inherited from greetFriends\n",[37,1324,1325,1328,1330,1332,1335,1337,1339,1341,1344,1346,1348,1350],{"class":39,"line":260},[37,1326,1327],{"class":56}," console.",[37,1329,61],{"class":60},[37,1331,64],{"class":56},[37,1333,1334],{"class":112},"`${",[37,1336,17],{"class":309},[37,1338,1069],{"class":112},[37,1340,1141],{"class":56},[37,1342,1343],{"class":112},"} greets ${",[37,1345,1313],{"class":56},[37,1347,1144],{"class":112},[37,1349,346],{"class":56},[37,1351,1352],{"class":43},"\u002F\u002F ✓ this.name = \"Alice\"\n",[37,1354,1355],{"class":39,"line":285},[37,1356,1357],{"class":56}," });\n",[37,1359,1360],{"class":39,"line":291},[37,1361,1362],{"class":56}," },\n",[37,1364,1365],{"class":39,"line":297},[37,1366,355],{"class":56},[37,1368,1369,1372,1375,1377],{"class":39,"line":352},[37,1370,1371],{"class":56},"obj3.",[37,1373,1374],{"class":60},"greetFriends",[37,1376,1169],{"class":56},[37,1378,1379],{"class":43},"\u002F\u002F \"Alice greets Bob\" \u002F \"Alice greets Charlie\"\n",[37,1381,1382],{"class":39,"line":358},[37,1383,93],{"emptyLinePlaceholder":92},[37,1385,1386],{"class":39,"line":367},[37,1387,1388],{"class":43},"\u002F\u002F ── Rules for arrow vs regular function ──\n",[37,1390,1391],{"class":39,"line":383},[37,1392,1393],{"class":43},"\u002F\u002F Use ARROW when:\n",[37,1395,1396],{"class":39,"line":388},[37,1397,1398],{"class":43},"\u002F\u002F - You need lexical `this` (callbacks, closures, array methods inside a class\u002Fmethod)\n",[37,1400,1401],{"class":39,"line":394},[37,1402,1403],{"class":43},"\u002F\u002F - You don't need `arguments`, `this`, or `new`\n",[37,1405,1406],{"class":39,"line":400},[37,1407,1408],{"class":43},"\u002F\u002F - Concise one-liners (map, filter, reduce callbacks)\n",[37,1410,1411],{"class":39,"line":414},[37,1412,1413],{"class":43},"\u002F\u002F Use REGULAR when:\n",[37,1415,1416],{"class":39,"line":435},[37,1417,1418],{"class":43},"\u002F\u002F - Object methods (need dynamic `this`)\n",[37,1420,1421],{"class":39,"line":441},[37,1422,1423],{"class":43},"\u002F\u002F - Constructors (need `new`)\n",[37,1425,1426],{"class":39,"line":450},[37,1427,1428],{"class":43},"\u002F\u002F - You need `arguments` (or use rest params instead)\n",[37,1430,1431],{"class":39,"line":456},[37,1432,1433],{"class":43},"\u002F\u002F - Event handlers that use `this` (e.g., this.value, this.dataset)\n",[20,1435,1437,1439],{"id":1436},"arguments-object-vs-rest-parameters",[15,1438,507],{}," Object vs Rest Parameters",[25,1441,1442],{"language":27},[29,1443,1445],{"className":31,"code":1444,"language":27,"meta":33,"style":33},"\u002F\u002F ── arguments: array-LIKE (not a real Array) — available in regular functions ──\nfunction sum() {\n console.log(arguments.length); \u002F\u002F 3\n console.log(arguments[0]); \u002F\u002F 1\n \u002F\u002F arguments.map(x => x * 2); \u002F\u002F ✗ TypeError: arguments.map is not a function\n \u002F\u002F arguments is NOT an Array — no .map, .filter, .reduce, etc.\n\n \u002F\u002F Convert to real array (pre-ES6):\n const args = Array.prototype.slice.call(arguments);\n \u002F\u002F or: Array.from(arguments);\n return args.reduce((a, b) => a + b, 0);\n}\nsum(1, 2, 3); \u002F\u002F 6\n\n\u002F\u002F ── Rest parameters (...args): a REAL Array — always prefer this ──\nfunction sumRest(...args) {\n console.log(args.length); \u002F\u002F 3\n console.log(args.map(x => x * 2)); \u002F\u002F [2, 4, 6] — real Array, all methods available\n return args.reduce((a, b) => a + b, 0);\n}\nsumRest(1, 2, 3); \u002F\u002F 6\n\n\u002F\u002F ── Rest params must be LAST; can coexist with named params ──\nfunction log(first, second, ...rest) {\n console.log(first, second, rest);\n}\nlog(1, 2, 3, 4, 5); \u002F\u002F 1 2 [3, 4, 5]\n\n\u002F\u002F ── arguments is dynamic (tracks the caller's arguments); rest params are static ──\nfunction dynamic() {\n console.log(arguments[0]); \u002F\u002F 1\n arguments[0] = 99; \u002F\u002F mutating arguments mutates the caller's argument!\n \u002F\u002F (Only in non-strict mode. In strict mode, arguments is a copy.)\n}\nlet x = 1;\ndynamic(x);\nconsole.log(x); \u002F\u002F 99 (non-strict) or 1 (strict — arguments is a copy)\n",[15,1446,1447,1452,1460,1481,1503,1511,1516,1520,1525,1553,1558,1592,1596,1619,1623,1628,1643,1659,1688,1718,1722,1743,1747,1752,1778,1787,1791,1822,1826,1831,1840,1859,1881,1886,1890,1902,1910],{"__ignoreMap":33},[37,1448,1449],{"class":39,"line":40},[37,1450,1451],{"class":43},"\u002F\u002F ── arguments: array-LIKE (not a real Array) — available in regular functions ──\n",[37,1453,1454,1456,1458],{"class":39,"line":47},[37,1455,99],{"class":67},[37,1457,672],{"class":60},[37,1459,752],{"class":56},[37,1461,1462,1464,1466,1468,1470,1472,1475,1478],{"class":39,"line":53},[37,1463,895],{"class":56},[37,1465,61],{"class":60},[37,1467,64],{"class":56},[37,1469,507],{"class":309},[37,1471,1069],{"class":56},[37,1473,1474],{"class":309},"length",[37,1476,1477],{"class":56},"); ",[37,1479,1480],{"class":43},"\u002F\u002F 3\n",[37,1482,1483,1485,1487,1489,1491,1494,1497,1500],{"class":39,"line":77},[37,1484,895],{"class":56},[37,1486,61],{"class":60},[37,1488,64],{"class":56},[37,1490,507],{"class":309},[37,1492,1493],{"class":56},"[",[37,1495,1496],{"class":309},"0",[37,1498,1499],{"class":56},"]); ",[37,1501,1502],{"class":43},"\u002F\u002F 1\n",[37,1504,1505,1508],{"class":39,"line":89},[37,1506,1507],{"class":43}," \u002F\u002F arguments.map(x => x * 2);",[37,1509,1510],{"class":43}," \u002F\u002F ✗ TypeError: arguments.map is not a function\n",[37,1512,1513],{"class":39,"line":96},[37,1514,1515],{"class":43}," \u002F\u002F arguments is NOT an Array — no .map, .filter, .reduce, etc.\n",[37,1517,1518],{"class":39,"line":122},[37,1519,93],{"emptyLinePlaceholder":92},[37,1521,1522],{"class":39,"line":127},[37,1523,1524],{"class":43}," \u002F\u002F Convert to real array (pre-ES6):\n",[37,1526,1527,1529,1532,1534,1537,1539,1541,1544,1547,1549,1551],{"class":39,"line":133},[37,1528,669],{"class":67},[37,1530,1531],{"class":309}," args",[37,1533,173],{"class":67},[37,1535,1536],{"class":309}," Array",[37,1538,1069],{"class":56},[37,1540,1072],{"class":309},[37,1542,1543],{"class":56},".slice.",[37,1545,1546],{"class":60},"call",[37,1548,64],{"class":56},[37,1550,507],{"class":309},[37,1552,826],{"class":56},[37,1554,1555],{"class":39,"line":150},[37,1556,1557],{"class":43}," \u002F\u002F or: Array.from(arguments);\n",[37,1559,1560,1562,1565,1568,1571,1573,1575,1577,1579,1581,1583,1585,1588,1590],{"class":39,"line":159},[37,1561,300],{"class":67},[37,1563,1564],{"class":56}," args.",[37,1566,1567],{"class":60},"reduce",[37,1569,1570],{"class":56},"((",[37,1572,593],{"class":278},[37,1574,596],{"class":56},[37,1576,599],{"class":278},[37,1578,331],{"class":56},[37,1580,538],{"class":67},[37,1582,606],{"class":56},[37,1584,334],{"class":67},[37,1586,1587],{"class":56}," b, ",[37,1589,1496],{"class":309},[37,1591,826],{"class":56},[37,1593,1594],{"class":39,"line":164},[37,1595,438],{"class":56},[37,1597,1598,1601,1603,1605,1607,1609,1611,1614,1616],{"class":39,"line":193},[37,1599,1600],{"class":60},"sum",[37,1602,64],{"class":56},[37,1604,920],{"class":309},[37,1606,596],{"class":56},[37,1608,925],{"class":309},[37,1610,596],{"class":56},[37,1612,1613],{"class":309},"3",[37,1615,346],{"class":56},[37,1617,1618],{"class":43},"\u002F\u002F 6\n",[37,1620,1621],{"class":39,"line":202},[37,1622,93],{"emptyLinePlaceholder":92},[37,1624,1625],{"class":39,"line":207},[37,1626,1627],{"class":43},"\u002F\u002F ── Rest parameters (...args): a REAL Array — always prefer this ──\n",[37,1629,1630,1632,1635,1637,1639,1641],{"class":39,"line":213},[37,1631,99],{"class":67},[37,1633,1634],{"class":60}," sumRest",[37,1636,64],{"class":56},[37,1638,983],{"class":67},[37,1640,986],{"class":278},[37,1642,282],{"class":56},[37,1644,1645,1647,1649,1652,1654,1657],{"class":39,"line":219},[37,1646,895],{"class":56},[37,1648,61],{"class":60},[37,1650,1651],{"class":56},"(args.",[37,1653,1474],{"class":309},[37,1655,1656],{"class":56},"); ",[37,1658,1480],{"class":43},[37,1660,1661,1663,1665,1667,1670,1672,1674,1676,1678,1680,1682,1685],{"class":39,"line":225},[37,1662,895],{"class":56},[37,1664,61],{"class":60},[37,1666,1651],{"class":56},[37,1668,1669],{"class":60},"map",[37,1671,64],{"class":56},[37,1673,533],{"class":278},[37,1675,567],{"class":67},[37,1677,541],{"class":56},[37,1679,544],{"class":67},[37,1681,343],{"class":309},[37,1683,1684],{"class":56},")); ",[37,1686,1687],{"class":43},"\u002F\u002F [2, 4, 6] — real Array, all methods available\n",[37,1689,1690,1692,1694,1696,1698,1700,1702,1704,1706,1708,1710,1712,1714,1716],{"class":39,"line":231},[37,1691,300],{"class":67},[37,1693,1564],{"class":56},[37,1695,1567],{"class":60},[37,1697,1570],{"class":56},[37,1699,593],{"class":278},[37,1701,596],{"class":56},[37,1703,599],{"class":278},[37,1705,331],{"class":56},[37,1707,538],{"class":67},[37,1709,606],{"class":56},[37,1711,334],{"class":67},[37,1713,1587],{"class":56},[37,1715,1496],{"class":309},[37,1717,826],{"class":56},[37,1719,1720],{"class":39,"line":237},[37,1721,438],{"class":56},[37,1723,1724,1727,1729,1731,1733,1735,1737,1739,1741],{"class":39,"line":243},[37,1725,1726],{"class":60},"sumRest",[37,1728,64],{"class":56},[37,1730,920],{"class":309},[37,1732,596],{"class":56},[37,1734,925],{"class":309},[37,1736,596],{"class":56},[37,1738,1613],{"class":309},[37,1740,346],{"class":56},[37,1742,1618],{"class":43},[37,1744,1745],{"class":39,"line":249},[37,1746,93],{"emptyLinePlaceholder":92},[37,1748,1749],{"class":39,"line":254},[37,1750,1751],{"class":43},"\u002F\u002F ── Rest params must be LAST; can coexist with named params ──\n",[37,1753,1754,1756,1759,1761,1764,1766,1769,1771,1773,1776],{"class":39,"line":260},[37,1755,99],{"class":67},[37,1757,1758],{"class":60}," log",[37,1760,64],{"class":56},[37,1762,1763],{"class":278},"first",[37,1765,596],{"class":56},[37,1767,1768],{"class":278},"second",[37,1770,596],{"class":56},[37,1772,983],{"class":67},[37,1774,1775],{"class":278},"rest",[37,1777,282],{"class":56},[37,1779,1780,1782,1784],{"class":39,"line":285},[37,1781,895],{"class":56},[37,1783,61],{"class":60},[37,1785,1786],{"class":56},"(first, second, rest);\n",[37,1788,1789],{"class":39,"line":291},[37,1790,438],{"class":56},[37,1792,1793,1795,1797,1799,1801,1803,1805,1807,1809,1812,1814,1817,1819],{"class":39,"line":297},[37,1794,61],{"class":60},[37,1796,64],{"class":56},[37,1798,920],{"class":309},[37,1800,596],{"class":56},[37,1802,925],{"class":309},[37,1804,596],{"class":56},[37,1806,1613],{"class":309},[37,1808,596],{"class":56},[37,1810,1811],{"class":309},"4",[37,1813,596],{"class":56},[37,1815,1816],{"class":309},"5",[37,1818,346],{"class":56},[37,1820,1821],{"class":43},"\u002F\u002F 1 2 [3, 4, 5]\n",[37,1823,1824],{"class":39,"line":352},[37,1825,93],{"emptyLinePlaceholder":92},[37,1827,1828],{"class":39,"line":358},[37,1829,1830],{"class":43},"\u002F\u002F ── arguments is dynamic (tracks the caller's arguments); rest params are static ──\n",[37,1832,1833,1835,1838],{"class":39,"line":367},[37,1834,99],{"class":67},[37,1836,1837],{"class":60}," dynamic",[37,1839,752],{"class":56},[37,1841,1842,1844,1846,1848,1850,1852,1854,1857],{"class":39,"line":383},[37,1843,895],{"class":56},[37,1845,61],{"class":60},[37,1847,64],{"class":56},[37,1849,507],{"class":309},[37,1851,1493],{"class":56},[37,1853,1496],{"class":309},[37,1855,1856],{"class":56},"]); ",[37,1858,1502],{"class":43},[37,1860,1861,1864,1866,1868,1871,1873,1876,1878],{"class":39,"line":388},[37,1862,1863],{"class":309}," arguments",[37,1865,1493],{"class":56},[37,1867,1496],{"class":309},[37,1869,1870],{"class":56},"] ",[37,1872,763],{"class":67},[37,1874,1875],{"class":309}," 99",[37,1877,549],{"class":56},[37,1879,1880],{"class":43},"\u002F\u002F mutating arguments mutates the caller's argument!\n",[37,1882,1883],{"class":39,"line":394},[37,1884,1885],{"class":43}," \u002F\u002F (Only in non-strict mode. In strict mode, arguments is a copy.)\n",[37,1887,1888],{"class":39,"line":400},[37,1889,438],{"class":56},[37,1891,1892,1894,1896,1898,1900],{"class":39,"line":414},[37,1893,459],{"class":67},[37,1895,541],{"class":56},[37,1897,763],{"class":67},[37,1899,310],{"class":309},[37,1901,769],{"class":56},[37,1903,1904,1907],{"class":39,"line":435},[37,1905,1906],{"class":60},"dynamic",[37,1908,1909],{"class":56},"(x);\n",[37,1911,1912,1914,1916,1919],{"class":39,"line":441},[37,1913,57],{"class":56},[37,1915,61],{"class":60},[37,1917,1918],{"class":56},"(x); ",[37,1920,1921],{"class":43},"\u002F\u002F 99 (non-strict) or 1 (strict — arguments is a copy)\n",[20,1923,1925],{"id":1924},"default-parameters-and-the-tdz","Default Parameters and the TDZ",[25,1927,1928],{"language":27},[29,1929,1931],{"className":31,"code":1930,"language":27,"meta":33,"style":33},"\u002F\u002F ── Default parameters: evaluated at CALL TIME (not definition time) ──\nfunction greet(name = \"World\", greeting = \"Hello\") {\n console.log(`${greeting}, ${name}!`);\n}\ngreet(); \u002F\u002F \"Hello, World!\" (both defaults)\ngreet(\"Alice\"); \u002F\u002F \"Hello, Alice!\" (greeting uses default)\ngreet(\"Alice\", \"Hi\"); \u002F\u002F \"Hi, Alice!\"\ngreet(undefined, \"Hi\"); \u002F\u002F \"Hi, World!\" (undefined triggers default, not null)\n\n\u002F\u002F ⚠️ null does NOT trigger default (only undefined does)\ngreet(null, \"Hi\"); \u002F\u002F \"Hi, null!\" (null is kept, not replaced with \"World\")\n\n\u002F\u002F ── Default params can reference earlier params (left-to-right) ──\nfunction createRange(start, end = start + 10) {\n return [start, end];\n}\ncreateRange(5); \u002F\u002F [5, 15] — end defaults to start + 10\n\n\u002F\u002F ── ⚠️ Later params can't be referenced by earlier defaults (TDZ) ──\nfunction bad(a = b, b = 10) { \u002F\u002F b is in TDZ when a's default is evaluated\n return a + b;\n}\n\u002F\u002F bad(); \u002F\u002F ReferenceError: Cannot access 'b' before initialization (TDZ)\nbad(undefined, 20); \u002F\u002F works: a=undefined→b's default? No, a=undefined → a's default=b→TDZ!\n\u002F\u002F Actually: bad(undefined, 20) → a's default is `b`, but b=20 is passed, so a=b=20? No:\n\u002F\u002F When a=undefined triggers a's default (b), b is not yet initialized (TDZ) → ReferenceError\nbad(1); \u002F\u002F a=1, b=10 (b's default, no TDZ issue since a has a value)\n\n\u002F\u002F ── Default param with function (evaluated at call time, not definition) ──\nfunction withDate(data, timestamp = Date.now()) {\n return { data, timestamp };\n}\n\u002F\u002F Each call gets a fresh Date.now() (default evaluated at call time, not definition)\n\n\u002F\u002F ── Default param with destructuring ──\nfunction process({ port = 3000, host = \"localhost\" } = {}) {\n \u002F\u002F The = {} default is for the WHOLE parameter (if no arg is passed)\n console.log(`${host}:${port}`);\n}\nprocess(); \u002F\u002F \"localhost:3000\" (entire param defaults to {})\nprocess({}); \u002F\u002F \"localhost:3000\" (empty object → inner defaults)\nprocess({ port: 8080 }); \u002F\u002F \"localhost:8080\"\n",[15,1932,1933,1938,1965,1987,1991,2001,2015,2033,2051,2055,2060,2078,2082,2087,2116,2123,2127,2141,2145,2150,2177,2187,2191,2199,2218,2223,2228,2241,2245,2250,2278,2285,2289,2294,2298,2303,2339,2344,2365,2369,2379,2389],{"__ignoreMap":33},[37,1934,1935],{"class":39,"line":40},[37,1936,1937],{"class":43},"\u002F\u002F ── Default parameters: evaluated at CALL TIME (not definition time) ──\n",[37,1939,1940,1942,1944,1946,1948,1950,1953,1955,1958,1960,1963],{"class":39,"line":47},[37,1941,99],{"class":67},[37,1943,102],{"class":60},[37,1945,64],{"class":56},[37,1947,1141],{"class":278},[37,1949,173],{"class":67},[37,1951,1952],{"class":112}," \"World\"",[37,1954,596],{"class":56},[37,1956,1957],{"class":278},"greeting",[37,1959,173],{"class":67},[37,1961,1962],{"class":112}," \"Hello\"",[37,1964,282],{"class":56},[37,1966,1967,1969,1971,1973,1975,1977,1980,1982,1985],{"class":39,"line":53},[37,1968,895],{"class":56},[37,1970,61],{"class":60},[37,1972,64],{"class":56},[37,1974,1334],{"class":112},[37,1976,1957],{"class":56},[37,1978,1979],{"class":112},"}, ${",[37,1981,1141],{"class":56},[37,1983,1984],{"class":112},"}!`",[37,1986,826],{"class":56},[37,1988,1989],{"class":39,"line":77},[37,1990,438],{"class":56},[37,1992,1993,1995,1998],{"class":39,"line":89},[37,1994,80],{"class":60},[37,1996,1997],{"class":56},"(); ",[37,1999,2000],{"class":43},"\u002F\u002F \"Hello, World!\" (both defaults)\n",[37,2002,2003,2005,2007,2009,2012],{"class":39,"line":96},[37,2004,80],{"class":60},[37,2006,64],{"class":56},[37,2008,1112],{"class":112},[37,2010,2011],{"class":56},"); ",[37,2013,2014],{"class":43},"\u002F\u002F \"Hello, Alice!\" (greeting uses default)\n",[37,2016,2017,2019,2021,2023,2025,2028,2030],{"class":39,"line":122},[37,2018,80],{"class":60},[37,2020,64],{"class":56},[37,2022,1112],{"class":112},[37,2024,596],{"class":56},[37,2026,2027],{"class":112},"\"Hi\"",[37,2029,346],{"class":56},[37,2031,2032],{"class":43},"\u002F\u002F \"Hi, Alice!\"\n",[37,2034,2035,2037,2039,2042,2044,2046,2048],{"class":39,"line":127},[37,2036,80],{"class":60},[37,2038,64],{"class":56},[37,2040,2041],{"class":309},"undefined",[37,2043,596],{"class":56},[37,2045,2027],{"class":112},[37,2047,346],{"class":56},[37,2049,2050],{"class":43},"\u002F\u002F \"Hi, World!\" (undefined triggers default, not null)\n",[37,2052,2053],{"class":39,"line":133},[37,2054,93],{"emptyLinePlaceholder":92},[37,2056,2057],{"class":39,"line":150},[37,2058,2059],{"class":43},"\u002F\u002F ⚠️ null does NOT trigger default (only undefined does)\n",[37,2061,2062,2064,2066,2069,2071,2073,2075],{"class":39,"line":159},[37,2063,80],{"class":60},[37,2065,64],{"class":56},[37,2067,2068],{"class":309},"null",[37,2070,596],{"class":56},[37,2072,2027],{"class":112},[37,2074,346],{"class":56},[37,2076,2077],{"class":43},"\u002F\u002F \"Hi, null!\" (null is kept, not replaced with \"World\")\n",[37,2079,2080],{"class":39,"line":164},[37,2081,93],{"emptyLinePlaceholder":92},[37,2083,2084],{"class":39,"line":193},[37,2085,2086],{"class":43},"\u002F\u002F ── Default params can reference earlier params (left-to-right) ──\n",[37,2088,2089,2091,2094,2096,2099,2101,2104,2106,2109,2111,2114],{"class":39,"line":202},[37,2090,99],{"class":67},[37,2092,2093],{"class":60}," createRange",[37,2095,64],{"class":56},[37,2097,2098],{"class":278},"start",[37,2100,596],{"class":56},[37,2102,2103],{"class":278},"end",[37,2105,173],{"class":67},[37,2107,2108],{"class":56}," start ",[37,2110,334],{"class":67},[37,2112,2113],{"class":309}," 10",[37,2115,282],{"class":56},[37,2117,2118,2120],{"class":39,"line":207},[37,2119,300],{"class":67},[37,2121,2122],{"class":56}," [start, end];\n",[37,2124,2125],{"class":39,"line":213},[37,2126,438],{"class":56},[37,2128,2129,2132,2134,2136,2138],{"class":39,"line":219},[37,2130,2131],{"class":60},"createRange",[37,2133,64],{"class":56},[37,2135,1816],{"class":309},[37,2137,346],{"class":56},[37,2139,2140],{"class":43},"\u002F\u002F [5, 15] — end defaults to start + 10\n",[37,2142,2143],{"class":39,"line":225},[37,2144,93],{"emptyLinePlaceholder":92},[37,2146,2147],{"class":39,"line":231},[37,2148,2149],{"class":43},"\u002F\u002F ── ⚠️ Later params can't be referenced by earlier defaults (TDZ) ──\n",[37,2151,2152,2154,2157,2159,2161,2163,2165,2167,2169,2171,2174],{"class":39,"line":237},[37,2153,99],{"class":67},[37,2155,2156],{"class":60}," bad",[37,2158,64],{"class":56},[37,2160,593],{"class":278},[37,2162,173],{"class":67},[37,2164,1587],{"class":56},[37,2166,599],{"class":278},[37,2168,173],{"class":67},[37,2170,2113],{"class":309},[37,2172,2173],{"class":56},") { ",[37,2175,2176],{"class":43},"\u002F\u002F b is in TDZ when a's default is evaluated\n",[37,2178,2179,2181,2183,2185],{"class":39,"line":243},[37,2180,300],{"class":67},[37,2182,606],{"class":56},[37,2184,334],{"class":67},[37,2186,681],{"class":56},[37,2188,2189],{"class":39,"line":249},[37,2190,438],{"class":56},[37,2192,2193,2196],{"class":39,"line":254},[37,2194,2195],{"class":43},"\u002F\u002F bad();",[37,2197,2198],{"class":43}," \u002F\u002F ReferenceError: Cannot access 'b' before initialization (TDZ)\n",[37,2200,2201,2204,2206,2208,2210,2213,2215],{"class":39,"line":260},[37,2202,2203],{"class":60},"bad",[37,2205,64],{"class":56},[37,2207,2041],{"class":309},[37,2209,596],{"class":56},[37,2211,2212],{"class":309},"20",[37,2214,346],{"class":56},[37,2216,2217],{"class":43},"\u002F\u002F works: a=undefined→b's default? No, a=undefined → a's default=b→TDZ!\n",[37,2219,2220],{"class":39,"line":285},[37,2221,2222],{"class":43},"\u002F\u002F Actually: bad(undefined, 20) → a's default is `b`, but b=20 is passed, so a=b=20? No:\n",[37,2224,2225],{"class":39,"line":291},[37,2226,2227],{"class":43},"\u002F\u002F When a=undefined triggers a's default (b), b is not yet initialized (TDZ) → ReferenceError\n",[37,2229,2230,2232,2234,2236,2238],{"class":39,"line":297},[37,2231,2203],{"class":60},[37,2233,64],{"class":56},[37,2235,920],{"class":309},[37,2237,346],{"class":56},[37,2239,2240],{"class":43},"\u002F\u002F a=1, b=10 (b's default, no TDZ issue since a has a value)\n",[37,2242,2243],{"class":39,"line":352},[37,2244,93],{"emptyLinePlaceholder":92},[37,2246,2247],{"class":39,"line":358},[37,2248,2249],{"class":43},"\u002F\u002F ── Default param with function (evaluated at call time, not definition) ──\n",[37,2251,2252,2254,2257,2259,2262,2264,2267,2269,2272,2275],{"class":39,"line":367},[37,2253,99],{"class":67},[37,2255,2256],{"class":60}," withDate",[37,2258,64],{"class":56},[37,2260,2261],{"class":278},"data",[37,2263,596],{"class":56},[37,2265,2266],{"class":278},"timestamp",[37,2268,173],{"class":67},[37,2270,2271],{"class":56}," Date.",[37,2273,2274],{"class":60},"now",[37,2276,2277],{"class":56},"()) {\n",[37,2279,2280,2282],{"class":39,"line":383},[37,2281,300],{"class":67},[37,2283,2284],{"class":56}," { data, timestamp };\n",[37,2286,2287],{"class":39,"line":388},[37,2288,438],{"class":56},[37,2290,2291],{"class":39,"line":394},[37,2292,2293],{"class":43},"\u002F\u002F Each call gets a fresh Date.now() (default evaluated at call time, not definition)\n",[37,2295,2296],{"class":39,"line":400},[37,2297,93],{"emptyLinePlaceholder":92},[37,2299,2300],{"class":39,"line":414},[37,2301,2302],{"class":43},"\u002F\u002F ── Default param with destructuring ──\n",[37,2304,2305,2307,2310,2313,2316,2318,2321,2323,2326,2328,2331,2334,2336],{"class":39,"line":435},[37,2306,99],{"class":67},[37,2308,2309],{"class":60}," process",[37,2311,2312],{"class":56},"({ ",[37,2314,2315],{"class":278},"port",[37,2317,173],{"class":67},[37,2319,2320],{"class":309}," 3000",[37,2322,596],{"class":56},[37,2324,2325],{"class":278},"host",[37,2327,173],{"class":67},[37,2329,2330],{"class":112}," \"localhost\"",[37,2332,2333],{"class":56}," } ",[37,2335,763],{"class":67},[37,2337,2338],{"class":56}," {}) {\n",[37,2340,2341],{"class":39,"line":441},[37,2342,2343],{"class":43}," \u002F\u002F The = {} default is for the WHOLE parameter (if no arg is passed)\n",[37,2345,2346,2348,2350,2352,2354,2356,2359,2361,2363],{"class":39,"line":450},[37,2347,895],{"class":56},[37,2349,61],{"class":60},[37,2351,64],{"class":56},[37,2353,1334],{"class":112},[37,2355,2325],{"class":56},[37,2357,2358],{"class":112},"}:${",[37,2360,2315],{"class":56},[37,2362,1144],{"class":112},[37,2364,826],{"class":56},[37,2366,2367],{"class":39,"line":456},[37,2368,438],{"class":56},[37,2370,2371,2374,2376],{"class":39,"line":465},[37,2372,2373],{"class":60},"process",[37,2375,1997],{"class":56},[37,2377,2378],{"class":43},"\u002F\u002F \"localhost:3000\" (entire param defaults to {})\n",[37,2380,2381,2383,2386],{"class":39,"line":476},[37,2382,2373],{"class":60},[37,2384,2385],{"class":56},"({}); ",[37,2387,2388],{"class":43},"\u002F\u002F \"localhost:3000\" (empty object → inner defaults)\n",[37,2390,2391,2393,2396,2399,2402],{"class":39,"line":495},[37,2392,2373],{"class":60},[37,2394,2395],{"class":56},"({ port: ",[37,2397,2398],{"class":309},"8080",[37,2400,2401],{"class":56}," }); ",[37,2403,2404],{"class":43},"\u002F\u002F \"localhost:8080\"\n",[20,2406,2408],{"id":2407},"iife-immediately-invoked-function-expression","IIFE: Immediately Invoked Function Expression",[25,2410,2411],{"language":27},[29,2412,2414],{"className":31,"code":2413,"language":27,"meta":33,"style":33},"\u002F\u002F ── IIFE: creates a private scope, runs immediately (pre-ES6 module pattern) ──\n\u002F\u002F Pre-ES6, there were no block-scoped variables (only var, which is function-scoped).\n\u002F\u002F IIFEs were used to create private scopes and avoid polluting the global namespace.\n\n\u002F\u002F ── Standard IIFE ──\n(function() {\n var privateVar = \"secret\"; \u002F\u002F not accessible outside the IIFE\n console.log(\"runs immediately\");\n})();\n\n\u002F\u002F ── Arrow IIFE ──\n(() => {\n const privateVar = \"secret\";\n console.log(\"runs immediately\");\n})();\n\n\u002F\u002F ── IIFE with parameters ──\n(function(name, greeting) {\n console.log(`${greeting}, ${name}!`);\n})(\"Alice\", \"Hello\");\n\n\u002F\u002F ── Module pattern: IIFE returning an object (revealing module pattern) ──\nconst Counter = (function() {\n let count = 0; \u002F\u002F private (closure over the IIFE's scope)\n\n return {\n increment: () => ++count,\n decrement: () => --count,\n getCount: () => count, \u002F\u002F public API exposing private state\n \u002F\u002F count is only accessible through these methods (encapsulation)\n };\n})();\nCounter.increment();\nCounter.getCount(); \u002F\u002F 1\n\u002F\u002F Counter.count; \u002F\u002F undefined — not accessible (private)\n\n\u002F\u002F ── Modern: ES modules replace IIFEs for scope isolation ──\n\u002F\u002F Each ES module has its own scope — no need for IIFEs for privacy.\n\u002F\u002F IIFEs are still useful for:\n\u002F\u002F - One-off scope isolation in non-module scripts\n\u002F\u002F - Avoiding global pollution in bookmarklets\u002Finline scripts\n\u002F\u002F - Creating async scopes: (async () => { await ... })();\n",[15,2415,2416,2421,2426,2431,2435,2440,2448,2467,2480,2485,2489,2494,2502,2515,2527,2531,2535,2540,2556,2576,2590,2594,2599,2613,2630,2634,2640,2655,2669,2684,2689,2694,2698,2709,2720,2728,2732,2737,2742,2747,2752,2757],{"__ignoreMap":33},[37,2417,2418],{"class":39,"line":40},[37,2419,2420],{"class":43},"\u002F\u002F ── IIFE: creates a private scope, runs immediately (pre-ES6 module pattern) ──\n",[37,2422,2423],{"class":39,"line":47},[37,2424,2425],{"class":43},"\u002F\u002F Pre-ES6, there were no block-scoped variables (only var, which is function-scoped).\n",[37,2427,2428],{"class":39,"line":53},[37,2429,2430],{"class":43},"\u002F\u002F IIFEs were used to create private scopes and avoid polluting the global namespace.\n",[37,2432,2433],{"class":39,"line":77},[37,2434,93],{"emptyLinePlaceholder":92},[37,2436,2437],{"class":39,"line":89},[37,2438,2439],{"class":43},"\u002F\u002F ── Standard IIFE ──\n",[37,2441,2442,2444,2446],{"class":39,"line":96},[37,2443,64],{"class":56},[37,2445,99],{"class":67},[37,2447,752],{"class":56},[37,2449,2450,2453,2456,2458,2461,2464],{"class":39,"line":122},[37,2451,2452],{"class":67}," var",[37,2454,2455],{"class":56}," privateVar ",[37,2457,763],{"class":67},[37,2459,2460],{"class":112}," \"secret\"",[37,2462,2463],{"class":56},"; ",[37,2465,2466],{"class":43},"\u002F\u002F not accessible outside the IIFE\n",[37,2468,2469,2471,2473,2475,2478],{"class":39,"line":127},[37,2470,895],{"class":56},[37,2472,61],{"class":60},[37,2474,64],{"class":56},[37,2476,2477],{"class":112},"\"runs immediately\"",[37,2479,826],{"class":56},[37,2481,2482],{"class":39,"line":133},[37,2483,2484],{"class":56},"})();\n",[37,2486,2487],{"class":39,"line":150},[37,2488,93],{"emptyLinePlaceholder":92},[37,2490,2491],{"class":39,"line":159},[37,2492,2493],{"class":43},"\u002F\u002F ── Arrow IIFE ──\n",[37,2495,2496,2498,2500],{"class":39,"line":164},[37,2497,842],{"class":56},[37,2499,538],{"class":67},[37,2501,847],{"class":56},[37,2503,2504,2506,2509,2511,2513],{"class":39,"line":193},[37,2505,669],{"class":67},[37,2507,2508],{"class":309}," privateVar",[37,2510,173],{"class":67},[37,2512,2460],{"class":112},[37,2514,769],{"class":56},[37,2516,2517,2519,2521,2523,2525],{"class":39,"line":202},[37,2518,895],{"class":56},[37,2520,61],{"class":60},[37,2522,64],{"class":56},[37,2524,2477],{"class":112},[37,2526,826],{"class":56},[37,2528,2529],{"class":39,"line":207},[37,2530,2484],{"class":56},[37,2532,2533],{"class":39,"line":213},[37,2534,93],{"emptyLinePlaceholder":92},[37,2536,2537],{"class":39,"line":219},[37,2538,2539],{"class":43},"\u002F\u002F ── IIFE with parameters ──\n",[37,2541,2542,2544,2546,2548,2550,2552,2554],{"class":39,"line":225},[37,2543,64],{"class":56},[37,2545,99],{"class":67},[37,2547,64],{"class":56},[37,2549,1141],{"class":278},[37,2551,596],{"class":56},[37,2553,1957],{"class":278},[37,2555,282],{"class":56},[37,2557,2558,2560,2562,2564,2566,2568,2570,2572,2574],{"class":39,"line":231},[37,2559,895],{"class":56},[37,2561,61],{"class":60},[37,2563,64],{"class":56},[37,2565,1334],{"class":112},[37,2567,1957],{"class":56},[37,2569,1979],{"class":112},[37,2571,1141],{"class":56},[37,2573,1984],{"class":112},[37,2575,826],{"class":56},[37,2577,2578,2581,2583,2585,2588],{"class":39,"line":237},[37,2579,2580],{"class":56},"})(",[37,2582,1112],{"class":112},[37,2584,596],{"class":56},[37,2586,2587],{"class":112},"\"Hello\"",[37,2589,826],{"class":56},[37,2591,2592],{"class":39,"line":243},[37,2593,93],{"emptyLinePlaceholder":92},[37,2595,2596],{"class":39,"line":249},[37,2597,2598],{"class":43},"\u002F\u002F ── Module pattern: IIFE returning an object (revealing module pattern) ──\n",[37,2600,2601,2603,2605,2607,2609,2611],{"class":39,"line":254},[37,2602,263],{"class":67},[37,2604,749],{"class":309},[37,2606,173],{"class":67},[37,2608,406],{"class":56},[37,2610,99],{"class":67},[37,2612,752],{"class":56},[37,2614,2615,2618,2621,2623,2625,2627],{"class":39,"line":260},[37,2616,2617],{"class":67}," let",[37,2619,2620],{"class":56}," count ",[37,2622,763],{"class":67},[37,2624,766],{"class":309},[37,2626,2463],{"class":56},[37,2628,2629],{"class":43},"\u002F\u002F private (closure over the IIFE's scope)\n",[37,2631,2632],{"class":39,"line":285},[37,2633,93],{"emptyLinePlaceholder":92},[37,2635,2636,2638],{"class":39,"line":291},[37,2637,300],{"class":67},[37,2639,847],{"class":56},[37,2641,2642,2645,2647,2649,2652],{"class":39,"line":297},[37,2643,2644],{"class":60}," increment",[37,2646,1123],{"class":56},[37,2648,538],{"class":67},[37,2650,2651],{"class":67}," ++",[37,2653,2654],{"class":56},"count,\n",[37,2656,2657,2660,2662,2664,2667],{"class":39,"line":352},[37,2658,2659],{"class":60}," decrement",[37,2661,1123],{"class":56},[37,2663,538],{"class":67},[37,2665,2666],{"class":67}," --",[37,2668,2654],{"class":56},[37,2670,2671,2674,2676,2678,2681],{"class":39,"line":358},[37,2672,2673],{"class":60}," getCount",[37,2675,1123],{"class":56},[37,2677,538],{"class":67},[37,2679,2680],{"class":56}," count, ",[37,2682,2683],{"class":43},"\u002F\u002F public API exposing private state\n",[37,2685,2686],{"class":39,"line":367},[37,2687,2688],{"class":43}," \u002F\u002F count is only accessible through these methods (encapsulation)\n",[37,2690,2691],{"class":39,"line":383},[37,2692,2693],{"class":56}," };\n",[37,2695,2696],{"class":39,"line":388},[37,2697,2484],{"class":56},[37,2699,2700,2703,2706],{"class":39,"line":394},[37,2701,2702],{"class":56},"Counter.",[37,2704,2705],{"class":60},"increment",[37,2707,2708],{"class":56},"();\n",[37,2710,2711,2713,2716,2718],{"class":39,"line":400},[37,2712,2702],{"class":56},[37,2714,2715],{"class":60},"getCount",[37,2717,1169],{"class":56},[37,2719,1502],{"class":43},[37,2721,2722,2725],{"class":39,"line":414},[37,2723,2724],{"class":43},"\u002F\u002F Counter.count;",[37,2726,2727],{"class":43}," \u002F\u002F undefined — not accessible (private)\n",[37,2729,2730],{"class":39,"line":435},[37,2731,93],{"emptyLinePlaceholder":92},[37,2733,2734],{"class":39,"line":441},[37,2735,2736],{"class":43},"\u002F\u002F ── Modern: ES modules replace IIFEs for scope isolation ──\n",[37,2738,2739],{"class":39,"line":450},[37,2740,2741],{"class":43},"\u002F\u002F Each ES module has its own scope — no need for IIFEs for privacy.\n",[37,2743,2744],{"class":39,"line":456},[37,2745,2746],{"class":43},"\u002F\u002F IIFEs are still useful for:\n",[37,2748,2749],{"class":39,"line":465},[37,2750,2751],{"class":43},"\u002F\u002F - One-off scope isolation in non-module scripts\n",[37,2753,2754],{"class":39,"line":476},[37,2755,2756],{"class":43},"\u002F\u002F - Avoiding global pollution in bookmarklets\u002Finline scripts\n",[37,2758,2759],{"class":39,"line":495},[37,2760,2761],{"class":43},"\u002F\u002F - Creating async scopes: (async () => { await ... })();\n",[20,2763,2765],{"id":2764},"tips-tricks","💡 Tips & Tricks",[25,2767,2768],{"language":27},[29,2769,2771],{"className":31,"code":2770,"language":27,"meta":33,"style":33},"\u002F\u002F ── Named function expression for better stack traces ──\nconst handler = function handleClick(event) {\n \u002F\u002F \"handleClick\" appears in stack traces (instead of \"anonymous\")\n \u002F\u002F Also accessible inside for recursion\n console.log(\"clicked\");\n};\n\u002F\u002F Unnamed arrow functions show as \"(anonymous)\" in stack traces — harder to debug.\n\n\u002F\u002F ── Currying with arrow functions ──\nconst add = a => b => a + b; \u002F\u002F add(1)(2) = 3 (curried)\nconst add5 = add(5); \u002F\u002F partial application: add5(10) = 15\n\n\u002F\u002F ── Callback to promise (promisify a callback-style function) ──\nfunction promisify(fn) {\n return (...args) => new Promise((resolve, reject) => {\n fn(...args, (err, result) => err ? reject(err) : resolve(result));\n });\n}\n\u002F\u002F const readFile = promisify(fs.readFile);\n\u002F\u002F const content = await readFile(\"file.txt\", \"utf8\");\n\n\u002F\u002F ── `call` and `apply` for explicit `this` binding ──\nfunction greet(greeting) { return `${greeting}, ${this.name}`; }\nconst user = { name: \"Alice\" };\ngreet.call(user, \"Hi\"); \u002F\u002F \"Hi, Alice\" — call: args one by one\ngreet.apply(user, [\"Hi\"]); \u002F\u002F \"Hi, Alice\" — apply: args as array\nconst bound = greet.bind(user); \u002F\u002F bind: creates new function with fixed `this`\nbound(\"Hello\"); \u002F\u002F \"Hello, Alice\"\n\n\u002F\u002F ── `bind` for partial application ──\nconst add = (a, b) => a + b;\nconst add10 = add.bind(null, 10); \u002F\u002F first arg fixed to 10\nadd10(5); \u002F\u002F 15\n",[15,2772,2773,2778,2799,2804,2809,2822,2826,2831,2835,2840,2869,2890,2894,2899,2913,2949,2993,2998,3002,3007,3012,3016,3021,3053,3070,3087,3104,3125,3139,3143,3148,3174,3201],{"__ignoreMap":33},[37,2774,2775],{"class":39,"line":40},[37,2776,2777],{"class":43},"\u002F\u002F ── Named function expression for better stack traces ──\n",[37,2779,2780,2782,2785,2787,2789,2792,2794,2797],{"class":39,"line":47},[37,2781,263],{"class":67},[37,2783,2784],{"class":60}," handler",[37,2786,173],{"class":67},[37,2788,176],{"class":67},[37,2790,2791],{"class":60}," handleClick",[37,2793,64],{"class":56},[37,2795,2796],{"class":278},"event",[37,2798,282],{"class":56},[37,2800,2801],{"class":39,"line":53},[37,2802,2803],{"class":43}," \u002F\u002F \"handleClick\" appears in stack traces (instead of \"anonymous\")\n",[37,2805,2806],{"class":39,"line":77},[37,2807,2808],{"class":43}," \u002F\u002F Also accessible inside for recursion\n",[37,2810,2811,2813,2815,2817,2820],{"class":39,"line":89},[37,2812,895],{"class":56},[37,2814,61],{"class":60},[37,2816,64],{"class":56},[37,2818,2819],{"class":112},"\"clicked\"",[37,2821,826],{"class":56},[37,2823,2824],{"class":39,"line":96},[37,2825,355],{"class":56},[37,2827,2828],{"class":39,"line":122},[37,2829,2830],{"class":43},"\u002F\u002F Unnamed arrow functions show as \"(anonymous)\" in stack traces — harder to debug.\n",[37,2832,2833],{"class":39,"line":127},[37,2834,93],{"emptyLinePlaceholder":92},[37,2836,2837],{"class":39,"line":133},[37,2838,2839],{"class":43},"\u002F\u002F ── Currying with arrow functions ──\n",[37,2841,2842,2844,2847,2849,2852,2854,2857,2859,2861,2863,2866],{"class":39,"line":150},[37,2843,263],{"class":67},[37,2845,2846],{"class":60}," add",[37,2848,173],{"class":67},[37,2850,2851],{"class":278}," a",[37,2853,567],{"class":67},[37,2855,2856],{"class":278}," b",[37,2858,567],{"class":67},[37,2860,606],{"class":56},[37,2862,334],{"class":67},[37,2864,2865],{"class":56}," b; ",[37,2867,2868],{"class":43},"\u002F\u002F add(1)(2) = 3 (curried)\n",[37,2870,2871,2873,2876,2878,2880,2882,2884,2887],{"class":39,"line":159},[37,2872,263],{"class":67},[37,2874,2875],{"class":309}," add5",[37,2877,173],{"class":67},[37,2879,2846],{"class":60},[37,2881,64],{"class":56},[37,2883,1816],{"class":309},[37,2885,2886],{"class":56},"); ",[37,2888,2889],{"class":43},"\u002F\u002F partial application: add5(10) = 15\n",[37,2891,2892],{"class":39,"line":164},[37,2893,93],{"emptyLinePlaceholder":92},[37,2895,2896],{"class":39,"line":193},[37,2897,2898],{"class":43},"\u002F\u002F ── Callback to promise (promisify a callback-style function) ──\n",[37,2900,2901,2903,2906,2908,2911],{"class":39,"line":202},[37,2902,99],{"class":67},[37,2904,2905],{"class":60}," promisify",[37,2907,64],{"class":56},[37,2909,2910],{"class":278},"fn",[37,2912,282],{"class":56},[37,2914,2915,2917,2919,2921,2923,2925,2927,2930,2933,2935,2938,2940,2943,2945,2947],{"class":39,"line":207},[37,2916,300],{"class":67},[37,2918,406],{"class":56},[37,2920,983],{"class":67},[37,2922,986],{"class":278},[37,2924,331],{"class":56},[37,2926,538],{"class":67},[37,2928,2929],{"class":67}," new",[37,2931,2932],{"class":309}," Promise",[37,2934,1570],{"class":56},[37,2936,2937],{"class":278},"resolve",[37,2939,596],{"class":56},[37,2941,2942],{"class":278},"reject",[37,2944,331],{"class":56},[37,2946,538],{"class":67},[37,2948,847],{"class":56},[37,2950,2951,2954,2956,2958,2961,2964,2966,2969,2971,2973,2976,2979,2982,2985,2987,2990],{"class":39,"line":213},[37,2952,2953],{"class":60}," fn",[37,2955,64],{"class":56},[37,2957,983],{"class":67},[37,2959,2960],{"class":56},"args, (",[37,2962,2963],{"class":278},"err",[37,2965,596],{"class":56},[37,2967,2968],{"class":278},"result",[37,2970,331],{"class":56},[37,2972,538],{"class":67},[37,2974,2975],{"class":56}," err ",[37,2977,2978],{"class":67},"?",[37,2980,2981],{"class":60}," reject",[37,2983,2984],{"class":56},"(err) ",[37,2986,318],{"class":67},[37,2988,2989],{"class":60}," resolve",[37,2991,2992],{"class":56},"(result));\n",[37,2994,2995],{"class":39,"line":219},[37,2996,2997],{"class":56}," });\n",[37,2999,3000],{"class":39,"line":225},[37,3001,438],{"class":56},[37,3003,3004],{"class":39,"line":231},[37,3005,3006],{"class":43},"\u002F\u002F const readFile = promisify(fs.readFile);\n",[37,3008,3009],{"class":39,"line":237},[37,3010,3011],{"class":43},"\u002F\u002F const content = await readFile(\"file.txt\", \"utf8\");\n",[37,3013,3014],{"class":39,"line":243},[37,3015,93],{"emptyLinePlaceholder":92},[37,3017,3018],{"class":39,"line":249},[37,3019,3020],{"class":43},"\u002F\u002F ── `call` and `apply` for explicit `this` binding ──\n",[37,3022,3023,3025,3027,3029,3031,3034,3036,3039,3041,3043,3045,3047,3049,3051],{"class":39,"line":254},[37,3024,99],{"class":67},[37,3026,102],{"class":60},[37,3028,64],{"class":56},[37,3030,1957],{"class":278},[37,3032,3033],{"class":56},") { ",[37,3035,426],{"class":67},[37,3037,3038],{"class":112}," `${",[37,3040,1957],{"class":56},[37,3042,1979],{"class":112},[37,3044,17],{"class":309},[37,3046,1069],{"class":112},[37,3048,1141],{"class":56},[37,3050,1144],{"class":112},[37,3052,432],{"class":56},[37,3054,3055,3057,3060,3062,3065,3067],{"class":39,"line":260},[37,3056,263],{"class":67},[37,3058,3059],{"class":309}," user",[37,3061,173],{"class":67},[37,3063,3064],{"class":56}," { name: ",[37,3066,1112],{"class":112},[37,3068,3069],{"class":56}," };\n",[37,3071,3072,3075,3077,3080,3082,3084],{"class":39,"line":285},[37,3073,3074],{"class":56},"greet.",[37,3076,1546],{"class":60},[37,3078,3079],{"class":56},"(user, ",[37,3081,2027],{"class":112},[37,3083,1477],{"class":56},[37,3085,3086],{"class":43},"\u002F\u002F \"Hi, Alice\" — call: args one by one\n",[37,3088,3089,3091,3094,3097,3099,3101],{"class":39,"line":291},[37,3090,3074],{"class":56},[37,3092,3093],{"class":60},"apply",[37,3095,3096],{"class":56},"(user, [",[37,3098,2027],{"class":112},[37,3100,1856],{"class":56},[37,3102,3103],{"class":43},"\u002F\u002F \"Hi, Alice\" — apply: args as array\n",[37,3105,3106,3108,3111,3113,3116,3119,3122],{"class":39,"line":297},[37,3107,263],{"class":67},[37,3109,3110],{"class":309}," bound",[37,3112,173],{"class":67},[37,3114,3115],{"class":56}," greet.",[37,3117,3118],{"class":60},"bind",[37,3120,3121],{"class":56},"(user); ",[37,3123,3124],{"class":43},"\u002F\u002F bind: creates new function with fixed `this`\n",[37,3126,3127,3130,3132,3134,3136],{"class":39,"line":352},[37,3128,3129],{"class":60},"bound",[37,3131,64],{"class":56},[37,3133,2587],{"class":112},[37,3135,346],{"class":56},[37,3137,3138],{"class":43},"\u002F\u002F \"Hello, Alice\"\n",[37,3140,3141],{"class":39,"line":358},[37,3142,93],{"emptyLinePlaceholder":92},[37,3144,3145],{"class":39,"line":367},[37,3146,3147],{"class":43},"\u002F\u002F ── `bind` for partial application ──\n",[37,3149,3150,3152,3154,3156,3158,3160,3162,3164,3166,3168,3170,3172],{"class":39,"line":383},[37,3151,263],{"class":67},[37,3153,2846],{"class":60},[37,3155,173],{"class":67},[37,3157,406],{"class":56},[37,3159,593],{"class":278},[37,3161,596],{"class":56},[37,3163,599],{"class":278},[37,3165,331],{"class":56},[37,3167,538],{"class":67},[37,3169,606],{"class":56},[37,3171,334],{"class":67},[37,3173,681],{"class":56},[37,3175,3176,3178,3181,3183,3186,3188,3190,3192,3194,3196,3198],{"class":39,"line":388},[37,3177,263],{"class":67},[37,3179,3180],{"class":309}," add10",[37,3182,173],{"class":67},[37,3184,3185],{"class":56}," add.",[37,3187,3118],{"class":60},[37,3189,64],{"class":56},[37,3191,2068],{"class":309},[37,3193,596],{"class":56},[37,3195,375],{"class":309},[37,3197,346],{"class":56},[37,3199,3200],{"class":43},"\u002F\u002F first arg fixed to 10\n",[37,3202,3203,3206,3208,3210,3212],{"class":39,"line":394},[37,3204,3205],{"class":60},"add10",[37,3207,64],{"class":56},[37,3209,1816],{"class":309},[37,3211,346],{"class":56},[37,3213,3214],{"class":43},"\u002F\u002F 15\n",[20,3216,3218],{"id":3217},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[25,3220,3221],{"language":27},[29,3222,3224],{"className":31,"code":3223,"language":27,"meta":33,"style":33},"\u002F\u002F ── Arrow function returning object literal needs parentheses ──\nconst makeObj = () => { x: 1 }; \u002F\u002F ⚠️ returns undefined! {x:1} is a block, not object\nconst makeObj2 = () => ({ x: 1 }); \u002F\u002F ✓ parentheses force object literal return\nconsole.log(makeObj()); \u002F\u002F undefined\nconsole.log(makeObj2()); \u002F\u002F { x: 1 }\n\n\u002F\u002F ── Function declarations are hoisted; expressions are not ──\nhoisted(); \u002F\u002F works (declaration hoisted)\nfunction hoisted() {}\n\n\u002F\u002F notHoisted(); \u002F\u002F TypeError: notHoisted is not a function\nvar notHoisted = function() {};\n\n\u002F\u002F ── `this` in a regular function depends on the call site ──\nfunction showThis() { console.log(this); }\nshowThis(); \u002F\u002F global object (or undefined in strict mode)\nconst obj = { showThis };\nobj.showThis(); \u002F\u002F obj (method call — `this` is the receiver)\nshowThis.call({}); \u002F\u002F {} (explicit binding via .call)\n\n\u002F\u002F ── Arrow function `this` is locked at definition, not call time ──\nconst obj = {\n name: \"Alice\",\n arrow: () => console.log(this), \u002F\u002F `this` is the module\u002Fglobal scope\n regular() { console.log(this); }, \u002F\u002F `this` is obj when called as obj.regular()\n};\nobj.arrow(); \u002F\u002F global object (or undefined in strict mode) — NOT obj\nobj.regular(); \u002F\u002F obj — dynamic `this`\n\n\u002F\u002F ── Default param TDZ: later params can't be referenced by earlier defaults ──\nfunction f(a = b, b = 2) { return [a, b]; }\n\u002F\u002F f(); \u002F\u002F ReferenceError: Cannot access 'b' before initialization\nf(1); \u002F\u002F [1, 2] (a has a value, b uses default — no TDZ)\nf(undefined, 3); \u002F\u002F ReferenceError (a=undefined → tries b's default → TDZ)\n\n\u002F\u002F ── `arguments` is NOT available in arrow functions ──\nconst arrow = () => arguments; \u002F\u002F ReferenceError (or uses enclosing function's arguments)\n\u002F\u002F Use ...args (rest params) in arrow functions instead.\n",[15,3225,3226,3231,3260,3283,3300,3317,3321,3326,3336,3346,3350,3358,3372,3376,3381,3399,3409,3420,3432,3445,3449,3454,3464,3472,3494,3512,3516,3529,3540,3544,3549,3576,3583,3597,3614,3618,3623,3643],{"__ignoreMap":33},[37,3227,3228],{"class":39,"line":40},[37,3229,3230],{"class":43},"\u002F\u002F ── Arrow function returning object literal needs parentheses ──\n",[37,3232,3233,3235,3238,3240,3242,3244,3247,3249,3252,3254,3257],{"class":39,"line":47},[37,3234,263],{"class":67},[37,3236,3237],{"class":60}," makeObj",[37,3239,173],{"class":67},[37,3241,626],{"class":56},[37,3243,538],{"class":67},[37,3245,3246],{"class":56}," { ",[37,3248,533],{"class":60},[37,3250,3251],{"class":56},": ",[37,3253,920],{"class":309},[37,3255,3256],{"class":56}," }; ",[37,3258,3259],{"class":43},"\u002F\u002F ⚠️ returns undefined! {x:1} is a block, not object\n",[37,3261,3262,3264,3267,3269,3271,3273,3276,3278,3280],{"class":39,"line":53},[37,3263,263],{"class":67},[37,3265,3266],{"class":60}," makeObj2",[37,3268,173],{"class":67},[37,3270,626],{"class":56},[37,3272,538],{"class":67},[37,3274,3275],{"class":56}," ({ x: ",[37,3277,920],{"class":309},[37,3279,2401],{"class":56},[37,3281,3282],{"class":43},"\u002F\u002F ✓ parentheses force object literal return\n",[37,3284,3285,3287,3289,3291,3294,3297],{"class":39,"line":77},[37,3286,57],{"class":56},[37,3288,61],{"class":60},[37,3290,64],{"class":56},[37,3292,3293],{"class":60},"makeObj",[37,3295,3296],{"class":56},"()); ",[37,3298,3299],{"class":43},"\u002F\u002F undefined\n",[37,3301,3302,3304,3306,3308,3311,3314],{"class":39,"line":89},[37,3303,57],{"class":56},[37,3305,61],{"class":60},[37,3307,64],{"class":56},[37,3309,3310],{"class":60},"makeObj2",[37,3312,3313],{"class":56},"()); ",[37,3315,3316],{"class":43},"\u002F\u002F { x: 1 }\n",[37,3318,3319],{"class":39,"line":96},[37,3320,93],{"emptyLinePlaceholder":92},[37,3322,3323],{"class":39,"line":122},[37,3324,3325],{"class":43},"\u002F\u002F ── Function declarations are hoisted; expressions are not ──\n",[37,3327,3328,3331,3333],{"class":39,"line":127},[37,3329,3330],{"class":60},"hoisted",[37,3332,1169],{"class":56},[37,3334,3335],{"class":43},"\u002F\u002F works (declaration hoisted)\n",[37,3337,3338,3340,3343],{"class":39,"line":133},[37,3339,99],{"class":67},[37,3341,3342],{"class":60}," hoisted",[37,3344,3345],{"class":56},"() {}\n",[37,3347,3348],{"class":39,"line":150},[37,3349,93],{"emptyLinePlaceholder":92},[37,3351,3352,3355],{"class":39,"line":159},[37,3353,3354],{"class":43},"\u002F\u002F notHoisted();",[37,3356,3357],{"class":43}," \u002F\u002F TypeError: notHoisted is not a function\n",[37,3359,3360,3362,3365,3367,3369],{"class":39,"line":164},[37,3361,167],{"class":67},[37,3363,3364],{"class":60}," notHoisted",[37,3366,173],{"class":67},[37,3368,176],{"class":67},[37,3370,3371],{"class":56},"() {};\n",[37,3373,3374],{"class":39,"line":193},[37,3375,93],{"emptyLinePlaceholder":92},[37,3377,3378],{"class":39,"line":202},[37,3379,3380],{"class":43},"\u002F\u002F ── `this` in a regular function depends on the call site ──\n",[37,3382,3383,3385,3388,3390,3392,3394,3396],{"class":39,"line":207},[37,3384,99],{"class":67},[37,3386,3387],{"class":60}," showThis",[37,3389,105],{"class":56},[37,3391,61],{"class":60},[37,3393,64],{"class":56},[37,3395,17],{"class":309},[37,3397,3398],{"class":56},"); }\n",[37,3400,3401,3404,3406],{"class":39,"line":213},[37,3402,3403],{"class":60},"showThis",[37,3405,1997],{"class":56},[37,3407,3408],{"class":43},"\u002F\u002F global object (or undefined in strict mode)\n",[37,3410,3411,3413,3415,3417],{"class":39,"line":219},[37,3412,263],{"class":67},[37,3414,1100],{"class":309},[37,3416,173],{"class":67},[37,3418,3419],{"class":56}," { showThis };\n",[37,3421,3422,3424,3426,3429],{"class":39,"line":225},[37,3423,1164],{"class":56},[37,3425,3403],{"class":60},[37,3427,3428],{"class":56},"(); ",[37,3430,3431],{"class":43},"\u002F\u002F obj (method call — `this` is the receiver)\n",[37,3433,3434,3437,3439,3442],{"class":39,"line":231},[37,3435,3436],{"class":56},"showThis.",[37,3438,1546],{"class":60},[37,3440,3441],{"class":56},"({}); ",[37,3443,3444],{"class":43},"\u002F\u002F {} (explicit binding via .call)\n",[37,3446,3447],{"class":39,"line":237},[37,3448,93],{"emptyLinePlaceholder":92},[37,3450,3451],{"class":39,"line":243},[37,3452,3453],{"class":43},"\u002F\u002F ── Arrow function `this` is locked at definition, not call time ──\n",[37,3455,3456,3458,3460,3462],{"class":39,"line":249},[37,3457,263],{"class":67},[37,3459,1100],{"class":309},[37,3461,173],{"class":67},[37,3463,847],{"class":56},[37,3465,3466,3468,3470],{"class":39,"line":254},[37,3467,1109],{"class":56},[37,3469,1112],{"class":112},[37,3471,1115],{"class":56},[37,3473,3474,3477,3479,3481,3483,3485,3487,3489,3491],{"class":39,"line":260},[37,3475,3476],{"class":60}," arrow",[37,3478,1123],{"class":56},[37,3480,538],{"class":67},[37,3482,993],{"class":56},[37,3484,61],{"class":60},[37,3486,64],{"class":56},[37,3488,17],{"class":309},[37,3490,1147],{"class":56},[37,3492,3493],{"class":43},"\u002F\u002F `this` is the module\u002Fglobal scope\n",[37,3495,3496,3499,3501,3503,3505,3507,3509],{"class":39,"line":285},[37,3497,3498],{"class":60}," regular",[37,3500,105],{"class":56},[37,3502,61],{"class":60},[37,3504,64],{"class":56},[37,3506,17],{"class":309},[37,3508,1223],{"class":56},[37,3510,3511],{"class":43},"\u002F\u002F `this` is obj when called as obj.regular()\n",[37,3513,3514],{"class":39,"line":291},[37,3515,355],{"class":56},[37,3517,3518,3520,3523,3526],{"class":39,"line":297},[37,3519,1164],{"class":56},[37,3521,3522],{"class":60},"arrow",[37,3524,3525],{"class":56},"(); ",[37,3527,3528],{"class":43},"\u002F\u002F global object (or undefined in strict mode) — NOT obj\n",[37,3530,3531,3533,3535,3537],{"class":39,"line":352},[37,3532,1164],{"class":56},[37,3534,915],{"class":60},[37,3536,1169],{"class":56},[37,3538,3539],{"class":43},"\u002F\u002F obj — dynamic `this`\n",[37,3541,3542],{"class":39,"line":358},[37,3543,93],{"emptyLinePlaceholder":92},[37,3545,3546],{"class":39,"line":367},[37,3547,3548],{"class":43},"\u002F\u002F ── Default param TDZ: later params can't be referenced by earlier defaults ──\n",[37,3550,3551,3553,3555,3557,3559,3561,3563,3565,3567,3569,3571,3573],{"class":39,"line":383},[37,3552,99],{"class":67},[37,3554,420],{"class":60},[37,3556,64],{"class":56},[37,3558,593],{"class":278},[37,3560,173],{"class":67},[37,3562,1587],{"class":56},[37,3564,599],{"class":278},[37,3566,173],{"class":67},[37,3568,343],{"class":309},[37,3570,3033],{"class":56},[37,3572,426],{"class":67},[37,3574,3575],{"class":56}," [a, b]; }\n",[37,3577,3578,3580],{"class":39,"line":388},[37,3579,444],{"class":43},[37,3581,3582],{"class":43}," \u002F\u002F ReferenceError: Cannot access 'b' before initialization\n",[37,3584,3585,3588,3590,3592,3594],{"class":39,"line":394},[37,3586,3587],{"class":60},"f",[37,3589,64],{"class":56},[37,3591,920],{"class":309},[37,3593,346],{"class":56},[37,3595,3596],{"class":43},"\u002F\u002F [1, 2] (a has a value, b uses default — no TDZ)\n",[37,3598,3599,3601,3603,3605,3607,3609,3611],{"class":39,"line":400},[37,3600,3587],{"class":60},[37,3602,64],{"class":56},[37,3604,2041],{"class":309},[37,3606,596],{"class":56},[37,3608,1613],{"class":309},[37,3610,346],{"class":56},[37,3612,3613],{"class":43},"\u002F\u002F ReferenceError (a=undefined → tries b's default → TDZ)\n",[37,3615,3616],{"class":39,"line":414},[37,3617,93],{"emptyLinePlaceholder":92},[37,3619,3620],{"class":39,"line":435},[37,3621,3622],{"class":43},"\u002F\u002F ── `arguments` is NOT available in arrow functions ──\n",[37,3624,3625,3627,3629,3631,3633,3635,3638,3640],{"class":39,"line":441},[37,3626,263],{"class":67},[37,3628,938],{"class":60},[37,3630,173],{"class":67},[37,3632,626],{"class":56},[37,3634,538],{"class":67},[37,3636,3637],{"class":309}," arguments",[37,3639,2463],{"class":56},[37,3641,3642],{"class":43},"\u002F\u002F ReferenceError (or uses enclosing function's arguments)\n",[37,3644,3645],{"class":39,"line":450},[37,3646,3647],{"class":43},"\u002F\u002F Use ...args (rest params) in arrow functions instead.\n",[20,3649,3651],{"id":3650},"quick-quiz","🧠 Quick Quiz",[3653,3654,3655],"p",{},"What does this output?",[25,3657,3658],{"language":27},[29,3659,3661],{"className":31,"code":3660,"language":27,"meta":33,"style":33},"const obj = {\n name: \"Alice\",\n greet: () => `Hello, ${this.name}`,\n greet2() { return `Hello, ${this.name}`; },\n};\nconsole.log(obj.greet());\nconsole.log(obj.greet2());\n",[15,3662,3663,3673,3681,3702,3724,3728,3742],{"__ignoreMap":33},[37,3664,3665,3667,3669,3671],{"class":39,"line":40},[37,3666,263],{"class":67},[37,3668,1100],{"class":309},[37,3670,173],{"class":67},[37,3672,847],{"class":56},[37,3674,3675,3677,3679],{"class":39,"line":47},[37,3676,1109],{"class":56},[37,3678,1112],{"class":112},[37,3680,1115],{"class":56},[37,3682,3683,3685,3687,3689,3692,3694,3696,3698,3700],{"class":39,"line":53},[37,3684,1120],{"class":60},[37,3686,1123],{"class":56},[37,3688,538],{"class":67},[37,3690,3691],{"class":112}," `Hello, ${",[37,3693,17],{"class":309},[37,3695,1069],{"class":112},[37,3697,1141],{"class":56},[37,3699,1144],{"class":112},[37,3701,1115],{"class":56},[37,3703,3704,3707,3709,3711,3713,3715,3717,3719,3721],{"class":39,"line":77},[37,3705,3706],{"class":60}," greet2",[37,3708,423],{"class":56},[37,3710,426],{"class":67},[37,3712,3691],{"class":112},[37,3714,17],{"class":309},[37,3716,1069],{"class":112},[37,3718,1141],{"class":56},[37,3720,1144],{"class":112},[37,3722,3723],{"class":56},"; },\n",[37,3725,3726],{"class":39,"line":89},[37,3727,355],{"class":56},[37,3729,3730,3732,3734,3737,3739],{"class":39,"line":96},[37,3731,57],{"class":56},[37,3733,61],{"class":60},[37,3735,3736],{"class":56},"(obj.",[37,3738,80],{"class":60},[37,3740,3741],{"class":56},"());\n",[37,3743,3744,3746,3748,3750,3753],{"class":39,"line":122},[37,3745,57],{"class":56},[37,3747,61],{"class":60},[37,3749,3736],{"class":56},[37,3751,3752],{"class":60},"greet2",[37,3754,3741],{"class":56},[3756,3757,3758,3762,3783,3805,3824],"details",{},[3759,3760,3761],"summary",{},"Answer",[29,3763,3765],{"className":31,"code":3764,"language":27,"meta":33,"style":33},"\"Hello, undefined\" \u002F\u002F greet: arrow function — `this` is lexical (module scope), not obj\n\"Hello, Alice\" \u002F\u002F greet2: regular method — `this` is obj (method call)\n",[15,3766,3767,3775],{"__ignoreMap":33},[37,3768,3769,3772],{"class":39,"line":40},[37,3770,3771],{"class":112},"\"Hello, undefined\"",[37,3773,3774],{"class":43}," \u002F\u002F greet: arrow function — `this` is lexical (module scope), not obj\n",[37,3776,3777,3780],{"class":39,"line":47},[37,3778,3779],{"class":112},"\"Hello, Alice\"",[37,3781,3782],{"class":43}," \u002F\u002F greet2: regular method — `this` is obj (method call)\n",[3653,3784,3785,3786,3788,3789,3791,3792,3794,3795,3798,3799,3802,3803,1069],{},"Arrow functions don't have their own ",[15,3787,17],{}," — they inherit it from the enclosing scope (the module\u002Fglobal scope, where ",[15,3790,17],{}," is ",[15,3793,2041],{}," in strict mode or the global object in sloppy mode). ",[15,3796,3797],{},"this.name"," is therefore ",[15,3800,3801],{},"undefined.name"," → ",[15,3804,2041],{},[3653,3806,3807,3808,3810,3811,596,3814,3791,3816,3819,3820,3791,3822,1069],{},"Regular methods (shorthand syntax) have dynamic ",[15,3809,17],{}," — when called as ",[15,3812,3813],{},"obj.greet2()",[15,3815,17],{},[15,3817,3818],{},"obj",", so ",[15,3821,3797],{},[15,3823,1112],{},[3653,3825,3826,3830,3831,3833,3834,3837],{},[3827,3828,3829],"strong",{},"The lesson",": never use arrow functions for object methods that need ",[15,3832,17],{},". Use shorthand method syntax (",[15,3835,3836],{},"method() { ... }",") or regular function expressions.",[3839,3840,3841],"style",{},"html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}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 .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":33,"searchDepth":47,"depth":47,"links":3843},[3844,3845,3847,3848,3850,3851,3852,3853,3854],{"id":22,"depth":47,"text":23},{"id":500,"depth":47,"text":3846},"Arrow Functions: Lexical this and No arguments",{"id":1080,"depth":47,"text":1081},{"id":1436,"depth":47,"text":3849},"arguments Object vs Rest Parameters",{"id":1924,"depth":47,"text":1925},{"id":2407,"depth":47,"text":2408},{"id":2764,"depth":47,"text":2765},{"id":3217,"depth":47,"text":3218},{"id":3650,"depth":47,"text":3651},"Deep-dive into JavaScript function mechanics: declaration vs expression hoisting, arrow function `this`\u002F`arguments` binding, the arguments object vs rest params, default parameter TDZ, and IIFE module patterns. Code-first reference for senior engineers.","md",{},"\u002Fjs\u002F05-functions-and-scope",{"title":5,"description":3855},"js\u002F05-functions-and-scope","_gIFKUlZ9LpyE7X2UKkrdcVrNRgRhi3LY7Z7tEmh9iY",1789924649038]