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