[{"data":1,"prerenderedAt":3341},["ShallowReactive",2],{"page-\u002Fjs\u002F11-this-keyword":3},{"id":4,"title":5,"body":6,"description":36,"extension":3335,"meta":3336,"navigation":122,"path":3337,"seo":3338,"stem":3339,"__hash__":3340},"content\u002Fjs\u002F11-this-keyword.md","11 — The this Keyword",{"type":7,"value":8,"toc":3310},"minimark",[9,19,214,335,512,685,855,1036,1227,1347,1556,1739,1864,2048,2222,2346,2559,2686,2853,3018,3118,3306],[10,11,13,14,18],"h1",{"id":12},"_11-the-this-keyword","11 — The ",[15,16,17],"code",{},"this"," Keyword",[20,21,23,28,142,175],"question-wrapper",{"language":22},"javascript",[24,25,27],"h3",{"id":26},"q1-what-does-the-following-log","Q1. What does the following log?",[29,30,31],"code-wrapper",{"language":22},[32,33,37],"pre",{"className":34,"code":35,"language":22,"meta":36,"style":36},"language-javascript shiki shiki-themes github-light github-dark","const user = {\n  name: 'Ava',\n  greet() {\n    return `Hi, I'm ${this.name}`;\n  }\n};\n\nconsole.log(user.greet());\n","",[15,38,39,59,72,82,105,111,117,124],{"__ignoreMap":36},[40,41,44,48,52,55],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"svdQ7","const",[40,49,51],{"class":50},"snvgF"," user",[40,53,54],{"class":46}," =",[40,56,58],{"class":57},"ssxIu"," {\n",[40,60,62,65,69],{"class":42,"line":61},2,[40,63,64],{"class":57},"  name: ",[40,66,68],{"class":67},"sJ6F3","'Ava'",[40,70,71],{"class":57},",\n",[40,73,75,79],{"class":42,"line":74},3,[40,76,78],{"class":77},"sIsaT","  greet",[40,80,81],{"class":57},"() {\n",[40,83,85,88,91,93,96,99,102],{"class":42,"line":84},4,[40,86,87],{"class":46},"    return",[40,89,90],{"class":67}," `Hi, I'm ${",[40,92,17],{"class":50},[40,94,95],{"class":67},".",[40,97,98],{"class":57},"name",[40,100,101],{"class":67},"}`",[40,103,104],{"class":57},";\n",[40,106,108],{"class":42,"line":107},5,[40,109,110],{"class":57},"  }\n",[40,112,114],{"class":42,"line":113},6,[40,115,116],{"class":57},"};\n",[40,118,120],{"class":42,"line":119},7,[40,121,123],{"emptyLinePlaceholder":122},true,"\n",[40,125,127,130,133,136,139],{"class":42,"line":126},8,[40,128,129],{"class":57},"console.",[40,131,132],{"class":77},"log",[40,134,135],{"class":57},"(user.",[40,137,138],{"class":77},"greet",[40,140,141],{"class":57},"());\n",[143,144,147,157,163,169],"ul",{"className":145},[146],"contains-task-list",[148,149,152,156],"li",{"className":150},[151],"task-list-item",[153,154],"input",{"disabled":122,"type":155},"checkbox"," \"Hi, I'm Ava\"",[148,158,160,162],{"className":159},[151],[153,161],{"disabled":122,"type":155}," \"Hi, I'm undefined\"",[148,164,166,168],{"className":165},[151],[153,167],{"disabled":122,"type":155}," Throws a TypeError",[148,170,172,174],{"className":171},[151],[153,173],{"disabled":122,"type":155}," \"Hi, I'm user\"",[176,177,178,182,190],"details",{},[179,180,181],"summary",{},"Show Answer",[183,184,185,189],"p",{},[186,187,188],"strong",{},"Answer:"," A — \"Hi, I'm Ava\"",[183,191,192,195,196,199,200,203,204,206,207,209,210,213],{},[186,193,194],{},"Explanation:"," This is ",[186,197,198],{},"implicit binding",": when a function is called as a property of an object (",[15,201,202],{},"user.greet()","), ",[15,205,17],{}," is bound to the object on the left of the dot at call time, not to where the function was defined. \"Hi, I'm undefined\" would only happen if ",[15,208,138],{}," were invoked without a receiver (e.g. destructured first). There's no reason for a TypeError here since ",[15,211,212],{},"user.name"," exists.",[20,215,216,220,270,307],{"language":22},[24,217,219],{"id":218},"q2-what-does-this-print-in-an-es-module-strict-mode","Q2. What does this print in an ES module (strict mode)?",[29,221,222],{"language":22},[32,223,225],{"className":34,"code":224,"language":22,"meta":36,"style":36},"function whoAmI() {\n  return this;\n}\n\nconsole.log(whoAmI());\n",[15,226,227,237,247,252,256],{"__ignoreMap":36},[40,228,229,232,235],{"class":42,"line":43},[40,230,231],{"class":46},"function",[40,233,234],{"class":77}," whoAmI",[40,236,81],{"class":57},[40,238,239,242,245],{"class":42,"line":61},[40,240,241],{"class":46},"  return",[40,243,244],{"class":50}," this",[40,246,104],{"class":57},[40,248,249],{"class":42,"line":74},[40,250,251],{"class":57},"}\n",[40,253,254],{"class":42,"line":84},[40,255,123],{"emptyLinePlaceholder":122},[40,257,258,260,262,265,268],{"class":42,"line":107},[40,259,129],{"class":57},[40,261,132],{"class":77},[40,263,264],{"class":57},"(",[40,266,267],{"class":77},"whoAmI",[40,269,141],{"class":57},[143,271,273,279,289,298],{"className":272},[146],[148,274,276,278],{"className":275},[151],[153,277],{"disabled":122,"type":155}," undefined",[148,280,282,284,285,288],{"className":281},[151],[153,283],{"disabled":122,"type":155}," The global object (",[15,286,287],{},"globalThis",")",[148,290,292,294,295],{"className":291},[151],[153,293],{"disabled":122,"type":155}," An empty object ",[15,296,297],{},"{}",[148,299,301,303,304,306],{"className":300},[151],[153,302],{"disabled":122,"type":155}," The ",[15,305,267],{}," function itself",[176,308,309,311,316],{},[179,310,181],{},[183,312,313,315],{},[186,314,188],{}," A — undefined",[183,317,318,195,320,323,324,326,327,330,331,334],{},[186,319,194],{},[186,321,322],{},"default binding",". When a function is called with no receiver and no explicit binding, ",[15,325,17],{}," falls back to the global object in sloppy mode, but ES modules (and any code under ",[15,328,329],{},"'use strict'",") run in strict mode by default, where the fallback is ",[15,332,333],{},"undefined"," instead. The \"global object\" answer is a very common trap left over from sloppy-mode intuition.",[20,336,337,345,434,468],{"language":22},[24,338,340,341,344],{"id":339},"q3-what-does-call-do-here","Q3. What does ",[15,342,343],{},"call"," do here?",[29,346,347],{"language":22},[32,348,350],{"className":34,"code":349,"language":22,"meta":36,"style":36},"function intro() {\n  return `${this.role}: ${this.name}`;\n}\n\nconst emp = { name: 'Sam', role: 'Dev' };\nconsole.log(intro.call(emp));\n",[15,351,352,361,388,392,396,420],{"__ignoreMap":36},[40,353,354,356,359],{"class":42,"line":43},[40,355,231],{"class":46},[40,357,358],{"class":77}," intro",[40,360,81],{"class":57},[40,362,363,365,368,370,372,375,378,380,382,384,386],{"class":42,"line":61},[40,364,241],{"class":46},[40,366,367],{"class":67}," `${",[40,369,17],{"class":50},[40,371,95],{"class":67},[40,373,374],{"class":57},"role",[40,376,377],{"class":67},"}: ${",[40,379,17],{"class":50},[40,381,95],{"class":67},[40,383,98],{"class":57},[40,385,101],{"class":67},[40,387,104],{"class":57},[40,389,390],{"class":42,"line":74},[40,391,251],{"class":57},[40,393,394],{"class":42,"line":84},[40,395,123],{"emptyLinePlaceholder":122},[40,397,398,400,403,405,408,411,414,417],{"class":42,"line":107},[40,399,47],{"class":46},[40,401,402],{"class":50}," emp",[40,404,54],{"class":46},[40,406,407],{"class":57}," { name: ",[40,409,410],{"class":67},"'Sam'",[40,412,413],{"class":57},", role: ",[40,415,416],{"class":67},"'Dev'",[40,418,419],{"class":57}," };\n",[40,421,422,424,426,429,431],{"class":42,"line":113},[40,423,129],{"class":57},[40,425,132],{"class":77},[40,427,428],{"class":57},"(intro.",[40,430,343],{"class":77},[40,432,433],{"class":57},"(emp));\n",[143,435,437,443,449,462],{"className":436},[146],[148,438,440,442],{"className":439},[151],[153,441],{"disabled":122,"type":155}," \"Dev: Sam\"",[148,444,446,448],{"className":445},[151],[153,447],{"disabled":122,"type":155}," \"undefined: undefined\"",[148,450,452,454,455,458,459],{"className":451},[151],[153,453],{"disabled":122,"type":155}," Throws a TypeError because ",[15,456,457],{},"intro"," isn't a method of ",[15,460,461],{},"emp",[148,463,465,467],{"className":464},[151],[153,466],{"disabled":122,"type":155}," \"Sam: Dev\"",[176,469,470,472,477],{},[179,471,181],{},[183,473,474,476],{},[186,475,188],{}," A — \"Dev: Sam\"",[183,478,479,481,482,485,486,481,488,491,492,495,496,499,500,502,503,505,506,508,509,511],{},[186,480,194],{}," ",[15,483,484],{},"Function.prototype.call(thisArg, ...args)"," invokes the function immediately with ",[15,487,17],{},[186,489,490],{},"explicitly"," set to ",[15,493,494],{},"thisArg",". This is ",[186,497,498],{},"explicit binding"," — it doesn't matter that ",[15,501,457],{}," was never attached to ",[15,504,461],{},"; ",[15,507,343],{}," temporarily makes ",[15,510,461],{}," the receiver. The \"Sam: Dev\" option swaps the template order, which isn't how the string is built.",[20,513,514,518,607,634],{"language":22},[24,515,517],{"id":516},"q4-what-does-this-log","Q4. What does this log?",[29,519,520],{"language":22},[32,521,523],{"className":34,"code":522,"language":22,"meta":36,"style":36},"function total(a, b) {\n  return this.base + a + b;\n}\n\nconsole.log(total.apply({ base: 10 }, [2, 3]));\n",[15,524,525,547,567,571,575],{"__ignoreMap":36},[40,526,527,529,532,534,538,541,544],{"class":42,"line":43},[40,528,231],{"class":46},[40,530,531],{"class":77}," total",[40,533,264],{"class":57},[40,535,537],{"class":536},"sCrzJ","a",[40,539,540],{"class":57},", ",[40,542,543],{"class":536},"b",[40,545,546],{"class":57},") {\n",[40,548,549,551,553,556,559,562,564],{"class":42,"line":61},[40,550,241],{"class":46},[40,552,244],{"class":50},[40,554,555],{"class":57},".base ",[40,557,558],{"class":46},"+",[40,560,561],{"class":57}," a ",[40,563,558],{"class":46},[40,565,566],{"class":57}," b;\n",[40,568,569],{"class":42,"line":74},[40,570,251],{"class":57},[40,572,573],{"class":42,"line":84},[40,574,123],{"emptyLinePlaceholder":122},[40,576,577,579,581,584,587,590,593,596,599,601,604],{"class":42,"line":107},[40,578,129],{"class":57},[40,580,132],{"class":77},[40,582,583],{"class":57},"(total.",[40,585,586],{"class":77},"apply",[40,588,589],{"class":57},"({ base: ",[40,591,592],{"class":50},"10",[40,594,595],{"class":57}," }, [",[40,597,598],{"class":50},"2",[40,600,540],{"class":57},[40,602,603],{"class":50},"3",[40,605,606],{"class":57},"]));\n",[143,608,610,616,622,628],{"className":609},[146],[148,611,613,615],{"className":612},[151],[153,614],{"disabled":122,"type":155}," 15",[148,617,619,621],{"className":618},[151],[153,620],{"disabled":122,"type":155}," NaN",[148,623,625,627],{"className":624},[151],[153,626],{"disabled":122,"type":155}," Throws a TypeError because arrays aren't valid arguments",[148,629,631,633],{"className":630},[151],[153,632],{"disabled":122,"type":155}," 5",[176,635,636,638,643],{},[179,637,181],{},[183,639,640,642],{},[186,641,188],{}," A — 15",[183,644,645,481,647,650,651,653,654,656,657,659,660,662,663,666,667,540,669,666,671,540,673,666,675,677,678,681,682,684],{},[186,646,194],{},[15,648,649],{},"apply(thisArg, argsArray)"," behaves exactly like ",[15,652,343],{},", except positional arguments are supplied as an array, which ",[15,655,586],{}," spreads into ",[15,658,537],{}," and ",[15,661,543],{},". So ",[15,664,665],{},"this.base"," is ",[15,668,592],{},[15,670,537],{},[15,672,598],{},[15,674,543],{},[15,676,603],{},", giving ",[15,679,680],{},"10 + 2 + 3 = 15",". ",[15,683,586],{}," accepting an array-like for arguments is its entire purpose — it doesn't throw.",[20,686,687,691,785,814],{"language":22},[24,688,690],{"id":689},"q5-what-is-logged-after-100ms","Q5. What is logged after 100ms?",[29,692,693],{"language":22},[32,694,696],{"className":34,"code":695,"language":22,"meta":36,"style":36},"const user = { name: 'Ava', greet() { return `Hi, I'm ${this.name}`; } };\nconst greetLater = user.greet.bind(user);\n\nsetTimeout(() => console.log(greetLater()), 100);\n",[15,697,698,733,751,755],{"__ignoreMap":36},[40,699,700,702,704,706,708,710,712,714,717,720,722,724,726,728,730],{"class":42,"line":43},[40,701,47],{"class":46},[40,703,51],{"class":50},[40,705,54],{"class":46},[40,707,407],{"class":57},[40,709,68],{"class":67},[40,711,540],{"class":57},[40,713,138],{"class":77},[40,715,716],{"class":57},"() { ",[40,718,719],{"class":46},"return",[40,721,90],{"class":67},[40,723,17],{"class":50},[40,725,95],{"class":67},[40,727,98],{"class":57},[40,729,101],{"class":67},[40,731,732],{"class":57},"; } };\n",[40,734,735,737,740,742,745,748],{"class":42,"line":61},[40,736,47],{"class":46},[40,738,739],{"class":50}," greetLater",[40,741,54],{"class":46},[40,743,744],{"class":57}," user.greet.",[40,746,747],{"class":77},"bind",[40,749,750],{"class":57},"(user);\n",[40,752,753],{"class":42,"line":74},[40,754,123],{"emptyLinePlaceholder":122},[40,756,757,760,763,766,769,771,773,776,779,782],{"class":42,"line":84},[40,758,759],{"class":77},"setTimeout",[40,761,762],{"class":57},"(() ",[40,764,765],{"class":46},"=>",[40,767,768],{"class":57}," console.",[40,770,132],{"class":77},[40,772,264],{"class":57},[40,774,775],{"class":77},"greetLater",[40,777,778],{"class":57},"()), ",[40,780,781],{"class":50},"100",[40,783,784],{"class":57},");\n",[143,786,788,793,798,804],{"className":787},[146],[148,789,791,156],{"className":790},[151],[153,792],{"disabled":122,"type":155},[148,794,796,162],{"className":795},[151],[153,797],{"disabled":122,"type":155},[148,799,801,803],{"className":800},[151],[153,802],{"disabled":122,"type":155}," The string is logged immediately, not after 100ms",[148,805,807,454,809,811,812],{"className":806},[151],[153,808],{"disabled":122,"type":155},[15,810,747],{}," already executed ",[15,813,138],{},[176,815,816,818,822],{},[179,817,181],{},[183,819,820,189],{},[186,821,188],{},[183,823,824,481,826,828,829,832,833,835,836,838,839,841,842,844,845,847,848,850,851,854],{},[186,825,194],{},[15,827,747],{}," does ",[186,830,831],{},"not"," call the function — it returns a new function with ",[15,834,17],{}," permanently locked to the given value, to be invoked later. That's the trap in option C\u002FD: beginners often confuse ",[15,837,747],{}," (defer + fix ",[15,840,17],{},") with ",[15,843,343],{},"\u002F",[15,846,586],{}," (invoke now). Since ",[15,849,775],{}," carries ",[15,852,853],{},"user"," as its bound receiver no matter how or when it's called, it still logs \"Hi, I'm Ava\" once the timer fires.",[20,856,857,861,950,974],{"language":22},[24,858,860],{"id":859},"q6-what-does-this-log","Q6. What does this log?",[29,862,863],{"language":22},[32,864,866],{"className":34,"code":865,"language":22,"meta":36,"style":36},"const counter = {\n  count: 0,\n  increment: () => {\n    this.count++;\n    return this.count;\n  }\n};\n\nconsole.log(counter.increment());\n",[15,867,868,879,889,901,914,923,927,931,935],{"__ignoreMap":36},[40,869,870,872,875,877],{"class":42,"line":43},[40,871,47],{"class":46},[40,873,874],{"class":50}," counter",[40,876,54],{"class":46},[40,878,58],{"class":57},[40,880,881,884,887],{"class":42,"line":61},[40,882,883],{"class":57},"  count: ",[40,885,886],{"class":50},"0",[40,888,71],{"class":57},[40,890,891,894,897,899],{"class":42,"line":74},[40,892,893],{"class":77},"  increment",[40,895,896],{"class":57},": () ",[40,898,765],{"class":46},[40,900,58],{"class":57},[40,902,903,906,909,912],{"class":42,"line":84},[40,904,905],{"class":50},"    this",[40,907,908],{"class":57},".count",[40,910,911],{"class":46},"++",[40,913,104],{"class":57},[40,915,916,918,920],{"class":42,"line":107},[40,917,87],{"class":46},[40,919,244],{"class":50},[40,921,922],{"class":57},".count;\n",[40,924,925],{"class":42,"line":113},[40,926,110],{"class":57},[40,928,929],{"class":42,"line":119},[40,930,116],{"class":57},[40,932,933],{"class":42,"line":126},[40,934,123],{"emptyLinePlaceholder":122},[40,936,938,940,942,945,948],{"class":42,"line":937},9,[40,939,129],{"class":57},[40,941,132],{"class":77},[40,943,944],{"class":57},"(counter.",[40,946,947],{"class":77},"increment",[40,949,141],{"class":57},[143,951,953,959,964,969],{"className":952},[146],[148,954,956,958],{"className":955},[151],[153,957],{"disabled":122,"type":155}," 1",[148,960,962,621],{"className":961},[151],[153,963],{"disabled":122,"type":155},[148,965,967,278],{"className":966},[151],[153,968],{"disabled":122,"type":155},[148,970,972,168],{"className":971},[151],[153,973],{"disabled":122,"type":155},[176,975,976,978,983],{},[179,977,181],{},[183,979,980,982],{},[186,981,188],{}," B — NaN",[183,984,985,481,987,990,991,993,994,996,997,1001,1002,1004,1005,1007,1008,1010,1011,1013,1014,1017,1018,681,1021,1024,1025,1027,1028,1031,1032,1035],{},[186,986,194],{},[186,988,989],{},"Idiom:"," arrow functions have no ",[15,992,17],{}," of their own — they capture ",[15,995,17],{}," lexically from the enclosing scope at the point they're ",[998,999,1000],"em",{},"defined",", not from the object they're attached to. Here ",[15,1003,947],{}," is defined at the top level of the module, so its ",[15,1006,17],{}," is the module's ",[15,1009,17],{}," (",[15,1012,333],{}," in an ES module, or ",[15,1015,1016],{},"module.exports"," in CommonJS) — either way, not ",[15,1019,1020],{},"counter",[15,1022,1023],{},"this.count"," is therefore ",[15,1026,333],{},", and ",[15,1029,1030],{},"undefined++"," evaluates to ",[15,1033,1034],{},"NaN",". Using an arrow function as an object method is a classic beginner mistake for exactly this reason.",[20,1037,1038,1042,1158,1181],{"language":22},[24,1039,1041],{"id":1040},"q7-what-does-this-log","Q7. What does this log?",[29,1043,1044],{"language":22},[32,1045,1047],{"className":34,"code":1046,"language":22,"meta":36,"style":36},"class Timer {\n  constructor() {\n    this.seconds = 0;\n  }\n  tick() {\n    this.seconds++;\n    return this.seconds;\n  }\n}\n\nconst t = new Timer();\nconsole.log(t.tick());\n",[15,1048,1049,1059,1066,1081,1085,1092,1103,1112,1116,1120,1125,1143],{"__ignoreMap":36},[40,1050,1051,1054,1057],{"class":42,"line":43},[40,1052,1053],{"class":46},"class",[40,1055,1056],{"class":77}," Timer",[40,1058,58],{"class":57},[40,1060,1061,1064],{"class":42,"line":61},[40,1062,1063],{"class":46},"  constructor",[40,1065,81],{"class":57},[40,1067,1068,1070,1073,1076,1079],{"class":42,"line":74},[40,1069,905],{"class":50},[40,1071,1072],{"class":57},".seconds ",[40,1074,1075],{"class":46},"=",[40,1077,1078],{"class":50}," 0",[40,1080,104],{"class":57},[40,1082,1083],{"class":42,"line":84},[40,1084,110],{"class":57},[40,1086,1087,1090],{"class":42,"line":107},[40,1088,1089],{"class":77},"  tick",[40,1091,81],{"class":57},[40,1093,1094,1096,1099,1101],{"class":42,"line":113},[40,1095,905],{"class":50},[40,1097,1098],{"class":57},".seconds",[40,1100,911],{"class":46},[40,1102,104],{"class":57},[40,1104,1105,1107,1109],{"class":42,"line":119},[40,1106,87],{"class":46},[40,1108,244],{"class":50},[40,1110,1111],{"class":57},".seconds;\n",[40,1113,1114],{"class":42,"line":126},[40,1115,110],{"class":57},[40,1117,1118],{"class":42,"line":937},[40,1119,251],{"class":57},[40,1121,1123],{"class":42,"line":1122},10,[40,1124,123],{"emptyLinePlaceholder":122},[40,1126,1128,1130,1133,1135,1138,1140],{"class":42,"line":1127},11,[40,1129,47],{"class":46},[40,1131,1132],{"class":50}," t",[40,1134,54],{"class":46},[40,1136,1137],{"class":46}," new",[40,1139,1056],{"class":77},[40,1141,1142],{"class":57},"();\n",[40,1144,1146,1148,1150,1153,1156],{"class":42,"line":1145},12,[40,1147,129],{"class":57},[40,1149,132],{"class":77},[40,1151,1152],{"class":57},"(t.",[40,1154,1155],{"class":77},"tick",[40,1157,141],{"class":57},[143,1159,1161,1166,1171,1176],{"className":1160},[146],[148,1162,1164,958],{"className":1163},[151],[153,1165],{"disabled":122,"type":155},[148,1167,1169,1078],{"className":1168},[151],[153,1170],{"disabled":122,"type":155},[148,1172,1174,278],{"className":1173},[151],[153,1175],{"disabled":122,"type":155},[148,1177,1179,621],{"className":1178},[151],[153,1180],{"disabled":122,"type":155},[176,1182,1183,1185,1190],{},[179,1184,181],{},[183,1186,1187,1189],{},[186,1188,188],{}," A — 1",[183,1191,1192,481,1194,1197,1198,1200,1201,1204,1205,1208,1209,1212,1213,1216,1217,1219,1220,1223,1224,1226],{},[186,1193,194],{},[15,1195,1196],{},"new Timer()"," creates a fresh object and binds it as ",[15,1199,17],{}," inside the constructor, setting ",[15,1202,1203],{},"this.seconds = 0",". Calling ",[15,1206,1207],{},"t.tick()"," afterward is ordinary implicit binding (",[15,1210,1211],{},"t"," is the receiver), so ",[15,1214,1215],{},"this.seconds++"," increments ",[15,1218,886],{}," to ",[15,1221,1222],{},"1"," and returns it. There's no ambiguity here — the gotchas around ",[15,1225,17],{}," and classes usually appear once a method is detached from its instance (see later questions).",[20,1228,1229,1233,1272,1317],{"language":22},[24,1230,1232],{"id":1231},"q8-what-happens-here","Q8. What happens here?",[29,1234,1235],{"language":22},[32,1236,1238],{"className":34,"code":1237,"language":22,"meta":36,"style":36},"const Foo = () => {};\nconst f = new Foo();\n",[15,1239,1240,1257],{"__ignoreMap":36},[40,1241,1242,1244,1247,1249,1252,1254],{"class":42,"line":43},[40,1243,47],{"class":46},[40,1245,1246],{"class":77}," Foo",[40,1248,54],{"class":46},[40,1250,1251],{"class":57}," () ",[40,1253,765],{"class":46},[40,1255,1256],{"class":57}," {};\n",[40,1258,1259,1261,1264,1266,1268,1270],{"class":42,"line":61},[40,1260,47],{"class":46},[40,1262,1263],{"class":50}," f",[40,1265,54],{"class":46},[40,1267,1137],{"class":46},[40,1269,1246],{"class":77},[40,1271,1142],{"class":57},[143,1273,1275,1284,1296,1305],{"className":1274},[146],[148,1276,1278,1280,1281],{"className":1277},[151],[153,1279],{"disabled":122,"type":155}," Throws ",[15,1282,1283],{},"TypeError: Foo is not a constructor",[148,1285,1287,481,1289,1292,1293],{"className":1286},[151],[153,1288],{"disabled":122,"type":155},[15,1290,1291],{},"f"," becomes a new empty object whose prototype is ",[15,1294,1295],{},"Foo.prototype",[148,1297,1299,481,1301,666,1303],{"className":1298},[151],[153,1300],{"disabled":122,"type":155},[15,1302,1291],{},[15,1304,333],{},[148,1306,1308,481,1310,1312,1313,1316],{"className":1307},[151],[153,1309],{"disabled":122,"type":155},[15,1311,17],{}," inside ",[15,1314,1315],{},"Foo"," is bound to the new object, same as a regular function",[176,1318,1319,1321,1328],{},[179,1320,181],{},[183,1322,1323,1325,1326],{},[186,1324,188],{}," A — Throws ",[15,1327,1283],{},[183,1329,1330,481,1332,1335,1336,1339,1340,1343,1344,1346],{},[186,1331,194],{},[186,1333,1334],{},"Safety:"," arrow functions intentionally lack the internal ",[15,1337,1338],{},"[[Construct]]"," method that regular functions have, so they can never be used with ",[15,1341,1342],{},"new"," — this is part of what makes their lexical ",[15,1345,17],{}," reliable (there's no separate \"new binding\" mode to worry about). This is a deliberate design choice, not an oversight: it prevents arrow functions from ever being accidentally used as constructors.",[20,1348,1349,1353,1468,1497],{"language":22},[24,1350,1352],{"id":1351},"q9-this-module-runs-under-strict-mode-its-an-es-module-what-happens","Q9. This module runs under strict mode (it's an ES module). What happens?",[29,1354,1355],{"language":22},[32,1356,1358],{"className":34,"code":1357,"language":22,"meta":36,"style":36},"const obj = {\n  items: [1, 2, 3],\n  label: 'nums',\n  printAll() {\n    this.items.forEach(function (item) {\n      console.log(this.label, item);\n    });\n  }\n};\n\nobj.printAll();\n",[15,1359,1360,1371,1389,1399,1406,1427,1441,1446,1450,1454,1458],{"__ignoreMap":36},[40,1361,1362,1364,1367,1369],{"class":42,"line":43},[40,1363,47],{"class":46},[40,1365,1366],{"class":50}," obj",[40,1368,54],{"class":46},[40,1370,58],{"class":57},[40,1372,1373,1376,1378,1380,1382,1384,1386],{"class":42,"line":61},[40,1374,1375],{"class":57},"  items: [",[40,1377,1222],{"class":50},[40,1379,540],{"class":57},[40,1381,598],{"class":50},[40,1383,540],{"class":57},[40,1385,603],{"class":50},[40,1387,1388],{"class":57},"],\n",[40,1390,1391,1394,1397],{"class":42,"line":74},[40,1392,1393],{"class":57},"  label: ",[40,1395,1396],{"class":67},"'nums'",[40,1398,71],{"class":57},[40,1400,1401,1404],{"class":42,"line":84},[40,1402,1403],{"class":77},"  printAll",[40,1405,81],{"class":57},[40,1407,1408,1410,1413,1416,1418,1420,1422,1425],{"class":42,"line":107},[40,1409,905],{"class":50},[40,1411,1412],{"class":57},".items.",[40,1414,1415],{"class":77},"forEach",[40,1417,264],{"class":57},[40,1419,231],{"class":46},[40,1421,1010],{"class":57},[40,1423,1424],{"class":536},"item",[40,1426,546],{"class":57},[40,1428,1429,1432,1434,1436,1438],{"class":42,"line":113},[40,1430,1431],{"class":57},"      console.",[40,1433,132],{"class":77},[40,1435,264],{"class":57},[40,1437,17],{"class":50},[40,1439,1440],{"class":57},".label, item);\n",[40,1442,1443],{"class":42,"line":119},[40,1444,1445],{"class":57},"    });\n",[40,1447,1448],{"class":42,"line":126},[40,1449,110],{"class":57},[40,1451,1452],{"class":42,"line":937},[40,1453,116],{"class":57},[40,1455,1456],{"class":42,"line":1122},[40,1457,123],{"emptyLinePlaceholder":122},[40,1459,1460,1463,1466],{"class":42,"line":1127},[40,1461,1462],{"class":57},"obj.",[40,1464,1465],{"class":77},"printAll",[40,1467,1142],{"class":57},[143,1469,1471,1477,1485,1491],{"className":1470},[146],[148,1472,1474,1476],{"className":1473},[151],[153,1475],{"disabled":122,"type":155}," Logs \"nums 1\", \"nums 2\", \"nums 3\"",[148,1478,1480,1280,1482],{"className":1479},[151],[153,1481],{"disabled":122,"type":155},[15,1483,1484],{},"TypeError: Cannot read properties of undefined (reading 'label')",[148,1486,1488,1490],{"className":1487},[151],[153,1489],{"disabled":122,"type":155}," Logs \"undefined 1\", \"undefined 2\", \"undefined 3\"",[148,1492,1494,1496],{"className":1493},[151],[153,1495],{"disabled":122,"type":155}," Logs \"nums undefined\" three times",[176,1498,1499,1501,1508],{},[179,1500,181],{},[183,1502,1503,1505,1506],{},[186,1504,188],{}," B — Throws ",[15,1507,1484],{},[183,1509,1510,481,1512,1515,1516,1518,1519,1521,1522,1524,1525,1527,1528,481,1530,1532,1533,1536,1537,1540,1541,1543,1544,1546,1547,1549,1550,1552,1553,1555],{},[186,1511,194],{},[186,1513,1514],{},"Debug:"," the callback passed to ",[15,1517,1415],{}," is a plain function, not a method call — it gets ",[186,1520,322],{},", not the ",[15,1523,17],{}," from ",[15,1526,1465],{},". In strict-mode code (which class bodies and ES modules always are), default binding makes ",[15,1529,17],{},[15,1531,333],{}," rather than falling back to the global object, so ",[15,1534,1535],{},"this.label"," throws immediately on the first iteration. The fix is to either use an arrow function for the callback (",[15,1538,1539],{},"this.items.forEach(item => console.log(this.label, item))",", which lexically inherits ",[15,1542,1465],{},"'s ",[15,1545,17],{},"), or pass ",[15,1548,17],{}," as ",[15,1551,1415],{},"'s optional second ",[15,1554,494],{}," argument.",[20,1557,1558,1562,1669,1692],{"language":22},[24,1559,1561],{"id":1560},"q10-what-does-this-log-in-nodejs","Q10. What does this log in Node.js?",[29,1563,1564],{"language":22},[32,1565,1567],{"className":34,"code":1566,"language":22,"meta":36,"style":36},"class Countdown {\n  constructor() {\n    this.time = 3;\n  }\n  start() {\n    setTimeout(function () {\n      console.log(this.time);\n    }, 0);\n  }\n}\n\nnew Countdown().start();\n",[15,1568,1569,1578,1584,1598,1602,1609,1621,1634,1643,1647,1651,1655],{"__ignoreMap":36},[40,1570,1571,1573,1576],{"class":42,"line":43},[40,1572,1053],{"class":46},[40,1574,1575],{"class":77}," Countdown",[40,1577,58],{"class":57},[40,1579,1580,1582],{"class":42,"line":61},[40,1581,1063],{"class":46},[40,1583,81],{"class":57},[40,1585,1586,1588,1591,1593,1596],{"class":42,"line":74},[40,1587,905],{"class":50},[40,1589,1590],{"class":57},".time ",[40,1592,1075],{"class":46},[40,1594,1595],{"class":50}," 3",[40,1597,104],{"class":57},[40,1599,1600],{"class":42,"line":84},[40,1601,110],{"class":57},[40,1603,1604,1607],{"class":42,"line":107},[40,1605,1606],{"class":77},"  start",[40,1608,81],{"class":57},[40,1610,1611,1614,1616,1618],{"class":42,"line":113},[40,1612,1613],{"class":77},"    setTimeout",[40,1615,264],{"class":57},[40,1617,231],{"class":46},[40,1619,1620],{"class":57}," () {\n",[40,1622,1623,1625,1627,1629,1631],{"class":42,"line":119},[40,1624,1431],{"class":57},[40,1626,132],{"class":77},[40,1628,264],{"class":57},[40,1630,17],{"class":50},[40,1632,1633],{"class":57},".time);\n",[40,1635,1636,1639,1641],{"class":42,"line":126},[40,1637,1638],{"class":57},"    }, ",[40,1640,886],{"class":50},[40,1642,784],{"class":57},[40,1644,1645],{"class":42,"line":937},[40,1646,110],{"class":57},[40,1648,1649],{"class":42,"line":1122},[40,1650,251],{"class":57},[40,1652,1653],{"class":42,"line":1127},[40,1654,123],{"emptyLinePlaceholder":122},[40,1656,1657,1659,1661,1664,1667],{"class":42,"line":1145},[40,1658,1342],{"class":46},[40,1660,1575],{"class":77},[40,1662,1663],{"class":57},"().",[40,1665,1666],{"class":77},"start",[40,1668,1142],{"class":57},[143,1670,1672,1677,1682,1687],{"className":1671},[146],[148,1673,1675,1595],{"className":1674},[151],[153,1676],{"disabled":122,"type":155},[148,1678,1680,278],{"className":1679},[151],[153,1681],{"disabled":122,"type":155},[148,1683,1685,168],{"className":1684},[151],[153,1686],{"disabled":122,"type":155},[148,1688,1690,621],{"className":1689},[151],[153,1691],{"disabled":122,"type":155},[176,1693,1694,1696,1701],{},[179,1695,181],{},[183,1697,1698,1700],{},[186,1699,188],{}," B — undefined",[183,1702,1703,1705,1706,1708,1709,1712,1713,1715,1716,481,1718,1721,1722,1725,1726,1729,1730,1732,1733,1735,1736,95],{},[186,1704,194],{}," The callback given to ",[15,1707,759],{}," is invoked as a plain function call by the timer internals, not as a method of the ",[15,1710,1711],{},"Countdown"," instance, so ",[15,1714,17],{}," inside it is ",[186,1717,831],{},[15,1719,1720],{},"countdown",". In Node it ends up being the ",[15,1723,1724],{},"Timeout"," object (or the global object in a browser under sloppy mode); either way, ",[15,1727,1728],{},"this.time"," doesn't exist on it, so the property access quietly returns ",[15,1731,333],{}," rather than throwing. The fix is to use an arrow function for the callback so it inherits ",[15,1734,17],{}," lexically from ",[15,1737,1738],{},"start()",[20,1740,1741,1745,1794,1828],{"language":22},[24,1742,1744],{"id":1743},"q11-what-does-this-log-when-the-button-is-clicked","Q11. What does this log when the button is clicked?",[29,1746,1747],{"language":22},[32,1748,1750],{"className":34,"code":1749,"language":22,"meta":36,"style":36},"button.addEventListener('click', () => {\n  console.log(this === button);\n});\n",[15,1751,1752,1772,1789],{"__ignoreMap":36},[40,1753,1754,1757,1760,1762,1765,1768,1770],{"class":42,"line":43},[40,1755,1756],{"class":57},"button.",[40,1758,1759],{"class":77},"addEventListener",[40,1761,264],{"class":57},[40,1763,1764],{"class":67},"'click'",[40,1766,1767],{"class":57},", () ",[40,1769,765],{"class":46},[40,1771,58],{"class":57},[40,1773,1774,1777,1779,1781,1783,1786],{"class":42,"line":61},[40,1775,1776],{"class":57},"  console.",[40,1778,132],{"class":77},[40,1780,264],{"class":57},[40,1782,17],{"class":50},[40,1784,1785],{"class":46}," ===",[40,1787,1788],{"class":57}," button);\n",[40,1790,1791],{"class":42,"line":74},[40,1792,1793],{"class":57},"});\n",[143,1795,1797,1803,1809,1818],{"className":1796},[146],[148,1798,1800,1802],{"className":1799},[151],[153,1801],{"disabled":122,"type":155}," false",[148,1804,1806,1808],{"className":1805},[151],[153,1807],{"disabled":122,"type":155}," true",[148,1810,1812,1814,1815,1817],{"className":1811},[151],[153,1813],{"disabled":122,"type":155}," Throws a ReferenceError because ",[15,1816,17],{}," is undeclared",[148,1819,1821,1823,1824,1827],{"className":1820},[151],[153,1822],{"disabled":122,"type":155}," It depends on whether the button has an ",[15,1825,1826],{},"onclick"," attribute",[176,1829,1830,1832,1837],{},[179,1831,181],{},[183,1833,1834,1836],{},[186,1835,188],{}," A — false",[183,1838,1839,1841,1842,1844,1845,1847,1848,1851,1852,1855,1856,1858,1859,1861,1862,95],{},[186,1840,194],{}," DOM listeners normally invoke a plain ",[15,1843,231],{}," callback with ",[15,1846,17],{}," set to the element the listener is attached to — that's how ",[15,1849,1850],{},"this === button"," would become ",[15,1853,1854],{},"true"," with a regular ",[15,1857,231],{}," handler. But arrow functions ignore that call-time binding entirely and use the lexical ",[15,1860,17],{}," from the surrounding scope where the arrow was defined (module\u002Fouter scope), which is not the button. Reaching for an arrow function \"for brevity\" in an event handler is a common way to accidentally lose access to the element via ",[15,1863,17],{},[20,1865,1866,1870,1981,2008],{"language":22},[24,1867,1869],{"id":1868},"q12-what-does-this-log","Q12. What does this log?",[29,1871,1872],{"language":22},[32,1873,1875],{"className":34,"code":1874,"language":22,"meta":36,"style":36},"function intro() {\n  return `${this.role}: ${this.name}`;\n}\n\nconst emp = { name: 'Sam', role: 'Dev' };\nconst bound = intro.bind(emp);\n\nconsole.log(bound.call({ name: 'Other', role: 'X' }));\n",[15,1876,1877,1885,1909,1913,1917,1935,1952,1956],{"__ignoreMap":36},[40,1878,1879,1881,1883],{"class":42,"line":43},[40,1880,231],{"class":46},[40,1882,358],{"class":77},[40,1884,81],{"class":57},[40,1886,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907],{"class":42,"line":61},[40,1888,241],{"class":46},[40,1890,367],{"class":67},[40,1892,17],{"class":50},[40,1894,95],{"class":67},[40,1896,374],{"class":57},[40,1898,377],{"class":67},[40,1900,17],{"class":50},[40,1902,95],{"class":67},[40,1904,98],{"class":57},[40,1906,101],{"class":67},[40,1908,104],{"class":57},[40,1910,1911],{"class":42,"line":74},[40,1912,251],{"class":57},[40,1914,1915],{"class":42,"line":84},[40,1916,123],{"emptyLinePlaceholder":122},[40,1918,1919,1921,1923,1925,1927,1929,1931,1933],{"class":42,"line":107},[40,1920,47],{"class":46},[40,1922,402],{"class":50},[40,1924,54],{"class":46},[40,1926,407],{"class":57},[40,1928,410],{"class":67},[40,1930,413],{"class":57},[40,1932,416],{"class":67},[40,1934,419],{"class":57},[40,1936,1937,1939,1942,1944,1947,1949],{"class":42,"line":113},[40,1938,47],{"class":46},[40,1940,1941],{"class":50}," bound",[40,1943,54],{"class":46},[40,1945,1946],{"class":57}," intro.",[40,1948,747],{"class":77},[40,1950,1951],{"class":57},"(emp);\n",[40,1953,1954],{"class":42,"line":119},[40,1955,123],{"emptyLinePlaceholder":122},[40,1957,1958,1960,1962,1965,1967,1970,1973,1975,1978],{"class":42,"line":126},[40,1959,129],{"class":57},[40,1961,132],{"class":77},[40,1963,1964],{"class":57},"(bound.",[40,1966,343],{"class":77},[40,1968,1969],{"class":57},"({ name: ",[40,1971,1972],{"class":67},"'Other'",[40,1974,413],{"class":57},[40,1976,1977],{"class":67},"'X'",[40,1979,1980],{"class":57}," }));\n",[143,1982,1984,1989,1995,2003],{"className":1983},[146],[148,1985,1987,442],{"className":1986},[151],[153,1988],{"disabled":122,"type":155},[148,1990,1992,1994],{"className":1991},[151],[153,1993],{"disabled":122,"type":155}," \"X: Other\"",[148,1996,1998,454,2000,2002],{"className":1997},[151],[153,1999],{"disabled":122,"type":155},[15,2001,343],{}," can't be used on a bound function",[148,2004,2006,448],{"className":2005},[151],[153,2007],{"disabled":122,"type":155},[176,2009,2010,2012,2016],{},[179,2011,181],{},[183,2013,2014,476],{},[186,2015,188],{},[183,2017,2018,481,2020,481,2022,2024,2025,2027,2028,540,2030,2032,2033,2035,2036,2038,2039,2042,2043,844,2045,2047],{},[186,2019,194],{},[186,2021,989],{},[15,2023,747],{}," creates a \"hard-bound\" function whose ",[15,2026,17],{}," cannot be overridden by any later ",[15,2029,343],{},[15,2031,586],{},", or even another ",[15,2034,747],{}," — the original receiver (",[15,2037,461],{},") always wins. Beginners often assume the ",[998,2040,2041],{},"most recent"," binding call takes precedence, but explicit-binding precedence rules put hard binding above ordinary ",[15,2044,343],{},[15,2046,586],{}," on the bound wrapper.",[20,2049,2050,2054,2150,2178],{"language":22},[24,2051,2053],{"id":2052},"q13-what-does-this-log","Q13. What does this log?",[29,2055,2056],{"language":22},[32,2057,2059],{"className":34,"code":2058,"language":22,"meta":36,"style":36},"function Person(name) {\n  this.name = name;\n}\n\nconst BoundPerson = Person.bind({ name: 'ignored' });\nconst p = new BoundPerson('Zoe');\n\nconsole.log(p.name);\n",[15,2060,2061,2074,2087,2091,2095,2117,2137,2141],{"__ignoreMap":36},[40,2062,2063,2065,2068,2070,2072],{"class":42,"line":43},[40,2064,231],{"class":46},[40,2066,2067],{"class":77}," Person",[40,2069,264],{"class":57},[40,2071,98],{"class":536},[40,2073,546],{"class":57},[40,2075,2076,2079,2082,2084],{"class":42,"line":61},[40,2077,2078],{"class":50},"  this",[40,2080,2081],{"class":57},".name ",[40,2083,1075],{"class":46},[40,2085,2086],{"class":57}," name;\n",[40,2088,2089],{"class":42,"line":74},[40,2090,251],{"class":57},[40,2092,2093],{"class":42,"line":84},[40,2094,123],{"emptyLinePlaceholder":122},[40,2096,2097,2099,2102,2104,2107,2109,2111,2114],{"class":42,"line":107},[40,2098,47],{"class":46},[40,2100,2101],{"class":50}," BoundPerson",[40,2103,54],{"class":46},[40,2105,2106],{"class":57}," Person.",[40,2108,747],{"class":77},[40,2110,1969],{"class":57},[40,2112,2113],{"class":67},"'ignored'",[40,2115,2116],{"class":57}," });\n",[40,2118,2119,2121,2124,2126,2128,2130,2132,2135],{"class":42,"line":113},[40,2120,47],{"class":46},[40,2122,2123],{"class":50}," p",[40,2125,54],{"class":46},[40,2127,1137],{"class":46},[40,2129,2101],{"class":77},[40,2131,264],{"class":57},[40,2133,2134],{"class":67},"'Zoe'",[40,2136,784],{"class":57},[40,2138,2139],{"class":42,"line":119},[40,2140,123],{"emptyLinePlaceholder":122},[40,2142,2143,2145,2147],{"class":42,"line":126},[40,2144,129],{"class":57},[40,2146,132],{"class":77},[40,2148,2149],{"class":57},"(p.name);\n",[143,2151,2153,2159,2165,2170],{"className":2152},[146],[148,2154,2156,2158],{"className":2155},[151],[153,2157],{"disabled":122,"type":155}," 'ignored'",[148,2160,2162,2164],{"className":2161},[151],[153,2163],{"disabled":122,"type":155}," 'Zoe'",[148,2166,2168,278],{"className":2167},[151],[153,2169],{"disabled":122,"type":155},[148,2171,2173,2175,2176],{"className":2172},[151],[153,2174],{"disabled":122,"type":155}," Throws a TypeError because a bound function can't be used with ",[15,2177,1342],{},[176,2179,2180,2182,2187],{},[179,2181,181],{},[183,2183,2184,2186],{},[186,2185,188],{}," B — 'Zoe'",[183,2188,2189,481,2191,2193,2194,2197,2198,2201,2202,2204,2205,2207,2208,2211,2212,2214,2215,2218,2219,2221],{},[186,2190,194],{},[186,2192,1334],{}," this is the one case where hard binding ",[998,2195,2196],{},"does"," get overridden — the spec explicitly makes ",[186,2199,2200],{},"new binding"," take precedence over a bound ",[15,2203,17],{}," when a bound function is invoked with ",[15,2206,1342],{},". The bound ",[15,2209,2210],{},"{ name: 'ignored' }"," receiver is discarded, and ",[15,2213,183],{}," becomes a freshly constructed object as if ",[15,2216,2217],{},"new Person('Zoe')"," had been called directly. This is easy to get wrong because it contradicts Q12's rule, but ",[15,2220,1342],{}," is the one exception to \"bind always wins.\"",[20,2223,2224,2228,2281,2311],{"language":22},[24,2225,2227],{"id":2226},"q14-what-does-this-log","Q14. What does this log?",[29,2229,2230],{"language":22},[32,2231,2233],{"className":34,"code":2232,"language":22,"meta":36,"style":36},"'use strict';\n\nfunction f() {\n  return this;\n}\n\nconsole.log(f());\n",[15,2234,2235,2241,2245,2253,2261,2265,2269],{"__ignoreMap":36},[40,2236,2237,2239],{"class":42,"line":43},[40,2238,329],{"class":67},[40,2240,104],{"class":57},[40,2242,2243],{"class":42,"line":61},[40,2244,123],{"emptyLinePlaceholder":122},[40,2246,2247,2249,2251],{"class":42,"line":74},[40,2248,231],{"class":46},[40,2250,1263],{"class":77},[40,2252,81],{"class":57},[40,2254,2255,2257,2259],{"class":42,"line":84},[40,2256,241],{"class":46},[40,2258,244],{"class":50},[40,2260,104],{"class":57},[40,2262,2263],{"class":42,"line":107},[40,2264,251],{"class":57},[40,2266,2267],{"class":42,"line":113},[40,2268,123],{"emptyLinePlaceholder":122},[40,2270,2271,2273,2275,2277,2279],{"class":42,"line":119},[40,2272,129],{"class":57},[40,2274,132],{"class":77},[40,2276,264],{"class":57},[40,2278,1291],{"class":77},[40,2280,141],{"class":57},[143,2282,2284,2289,2296,2303],{"className":2283},[146],[148,2285,2287,278],{"className":2286},[151],[153,2288],{"disabled":122,"type":155},[148,2290,2292,481,2294],{"className":2291},[151],[153,2293],{"disabled":122,"type":155},[15,2295,287],{},[148,2297,2299,481,2301],{"className":2298},[151],[153,2300],{"disabled":122,"type":155},[15,2302,297],{},[148,2304,2306,481,2308],{"className":2305},[151],[153,2307],{"disabled":122,"type":155},[15,2309,2310],{},"null",[176,2312,2313,2315,2319],{},[179,2314,181],{},[183,2316,2317,315],{},[186,2318,188],{},[183,2320,2321,481,2323,2326,2327,2329,2330,1549,2332,2334,2335,2338,2339,2342,2343,2345],{},[186,2322,194],{},[186,2324,2325],{},"Portability:"," under ",[15,2328,329],{},", default binding no longer falls back to the global object the way sloppy-mode code does — it leaves ",[15,2331,17],{},[15,2333,333],{},". This matters for portability between script contexts: the same unbound function call in a non-strict ",[15,2336,2337],{},"\u003Cscript>"," tag would return ",[15,2340,2341],{},"window"," in a browser, so relying on ",[15,2344,17],{}," in a top-level function call behaves differently depending on strict mode.",[20,2347,2348,2356,2476,2516],{"language":22},[24,2349,2351,2352,2355],{"id":2350},"q15-why-is-thishandleclick-thishandleclickbindthis-written-inside-this-constructor","Q15. Why is ",[15,2353,2354],{},"this.handleClick = this.handleClick.bind(this)"," written inside this constructor?",[29,2357,2358],{"language":22},[32,2359,2361],{"className":34,"code":2360,"language":22,"meta":36,"style":36},"class Button {\n  constructor() {\n    this.clicks = 0;\n    this.handleClick = this.handleClick.bind(this);\n  }\n  handleClick() {\n    this.clicks++;\n  }\n}\n\nconst b = new Button();\nel.addEventListener('click', b.handleClick);\n",[15,2362,2363,2372,2378,2391,2413,2417,2424,2435,2439,2443,2447,2462],{"__ignoreMap":36},[40,2364,2365,2367,2370],{"class":42,"line":43},[40,2366,1053],{"class":46},[40,2368,2369],{"class":77}," Button",[40,2371,58],{"class":57},[40,2373,2374,2376],{"class":42,"line":61},[40,2375,1063],{"class":46},[40,2377,81],{"class":57},[40,2379,2380,2382,2385,2387,2389],{"class":42,"line":74},[40,2381,905],{"class":50},[40,2383,2384],{"class":57},".clicks ",[40,2386,1075],{"class":46},[40,2388,1078],{"class":50},[40,2390,104],{"class":57},[40,2392,2393,2395,2398,2400,2402,2405,2407,2409,2411],{"class":42,"line":84},[40,2394,905],{"class":50},[40,2396,2397],{"class":57},".handleClick ",[40,2399,1075],{"class":46},[40,2401,244],{"class":50},[40,2403,2404],{"class":57},".handleClick.",[40,2406,747],{"class":77},[40,2408,264],{"class":57},[40,2410,17],{"class":50},[40,2412,784],{"class":57},[40,2414,2415],{"class":42,"line":107},[40,2416,110],{"class":57},[40,2418,2419,2422],{"class":42,"line":113},[40,2420,2421],{"class":77},"  handleClick",[40,2423,81],{"class":57},[40,2425,2426,2428,2431,2433],{"class":42,"line":119},[40,2427,905],{"class":50},[40,2429,2430],{"class":57},".clicks",[40,2432,911],{"class":46},[40,2434,104],{"class":57},[40,2436,2437],{"class":42,"line":126},[40,2438,110],{"class":57},[40,2440,2441],{"class":42,"line":937},[40,2442,251],{"class":57},[40,2444,2445],{"class":42,"line":1122},[40,2446,123],{"emptyLinePlaceholder":122},[40,2448,2449,2451,2454,2456,2458,2460],{"class":42,"line":1127},[40,2450,47],{"class":46},[40,2452,2453],{"class":50}," b",[40,2455,54],{"class":46},[40,2457,1137],{"class":46},[40,2459,2369],{"class":77},[40,2461,1142],{"class":57},[40,2463,2464,2467,2469,2471,2473],{"class":42,"line":1145},[40,2465,2466],{"class":57},"el.",[40,2468,1759],{"class":77},[40,2470,264],{"class":57},[40,2472,1764],{"class":67},[40,2474,2475],{"class":57},", b.handleClick);\n",[143,2477,2479,2495,2501,2507],{"className":2478},[146],[148,2480,2482,2484,2485,2488,2489,2491,2492],{"className":2481},[151],[153,2483],{"disabled":122,"type":155}," So ",[15,2486,2487],{},"handleClick"," keeps referring to ",[15,2490,543],{}," even though the listener calls it as a plain function, not ",[15,2493,2494],{},"b.handleClick()",[148,2496,2498,2500],{"className":2497},[151],[153,2499],{"disabled":122,"type":155}," To improve performance by caching the method lookup",[148,2502,2504,2506],{"className":2503},[151],[153,2505],{"disabled":122,"type":155}," Because class methods can't be passed as callbacks otherwise (a syntax restriction)",[148,2508,2510,2512,2513,2515],{"className":2509},[151],[153,2511],{"disabled":122,"type":155}," To make ",[15,2514,2487],{}," a private field",[176,2517,2518,2520,2531],{},[179,2519,181],{},[183,2521,2522,2524,2525,2488,2527,2491,2529],{},[186,2523,188],{}," A — So ",[15,2526,2487],{},[15,2528,543],{},[15,2530,2494],{},[183,2532,2533,481,2535,2537,2538,2541,2542,2545,2546,2549,2550,2552,2553,2555,2556,2558],{},[186,2534,194],{},[186,2536,989],{}," once a method is passed by reference (",[15,2539,2540],{},"b.handleClick"," without calling it), it's detached from its instance — the event system will call it as ",[15,2543,2544],{},"handleClick(event)",", a plain invocation with default binding, not ",[15,2547,2548],{},"b.handleClick(event)",". Pre-binding in the constructor guarantees ",[15,2551,17],{}," stays ",[15,2554,543],{}," regardless of how the function is later invoked. This is a genuine correctness requirement, not a performance trick, and class syntax has no restriction that would otherwise forbid passing a method as a callback (it would just silently lose its ",[15,2557,17],{},").",[20,2560,2561,2565,2622,2656],{"language":22},[24,2562,2564],{"id":2563},"q16-what-is-the-trade-off-of-using-an-arrow-class-field-instead-of-a-bound-prototype-method","Q16. What is the trade-off of using an arrow class field instead of a bound prototype method?",[29,2566,2567],{"language":22},[32,2568,2570],{"className":34,"code":2569,"language":22,"meta":36,"style":36},"class Button {\n  clicks = 0;\n  handleClick = () => {\n    this.clicks++;\n  };\n}\n",[15,2571,2572,2580,2591,2603,2613,2618],{"__ignoreMap":36},[40,2573,2574,2576,2578],{"class":42,"line":43},[40,2575,1053],{"class":46},[40,2577,2369],{"class":77},[40,2579,58],{"class":57},[40,2581,2582,2585,2587,2589],{"class":42,"line":61},[40,2583,2584],{"class":536},"  clicks",[40,2586,54],{"class":46},[40,2588,1078],{"class":50},[40,2590,104],{"class":57},[40,2592,2593,2595,2597,2599,2601],{"class":42,"line":74},[40,2594,2421],{"class":77},[40,2596,54],{"class":46},[40,2598,1251],{"class":57},[40,2600,765],{"class":46},[40,2602,58],{"class":57},[40,2604,2605,2607,2609,2611],{"class":42,"line":84},[40,2606,905],{"class":50},[40,2608,2430],{"class":57},[40,2610,911],{"class":46},[40,2612,104],{"class":57},[40,2614,2615],{"class":42,"line":107},[40,2616,2617],{"class":57},"  };\n",[40,2619,2620],{"class":42,"line":113},[40,2621,251],{"class":57},[143,2623,2625,2633,2641,2650],{"className":2624},[146],[148,2626,2628,481,2630,2632],{"className":2627},[151],[153,2629],{"disabled":122,"type":155},[15,2631,2487],{}," is guaranteed auto-bound to each instance, but it's created fresh per instance (living on the object, not the shared prototype), using more memory than a single prototype method",[148,2634,2636,481,2638,2640],{"className":2635},[151],[153,2637],{"disabled":122,"type":155},[15,2639,2487],{}," behaves identically to a prototype method in every respect, including memory usage",[148,2642,2644,2646,2647],{"className":2643},[151],[153,2645],{"disabled":122,"type":155}," Arrow class fields cannot access other instance fields like ",[15,2648,2649],{},"this.clicks",[148,2651,2653,2655],{"className":2652},[151],[153,2654],{"disabled":122,"type":155}," This syntax is invalid — arrow functions cannot be used as class fields",[176,2657,2658,2660,2667],{},[179,2659,181],{},[183,2661,2662,2664,2665,2632],{},[186,2663,188],{}," A — ",[15,2666,2487],{},[183,2668,2669,481,2671,2674,2675,2677,2678,2681,2682,2685],{},[186,2670,194],{},[186,2672,2673],{},"Performance:"," an arrow class field is initialized per-instance in the constructor step, capturing that instance's ",[15,2676,17],{}," lexically — so it never needs ",[15,2679,2680],{},".bind()"," and is safe to hand off as a callback directly. The cost is that every instance gets its own copy of the function instead of sharing one on ",[15,2683,2684],{},"Button.prototype",", which matters if you're creating thousands of instances. For a handful of instances this is a non-issue and the auto-binding convenience usually wins.",[20,2687,2688,2692,2774,2803],{"language":22},[24,2689,2691],{"id":2690},"q17-what-does-this-log","Q17. What does this log?",[29,2693,2694],{"language":22},[32,2695,2697],{"className":34,"code":2696,"language":22,"meta":36,"style":36},"'use strict';\n\nconst user = { name: 'Ava', greet() { return `Hi, I'm ${this.name}`; } };\nconst { greet } = user;\n\nconsole.log(greet());\n",[15,2698,2699,2705,2709,2741,2758,2762],{"__ignoreMap":36},[40,2700,2701,2703],{"class":42,"line":43},[40,2702,329],{"class":67},[40,2704,104],{"class":57},[40,2706,2707],{"class":42,"line":61},[40,2708,123],{"emptyLinePlaceholder":122},[40,2710,2711,2713,2715,2717,2719,2721,2723,2725,2727,2729,2731,2733,2735,2737,2739],{"class":42,"line":74},[40,2712,47],{"class":46},[40,2714,51],{"class":50},[40,2716,54],{"class":46},[40,2718,407],{"class":57},[40,2720,68],{"class":67},[40,2722,540],{"class":57},[40,2724,138],{"class":77},[40,2726,716],{"class":57},[40,2728,719],{"class":46},[40,2730,90],{"class":67},[40,2732,17],{"class":50},[40,2734,95],{"class":67},[40,2736,98],{"class":57},[40,2738,101],{"class":67},[40,2740,732],{"class":57},[40,2742,2743,2745,2748,2750,2753,2755],{"class":42,"line":84},[40,2744,47],{"class":46},[40,2746,2747],{"class":57}," { ",[40,2749,138],{"class":50},[40,2751,2752],{"class":57}," } ",[40,2754,1075],{"class":46},[40,2756,2757],{"class":57}," user;\n",[40,2759,2760],{"class":42,"line":107},[40,2761,123],{"emptyLinePlaceholder":122},[40,2763,2764,2766,2768,2770,2772],{"class":42,"line":113},[40,2765,129],{"class":57},[40,2767,132],{"class":77},[40,2769,264],{"class":57},[40,2771,138],{"class":77},[40,2773,141],{"class":57},[143,2775,2777,2785,2790,2795],{"className":2776},[146],[148,2778,2780,1280,2782],{"className":2779},[151],[153,2781],{"disabled":122,"type":155},[15,2783,2784],{},"TypeError: Cannot read properties of undefined (reading 'name')",[148,2786,2788,156],{"className":2787},[151],[153,2789],{"disabled":122,"type":155},[148,2791,2793,162],{"className":2792},[151],[153,2794],{"disabled":122,"type":155},[148,2796,2798,1814,2800,2802],{"className":2797},[151],[153,2799],{"disabled":122,"type":155},[15,2801,138],{}," isn't defined",[176,2804,2805,2807,2813],{},[179,2806,181],{},[183,2808,2809,1325,2811],{},[186,2810,188],{},[15,2812,2784],{},[183,2814,2815,2817,2818,2820,2821,2823,2824,2826,2827,2829,2830,2833,2834,666,2836,2838,2839,2842,2843,2845,2846,2849,2850,2852],{},[186,2816,194],{}," Destructuring ",[15,2819,138],{}," off ",[15,2822,853],{}," copies the ",[998,2825,231],{},", not its association with ",[15,2828,853],{}," — calling the standalone ",[15,2831,2832],{},"greet()"," afterward is a plain invocation with default binding, and in strict mode that means ",[15,2835,17],{},[15,2837,333],{},", so ",[15,2840,2841],{},"this.name"," throws. The best-practice fix is to either call it as ",[15,2844,202],{},", bind it explicitly (",[15,2847,2848],{},"const greet = user.greet.bind(user)","), or avoid destructuring methods that depend on ",[15,2851,17],{}," at all — prefer plain functions with explicit parameters when a value needs to travel independently of its object.",[20,2854,2855,2859,2958,2988],{"language":22},[24,2856,2858],{"id":2857},"q18-which-style-is-generally-the-more-testable-reusable-choice-for-a-value-transformation-function","Q18. Which style is generally the more testable, reusable choice for a value-transformation function?",[29,2860,2861],{"language":22},[32,2862,2864],{"className":34,"code":2863,"language":22,"meta":36,"style":36},"\u002F\u002F Option A\nfunction applyDiscount() {\n  return this.price * (1 - this.rate);\n}\n\n\u002F\u002F Option B\nfunction applyDiscount(price, rate) {\n  return price * (1 - rate);\n}\n",[15,2865,2866,2872,2881,2905,2909,2913,2918,2936,2954],{"__ignoreMap":36},[40,2867,2868],{"class":42,"line":43},[40,2869,2871],{"class":2870},"sdCPZ","\u002F\u002F Option A\n",[40,2873,2874,2876,2879],{"class":42,"line":61},[40,2875,231],{"class":46},[40,2877,2878],{"class":77}," applyDiscount",[40,2880,81],{"class":57},[40,2882,2883,2885,2887,2890,2893,2895,2897,2900,2902],{"class":42,"line":74},[40,2884,241],{"class":46},[40,2886,244],{"class":50},[40,2888,2889],{"class":57},".price ",[40,2891,2892],{"class":46},"*",[40,2894,1010],{"class":57},[40,2896,1222],{"class":50},[40,2898,2899],{"class":46}," -",[40,2901,244],{"class":50},[40,2903,2904],{"class":57},".rate);\n",[40,2906,2907],{"class":42,"line":84},[40,2908,251],{"class":57},[40,2910,2911],{"class":42,"line":107},[40,2912,123],{"emptyLinePlaceholder":122},[40,2914,2915],{"class":42,"line":113},[40,2916,2917],{"class":2870},"\u002F\u002F Option B\n",[40,2919,2920,2922,2924,2926,2929,2931,2934],{"class":42,"line":119},[40,2921,231],{"class":46},[40,2923,2878],{"class":77},[40,2925,264],{"class":57},[40,2927,2928],{"class":536},"price",[40,2930,540],{"class":57},[40,2932,2933],{"class":536},"rate",[40,2935,546],{"class":57},[40,2937,2938,2940,2943,2945,2947,2949,2951],{"class":42,"line":126},[40,2939,241],{"class":46},[40,2941,2942],{"class":57}," price ",[40,2944,2892],{"class":46},[40,2946,1010],{"class":57},[40,2948,1222],{"class":50},[40,2950,2899],{"class":46},[40,2952,2953],{"class":57}," rate);\n",[40,2955,2956],{"class":42,"line":937},[40,2957,251],{"class":57},[143,2959,2961,2967,2976,2982],{"className":2960},[146],[148,2962,2964,2966],{"className":2963},[151],[153,2965],{"disabled":122,"type":155}," Option B — explicit parameters, no dependency on how the function is called",[148,2968,2970,2972,2973,2975],{"className":2969},[151],[153,2971],{"disabled":122,"type":155}," Option A — relying on ",[15,2974,17],{}," is always more idiomatic in JavaScript",[148,2977,2979,2981],{"className":2978},[151],[153,2980],{"disabled":122,"type":155}," They are equivalent in every practical sense",[148,2983,2985,2987],{"className":2984},[151],[153,2986],{"disabled":122,"type":155}," Option A, but only if it's converted to an arrow function",[176,2989,2990,2992,2997],{},[179,2991,181],{},[183,2993,2994,2996],{},[186,2995,188],{}," A — Option B — explicit parameters, no dependency on how the function is called",[183,2998,2999,481,3001,3003,3004,3006,3007,844,3009,3011,3012,3014,3015,3017],{},[186,3000,194],{},[186,3002,989],{}," functions that read ",[15,3005,17],{}," are coupled to their call-site — they only work correctly when invoked as a method (or explicitly bound), which makes them fragile when passed around, destructured, or unit-tested in isolation (you'd have to fake a receiver via ",[15,3008,343],{},[15,3010,586],{}," just to test them). Preferring explicit parameters over implicit ",[15,3013,17],{}," is a widely recommended practice for utility\u002Fpure functions; ",[15,3016,17],{}," binding is best reserved for genuine object methods that need to read multiple pieces of instance state.",[20,3019,3020,3027,3051,3083],{"language":22},[24,3021,3023,3024,3026],{"id":3022},"q19-what-does-this-refer-to-at-the-top-level-of-an-es-module-file","Q19. What does ",[15,3025,17],{}," refer to at the top level of an ES module file?",[29,3028,3029],{"language":22},[32,3030,3032],{"className":34,"code":3031,"language":22,"meta":36,"style":36},"\u002F\u002F inside a .mjs file or a \u003Cscript type=\"module\">\nconsole.log(this);\n",[15,3033,3034,3039],{"__ignoreMap":36},[40,3035,3036],{"class":42,"line":43},[40,3037,3038],{"class":2870},"\u002F\u002F inside a .mjs file or a \u003Cscript type=\"module\">\n",[40,3040,3041,3043,3045,3047,3049],{"class":42,"line":61},[40,3042,129],{"class":57},[40,3044,132],{"class":77},[40,3046,264],{"class":57},[40,3048,17],{"class":50},[40,3050,784],{"class":57},[143,3052,3054,3059,3069,3076],{"className":3053},[146],[148,3055,3057,278],{"className":3056},[151],[153,3058],{"disabled":122,"type":155},[148,3060,3062,3064,3065,3068],{"className":3061},[151],[153,3063],{"disabled":122,"type":155}," The module's own ",[15,3066,3067],{},"exports"," object, like in CommonJS",[148,3070,3072,481,3074],{"className":3071},[151],[153,3073],{"disabled":122,"type":155},[15,3075,287],{},[148,3077,3079,481,3081],{"className":3078},[151],[153,3080],{"disabled":122,"type":155},[15,3082,2310],{},[176,3084,3085,3087,3091],{},[179,3086,181],{},[183,3088,3089,315],{},[186,3090,188],{},[183,3092,3093,481,3095,3097,3098,3100,3101,3103,3104,666,3106,3108,3109,3112,3113,666,3115,3117],{},[186,3094,194],{},[186,3096,2325],{}," ES modules are always strict and have no top-level ",[15,3099,17],{}," binding to any object — it's ",[15,3102,333],{}," by spec, unlike CommonJS modules, where top-level ",[15,3105,17],{},[15,3107,1016],{},". Code migrating from CommonJS to ESM that relied on top-level ",[15,3110,3111],{},"this.foo = ..."," for exports will silently break (",[15,3114,17],{},[15,3116,333],{},", so property access on it throws) rather than continuing to \"work\" some other way.",[20,3119,3120,3124,3218,3253],{"language":22},[24,3121,3123],{"id":3122},"q20-what-does-this-log","Q20. What does this log?",[29,3125,3126],{"language":22},[32,3127,3129],{"className":34,"code":3128,"language":22,"meta":36,"style":36},"const nums = [1, 2, 3];\nconst scaled = nums.map(function (x) {\n  return this.multiplier * x;\n}, { multiplier: 10 });\n\nconsole.log(scaled);\n",[15,3130,3131,3156,3182,3196,3205,3209],{"__ignoreMap":36},[40,3132,3133,3135,3138,3140,3143,3145,3147,3149,3151,3153],{"class":42,"line":43},[40,3134,47],{"class":46},[40,3136,3137],{"class":50}," nums",[40,3139,54],{"class":46},[40,3141,3142],{"class":57}," [",[40,3144,1222],{"class":50},[40,3146,540],{"class":57},[40,3148,598],{"class":50},[40,3150,540],{"class":57},[40,3152,603],{"class":50},[40,3154,3155],{"class":57},"];\n",[40,3157,3158,3160,3163,3165,3168,3171,3173,3175,3177,3180],{"class":42,"line":61},[40,3159,47],{"class":46},[40,3161,3162],{"class":50}," scaled",[40,3164,54],{"class":46},[40,3166,3167],{"class":57}," nums.",[40,3169,3170],{"class":77},"map",[40,3172,264],{"class":57},[40,3174,231],{"class":46},[40,3176,1010],{"class":57},[40,3178,3179],{"class":536},"x",[40,3181,546],{"class":57},[40,3183,3184,3186,3188,3191,3193],{"class":42,"line":74},[40,3185,241],{"class":46},[40,3187,244],{"class":50},[40,3189,3190],{"class":57},".multiplier ",[40,3192,2892],{"class":46},[40,3194,3195],{"class":57}," x;\n",[40,3197,3198,3201,3203],{"class":42,"line":84},[40,3199,3200],{"class":57},"}, { multiplier: ",[40,3202,592],{"class":50},[40,3204,2116],{"class":57},[40,3206,3207],{"class":42,"line":107},[40,3208,123],{"emptyLinePlaceholder":122},[40,3210,3211,3213,3215],{"class":42,"line":113},[40,3212,129],{"class":57},[40,3214,132],{"class":77},[40,3216,3217],{"class":57},"(scaled);\n",[143,3219,3221,3229,3237,3245],{"className":3220},[146],[148,3222,3224,481,3226],{"className":3223},[151],[153,3225],{"disabled":122,"type":155},[40,3227,3228],{},"10, 20, 30",[148,3230,3232,454,3234,3236],{"className":3231},[151],[153,3233],{"disabled":122,"type":155},[15,3235,3170],{},"'s callback can't be passed a receiver",[148,3238,3240,481,3242],{"className":3239},[151],[153,3241],{"disabled":122,"type":155},[40,3243,3244],{},"NaN, NaN, NaN",[148,3246,3248,481,3250],{"className":3247},[151],[153,3249],{"disabled":122,"type":155},[40,3251,3252],{},"1, 2, 3",[176,3254,3255,3257,3263],{},[179,3256,181],{},[183,3258,3259,2664,3261],{},[186,3260,188],{},[40,3262,3228],{},[183,3264,3265,481,3267,3269,3270,540,3272,540,3275,540,3277,540,3280,540,3283,3286,3287,3289,3290,3292,3293,666,3296,3298,3299,3302,3303,3305],{},[186,3266,194],{},[186,3268,989],{}," many array iteration methods (",[15,3271,3170],{},[15,3273,3274],{},"filter",[15,3276,1415],{},[15,3278,3279],{},"some",[15,3281,3282],{},"every",[15,3284,3285],{},"find",") accept an optional second argument that becomes ",[15,3288,17],{}," inside the callback — it's a lesser-known alternative to ",[15,3291,2680],{}," or an arrow function for supplying a receiver. Here ",[15,3294,3295],{},"this.multiplier",[15,3297,592],{}," for every call, so each element is scaled: ",[15,3300,3301],{},"[1*10, 2*10, 3*10]",". It's underused compared to arrow functions\u002Fclosures, but recognizing it avoids \"wait, how does ",[15,3304,17],{}," work here\" confusion when it appears in existing code.",[3307,3308,3309],"style",{},"html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .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);}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}",{"title":36,"searchDepth":61,"depth":61,"links":3311},[3312,3313,3314,3316,3317,3318,3319,3320,3321,3322,3323,3324,3325,3326,3327,3329,3330,3331,3332,3334],{"id":26,"depth":74,"text":27},{"id":218,"depth":74,"text":219},{"id":339,"depth":74,"text":3315},"Q3. What does call do here?",{"id":516,"depth":74,"text":517},{"id":689,"depth":74,"text":690},{"id":859,"depth":74,"text":860},{"id":1040,"depth":74,"text":1041},{"id":1231,"depth":74,"text":1232},{"id":1351,"depth":74,"text":1352},{"id":1560,"depth":74,"text":1561},{"id":1743,"depth":74,"text":1744},{"id":1868,"depth":74,"text":1869},{"id":2052,"depth":74,"text":2053},{"id":2226,"depth":74,"text":2227},{"id":2350,"depth":74,"text":3328},"Q15. Why is this.handleClick = this.handleClick.bind(this) written inside this constructor?",{"id":2563,"depth":74,"text":2564},{"id":2690,"depth":74,"text":2691},{"id":2857,"depth":74,"text":2858},{"id":3022,"depth":74,"text":3333},"Q19. What does this refer to at the top level of an ES module file?",{"id":3122,"depth":74,"text":3123},"md",{},"\u002Fjs\u002F11-this-keyword",{"title":5,"description":36},"js\u002F11-this-keyword","nJp5igyZ0J5H0qcdrZnThdGK3i-zTIH4XvKKC3Z85Uc",1787335397334]