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