[{"data":1,"prerenderedAt":3305},["ShallowReactive",2],{"page-\u002Fjs\u002F14-modules":3},{"id":4,"title":5,"body":6,"description":214,"extension":3299,"meta":3300,"navigation":35,"path":3301,"seo":3302,"stem":3303,"__hash__":3304},"content\u002Fjs\u002F14-modules.md","14 — Modules",{"type":7,"value":8,"toc":3267},"minimark",[9,13,131,199,360,560,766,884,1132,1383,1460,1566,1743,1822,2028,2129,2345,2492,2720,2986,3079,3263],[10,11,5],"h1",{"id":12},"_14-modules",[14,15,17,22,87],"question-wrapper",{"language":16},"javascript",[18,19,21],"h3",{"id":20},"q1-which-pair-correctly-matches-each-module-system-to-its-exportimport-syntax","Q1. Which pair correctly matches each module system to its export\u002Fimport syntax?",[23,24,27,47,64,77],"ul",{"className":25},[26],"contains-task-list",[28,29,32,37,38,42,43,46],"li",{"className":30},[31],"task-list-item",[33,34],"input",{"disabled":35,"type":36},true,"checkbox"," Both use ",[39,40,41],"code",{},"require","\u002F",[39,44,45],{},"module.exports",", but ESM adds static analysis on top",[28,48,50,52,53,42,56,59,60,42,62],{"className":49},[31],[33,51],{"disabled":35,"type":36}," ESM uses ",[39,54,55],{},"import",[39,57,58],{},"export","; CommonJS uses ",[39,61,41],{},[39,63,45],{},[28,65,67,52,69,42,71,59,73,42,75],{"className":66},[31],[33,68],{"disabled":35,"type":36},[39,70,41],{},[39,72,45],{},[39,74,55],{},[39,76,58],{},[28,78,80,37,82,42,84,86],{"className":79},[31],[33,81],{"disabled":35,"type":36},[39,83,55],{},[39,85,58],{},", but CommonJS resolves them synchronously",[88,89,90,94,110],"details",{},[91,92,93],"summary",{},"Show Answer",[95,96,97,101,102,42,104,59,106,42,108],"p",{},[98,99,100],"strong",{},"Answer:"," B — ESM uses ",[39,103,55],{},[39,105,58],{},[39,107,41],{},[39,109,45],{},[95,111,112,115,116,42,118,120,121,124,125,127,128,130],{},[98,113,114],{},"Explanation:"," ECMAScript Modules (ESM) are the standardized, browser-and-Node-native system built around the ",[39,117,55],{},[39,119,58],{}," keywords. CommonJS is Node's original module system, built around the ",[39,122,123],{},"require()"," function and the ",[39,126,45],{}," object. They are not interchangeable syntaxes for the same mechanism — ESM is statically analyzable at compile time, while CommonJS resolves ",[39,129,41],{}," calls dynamically at runtime, which is the root of most interop friction between the two.",[14,132,133,137,167],{"language":16},[18,134,136],{"id":135},"q2-what-is-the-fundamental-difference-between-how-esm-and-commonjs-resolve-imports","Q2. What is the fundamental difference between how ESM and CommonJS resolve imports?",[23,138,140,146,152,161],{"className":139},[26],[28,141,143,145],{"className":142},[31],[33,144],{"disabled":35,"type":36}," CommonJS imports are resolved statically at compile time; ESM imports are resolved dynamically at runtime",[28,147,149,151],{"className":148},[31],[33,150],{"disabled":35,"type":36}," Both are resolved at compile time, but ESM caches the result and CommonJS doesn't",[28,153,155,157,158,160],{"className":154},[31],[33,156],{"disabled":35,"type":36}," ESM imports are resolved statically at compile time; CommonJS ",[39,159,41],{}," calls are resolved dynamically at runtime",[28,162,164,166],{"className":163},[31],[33,165],{"disabled":35,"type":36}," There is no meaningful difference — both are just syntax sugar over the same loader",[88,168,169,171,178],{},[91,170,93],{},[95,172,173,175,176,160],{},[98,174,100],{}," C — ESM imports are resolved statically at compile time; CommonJS ",[39,177,41],{},[95,179,180,182,183,42,185,187,188,190,191,194,195,198],{},[98,181,114],{}," ESM ",[39,184,55],{},[39,186,58],{}," declarations must appear at the top level of a module with a literal specifier, so a tool can determine the entire dependency graph before running any code — this is what enables tree-shaking and hoisting. CommonJS ",[39,189,123],{}," is just a function call, so it can appear inside ",[39,192,193],{},"if"," blocks, loops, or be built from a dynamic string, meaning the dependency graph can only be known by actually executing the code. ",[98,196,197],{},"Idiom:"," this is the core reason ESM is described as \"static\" and CommonJS as \"dynamic.\"",[14,200,201,205,288,325],{"language":16},[18,202,204],{"id":203},"q3-a-module-has-this-export-statement-which-import-correctly-consumes-both-exports","Q3. A module has this export statement. Which import correctly consumes both exports?",[206,207,209],"code-wrapper",{"language":16,"filename":208},"math.js",[210,211,215],"pre",{"className":212,"code":213,"language":16,"meta":214,"style":214},"language-javascript shiki shiki-themes github-light github-dark","export const PI = 3.14159;\nexport default function square(n) {\n  return n * n;\n}\n","",[39,216,217,242,267,282],{"__ignoreMap":214},[218,219,222,225,228,232,235,238],"span",{"class":220,"line":221},"line",1,[218,223,58],{"class":224},"svdQ7",[218,226,227],{"class":224}," const",[218,229,231],{"class":230},"snvgF"," PI",[218,233,234],{"class":224}," =",[218,236,237],{"class":230}," 3.14159",[218,239,241],{"class":240},"ssxIu",";\n",[218,243,245,247,250,253,257,260,264],{"class":220,"line":244},2,[218,246,58],{"class":224},[218,248,249],{"class":224}," default",[218,251,252],{"class":224}," function",[218,254,256],{"class":255},"sIsaT"," square",[218,258,259],{"class":240},"(",[218,261,263],{"class":262},"sCrzJ","n",[218,265,266],{"class":240},") {\n",[218,268,270,273,276,279],{"class":220,"line":269},3,[218,271,272],{"class":224},"  return",[218,274,275],{"class":240}," n ",[218,277,278],{"class":224},"*",[218,280,281],{"class":240}," n;\n",[218,283,285],{"class":220,"line":284},4,[218,286,287],{"class":240},"}\n",[23,289,291,300,308,317],{"className":290},[26],[28,292,294,296,297],{"className":293},[31],[33,295],{"disabled":35,"type":36}," ",[39,298,299],{},"import square, { PI } from '.\u002Fmath.js';",[28,301,303,296,305],{"className":302},[31],[33,304],{"disabled":35,"type":36},[39,306,307],{},"import { square, PI } from '.\u002Fmath.js';",[28,309,311,296,313,316],{"className":310},[31],[33,312],{"disabled":35,"type":36},[39,314,315],{},"import { default as square, PI } from '.\u002Fmath.js';"," only — the shorthand form is invalid",[28,318,320,296,322],{"className":319},[31],[33,321],{"disabled":35,"type":36},[39,323,324],{},"import PI, { square } from '.\u002Fmath.js';",[88,326,327,329,336],{},[91,328,93],{},[95,330,331,333,334],{},[98,332,100],{}," A — ",[39,335,299],{},[95,337,338,340,341,344,345,348,349,351,352,355,356,359],{},[98,339,114],{}," A module can have any number of named exports (",[39,342,343],{},"PI"," here) plus at most one default export (the ",[39,346,347],{},"square"," function). The default import binding comes first with no braces, followed by a comma and the named imports in braces. Option B incorrectly treats ",[39,350,347],{}," as a named export. Option D swaps the positions. Option C is unnecessarily verbose — ",[39,353,354],{},"import square, { PI }"," is valid shorthand for exactly that ",[39,357,358],{},"default as square"," form.",[14,361,362,374,425,481,516],{"language":16},[18,363,365,366,369,370,373],{"id":364},"q4-counterjs-exports-a-mutable-binding-what-does-mainjs-log","Q4. ",[39,367,368],{},"counter.js"," exports a mutable binding. What does ",[39,371,372],{},"main.js"," log?",[206,375,376],{"language":16,"filename":368},[210,377,379],{"className":212,"code":378,"language":16,"meta":214,"style":214},"export let count = 0;\nexport function increment() {\n  count++;\n}\n",[39,380,381,399,411,421],{"__ignoreMap":214},[218,382,383,385,388,391,394,397],{"class":220,"line":221},[218,384,58],{"class":224},[218,386,387],{"class":224}," let",[218,389,390],{"class":240}," count ",[218,392,393],{"class":224},"=",[218,395,396],{"class":230}," 0",[218,398,241],{"class":240},[218,400,401,403,405,408],{"class":220,"line":244},[218,402,58],{"class":224},[218,404,252],{"class":224},[218,406,407],{"class":255}," increment",[218,409,410],{"class":240},"() {\n",[218,412,413,416,419],{"class":220,"line":269},[218,414,415],{"class":240},"  count",[218,417,418],{"class":224},"++",[218,420,241],{"class":240},[218,422,423],{"class":220,"line":284},[218,424,287],{"class":240},[206,426,427],{"language":16,"filename":372},[210,428,430],{"className":212,"code":429,"language":16,"meta":214,"style":214},"import { count, increment } from '.\u002Fcounter.js';\n\nconsole.log(count);\nincrement();\nconsole.log(count);\n",[39,431,432,448,453,464,472],{"__ignoreMap":214},[218,433,434,436,439,442,446],{"class":220,"line":221},[218,435,55],{"class":224},[218,437,438],{"class":240}," { count, increment } ",[218,440,441],{"class":224},"from",[218,443,445],{"class":444},"sJ6F3"," '.\u002Fcounter.js'",[218,447,241],{"class":240},[218,449,450],{"class":220,"line":244},[218,451,452],{"emptyLinePlaceholder":35},"\n",[218,454,455,458,461],{"class":220,"line":269},[218,456,457],{"class":240},"console.",[218,459,460],{"class":255},"log",[218,462,463],{"class":240},"(count);\n",[218,465,466,469],{"class":220,"line":284},[218,467,468],{"class":255},"increment",[218,470,471],{"class":240},"();\n",[218,473,475,477,479],{"class":220,"line":474},5,[218,476,457],{"class":240},[218,478,460],{"class":255},[218,480,463],{"class":240},[23,482,484,490,496,510],{"className":483},[26],[28,485,487,489],{"className":486},[31],[33,488],{"disabled":35,"type":36}," 0 then 0",[28,491,493,495],{"className":492},[31],[33,494],{"disabled":35,"type":36}," 1 then 1",[28,497,499,501,502,505,506,509],{"className":498},[31],[33,500],{"disabled":35,"type":36}," Throws a TypeError on the second ",[39,503,504],{},"console.log"," because ",[39,507,508],{},"count"," was reassigned externally",[28,511,513,515],{"className":512},[31],[33,514],{"disabled":35,"type":36}," 0 then 1",[88,517,518,520,525],{},[91,519,93],{},[95,521,522,524],{},[98,523,100],{}," D — 0 then 1",[95,526,527,529,530,533,534,536,537,539,540,542,543,545,546,549,550,552,553,556,557,559],{},[98,528,114],{}," ESM named imports are ",[98,531,532],{},"live bindings",", not copied values — ",[39,535,508],{}," in ",[39,538,372],{}," is a read-only view directly onto ",[39,541,368],{},"'s own ",[39,544,508],{}," variable. When ",[39,547,548],{},"increment()"," reassigns ",[39,551,508],{}," inside the module that owns it, every importer observing that binding sees the new value immediately, without re-importing anything. ",[98,554,555],{},"Debug:"," this is a major behavioral difference from CommonJS, where ",[39,558,41],{}," copies the value (or reference) present at the moment of the require call, so a later reassignment in the source module would NOT be visible to something that already required it.",[14,561,562,568,619,683,707],{"language":16},[18,563,565,566,373],{"id":564},"q5-the-equivalent-scenario-using-commonjs-what-does-mainjs-log","Q5. The equivalent scenario using CommonJS. What does ",[39,567,372],{},[206,569,570],{"language":16,"filename":368},[210,571,573],{"className":212,"code":572,"language":16,"meta":214,"style":214},"let count = 0;\nfunction increment() { count++; }\nmodule.exports = { count, increment };\n",[39,574,575,588,603],{"__ignoreMap":214},[218,576,577,580,582,584,586],{"class":220,"line":221},[218,578,579],{"class":224},"let",[218,581,390],{"class":240},[218,583,393],{"class":224},[218,585,396],{"class":230},[218,587,241],{"class":240},[218,589,590,593,595,598,600],{"class":220,"line":244},[218,591,592],{"class":224},"function",[218,594,407],{"class":255},[218,596,597],{"class":240},"() { count",[218,599,418],{"class":224},[218,601,602],{"class":240},"; }\n",[218,604,605,608,611,614,616],{"class":220,"line":269},[218,606,607],{"class":230},"module",[218,609,610],{"class":240},".",[218,612,613],{"class":230},"exports",[218,615,234],{"class":224},[218,617,618],{"class":240}," { count, increment };\n",[206,620,621],{"language":16,"filename":372},[210,622,624],{"className":212,"code":623,"language":16,"meta":214,"style":214},"const { count, increment } = require('.\u002Fcounter.js');\n\nconsole.log(count);\nincrement();\nconsole.log(count);\n",[39,625,626,657,661,669,675],{"__ignoreMap":214},[218,627,628,631,634,636,639,641,644,646,649,651,654],{"class":220,"line":221},[218,629,630],{"class":224},"const",[218,632,633],{"class":240}," { ",[218,635,508],{"class":230},[218,637,638],{"class":240},", ",[218,640,468],{"class":230},[218,642,643],{"class":240}," } ",[218,645,393],{"class":224},[218,647,648],{"class":255}," require",[218,650,259],{"class":240},[218,652,653],{"class":444},"'.\u002Fcounter.js'",[218,655,656],{"class":240},");\n",[218,658,659],{"class":220,"line":244},[218,660,452],{"emptyLinePlaceholder":35},[218,662,663,665,667],{"class":220,"line":269},[218,664,457],{"class":240},[218,666,460],{"class":255},[218,668,463],{"class":240},[218,670,671,673],{"class":220,"line":284},[218,672,468],{"class":255},[218,674,471],{"class":240},[218,676,677,679,681],{"class":220,"line":474},[218,678,457],{"class":240},[218,680,460],{"class":255},[218,682,463],{"class":240},[23,684,686,691,696,701],{"className":685},[26],[28,687,689,515],{"className":688},[31],[33,690],{"disabled":35,"type":36},[28,692,694,489],{"className":693},[31],[33,695],{"disabled":35,"type":36},[28,697,699,495],{"className":698},[31],[33,700],{"disabled":35,"type":36},[28,702,704,706],{"className":703},[31],[33,705],{"disabled":35,"type":36}," undefined then undefined",[88,708,709,711,716],{},[91,710,93],{},[95,712,713,715],{},[98,714,100],{}," B — 0 then 0",[95,717,718,296,720,723,724,728,729,731,732,735,736,738,739,741,742,744,745,747,748,750,751,753,754,756,757,759,760,762,763,765],{},[98,719,114],{},[39,721,722],{},"module.exports = { count, increment }"," copies the ",[725,726,727],"em",{},"current primitive value"," of ",[39,730,508],{}," (",[39,733,734],{},"0",") into a new property on the exports object at the moment ",[39,737,45],{}," is assigned. ",[39,740,372],{},"'s destructured ",[39,743,508],{}," is just a local ",[39,746,630],{}," holding that snapshot — it has no ongoing connection to ",[39,749,368],{},"'s internal ",[39,752,508],{}," variable. Calling ",[39,755,548],{}," mutates the module-internal ",[39,758,508],{},", but ",[39,761,372],{},"'s copy never updates. ",[98,764,555],{}," this exact gap — CommonJS copies values, ESM shares live bindings — is why porting CommonJS \"mutable exported counter\" patterns to ESM (or vice versa) silently changes behavior.",[14,767,768,772,820,856],{"language":16},[18,769,771],{"id":770},"q6-what-happens-when-this-code-runs","Q6. What happens when this code runs?",[206,773,774],{"language":16},[210,775,777],{"className":212,"code":776,"language":16,"meta":214,"style":214},"import { PI } from '.\u002Fconstants.js';\n\nPI = 3;\nconsole.log(PI);\n",[39,778,779,793,797,808],{"__ignoreMap":214},[218,780,781,783,786,788,791],{"class":220,"line":221},[218,782,55],{"class":224},[218,784,785],{"class":240}," { PI } ",[218,787,441],{"class":224},[218,789,790],{"class":444}," '.\u002Fconstants.js'",[218,792,241],{"class":240},[218,794,795],{"class":220,"line":244},[218,796,452],{"emptyLinePlaceholder":35},[218,798,799,801,803,806],{"class":220,"line":269},[218,800,343],{"class":230},[218,802,234],{"class":224},[218,804,805],{"class":230}," 3",[218,807,241],{"class":240},[218,809,810,812,814,816,818],{"class":220,"line":284},[218,811,457],{"class":240},[218,813,460],{"class":255},[218,815,259],{"class":240},[218,817,343],{"class":230},[218,819,656],{"class":240},[23,821,823,829,835,844],{"className":822},[26],[28,824,826,828],{"className":825},[31],[33,827],{"disabled":35,"type":36}," SyntaxError \u002F TypeError — named imports are read-only bindings and cannot be reassigned",[28,830,832,834],{"className":831},[31],[33,833],{"disabled":35,"type":36}," Logs 3 — the local binding is reassigned but the export is untouched",[28,836,838,840,841,843],{"className":837},[31],[33,839],{"disabled":35,"type":36}," Logs 3 — and the exporting module's ",[39,842,343],{}," is also updated to 3, since imports are live",[28,845,847,849,850,505,853,855],{"className":846},[31],[33,848],{"disabled":35,"type":36}," Logs ",[39,851,852],{},"undefined",[39,854,343],{}," was never actually imported",[88,857,858,860,865],{},[91,859,93],{},[95,861,862,864],{},[98,863,100],{}," A — SyntaxError \u002F TypeError — named imports are read-only bindings and cannot be reassigned",[95,866,867,869,870,872,873,876,877,880,881,883],{},[98,868,114],{}," ESM named imports are read-only views onto the exporting module's binding — \"live\" means updates flow ",[725,871,441],{}," the exporter ",[725,874,875],{},"to"," every importer, never the reverse. Attempting to assign to an imported binding directly is rejected (a ",[39,878,879],{},"TypeError: Assignment to constant variable","-style failure, enforced at the binding level regardless of how the exporter declared it). If you need to change shared state from the importing side, the exporting module must expose a function (like ",[39,882,548],{}," in Q4) that performs the mutation internally.",[14,885,886,900,951,1002,1017,1055],{"language":16},[18,887,889,890,893,894,897,898,373],{"id":888},"q7-ajs-and-bjs-import-each-other-using-esm-what-does-running-mainjs-log","Q7. ",[39,891,892],{},"a.js"," and ",[39,895,896],{},"b.js"," import each other. Using ESM, what does running ",[39,899,372],{},[206,901,902],{"language":16,"filename":892},[210,903,905],{"className":212,"code":904,"language":16,"meta":214,"style":214},"import { bValue } from '.\u002Fb.js';\nexport const aValue = 'A';\nconsole.log('a.js sees bValue:', bValue);\n",[39,906,907,921,937],{"__ignoreMap":214},[218,908,909,911,914,916,919],{"class":220,"line":221},[218,910,55],{"class":224},[218,912,913],{"class":240}," { bValue } ",[218,915,441],{"class":224},[218,917,918],{"class":444}," '.\u002Fb.js'",[218,920,241],{"class":240},[218,922,923,925,927,930,932,935],{"class":220,"line":244},[218,924,58],{"class":224},[218,926,227],{"class":224},[218,928,929],{"class":230}," aValue",[218,931,234],{"class":224},[218,933,934],{"class":444}," 'A'",[218,936,241],{"class":240},[218,938,939,941,943,945,948],{"class":220,"line":269},[218,940,457],{"class":240},[218,942,460],{"class":255},[218,944,259],{"class":240},[218,946,947],{"class":444},"'a.js sees bValue:'",[218,949,950],{"class":240},", bValue);\n",[206,952,953],{"language":16,"filename":896},[210,954,956],{"className":212,"code":955,"language":16,"meta":214,"style":214},"import { aValue } from '.\u002Fa.js';\nexport const bValue = 'B';\nconsole.log('b.js sees aValue:', aValue);\n",[39,957,958,972,988],{"__ignoreMap":214},[218,959,960,962,965,967,970],{"class":220,"line":221},[218,961,55],{"class":224},[218,963,964],{"class":240}," { aValue } ",[218,966,441],{"class":224},[218,968,969],{"class":444}," '.\u002Fa.js'",[218,971,241],{"class":240},[218,973,974,976,978,981,983,986],{"class":220,"line":244},[218,975,58],{"class":224},[218,977,227],{"class":224},[218,979,980],{"class":230}," bValue",[218,982,234],{"class":224},[218,984,985],{"class":444}," 'B'",[218,987,241],{"class":240},[218,989,990,992,994,996,999],{"class":220,"line":269},[218,991,457],{"class":240},[218,993,460],{"class":255},[218,995,259],{"class":240},[218,997,998],{"class":444},"'b.js sees aValue:'",[218,1000,1001],{"class":240},", aValue);\n",[206,1003,1004],{"language":16,"filename":372},[210,1005,1007],{"className":212,"code":1006,"language":16,"meta":214,"style":214},"import '.\u002Fa.js';\n",[39,1008,1009],{"__ignoreMap":214},[218,1010,1011,1013,1015],{"class":220,"line":221},[218,1012,55],{"class":224},[218,1014,969],{"class":444},[218,1016,241],{"class":240},[23,1018,1020,1032,1038,1044],{"className":1019},[26],[28,1021,1023,296,1025,1028,1029],{"className":1022},[31],[33,1024],{"disabled":35,"type":36},[39,1026,1027],{},"a.js sees bValue: undefined"," then ",[39,1030,1031],{},"b.js sees aValue: A",[28,1033,1035,1037],{"className":1034},[31],[33,1036],{"disabled":35,"type":36}," Throws a ReferenceError immediately due to the circular dependency",[28,1039,1041,1043],{"className":1040},[31],[33,1042],{"disabled":35,"type":36}," Both log their values correctly because ESM resolves circular imports out of order",[28,1045,1047,296,1049,1028,1052],{"className":1046},[31],[33,1048],{"disabled":35,"type":36},[39,1050,1051],{},"b.js sees aValue: undefined",[39,1053,1054],{},"a.js sees bValue: B",[88,1056,1057,1059,1068],{},[91,1058,93],{},[95,1060,1061,1063,1064,1028,1066],{},[98,1062,100],{}," D — ",[39,1065,1051],{},[39,1067,1054],{},[95,1069,1070,296,1072,1074,1075,1077,1078,1080,1081,728,1083,1085,1086,1088,1089,1091,1092,1094,1095,1098,1099,1101,1102,1104,1105,1108,1109,1112,1113,1115,1116,1118,1119,1122,1123,1125,1126,1091,1129,1131],{},[98,1071,114],{},[39,1073,372],{}," imports ",[39,1076,892],{}," first, so ",[39,1079,892],{}," starts executing and immediately hits its ",[39,1082,55],{},[39,1084,896],{},", suspending ",[39,1087,892],{}," to run ",[39,1090,896],{},". ",[39,1093,896],{}," then imports ",[39,1096,1097],{},"aValue"," from ",[39,1100,892],{}," — but ",[39,1103,892],{},"'s ",[39,1106,1107],{},"export const aValue = 'A'"," line hasn't executed yet (it's after the import), so the ",[725,1110,1111],{},"binding"," exists (hoisted) but is still in its temporal dead zone \u002F unset state, read as ",[39,1114,852],{}," at this point. ",[39,1117,896],{}," finishes, setting ",[39,1120,1121],{},"bValue = 'B'",", and control returns to ",[39,1124,892],{},", which now sees the fully-set ",[39,1127,1128],{},"bValue",[98,1130,555],{}," ESM's live-binding model means circular imports don't throw outright, but the order in which each side finishes initializing determines which values are visible when — the fix is usually to reference the circularly-imported binding lazily (inside a function) rather than at module top level.",[14,1133,1134,1138,1191,1244,1309],{"language":16},[18,1135,1137],{"id":1136},"q8-the-same-circular-scenario-but-using-commonjs-whats-the-key-difference-in-outcome-versus-the-esm-version","Q8. The same circular scenario, but using CommonJS. What's the key difference in outcome versus the ESM version?",[206,1139,1140],{"language":16,"filename":892},[210,1141,1143],{"className":212,"code":1142,"language":16,"meta":214,"style":214},"const { bValue } = require('.\u002Fb.js');\nexports.aValue = 'A';\nconsole.log('a.js sees bValue:', bValue);\n",[39,1144,1145,1166,1179],{"__ignoreMap":214},[218,1146,1147,1149,1151,1153,1155,1157,1159,1161,1164],{"class":220,"line":221},[218,1148,630],{"class":224},[218,1150,633],{"class":240},[218,1152,1128],{"class":230},[218,1154,643],{"class":240},[218,1156,393],{"class":224},[218,1158,648],{"class":255},[218,1160,259],{"class":240},[218,1162,1163],{"class":444},"'.\u002Fb.js'",[218,1165,656],{"class":240},[218,1167,1168,1170,1173,1175,1177],{"class":220,"line":244},[218,1169,613],{"class":230},[218,1171,1172],{"class":240},".aValue ",[218,1174,393],{"class":224},[218,1176,934],{"class":444},[218,1178,241],{"class":240},[218,1180,1181,1183,1185,1187,1189],{"class":220,"line":269},[218,1182,457],{"class":240},[218,1184,460],{"class":255},[218,1186,259],{"class":240},[218,1188,947],{"class":444},[218,1190,950],{"class":240},[206,1192,1193],{"language":16,"filename":896},[210,1194,1196],{"className":212,"code":1195,"language":16,"meta":214,"style":214},"const { aValue } = require('.\u002Fa.js');\nexports.bValue = 'B';\nconsole.log('b.js sees aValue:', aValue);\n",[39,1197,1198,1219,1232],{"__ignoreMap":214},[218,1199,1200,1202,1204,1206,1208,1210,1212,1214,1217],{"class":220,"line":221},[218,1201,630],{"class":224},[218,1203,633],{"class":240},[218,1205,1097],{"class":230},[218,1207,643],{"class":240},[218,1209,393],{"class":224},[218,1211,648],{"class":255},[218,1213,259],{"class":240},[218,1215,1216],{"class":444},"'.\u002Fa.js'",[218,1218,656],{"class":240},[218,1220,1221,1223,1226,1228,1230],{"class":220,"line":244},[218,1222,613],{"class":230},[218,1224,1225],{"class":240},".bValue ",[218,1227,393],{"class":224},[218,1229,985],{"class":444},[218,1231,241],{"class":240},[218,1233,1234,1236,1238,1240,1242],{"class":220,"line":269},[218,1235,457],{"class":240},[218,1237,460],{"class":255},[218,1239,259],{"class":240},[218,1241,998],{"class":444},[218,1243,1001],{"class":240},[23,1245,1247,1262,1275,1296],{"className":1246},[26],[28,1248,1250,296,1252,1254,1255,1257,1258,1261],{"className":1249},[31],[33,1251],{"disabled":35,"type":36},[39,1253,1097],{}," inside ",[39,1256,896],{}," is ",[39,1259,1260],{},"'A'"," because CommonJS eagerly resolves the whole dependency graph before running any module",[28,1263,1265,1267,1268,1271,1272,1274],{"className":1264},[31],[33,1266],{"disabled":35,"type":36}," CommonJS throws a ",[39,1269,1270],{},"RequireError"," on any circular ",[39,1273,41],{},", unlike ESM",[28,1276,1278,296,1280,1254,1282,1257,1284,1286,1287,1289,1290,1292,1293,1295],{"className":1277},[31],[33,1279],{"disabled":35,"type":36},[39,1281,1097],{},[39,1283,896],{},[39,1285,852],{}," because CommonJS destructures a snapshot of ",[39,1288,892],{},"'s (still-incomplete) ",[39,1291,613],{}," object at require-time, and no later update to ",[39,1294,892],{},"'s exports is ever reflected",[28,1297,1299,1301,1302,536,1304,1306,1307],{"className":1298},[31],[33,1300],{"disabled":35,"type":36}," The behavior is identical to ESM — both produce ",[39,1303,852],{},[39,1305,896],{}," and the correct value in ",[39,1308,892],{},[88,1310,1311,1313,1330],{},[91,1312,93],{},[95,1314,1315,1317,1318,1254,1320,1257,1322,1286,1324,1289,1326,1292,1328,1295],{},[98,1316,100],{}," C — ",[39,1319,1097],{},[39,1321,896],{},[39,1323,852],{},[39,1325,892],{},[39,1327,613],{},[39,1329,892],{},[95,1331,1332,1334,1335,1337,1338,1341,1342,1104,1344,1346,1347,1349,1350,1353,1354,1357,1358,1361,1362,1364,1365,1367,1368,1370,1371,1373,1374,1091,1377,1379,1380,1382],{},[98,1333,114],{}," When ",[39,1336,896],{}," calls ",[39,1339,1340],{},"require('.\u002Fa.js')",", Node returns whatever ",[39,1343,892],{},[39,1345,45],{}," object currently contains — but ",[39,1348,892],{}," is mid-execution (it's paused at its own ",[39,1351,1352],{},"require('.\u002Fb.js')"," call, before reaching ",[39,1355,1356],{},"exports.aValue = 'A'","), so the returned object is incomplete\u002Fempty at that point. Because ",[39,1359,1360],{},"const { aValue } = require(...)"," destructures once and copies that value out immediately, ",[39,1363,896],{},"'s local ",[39,1366,1097],{}," stays ",[39,1369,852],{}," forever, even after ",[39,1372,892],{}," later finishes and sets ",[39,1375,1376],{},"exports.aValue",[98,1378,555],{}," this is functionally similar in symptom to the ESM case (Q7) but for a different mechanical reason — CommonJS copies a snapshot of an incomplete object, while ESM shares a live binding that is simply unset at read time; the practical fix in CommonJS is to ",[39,1381,41],{}," inside a function body (deferring the read) rather than destructuring at the top.",[14,1384,1385,1389,1423],{"language":16},[18,1386,1388],{"id":1387},"q9-which-statement-about-renaming-a-default-export-at-its-export-site-is-correct","Q9. Which statement about renaming a default export at its export site is correct?",[23,1390,1392,1402,1411,1417],{"className":1391},[26],[28,1393,1395,1397,1398,1401],{"className":1394},[31],[33,1396],{"disabled":35,"type":36}," A default export has no name to rename at the export site — you write ",[39,1399,1400],{},"export default \u003Cvalue>",", and the importer chooses any local name it wants",[28,1403,1405,1407,1408],{"className":1404},[31],[33,1406],{"disabled":35,"type":36}," A default export can be renamed at the export site using ",[39,1409,1410],{},"export default as myName",[28,1412,1414,1416],{"className":1413},[31],[33,1415],{"disabled":35,"type":36}," A default export must share its name with the file name",[28,1418,1420,1422],{"className":1419},[31],[33,1421],{"disabled":35,"type":36}," A default export can be renamed only if it's a named export first, then re-exported as default",[88,1424,1425,1427,1434],{},[91,1426,93],{},[95,1428,1429,1431,1432,1401],{},[98,1430,100],{}," A — A default export has no name to rename at the export site — you write ",[39,1433,1400],{},[95,1435,1436,296,1438,1441,1442,1445,1446,638,1449,1452,1453,1456,1457,610],{},[98,1437,114],{},[39,1439,1440],{},"export default"," binds to the reserved identifier ",[39,1443,1444],{},"default"," internally; there's nothing to \"rename\" on the export side because there was never a chosen name to begin with — you're exporting a value, not a named binding. This is exactly why the importer has total freedom: ",[39,1447,1448],{},"import Foo from '.\u002Fx.js'",[39,1450,1451],{},"import Bar from '.\u002Fx.js'",", and ",[39,1454,1455],{},"import whatever123 from '.\u002Fx.js'"," are all equally valid regardless of what the exporting file called the value internally. Contrast with named exports, which do have a fixed export-side name unless explicitly aliased with ",[39,1458,1459],{},"export { x as y }",[14,1461,1462,1466,1488,1509,1542],{"language":16},[18,1463,1465],{"id":1464},"q10-two-files-import-the-same-default-exported-function-under-different-local-names-is-this-a-problem","Q10. Two files import the same default-exported function under different local names. Is this a problem?",[206,1467,1469],{"language":16,"filename":1468},"fileA.js",[210,1470,1472],{"className":212,"code":1471,"language":16,"meta":214,"style":214},"import formatDate from '.\u002FdateUtils.js';\n",[39,1473,1474],{"__ignoreMap":214},[218,1475,1476,1478,1481,1483,1486],{"class":220,"line":221},[218,1477,55],{"class":224},[218,1479,1480],{"class":240}," formatDate ",[218,1482,441],{"class":224},[218,1484,1485],{"class":444}," '.\u002FdateUtils.js'",[218,1487,241],{"class":240},[206,1489,1491],{"language":16,"filename":1490},"fileB.js",[210,1492,1494],{"className":212,"code":1493,"language":16,"meta":214,"style":214},"import fmtDate from '.\u002FdateUtils.js';\n",[39,1495,1496],{"__ignoreMap":214},[218,1497,1498,1500,1503,1505,1507],{"class":220,"line":221},[218,1499,55],{"class":224},[218,1501,1502],{"class":240}," fmtDate ",[218,1504,441],{"class":224},[218,1506,1485],{"class":444},[218,1508,241],{"class":240},[23,1510,1512,1518,1524,1533],{"className":1511},[26],[28,1513,1515,1517],{"className":1514},[31],[33,1516],{"disabled":35,"type":36}," Yes — a default export must be imported under the same name everywhere or the module cache breaks",[28,1519,1521,1523],{"className":1520},[31],[33,1522],{"disabled":35,"type":36}," No — default import names are purely local aliases and can legally differ across importing files",[28,1525,1527,1529,1530],{"className":1526},[31],[33,1528],{"disabled":35,"type":36}," No, but it silently creates two separate instances of ",[39,1531,1532],{},"dateUtils.js",[28,1534,1536,1538,1539],{"className":1535},[31],[33,1537],{"disabled":35,"type":36}," Yes — this throws a ",[39,1540,1541],{},"SyntaxError: mismatched default import name",[88,1543,1544,1546,1551],{},[91,1545,93],{},[95,1547,1548,1550],{},[98,1549,100],{}," B — No — default import names are purely local aliases and can legally differ across importing files",[95,1552,1553,1555,1556,893,1559,1562,1563,1565],{},[98,1554,114],{}," Since a default export carries no name of its own (see Q9), every importer is free to bind it to whatever local identifier is convenient — ",[39,1557,1558],{},"formatDate",[39,1560,1561],{},"fmtDate"," both refer to the exact same underlying function object. ",[98,1564,197],{}," while this is legal, letting the local name drift across a codebase makes the export harder to grep for and reason about — many teams adopt a convention (e.g., always import a default as the exact export's canonical name) purely for readability, not because the language requires it.",[14,1567,1568,1575,1610,1646,1698],{"language":16},[18,1569,1571,1572,1574],{"id":1570},"q11-a-commonjs-module-is-imported-from-an-esm-file-in-nodejs-what-typically-happens-to-moduleexports","Q11. A CommonJS module is imported from an ESM file in Node.js. What typically happens to ",[39,1573,45],{},"?",[206,1576,1578],{"language":16,"filename":1577},"legacy.cjs",[210,1579,1581],{"className":212,"code":1580,"language":16,"meta":214,"style":214},"module.exports = { greet: () => 'hi' };\n",[39,1582,1583],{"__ignoreMap":214},[218,1584,1585,1587,1589,1591,1593,1595,1598,1601,1604,1607],{"class":220,"line":221},[218,1586,607],{"class":230},[218,1588,610],{"class":240},[218,1590,613],{"class":230},[218,1592,234],{"class":224},[218,1594,633],{"class":240},[218,1596,1597],{"class":255},"greet",[218,1599,1600],{"class":240},": () ",[218,1602,1603],{"class":224},"=>",[218,1605,1606],{"class":444}," 'hi'",[218,1608,1609],{"class":240}," };\n",[206,1611,1613],{"language":16,"filename":1612},"main.mjs",[210,1614,1616],{"className":212,"code":1615,"language":16,"meta":214,"style":214},"import legacy from '.\u002Flegacy.cjs';\nconsole.log(legacy.greet());\n",[39,1617,1618,1632],{"__ignoreMap":214},[218,1619,1620,1622,1625,1627,1630],{"class":220,"line":221},[218,1621,55],{"class":224},[218,1623,1624],{"class":240}," legacy ",[218,1626,441],{"class":224},[218,1628,1629],{"class":444}," '.\u002Flegacy.cjs'",[218,1631,241],{"class":240},[218,1633,1634,1636,1638,1641,1643],{"class":220,"line":244},[218,1635,457],{"class":240},[218,1637,460],{"class":255},[218,1639,1640],{"class":240},"(legacy.",[218,1642,1597],{"class":255},[218,1644,1645],{"class":240},"());\n",[23,1647,1649,1661,1675,1686],{"className":1648},[26],[28,1650,1652,296,1654,1656,1657,1660],{"className":1651},[31],[33,1653],{"disabled":35,"type":36},[39,1655,1577],{},"'s properties automatically become named exports, so ",[39,1658,1659],{},"import { greet } from '.\u002Flegacy.cjs'"," is the only correct form",[28,1662,1664,1666,1667,1670,1671,1674],{"className":1663},[31],[33,1665],{"disabled":35,"type":36}," Node refuses to import ",[39,1668,1669],{},".cjs"," files from ",[39,1672,1673],{},".mjs"," files under any circumstances",[28,1676,1678,296,1680,1257,1683,1685],{"className":1677},[31],[33,1679],{"disabled":35,"type":36},[39,1681,1682],{},"legacy",[39,1684,852],{}," because CommonJS modules have no exports Node can see from ESM",[28,1687,1689,296,1691,1693,1694,1697],{"className":1688},[31],[33,1690],{"disabled":35,"type":36},[39,1692,45],{}," becomes the default export as a whole, so ",[39,1695,1696],{},"legacy.greet()"," works via the default import",[88,1699,1700,1702,1710],{},[91,1701,93],{},[95,1703,1704,1063,1706,1693,1708,1697],{},[98,1705,100],{},[39,1707,45],{},[39,1709,1696],{},[95,1711,1712,1714,1715,1717,1718,1720,1721,1724,1725,1728,1729,1732,1733,1735,1736,1738,1739,1742],{},[98,1713,114],{}," Node's interop layer wraps a CommonJS module's entire ",[39,1716,45],{}," object as the ESM default export when it's imported from an ",[39,1719,1673],{}," file (or an ESM-mode ",[39,1722,1723],{},".js"," file). So ",[39,1726,1727],{},"import legacy from '.\u002Flegacy.cjs'"," gives you the whole ",[39,1730,1731],{},"{ greet }"," object, and ",[39,1734,1696],{}," works as shown. Named-export interop (",[39,1737,1659],{},") is sometimes synthesized too, via static analysis of the CommonJS source by Node\u002Fbundlers, but this is heuristic and not guaranteed — it's a well-known source of \"why does this named import say undefined\" bugs. ",[98,1740,1741],{},"Portability:"," relying on named-import interop for CommonJS packages is fragile across Node versions and bundlers; importing the default and destructuring afterward is the safer, more portable pattern.",[14,1744,1745,1749,1784],{"language":16},[18,1746,1748],{"id":1747},"q12-why-can-bundlers-reliably-tree-shake-esm-code-but-not-commonjs-code","Q12. Why can bundlers reliably tree-shake ESM code but not CommonJS code?",[23,1750,1752,1758,1764,1778],{"className":1751},[26],[28,1753,1755,1757],{"className":1754},[31],[33,1756],{"disabled":35,"type":36}," CommonJS doesn't support tree-shaking because Node.js disables minification",[28,1759,1761,1763],{"className":1760},[31],[33,1762],{"disabled":35,"type":36}," ESM modules are always smaller in file size before bundling even begins",[28,1765,1767,1769,1770,42,1772,1774,1775,1777],{"className":1766},[31],[33,1768],{"disabled":35,"type":36}," ESM's ",[39,1771,55],{},[39,1773,58],{}," are static, top-level-only declarations a bundler can analyze without running any code, whereas ",[39,1776,123],{}," is a plain function call that can be conditional or dynamically constructed, forcing the bundler to assume any export might be used",[28,1779,1781,1783],{"className":1780},[31],[33,1782],{"disabled":35,"type":36}," Tree-shaking is a runtime, not build-time, distinction — it applies equally to both once code is executing",[88,1785,1786,1788,1799],{},[91,1787,93],{},[95,1789,1790,1792,1793,42,1795,1774,1797,1777],{},[98,1791,100],{}," C — ESM's ",[39,1794,55],{},[39,1796,58],{},[39,1798,123],{},[95,1800,1801,1803,1804,1807,1808,1810,1811,1814,1815,1817,1818,1821],{},[98,1802,114],{}," Tree-shaking means removing exports that are never imported anywhere. To do that safely, a bundler needs to prove, without executing the program, exactly which exports each file uses — ESM's syntactic restrictions (imports\u002Fexports must be literal, top-level statements) make that provable at build time. ",[39,1805,1806],{},"require('.\u002Fmod')"," inside an ",[39,1809,193],{}," block, inside a loop, or built from ",[39,1812,1813],{},"require(someVariable)"," cannot be resolved without actually running the code, so a bundler must conservatively keep everything ",[39,1816,45],{}," might contain. ",[98,1819,1820],{},"Performance:"," this is the primary real-world reason teams migrate legacy CommonJS libraries to ESM — smaller bundles, not stylistic preference.",[14,1823,1824,1847,1873,1906,1934,1988],{"language":16},[18,1825,1827,1828,1831,1832,893,1835,1091,1838,1840,1841,1843,1844,1846],{"id":1826},"q13-statejs-is-imported-by-both-pageajs-and-pagebjs-pageajs-mutates-the-shared-state-then-pagebjs-reads-it-what-does-pagebjs-see","Q13. ",[39,1829,1830],{},"state.js"," is imported by both ",[39,1833,1834],{},"pageA.js",[39,1836,1837],{},"pageB.js",[39,1839,1834],{}," mutates the shared state, then ",[39,1842,1837],{}," reads it. What does ",[39,1845,1837],{}," see?",[206,1848,1849],{"language":16,"filename":1830},[210,1850,1852],{"className":212,"code":1851,"language":16,"meta":214,"style":214},"export const store = { user: null };\n",[39,1853,1854],{"__ignoreMap":214},[218,1855,1856,1858,1860,1863,1865,1868,1871],{"class":220,"line":221},[218,1857,58],{"class":224},[218,1859,227],{"class":224},[218,1861,1862],{"class":230}," store",[218,1864,234],{"class":224},[218,1866,1867],{"class":240}," { user: ",[218,1869,1870],{"class":230},"null",[218,1872,1609],{"class":240},[206,1874,1875],{"language":16,"filename":1834},[210,1876,1878],{"className":212,"code":1877,"language":16,"meta":214,"style":214},"import { store } from '.\u002Fstate.js';\nstore.user = 'ashvini';\n",[39,1879,1880,1894],{"__ignoreMap":214},[218,1881,1882,1884,1887,1889,1892],{"class":220,"line":221},[218,1883,55],{"class":224},[218,1885,1886],{"class":240}," { store } ",[218,1888,441],{"class":224},[218,1890,1891],{"class":444}," '.\u002Fstate.js'",[218,1893,241],{"class":240},[218,1895,1896,1899,1901,1904],{"class":220,"line":244},[218,1897,1898],{"class":240},"store.user ",[218,1900,393],{"class":224},[218,1902,1903],{"class":444}," 'ashvini'",[218,1905,241],{"class":240},[206,1907,1908],{"language":16,"filename":1837},[210,1909,1911],{"className":212,"code":1910,"language":16,"meta":214,"style":214},"import { store } from '.\u002Fstate.js';\nconsole.log(store.user);\n",[39,1912,1913,1925],{"__ignoreMap":214},[218,1914,1915,1917,1919,1921,1923],{"class":220,"line":221},[218,1916,55],{"class":224},[218,1918,1886],{"class":240},[218,1920,441],{"class":224},[218,1922,1891],{"class":444},[218,1924,241],{"class":240},[218,1926,1927,1929,1931],{"class":220,"line":244},[218,1928,457],{"class":240},[218,1930,460],{"class":255},[218,1932,1933],{"class":240},"(store.user);\n",[23,1935,1937,1950,1962,1976],{"className":1936},[26],[28,1938,1940,296,1942,1945,1946,1949],{"className":1939},[31],[33,1941],{"disabled":35,"type":36},[39,1943,1944],{},"'ashvini'"," — modules are singletons, so both files share the exact same ",[39,1947,1948],{},"store"," object instance",[28,1951,1953,296,1955,1957,1958,1961],{"className":1952},[31],[33,1954],{"disabled":35,"type":36},[39,1956,1870],{}," — each importing file gets its own fresh copy of ",[39,1959,1960],{},"store.js","'s exports",[28,1963,1965,296,1967,1969,1970,1972,1973,1975],{"className":1964},[31],[33,1966],{"disabled":35,"type":36},[39,1968,852],{}," — ",[39,1971,1948],{}," isn't re-exported by ",[39,1974,1837],{}," so it can't see the mutation",[28,1977,1979,1981,1982,1984,1985,1987],{"className":1978},[31],[33,1980],{"disabled":35,"type":36}," It depends on import order, and is ",[39,1983,1870],{}," if ",[39,1986,1837],{}," runs first regardless of later mutation",[88,1989,1990,1992,2000],{},[91,1991,93],{},[95,1993,1994,333,1996,1945,1998,1949],{},[98,1995,100],{},[39,1997,1944],{},[39,1999,1948],{},[95,2001,2002,2004,2005,2008,2009,2011,2012,2014,2015,2017,2018,2021,2022,2024,2025,2027],{},[98,2003,114],{}," A module is only ever evaluated once per module graph, no matter how many files import it — every importer receives references to the ",[725,2006,2007],{},"same"," exported bindings\u002Fobjects, not independent copies. ",[39,2010,1948],{}," is a single object living in ",[39,2013,1830],{},"'s module scope; ",[39,2016,1834],{}," mutates its ",[39,2019,2020],{},"user"," property, and since ",[39,2023,1837],{}," holds a reference to that identical object, it observes the change. ",[98,2026,555],{}," this singleton behavior is exactly what makes modules a common (if implicit) place to stash shared app state, but it's also a classic source of test-pollution bugs — module state persists across test files unless explicitly reset, because the module isn't re-evaluated between imports.",[14,2029,2030,2040,2084],{"language":16},[18,2031,2033,2034,2036,2037,1574],{"id":2032},"q14-what-is-the-key-behavioral-difference-between-static-import-and-dynamic-import","Q14. What is the key behavioral difference between static ",[39,2035,55],{}," and dynamic ",[39,2038,2039],{},"import()",[23,2041,2043,2055,2066,2075],{"className":2042},[26],[28,2044,2046,2048,2049,2051,2052,2054],{"className":2045},[31],[33,2047],{"disabled":35,"type":36}," Static ",[39,2050,55],{}," returns a promise; dynamic ",[39,2053,2039],{}," is synchronous and hoisted",[28,2056,2058,2048,2060,2062,2063,2065],{"className":2057},[31],[33,2059],{"disabled":35,"type":36},[39,2061,55],{}," is hoisted and its target module is fully evaluated before the rest of the file runs; dynamic ",[39,2064,2039],{}," is a function call, evaluated in place, that returns a promise resolving to the module namespace object",[28,2067,2069,2071,2072,2074],{"className":2068},[31],[33,2070],{"disabled":35,"type":36}," They behave identically — ",[39,2073,2039],{}," is just alternate syntax with no timing difference",[28,2076,2078,2080,2081,2083],{"className":2077},[31],[33,2079],{"disabled":35,"type":36}," Dynamic ",[39,2082,2039],{}," can only be used inside Node.js, never in browsers",[88,2085,2086,2088,2097],{},[91,2087,93],{},[95,2089,2090,2092,2093,2062,2095,2065],{},[98,2091,100],{}," B — Static ",[39,2094,55],{},[39,2096,2039],{},[95,2098,2099,2048,2101,2103,2104,2107,2108,2110,2111,2113,2114,2117,2118,2121,2122,2125,2126,2128],{},[98,2100,114],{},[39,2102,55],{}," declarations are processed at parse time regardless of where they're textually written in the file — the imported module's code runs to completion before any of the importing module's own top-level code executes (see Q15). Dynamic ",[39,2105,2106],{},"import('.\u002Fmod.js')",", by contrast, is an ordinary expression that can appear anywhere a value is expected (inside an ",[39,2109,193],{},", a click handler, a loop) and returns a promise, since fetching\u002Fcompiling the module may happen asynchronously. This is the mechanism behind code-splitting and lazy-loading — a chunk is only fetched when the ",[39,2112,2039],{}," call actually runs. ",[98,2115,2116],{},"Note:"," consuming that returned promise (",[39,2119,2120],{},".then()"," or ",[39,2123,2124],{},"await",") is covered in depth once Promises and async\u002Fawait are introduced later in this track — for now, just recognize that dynamic ",[39,2127,2039],{}," always hands you a promise, never the module directly.",[14,2130,2131,2135,2178,2236,2291],{"language":16},[18,2132,2134],{"id":2133},"q15-what-does-this-log-and-in-what-order","Q15. What does this log, and in what order?",[206,2136,2138],{"language":16,"filename":2137},"logger.js",[210,2139,2141],{"className":212,"code":2140,"language":16,"meta":214,"style":214},"console.log('logger.js running');\nexport function log(msg) { console.log(msg); }\n",[39,2142,2143,2156],{"__ignoreMap":214},[218,2144,2145,2147,2149,2151,2154],{"class":220,"line":221},[218,2146,457],{"class":240},[218,2148,460],{"class":255},[218,2150,259],{"class":240},[218,2152,2153],{"class":444},"'logger.js running'",[218,2155,656],{"class":240},[218,2157,2158,2160,2162,2165,2167,2170,2173,2175],{"class":220,"line":244},[218,2159,58],{"class":224},[218,2161,252],{"class":224},[218,2163,2164],{"class":255}," log",[218,2166,259],{"class":240},[218,2168,2169],{"class":262},"msg",[218,2171,2172],{"class":240},") { console.",[218,2174,460],{"class":255},[218,2176,2177],{"class":240},"(msg); }\n",[206,2179,2180],{"language":16,"filename":372},[210,2181,2183],{"className":212,"code":2182,"language":16,"meta":214,"style":214},"console.log('main.js: before import line');\nimport { log } from '.\u002Flogger.js';\nconsole.log('main.js: after import line');\nlog('hello');\n",[39,2184,2185,2198,2212,2225],{"__ignoreMap":214},[218,2186,2187,2189,2191,2193,2196],{"class":220,"line":221},[218,2188,457],{"class":240},[218,2190,460],{"class":255},[218,2192,259],{"class":240},[218,2194,2195],{"class":444},"'main.js: before import line'",[218,2197,656],{"class":240},[218,2199,2200,2202,2205,2207,2210],{"class":220,"line":244},[218,2201,55],{"class":224},[218,2203,2204],{"class":240}," { log } ",[218,2206,441],{"class":224},[218,2208,2209],{"class":444}," '.\u002Flogger.js'",[218,2211,241],{"class":240},[218,2213,2214,2216,2218,2220,2223],{"class":220,"line":269},[218,2215,457],{"class":240},[218,2217,460],{"class":255},[218,2219,259],{"class":240},[218,2221,2222],{"class":444},"'main.js: after import line'",[218,2224,656],{"class":240},[218,2226,2227,2229,2231,2234],{"class":220,"line":284},[218,2228,460],{"class":255},[218,2230,259],{"class":240},[218,2232,2233],{"class":444},"'hello'",[218,2235,656],{"class":240},[23,2237,2239,2256,2269,2278],{"className":2238},[26],[28,2240,2242,296,2244,638,2247,638,2250,638,2253],{"className":2241},[31],[33,2243],{"disabled":35,"type":36},[39,2245,2246],{},"main.js: before import line",[39,2248,2249],{},"logger.js running",[39,2251,2252],{},"main.js: after import line",[39,2254,2255],{},"hello",[28,2257,2259,296,2261,638,2263,638,2265,638,2267],{"className":2258},[31],[33,2260],{"disabled":35,"type":36},[39,2262,2246],{},[39,2264,2252],{},[39,2266,2249],{},[39,2268,2255],{},[28,2270,2272,2274,2275,2277],{"className":2271},[31],[33,2273],{"disabled":35,"type":36}," This throws a SyntaxError because the ",[39,2276,55],{}," statement appears after other code",[28,2279,2281,296,2283,638,2285,638,2287,638,2289],{"className":2280},[31],[33,2282],{"disabled":35,"type":36},[39,2284,2249],{},[39,2286,2246],{},[39,2288,2252],{},[39,2290,2255],{},[88,2292,2293,2295,2307],{},[91,2294,93],{},[95,2296,2297,1063,2299,638,2301,638,2303,638,2305],{},[98,2298,100],{},[39,2300,2249],{},[39,2302,2246],{},[39,2304,2252],{},[39,2306,2255],{},[95,2308,2309,296,2311,2313,2314,2316,2317,2320,2321,2324,2325,2327,2328,2330,2331,2333,2334,2336,2337,2339,2340,2342,2343,610],{},[98,2310,114],{},[39,2312,55],{}," declarations are hoisted to the top of the module and always execute before any of the module's own top-level code, regardless of where the ",[39,2315,55],{}," line is textually positioned in the source. So even though ",[39,2318,2319],{},"console.log('main.js: before import line')"," appears ",[725,2322,2323],{},"above"," the ",[39,2326,55],{}," statement in the file, ",[39,2329,2137],{}," still finishes running first, because hoisting moves the import's effect to the very top of ",[39,2332,372],{},"'s execution. ",[98,2335,555],{}," this surprises developers coming from CommonJS, where ",[39,2338,123],{}," genuinely executes at its exact position in the file — writing code above a ",[39,2341,123],{}," call really does run first there, unlike with ESM ",[39,2344,55],{},[14,2346,2347,2364,2405,2440],{"language":16},[18,2348,2350,2351,1098,2354,2356,2357,2360,2361,2363],{"id":2349},"q16-which-correctly-re-exports-add-from-mathjs-through-indexjs-without-indexjs-needing-a-separate-local-binding","Q16. Which correctly re-exports ",[39,2352,2353],{},"add",[39,2355,208],{}," through ",[39,2358,2359],{},"index.js",", without ",[39,2362,2359],{}," needing a separate local binding?",[206,2365,2366],{"language":16,"filename":208},[210,2367,2369],{"className":212,"code":2368,"language":16,"meta":214,"style":214},"export function add(a, b) { return a + b; }\n",[39,2370,2371],{"__ignoreMap":214},[218,2372,2373,2375,2377,2380,2382,2385,2387,2390,2393,2396,2399,2402],{"class":220,"line":221},[218,2374,58],{"class":224},[218,2376,252],{"class":224},[218,2378,2379],{"class":255}," add",[218,2381,259],{"class":240},[218,2383,2384],{"class":262},"a",[218,2386,638],{"class":240},[218,2388,2389],{"class":262},"b",[218,2391,2392],{"class":240},") { ",[218,2394,2395],{"class":224},"return",[218,2397,2398],{"class":240}," a ",[218,2400,2401],{"class":224},"+",[218,2403,2404],{"class":240}," b; }\n",[23,2406,2408,2416,2424,2432],{"className":2407},[26],[28,2409,2411,296,2413],{"className":2410},[31],[33,2412],{"disabled":35,"type":36},[39,2414,2415],{},"import { add } from '.\u002Fmath.js'; export add;",[28,2417,2419,296,2421],{"className":2418},[31],[33,2420],{"disabled":35,"type":36},[39,2422,2423],{},"export add from '.\u002Fmath.js';",[28,2425,2427,296,2429],{"className":2426},[31],[33,2428],{"disabled":35,"type":36},[39,2430,2431],{},"export { add } from '.\u002Fmath.js';",[28,2433,2435,296,2437],{"className":2434},[31],[33,2436],{"disabled":35,"type":36},[39,2438,2439],{},"import add from '.\u002Fmath.js'; export default add;",[88,2441,2442,2444,2450],{},[91,2443,93],{},[95,2445,2446,1317,2448],{},[98,2447,100],{},[39,2449,2431],{},[95,2451,2452,2454,2455,2458,2459,1104,2461,2463,2464,2466,2467,2469,2470,2472,2473,2475,2476,2479,2480,2483,2484,2486,2487,1104,2489,2491],{},[98,2453,114],{}," The ",[39,2456,2457],{},"export { name } from '.\u002Fsource.js'"," syntax is a dedicated re-export form: it forwards ",[39,2460,208],{},[39,2462,2353],{}," export through ",[39,2465,2359],{}," as ",[39,2468,2359],{},"'s own named export, without ever creating a local ",[39,2471,2353],{}," binding inside ",[39,2474,2359],{}," that you'd have to import first. Option A is invalid syntax (",[39,2477,2478],{},"export add;"," isn't a real form). Option B is also invalid — ",[39,2481,2482],{},"export ... from"," requires braces around named bindings. Option D would work but changes ",[39,2485,2353],{}," into ",[39,2488,2359],{},[725,2490,1444],{}," export rather than preserving it as a named export, which isn't equivalent unless that was the goal.",[14,2493,2494,2498,2540,2562,2611,2668],{"language":16},[18,2495,2497],{"id":2496},"q17-what-is-logged-and-why-is-this-preferred-over-importing-then-re-exporting-manually-when-no-transformation-is-needed","Q17. What is logged, and why is this preferred over importing then re-exporting manually when no transformation is needed?",[206,2499,2501],{"language":16,"filename":2500},"shapes.js",[210,2502,2504],{"className":212,"code":2503,"language":16,"meta":214,"style":214},"export function circleArea(r) { return Math.PI * r * r; }\n",[39,2505,2506],{"__ignoreMap":214},[218,2507,2508,2510,2512,2515,2517,2520,2522,2524,2527,2529,2532,2535,2537],{"class":220,"line":221},[218,2509,58],{"class":224},[218,2511,252],{"class":224},[218,2513,2514],{"class":255}," circleArea",[218,2516,259],{"class":240},[218,2518,2519],{"class":262},"r",[218,2521,2392],{"class":240},[218,2523,2395],{"class":224},[218,2525,2526],{"class":240}," Math.",[218,2528,343],{"class":230},[218,2530,2531],{"class":224}," *",[218,2533,2534],{"class":240}," r ",[218,2536,278],{"class":224},[218,2538,2539],{"class":240}," r; }\n",[206,2541,2543],{"language":16,"filename":2542},"geometry.js",[210,2544,2546],{"className":212,"code":2545,"language":16,"meta":214,"style":214},"export { circleArea } from '.\u002Fshapes.js';\n",[39,2547,2548],{"__ignoreMap":214},[218,2549,2550,2552,2555,2557,2560],{"class":220,"line":221},[218,2551,58],{"class":224},[218,2553,2554],{"class":240}," { circleArea } ",[218,2556,441],{"class":224},[218,2558,2559],{"class":444}," '.\u002Fshapes.js'",[218,2561,241],{"class":240},[206,2563,2564],{"language":16,"filename":372},[210,2565,2567],{"className":212,"code":2566,"language":16,"meta":214,"style":214},"import { circleArea } from '.\u002Fgeometry.js';\nconsole.log(circleArea(2).toFixed(2));\n",[39,2568,2569,2582],{"__ignoreMap":214},[218,2570,2571,2573,2575,2577,2580],{"class":220,"line":221},[218,2572,55],{"class":224},[218,2574,2554],{"class":240},[218,2576,441],{"class":224},[218,2578,2579],{"class":444}," '.\u002Fgeometry.js'",[218,2581,241],{"class":240},[218,2583,2584,2586,2588,2590,2593,2595,2598,2601,2604,2606,2608],{"class":220,"line":244},[218,2585,457],{"class":240},[218,2587,460],{"class":255},[218,2589,259],{"class":240},[218,2591,2592],{"class":255},"circleArea",[218,2594,259],{"class":240},[218,2596,2597],{"class":230},"2",[218,2599,2600],{"class":240},").",[218,2602,2603],{"class":255},"toFixed",[218,2605,259],{"class":240},[218,2607,2597],{"class":230},[218,2609,2610],{"class":240},"));\n",[23,2612,2614,2632,2640,2652],{"className":2613},[26],[28,2615,2617,296,2619,1969,2622,2624,2625,2627,2628,2631],{"className":2616},[31],[33,2618],{"disabled":35,"type":36},[39,2620,2621],{},"12.57",[39,2623,2542],{}," forwards the export without ever binding ",[39,2626,2592],{}," into its own local scope, unlike ",[39,2629,2630],{},"import { x } from ...; export { x };"," which does create a local binding",[28,2633,2635,296,2637,2639],{"className":2634},[31],[33,2636],{"disabled":35,"type":36},[39,2638,2621],{}," — but this is functionally worse than importing-then-exporting because it defeats tree-shaking",[28,2641,2643,296,2645,2648,2649],{"className":2642},[31],[33,2644],{"disabled":35,"type":36},[39,2646,2647],{},"NaN"," — re-exported functions lose their closure over ",[39,2650,2651],{},"Math.PI",[28,2653,2655,2657,2658,2660,2661,2663,2664,2667],{"className":2654},[31],[33,2656],{"disabled":35,"type":36}," Throws — ",[39,2659,2592],{}," was never locally declared inside ",[39,2662,2542],{},", so ",[39,2665,2666],{},"export { circleArea }"," has nothing to reference",[88,2669,2670,2672,2684],{},[91,2671,93],{},[95,2673,2674,333,2676,1969,2678,2624,2680,2627,2682,2631],{},[98,2675,100],{},[39,2677,2621],{},[39,2679,2542],{},[39,2681,2592],{},[39,2683,2630],{},[95,2685,2686,296,2688,2691,2692,2694,2695,2697,2698,2700,2701,1257,2704,1452,2707,2710,2711,1091,2714,2716,2717,2719],{},[98,2687,114],{},[39,2689,2690],{},"export { circleArea } from '.\u002Fshapes.js'"," is purely a forwarding declaration at the module-linking level — ",[39,2693,2542],{}," never actually creates a local ",[39,2696,2592],{}," variable, it just tells consumers \"ask ",[39,2699,2500],{}," for this.\" The computation is unaffected: ",[39,2702,2703],{},"circleArea(2)",[39,2705,2706],{},"Math.PI * 4 ≈ 12.566...",[39,2708,2709],{},".toFixed(2)"," rounds that to ",[39,2712,2713],{},"'12.57'",[98,2715,197],{}," this direct re-export form is preferred in \"barrel\" files (",[39,2718,2359],{}," aggregating a package's public API) specifically because it avoids an unnecessary local binding and stays just as tree-shakeable as a direct import, unlike patterns that route the value through an intermediate local variable.",[14,2721,2722,2729,2817,2881,2927],{"language":16},[18,2723,2725,2726,373],{"id":2724},"q18-what-does-objectkeysutils-log","Q18. What does ",[39,2727,2728],{},"Object.keys(utils)",[206,2730,2732],{"language":16,"filename":2731},"utils.js",[210,2733,2735],{"className":212,"code":2734,"language":16,"meta":214,"style":214},"export function trim(s) { return s.trim(); }\nexport function upper(s) { return s.toUpperCase(); }\nexport default function normalize(s) { return trim(s).toLowerCase(); }\n",[39,2736,2737,2764,2788],{"__ignoreMap":214},[218,2738,2739,2741,2743,2746,2748,2751,2753,2755,2758,2761],{"class":220,"line":221},[218,2740,58],{"class":224},[218,2742,252],{"class":224},[218,2744,2745],{"class":255}," trim",[218,2747,259],{"class":240},[218,2749,2750],{"class":262},"s",[218,2752,2392],{"class":240},[218,2754,2395],{"class":224},[218,2756,2757],{"class":240}," s.",[218,2759,2760],{"class":255},"trim",[218,2762,2763],{"class":240},"(); }\n",[218,2765,2766,2768,2770,2773,2775,2777,2779,2781,2783,2786],{"class":220,"line":244},[218,2767,58],{"class":224},[218,2769,252],{"class":224},[218,2771,2772],{"class":255}," upper",[218,2774,259],{"class":240},[218,2776,2750],{"class":262},[218,2778,2392],{"class":240},[218,2780,2395],{"class":224},[218,2782,2757],{"class":240},[218,2784,2785],{"class":255},"toUpperCase",[218,2787,2763],{"class":240},[218,2789,2790,2792,2794,2796,2799,2801,2803,2805,2807,2809,2812,2815],{"class":220,"line":269},[218,2791,58],{"class":224},[218,2793,249],{"class":224},[218,2795,252],{"class":224},[218,2797,2798],{"class":255}," normalize",[218,2800,259],{"class":240},[218,2802,2750],{"class":262},[218,2804,2392],{"class":240},[218,2806,2395],{"class":224},[218,2808,2745],{"class":255},[218,2810,2811],{"class":240},"(s).",[218,2813,2814],{"class":255},"toLowerCase",[218,2816,2763],{"class":240},[206,2818,2819],{"language":16,"filename":372},[210,2820,2822],{"className":212,"code":2821,"language":16,"meta":214,"style":214},"import * as utils from '.\u002Futils.js';\nconsole.log(Object.keys(utils).sort());\nconsole.log(utils.trim('  hi  '));\n",[39,2823,2824,2843,2863],{"__ignoreMap":214},[218,2825,2826,2828,2830,2833,2836,2838,2841],{"class":220,"line":221},[218,2827,55],{"class":224},[218,2829,2531],{"class":230},[218,2831,2832],{"class":224}," as",[218,2834,2835],{"class":240}," utils ",[218,2837,441],{"class":224},[218,2839,2840],{"class":444}," '.\u002Futils.js'",[218,2842,241],{"class":240},[218,2844,2845,2847,2849,2852,2855,2858,2861],{"class":220,"line":244},[218,2846,457],{"class":240},[218,2848,460],{"class":255},[218,2850,2851],{"class":240},"(Object.",[218,2853,2854],{"class":255},"keys",[218,2856,2857],{"class":240},"(utils).",[218,2859,2860],{"class":255},"sort",[218,2862,1645],{"class":240},[218,2864,2865,2867,2869,2872,2874,2876,2879],{"class":220,"line":269},[218,2866,457],{"class":240},[218,2868,460],{"class":255},[218,2870,2871],{"class":240},"(utils.",[218,2873,2760],{"class":255},[218,2875,259],{"class":240},[218,2877,2878],{"class":444},"'  hi  '",[218,2880,2610],{"class":240},[23,2882,2884,2895,2908,2918],{"className":2883},[26],[28,2885,2887,296,2889,1028,2892],{"className":2886},[31],[33,2888],{"disabled":35,"type":36},[39,2890,2891],{},"['trim', 'upper']",[39,2893,2894],{},"'hi'",[28,2896,2898,296,2900,2903,2904,2907],{"className":2897},[31],[33,2899],{"disabled":35,"type":36},[39,2901,2902],{},"['default', 'trim', 'upper']"," then throws because ",[39,2905,2906],{},"utils.trim"," isn't callable",[28,2909,2911,296,2913,1028,2916],{"className":2910},[31],[33,2912],{"disabled":35,"type":36},[39,2914,2915],{},"['normalize', 'trim', 'upper']",[39,2917,2894],{},[28,2919,2921,296,2923,1028,2925],{"className":2920},[31],[33,2922],{"disabled":35,"type":36},[39,2924,2902],{},[39,2926,2894],{},[88,2928,2929,2931,2939],{},[91,2930,93],{},[95,2932,2933,1063,2935,1028,2937],{},[98,2934,100],{},[39,2936,2902],{},[39,2938,2894],{},[95,2940,2941,296,2943,2946,2947,2950,2951,638,2953,2956,2957,2960,2961,2964,2965,2968,2969,2971,2972,2975,2976,2978,2979,2982,2983,610],{},[98,2942,114],{},[39,2944,2945],{},"import * as utils"," creates a ",[98,2948,2949],{},"namespace object"," exposing every export of the module as a property — every named export (",[39,2952,2760],{},[39,2954,2955],{},"upper",") under its own name, and the default export under the special key ",[39,2958,2959],{},"'default'"," (not ",[39,2962,2963],{},"'normalize'",", since the function's local name doesn't become the property key). So ",[39,2966,2967],{},"Object.keys(utils).sort()"," yields ",[39,2970,2902],{},". Named exports remain directly callable as properties, so ",[39,2973,2974],{},"utils.trim('  hi  ')"," runs normally and returns ",[39,2977,2894],{},". Accessing the default function itself would require ",[39,2980,2981],{},"utils.default(...)",", not ",[39,2984,2985],{},"utils.normalize(...)",[14,2987,2988,3007,3043],{"language":16},[18,2989,2991,2992,2995,2996,638,2999,3002,3003,3006],{"id":2990},"q19-a-teams-codebase-has-some-files-doing-import-as-api-from-apijs-and-using-apifetchuser-apipostorder-etc-while-other-files-do-import-fetchuser-from-apijs-for-the-exact-same-module-whats-the-best-practice-concern-here","Q19. A team's codebase has some files doing ",[39,2993,2994],{},"import * as api from '.\u002Fapi.js'"," and using ",[39,2997,2998],{},"api.fetchUser()",[39,3000,3001],{},"api.postOrder()",", etc., while other files do ",[39,3004,3005],{},"import { fetchUser } from '.\u002Fapi.js'"," for the exact same module. What's the best-practice concern here?",[23,3008,3010,3022,3028,3034],{"className":3009},[26],[28,3011,3013,3015,3016,893,3018,3021],{"className":3012},[31],[33,3014],{"disabled":35,"type":36}," There is no real concern — ",[39,3017,2998],{},[39,3019,3020],{},"fetchUser()"," are guaranteed to always behave identically with zero trade-offs",[28,3023,3025,3027],{"className":3024},[31],[33,3026],{"disabled":35,"type":36}," Mixing namespace-style and named-import access for the same module hurts predictability and tooling — pick one convention (usually named imports, since they tree-shake better and are easier to grep) and apply it consistently",[28,3029,3031,3033],{"className":3030},[31],[33,3032],{"disabled":35,"type":36}," Namespace imports are strictly forbidden by the ECMAScript spec when named imports exist elsewhere in the codebase",[28,3035,3037,3039,3040],{"className":3036},[31],[33,3038],{"disabled":35,"type":36}," The two forms cause the module to be evaluated twice, doubling any side effects in ",[39,3041,3042],{},"api.js",[88,3044,3045,3047,3052],{},[91,3046,93],{},[95,3048,3049,3051],{},[98,3050,100],{}," B — Mixing namespace-style and named-import access for the same module hurts predictability and tooling — pick one convention (usually named imports, since they tree-shake better and are easier to grep) and apply it consistently",[95,3053,3054,3056,3057,3060,3061,3064,3065,3068,3069,3071,3072,3074,3075,3078],{},[98,3055,114],{}," Both forms are legal and reference the same underlying live bindings (module singletons — see Q13), so there's no correctness bug per se. The issue is consistency: namespace imports (",[39,3058,3059],{},"import * as api",") pull in a reference to every export even if only one is used, which can undermine tree-shaking analysis in some bundlers, and make \"who uses ",[39,3062,3063],{},"fetchUser","\" harder to grep for since call sites read as ",[39,3066,3067],{},"api.fetchUser"," in some files and ",[39,3070,3063],{}," in others. ",[98,3073,197],{}," picking named imports as the default convention (reserving ",[39,3076,3077],{},"import * as ns"," for cases like re-exporting an entire module, or genuinely needing dozens of its exports) keeps call sites uniform and analysis-friendly across a codebase.",[14,3080,3081,3088,3167,3220],{"language":16},[18,3082,3084,3085,3087],{"id":3083},"q20-a-large-commonjs-utility-library-is-required-conditionally-based-on-an-environment-check-then-the-app-is-bundled-for-production-whats-the-most-accurate-best-practice-takeaway","Q20. A large CommonJS utility library is ",[39,3086,41],{},"d conditionally based on an environment check, then the app is bundled for production. What's the most accurate best-practice takeaway?",[206,3089,3090],{"language":16},[210,3091,3093],{"className":212,"code":3092,"language":16,"meta":214,"style":214},"let logger;\nif (process.env.NODE_ENV === 'production') {\n  logger = require('.\u002FprodLogger.js');\n} else {\n  logger = require('.\u002FdevLogger.js');\n}\n",[39,3094,3095,3102,3120,3136,3147,3162],{"__ignoreMap":214},[218,3096,3097,3099],{"class":220,"line":221},[218,3098,579],{"class":224},[218,3100,3101],{"class":240}," logger;\n",[218,3103,3104,3106,3109,3112,3115,3118],{"class":220,"line":244},[218,3105,193],{"class":224},[218,3107,3108],{"class":240}," (process.env.",[218,3110,3111],{"class":230},"NODE_ENV",[218,3113,3114],{"class":224}," ===",[218,3116,3117],{"class":444}," 'production'",[218,3119,266],{"class":240},[218,3121,3122,3125,3127,3129,3131,3134],{"class":220,"line":269},[218,3123,3124],{"class":240},"  logger ",[218,3126,393],{"class":224},[218,3128,648],{"class":255},[218,3130,259],{"class":240},[218,3132,3133],{"class":444},"'.\u002FprodLogger.js'",[218,3135,656],{"class":240},[218,3137,3138,3141,3144],{"class":220,"line":284},[218,3139,3140],{"class":240},"} ",[218,3142,3143],{"class":224},"else",[218,3145,3146],{"class":240}," {\n",[218,3148,3149,3151,3153,3155,3157,3160],{"class":220,"line":474},[218,3150,3124],{"class":240},[218,3152,393],{"class":224},[218,3154,648],{"class":255},[218,3156,259],{"class":240},[218,3158,3159],{"class":444},"'.\u002FdevLogger.js'",[218,3161,656],{"class":240},[218,3163,3165],{"class":220,"line":3164},6,[218,3166,287],{"class":240},[23,3168,3170,3180,3192,3208],{"className":3169},[26],[28,3171,3173,3175,3176,3179],{"className":3172},[31],[33,3174],{"disabled":35,"type":36}," Bundlers always evaluate ",[39,3177,3178],{},"process.env.NODE_ENV"," at build time regardless of module system, so this pattern is equally tree-shakeable in both CommonJS and ESM",[28,3181,3183,3185,3186,3188,3189,3191],{"className":3182},[31],[33,3184],{"disabled":35,"type":36}," This pattern is impossible to express in CommonJS at all — ",[39,3187,41],{}," cannot appear inside an ",[39,3190,193],{}," block",[28,3193,3195,3197,3198,893,3201,3204,3205,3207],{"className":3194},[31],[33,3196],{"disabled":35,"type":36}," The bundler can't statically prove which branch runs, so it typically must include both ",[39,3199,3200],{},"prodLogger.js",[39,3202,3203],{},"devLogger.js"," in the final bundle — an ESM equivalent using dynamic ",[39,3206,2039],{}," inside the conditional, or a build-time env substitution, avoids shipping the unused branch",[28,3209,3211,3213,3214,3216,3217,3219],{"className":3210},[31],[33,3212],{"disabled":35,"type":36}," Switching this to ESM ",[39,3215,55],{}," syntax directly inside the ",[39,3218,193],{}," block would fix the bundle-size issue",[88,3221,3222,3224,3235],{},[91,3223,93],{},[95,3225,3226,3228,3229,893,3231,3204,3233,3207],{},[98,3227,100],{}," C — The bundler can't statically prove which branch runs, so it typically must include both ",[39,3230,3200],{},[39,3232,3203],{},[39,3234,2039],{},[95,3236,3237,3239,3240,3242,3243,3245,3246,3248,3249,893,3251,3253,3254,3256,3257,3259,3260,3262],{},[98,3238,114],{}," Because ",[39,3241,123],{}," is an ordinary function call, a bundler generally cannot prove at build time which branch of the ",[39,3244,193],{}," will execute (even though ",[39,3247,3111],{}," checks are common enough that some bundlers special-case and inline them via string replacement, that's a heuristic, not a language guarantee) — so worst case, both ",[39,3250,3200],{},[39,3252,3203],{}," end up bundled, bloating output. Static ESM ",[39,3255,55],{}," is explicitly disallowed inside a block like this (it must be a top-level declaration — option D is a syntax error, not a fix), so the correct ESM-world fix is dynamic ",[39,3258,2039],{},", which is a real expression usable inside conditionals and only fetches the branch actually reached at runtime. ",[98,3261,1820],{}," this is a concrete, production-relevant instance of the static-vs-dynamic distinction from Q2 and Q12 — it's not just theoretical, it directly affects shipped bundle size.",[3264,3265,3266],"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 .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .sCrzJ, html code.shiki .sCrzJ{--shiki-default:#E36209;--shiki-github-dark:#FFAB70}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 .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}",{"title":214,"searchDepth":244,"depth":244,"links":3268},[3269,3270,3271,3272,3274,3276,3277,3279,3280,3281,3282,3284,3285,3287,3289,3290,3292,3293,3295,3297],{"id":20,"depth":269,"text":21},{"id":135,"depth":269,"text":136},{"id":203,"depth":269,"text":204},{"id":364,"depth":269,"text":3273},"Q4. counter.js exports a mutable binding. What does main.js log?",{"id":564,"depth":269,"text":3275},"Q5. The equivalent scenario using CommonJS. What does main.js log?",{"id":770,"depth":269,"text":771},{"id":888,"depth":269,"text":3278},"Q7. a.js and b.js import each other. Using ESM, what does running main.js log?",{"id":1136,"depth":269,"text":1137},{"id":1387,"depth":269,"text":1388},{"id":1464,"depth":269,"text":1465},{"id":1570,"depth":269,"text":3283},"Q11. A CommonJS module is imported from an ESM file in Node.js. What typically happens to module.exports?",{"id":1747,"depth":269,"text":1748},{"id":1826,"depth":269,"text":3286},"Q13. state.js is imported by both pageA.js and pageB.js. pageA.js mutates the shared state, then pageB.js reads it. What does pageB.js see?",{"id":2032,"depth":269,"text":3288},"Q14. What is the key behavioral difference between static import and dynamic import()?",{"id":2133,"depth":269,"text":2134},{"id":2349,"depth":269,"text":3291},"Q16. Which correctly re-exports add from math.js through index.js, without index.js needing a separate local binding?",{"id":2496,"depth":269,"text":2497},{"id":2724,"depth":269,"text":3294},"Q18. What does Object.keys(utils) log?",{"id":2990,"depth":269,"text":3296},"Q19. A team's codebase has some files doing import * as api from '.\u002Fapi.js' and using api.fetchUser(), api.postOrder(), etc., while other files do import { fetchUser } from '.\u002Fapi.js' for the exact same module. What's the best-practice concern here?",{"id":3083,"depth":269,"text":3298},"Q20. A large CommonJS utility library is required conditionally based on an environment check, then the app is bundled for production. What's the most accurate best-practice takeaway?","md",{},"\u002Fjs\u002F14-modules",{"title":5,"description":214},"js\u002F14-modules","VXJgfzsxPej--WgdCHo0c2PeROfhYcaDVSr6kadoM60",1787335397334]