[{"data":1,"prerenderedAt":1094},["ShallowReactive",2],{"navigation":3,"/blog/understanding-javascript-and-its-quirks":142,"/blog/understanding-javascript-and-its-quirks-surround":1090},[4],{"title":5,"path":6,"stem":7,"children":8,"page":141},"Blog","/blog","blog",[9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97,101,105,109,113,117,121,125,129,133,137],{"title":10,"path":11,"stem":12},"VueJS Introducing Dynamic Layouts using the Atomic Design Principles","/blog/vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles","blog/001.vuejs-introducing-dynamic-layouts-using-the-atomic-design-principles",{"title":14,"path":15,"stem":16},"Understanding JavaScript and Its Quirks","/blog/understanding-javascript-and-its-quirks","blog/002.understanding-javascript-and-its-quirks",{"title":18,"path":19,"stem":20},"Introducing Vue’s latest experimental Vapor Mode","/blog/introducing-vues-latest-experimental-vapor-mode","blog/003.introducing-vues-latest-experimental-vapor-mode",{"title":22,"path":23,"stem":24},"ECMAScript 2024 Nears Finalization","/blog/ecmascript-2024-nears-finalization","blog/004.ecmascript-2024-nears-finalization",{"title":26,"path":27,"stem":28},"UI Libraries for VueJS: Vuetify, Tailwind, and PrimeVue","/blog/ui-libraries-for-vuejs-vuetify-tailwind-and-primevue","blog/005.ui-libraries-for-vuejs-vuetify-tailwind-and-primevue",{"title":30,"path":31,"stem":32},"Micro Frontend Architecture","/blog/micro-frontend-architecture","blog/006.micro-frontend-architecture",{"title":34,"path":35,"stem":36},"Pre-rendering and Hydration in Vue.js","/blog/pre-rendering-and-hydration-in-vuejs","blog/007.pre-rendering-and-hydration-in-vuejs",{"title":38,"path":39,"stem":40},"Satori by Vercel — Dynamic Image Generation in JavaScript","/blog/satori-by-vercel-dynamic-image-generation-in-javascript","blog/008.satori-by-vercel-dynamic-image-generation-in-javascript",{"title":42,"path":43,"stem":44},"Vue.js and Progressive Web Apps (PWA) – Enhancing Web Experiences","/blog/vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences","blog/009.vuejs-and-progressive-web-apps-pwa-enhancing-web-experiences",{"title":46,"path":47,"stem":48},"Moving from a Traditional Node.js CRUD API to Serverless Architecture—A Deep Dive","/blog/moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive","blog/010.moving-from-a-traditional-nodejs-crud-api-to-serverless-architecturea-deep-dive",{"title":50,"path":51,"stem":52},"Nuxt 3 and Serverless Edge Functions—Unlocking Performance and Scalability","/blog/nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability","blog/011.nuxt-3-and-serverless-edge-functionsunlocking-performance-and-scalability",{"title":54,"path":55,"stem":56},"A Tribute to Asa Bain: Thank You for Everything","/blog/a-tribute-to-asa-bain-thank-you-for-everything","blog/012.a-tribute-to-asa-bain-thank-you-for-everything",{"title":58,"path":59,"stem":60},"Migrating JavaScript to TypeScript in ASP.NET MVC Projects","/blog/migrating-javascript-to-typescript-in-aspnet-mvc-projects","blog/013.migrating-javascript-to-typescript-in-aspnet-mvc-projects",{"title":62,"path":63,"stem":64},"Modernizing Classic ASP.NET MVC with Vue.js","/blog/modernizing-classic-aspnet-mvc-with-vuejs","blog/014.modernizing-classic-aspnet-mvc-with-vuejs",{"title":66,"path":67,"stem":68},"Which UI JavaScript Framework Should You Use?","/blog/which-ui-javascript-framework-should-you-use","blog/015.which-ui-javascript-framework-should-you-use",{"title":70,"path":71,"stem":72},"Vue + AI Integration Workflows: Enhancing Developer Productivity","/blog/vue-ai-integration-workflows-enhancing-developer-productivity","blog/016.vue-ai-integration-workflows-enhancing-developer-productivity",{"title":74,"path":75,"stem":76},"OpenAPI Standards & Scalar Integration for Node.js Apps","/blog/openapi-standards-scalar-integration-for-nodejs-apps","blog/017.openapi-standards-scalar-integration-for-nodejs-apps",{"title":78,"path":79,"stem":80},"Nuxt 3.17 — Data Fetching Improvements","/blog/nuxt-317-data-fetching-improvements","blog/019.nuxt-317-data-fetching-improvements",{"title":82,"path":83,"stem":84},"Subdomain-Based Multi-Tenancy in Nuxt","/blog/subdomain-based-multi-tenancy-in-nuxt","blog/020.subdomain-based-multi-tenancy-in-nuxt",{"title":86,"path":87,"stem":88},"Type-Safe Backends with TypeScript: tRPC, Zod, and Drizzle ORM","/blog/type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm","blog/021.type-safe-backends-with-typescript-trpc-zod-and-drizzle-orm",{"title":90,"path":91,"stem":92},"Unit Testing Vue Applications with Vitest and Agentic AI","/blog/unit-testing-vue-applications-with-vitest-and-agentic-ai","blog/022.unit-testing-vue-applications-with-vitest-and-agentic-ai",{"title":94,"path":95,"stem":96},"Hidden Features & Lesser-Known TypeScript Gems","/blog/hidden-features-lesser-known-typescript-gems","blog/023.hidden-features-lesser-known-typescript-gems",{"title":98,"path":99,"stem":100},"Nuxt/Vercel Acquisition and Its Impact on NuxtHub Users","/blog/nuxtvercel-acquisition-and-its-impact-on-nuxthub-users","blog/024.nuxtvercel-acquisition-and-its-impact-on-nuxthub-users",{"title":102,"path":103,"stem":104},"State of Vue & Nuxt Ecosystem 2025","/blog/state-of-vue-nuxt-ecosystem-2025","blog/025.state-of-vue-nuxt-ecosystem-2025",{"title":106,"path":107,"stem":108},"Feature Adoption in TypeScript Over Time","/blog/feature-adoption-in-typescript-over-time","blog/026.feature-adoption-in-typescript-over-time",{"title":110,"path":111,"stem":112},"Migrating From WordPress to Nuxt Content & Using Nuxt Studio","/blog/migrating-from-wordpress-to-nuxt-content-using-nuxt-studio","blog/027.migrating-from-wordpress-to-nuxt-content-using-nuxt-studio",{"title":114,"path":115,"stem":116},"Strategic Topic: The “Rust-ification” of Tooling (Biome & Rolldown)","/blog/strategic-topic-the-rust-ification-of-tooling-biome-rolldown","blog/028.strategic-topic-the-rust-ification-of-tooling-biome-rolldown",{"title":118,"path":119,"stem":120},"Nuxt 4 and the Evolving Full-Stack Framework Landscape","/blog/nuxt-4-and-the-evolving-full-stack-framework-landscape","blog/029.nuxt-4-and-the-evolving-full-stack-framework-landscape",{"title":122,"path":123,"stem":124},"Bun as a JavaScript Runtime: Evaluating Readiness Beyond Node.js","/blog/bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs","blog/030.bun-as-a-javascript-runtime-evaluating-readiness-beyond-nodejs",{"title":126,"path":127,"stem":128},"Top 10 Nuxt Modules That Supercharge Your App From Day One Introduction","/blog/top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction","blog/031.top-10-nuxt-modules-that-supercharge-your-app-from-day-one-introduction",{"title":130,"path":131,"stem":132},"Strategic Topic: Vite+, VoidZero, and the Future of Frontend Tooling","/blog/strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling","blog/032.strategic-topic-vite-voidzero-and-the-future-of-frontend-tooling",{"title":134,"path":135,"stem":136},"The Future of Time in JavaScript: Transitioning to the Native Temporal API","/blog/the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api","blog/033.the-future-of-time-in-javascript-transitioning-to-the-native-temporal-api",{"title":138,"path":139,"stem":140},"Understanding Hydration Issues in Nuxt and How Nuxt Hints Helps","/blog/understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps","blog/034.understanding-hydration-issues-in-nuxt-and-how-nuxt-hints-helps",false,{"id":143,"title":14,"author":144,"body":148,"date":1083,"description":1084,"extension":1085,"image":1086,"meta":1087,"minRead":224,"navigation":248,"path":15,"seo":1088,"stem":16,"__hash__":1089},"blog/blog/002.understanding-javascript-and-its-quirks.md",{"name":145,"avatar":146},"Sean Erick C. Ramones",{"src":147,"alt":145},"/avatars/profile-image-1.png",{"type":149,"value":150,"toc":1073},"minimark",[151,155,163,166,171,269,274,289,385,388,391,397,400,404,508,512,519,521,527,530,534,604,608,611,613,619,622,626,726,730,741,743,749,752,756,894,898,907,909,915,925,929,956,960,969,995,997,1004,1007,1014,1029,1057,1060,1062,1069],[152,153,154],"p",{},"JavaScript is a powerful and widely used language, but it comes with quirks that can catch developers off guard (especially when you are new to the language). This report explores common pitfalls in JavaScript and provides insights to help developers navigate them effectively.",[156,157,159],"h2",{"id":158},"automatic-semicolon-insertion-asi",[160,161,162],"strong",{},"Automatic Semicolon Insertion (ASI)",[152,164,165],{},"JavaScript automatically inserts semicolons at the end of some lines during code parsing. While this can make code appear simpler, it can also cause unintended behavior.",[152,167,168],{},[160,169,170],{},"Example:",[172,173,178],"pre",{"className":174,"code":175,"language":176,"meta":177,"style":177},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","// Expected: a is 5\nlet a = 1\nlet b = 4\na\n++\nb // Treated as a separate expression\n\nconsole.log(a) // Outputs 1, not 5\n","jsx","",[179,180,181,190,209,222,228,234,243,250],"code",{"__ignoreMap":177},[182,183,186],"span",{"class":184,"line":185},"line",1,[182,187,189],{"class":188},"sHwdD","// Expected: a is 5\n",[182,191,193,197,201,205],{"class":184,"line":192},2,[182,194,196],{"class":195},"spNyl","let",[182,198,200],{"class":199},"sTEyZ"," a ",[182,202,204],{"class":203},"sMK4o","=",[182,206,208],{"class":207},"sbssI"," 1\n",[182,210,212,214,217,219],{"class":184,"line":211},3,[182,213,196],{"class":195},[182,215,216],{"class":199}," b ",[182,218,204],{"class":203},[182,220,221],{"class":207}," 4\n",[182,223,225],{"class":184,"line":224},4,[182,226,227],{"class":199},"a\n",[182,229,231],{"class":184,"line":230},5,[182,232,233],{"class":203},"++\n",[182,235,237,240],{"class":184,"line":236},6,[182,238,239],{"class":199},"b ",[182,241,242],{"class":188},"// Treated as a separate expression\n",[182,244,246],{"class":184,"line":245},7,[182,247,249],{"emptyLinePlaceholder":248},true,"\n",[182,251,253,256,259,263,266],{"class":184,"line":252},8,[182,254,255],{"class":199},"console",[182,257,258],{"class":203},".",[182,260,262],{"class":261},"s2Zo4","log",[182,264,265],{"class":199},"(a) ",[182,267,268],{"class":188},"// Outputs 1, not 5\n",[152,270,271],{},[160,272,273],{},"Explanation:",[152,275,276,277,280,281,284,285,288],{},"The parser interprets the ",[179,278,279],{},"++"," as applying to ",[179,282,283],{},"b"," on a new line, rather than continuing the operation on ",[179,286,287],{},"a",". The example above is evaluated as:",[172,290,292],{"className":174,"code":291,"language":176,"meta":177,"style":177},"// Expected: a is 5\nlet a = 1\nlet b = 4\na; // \u003C-- this line has a semicolon automatically inserted by ASI. The rest of the expression below is evaluated separately;\n++; // Treated as a separate expression.\nb; // also treated as a separate expression\n\nconsole.log(a) // Outputs 1, not 5\n\n// Correct way to do it would be:\na ++ b // \u003C-- both should be on the same line;\n",[179,293,294,298,308,318,328,336,345,349,361,366,372],{"__ignoreMap":177},[182,295,296],{"class":184,"line":185},[182,297,189],{"class":188},[182,299,300,302,304,306],{"class":184,"line":192},[182,301,196],{"class":195},[182,303,200],{"class":199},[182,305,204],{"class":203},[182,307,208],{"class":207},[182,309,310,312,314,316],{"class":184,"line":211},[182,311,196],{"class":195},[182,313,216],{"class":199},[182,315,204],{"class":203},[182,317,221],{"class":207},[182,319,320,322,325],{"class":184,"line":224},[182,321,287],{"class":199},[182,323,324],{"class":203},";",[182,326,327],{"class":188}," // \u003C-- this line has a semicolon automatically inserted by ASI. The rest of the expression below is evaluated separately;\n",[182,329,330,333],{"class":184,"line":230},[182,331,332],{"class":203},"++;",[182,334,335],{"class":188}," // Treated as a separate expression.\n",[182,337,338,340,342],{"class":184,"line":236},[182,339,283],{"class":199},[182,341,324],{"class":203},[182,343,344],{"class":188}," // also treated as a separate expression\n",[182,346,347],{"class":184,"line":245},[182,348,249],{"emptyLinePlaceholder":248},[182,350,351,353,355,357,359],{"class":184,"line":252},[182,352,255],{"class":199},[182,354,258],{"class":203},[182,356,262],{"class":261},[182,358,265],{"class":199},[182,360,268],{"class":188},[182,362,364],{"class":184,"line":363},9,[182,365,249],{"emptyLinePlaceholder":248},[182,367,369],{"class":184,"line":368},10,[182,370,371],{"class":188},"// Correct way to do it would be:\n",[182,373,375,378,380,382],{"class":184,"line":374},11,[182,376,377],{"class":199},"a ",[182,379,279],{"class":203},[182,381,216],{"class":199},[182,383,384],{"class":188},"// \u003C-- both should be on the same line;\n",[152,386,387],{},"The way to avoid this is to have them on the same line. And, while semicolons are technically optional in JavaScript, it’s going to hurt you in the long run to work with that concept.",[389,390],"hr",{},[156,392,394],{"id":393},"arrays-with-non-sequential-keys",[160,395,396],{},"Arrays with Non-Sequential Keys",[152,398,399],{},"JavaScript arrays can have \"holes\" or even non-sequential keys, which can lead to surprising results when iterating.",[152,401,402],{},[160,403,170],{},[172,405,407],{"className":174,"code":406,"language":176,"meta":177,"style":177},"javascript\nCopy code\nlet arr = [];\narr[3] = 'hello';\n\nconsole.log(arr.length); // Outputs 4\nconsole.log(Object.keys(arr)); // Outputs ['3']\n",[179,408,409,414,419,434,459,463,484],{"__ignoreMap":177},[182,410,411],{"class":184,"line":185},[182,412,413],{"class":199},"javascript\n",[182,415,416],{"class":184,"line":192},[182,417,418],{"class":199},"Copy code\n",[182,420,421,423,426,428,431],{"class":184,"line":211},[182,422,196],{"class":195},[182,424,425],{"class":199}," arr ",[182,427,204],{"class":203},[182,429,430],{"class":199}," []",[182,432,433],{"class":203},";\n",[182,435,436,439,442,445,447,450,454,457],{"class":184,"line":224},[182,437,438],{"class":199},"arr[",[182,440,441],{"class":207},"3",[182,443,444],{"class":199},"] ",[182,446,204],{"class":203},[182,448,449],{"class":203}," '",[182,451,453],{"class":452},"sfazB","hello",[182,455,456],{"class":203},"'",[182,458,433],{"class":203},[182,460,461],{"class":184,"line":230},[182,462,249],{"emptyLinePlaceholder":248},[182,464,465,467,469,471,474,476,479,481],{"class":184,"line":236},[182,466,255],{"class":199},[182,468,258],{"class":203},[182,470,262],{"class":261},[182,472,473],{"class":199},"(arr",[182,475,258],{"class":203},[182,477,478],{"class":199},"length)",[182,480,324],{"class":203},[182,482,483],{"class":188}," // Outputs 4\n",[182,485,486,488,490,492,495,497,500,503,505],{"class":184,"line":245},[182,487,255],{"class":199},[182,489,258],{"class":203},[182,491,262],{"class":261},[182,493,494],{"class":199},"(Object",[182,496,258],{"class":203},[182,498,499],{"class":261},"keys",[182,501,502],{"class":199},"(arr))",[182,504,324],{"class":203},[182,506,507],{"class":188}," // Outputs ['3']\n",[152,509,510],{},[160,511,273],{},[152,513,514,515,518],{},"The array length is determined by the highest index + 1, but keys outside this sequence can still exist. For sanity’s sake, don’t do this, and instead use ",[179,516,517],{},"Array.prototype"," functions.",[389,520],{},[156,522,524],{"id":523},"adding-properties-to-primitives-are-ignored",[160,525,526],{},"Adding Properties to Primitives Are Ignored",[152,528,529],{},"Primitives like strings, numbers, and booleans are immutable, so adding properties to them doesn’t work as expected.",[152,531,532],{},[160,533,170],{},[172,535,537],{"className":174,"code":536,"language":176,"meta":177,"style":177},"let str = \"hello\";\nstr.customProperty = \"world\";\n\nconsole.log(str.customProperty); // Outputs undefined\n",[179,538,539,558,579,583],{"__ignoreMap":177},[182,540,541,543,546,548,551,553,556],{"class":184,"line":185},[182,542,196],{"class":195},[182,544,545],{"class":199}," str ",[182,547,204],{"class":203},[182,549,550],{"class":203}," \"",[182,552,453],{"class":452},[182,554,555],{"class":203},"\"",[182,557,433],{"class":203},[182,559,560,563,565,568,570,572,575,577],{"class":184,"line":192},[182,561,562],{"class":199},"str",[182,564,258],{"class":203},[182,566,567],{"class":199},"customProperty ",[182,569,204],{"class":203},[182,571,550],{"class":203},[182,573,574],{"class":452},"world",[182,576,555],{"class":203},[182,578,433],{"class":203},[182,580,581],{"class":184,"line":211},[182,582,249],{"emptyLinePlaceholder":248},[182,584,585,587,589,591,594,596,599,601],{"class":184,"line":224},[182,586,255],{"class":199},[182,588,258],{"class":203},[182,590,262],{"class":261},[182,592,593],{"class":199},"(str",[182,595,258],{"class":203},[182,597,598],{"class":199},"customProperty)",[182,600,324],{"class":203},[182,602,603],{"class":188}," // Outputs undefined\n",[152,605,606],{},[160,607,273],{},[152,609,610],{},"JavaScript temporarily wraps primitives in objects when properties are accessed, but the object is immediately discarded.",[389,612],{},[156,614,616],{"id":615},"type-coercion",[160,617,618],{},"Type Coercion",[152,620,621],{},"JavaScript implicitly converts between types in certain operations, sometimes leading to unexpected results.",[152,623,624],{},[160,625,170],{},[172,627,629],{"className":174,"code":628,"language":176,"meta":177,"style":177},"javascript\nCopy code\nconsole.log('5' - 2); // Outputs 3 (string coerced to number)\nconsole.log('5' + 2); // Outputs '52' (number coerced to string)\nconsole.log(false == 0); // Outputs true\n",[179,630,631,635,639,671,699],{"__ignoreMap":177},[182,632,633],{"class":184,"line":185},[182,634,413],{"class":199},[182,636,637],{"class":184,"line":192},[182,638,418],{"class":199},[182,640,641,643,645,647,650,652,655,657,660,663,666,668],{"class":184,"line":211},[182,642,255],{"class":199},[182,644,258],{"class":203},[182,646,262],{"class":261},[182,648,649],{"class":199},"(",[182,651,456],{"class":203},[182,653,654],{"class":452},"5",[182,656,456],{"class":203},[182,658,659],{"class":203}," -",[182,661,662],{"class":207}," 2",[182,664,665],{"class":199},")",[182,667,324],{"class":203},[182,669,670],{"class":188}," // Outputs 3 (string coerced to number)\n",[182,672,673,675,677,679,681,683,685,687,690,692,694,696],{"class":184,"line":224},[182,674,255],{"class":199},[182,676,258],{"class":203},[182,678,262],{"class":261},[182,680,649],{"class":199},[182,682,456],{"class":203},[182,684,654],{"class":452},[182,686,456],{"class":203},[182,688,689],{"class":203}," +",[182,691,662],{"class":207},[182,693,665],{"class":199},[182,695,324],{"class":203},[182,697,698],{"class":188}," // Outputs '52' (number coerced to string)\n",[182,700,701,703,705,707,709,713,716,719,721,723],{"class":184,"line":230},[182,702,255],{"class":199},[182,704,258],{"class":203},[182,706,262],{"class":261},[182,708,649],{"class":199},[182,710,712],{"class":711},"sfNiH","false",[182,714,715],{"class":203}," ==",[182,717,718],{"class":207}," 0",[182,720,665],{"class":199},[182,722,324],{"class":203},[182,724,725],{"class":188}," // Outputs true\n",[152,727,728],{},[160,729,273],{},[152,731,732,733,736,737,740],{},"Operators like ",[179,734,735],{},"-"," and ",[179,738,739],{},"+"," trigger different coercion rules, leading to varied outcomes.",[389,742],{},[156,744,746],{"id":745},"function-hoisting",[160,747,748],{},"Function Hoisting",[152,750,751],{},"Function declarations are hoisted to the top of their scope, but function expressions are not.",[152,753,754],{},[160,755,170],{},[172,757,759],{"className":174,"code":758,"language":176,"meta":177,"style":177},"javascript\nCopy code\nconsole.log(sayHello()); // Outputs \"Hello!\"\n\nfunction sayHello() {\n    return \"Hello!\";\n}\n\nconsole.log(sayGoodbye()); // Error: sayGoodbye is not a function\n\nvar sayGoodbye = function () {\n    return \"Goodbye!\";\n};\n",[179,760,761,765,769,790,794,808,823,828,832,852,856,874,888],{"__ignoreMap":177},[182,762,763],{"class":184,"line":185},[182,764,413],{"class":199},[182,766,767],{"class":184,"line":192},[182,768,418],{"class":199},[182,770,771,773,775,777,779,782,785,787],{"class":184,"line":211},[182,772,255],{"class":199},[182,774,258],{"class":203},[182,776,262],{"class":261},[182,778,649],{"class":199},[182,780,781],{"class":261},"sayHello",[182,783,784],{"class":199},"())",[182,786,324],{"class":203},[182,788,789],{"class":188}," // Outputs \"Hello!\"\n",[182,791,792],{"class":184,"line":224},[182,793,249],{"emptyLinePlaceholder":248},[182,795,796,799,802,805],{"class":184,"line":230},[182,797,798],{"class":195},"function",[182,800,801],{"class":261}," sayHello",[182,803,804],{"class":203},"()",[182,806,807],{"class":203}," {\n",[182,809,810,814,816,819,821],{"class":184,"line":236},[182,811,813],{"class":812},"s7zQu","    return",[182,815,550],{"class":203},[182,817,818],{"class":452},"Hello!",[182,820,555],{"class":203},[182,822,433],{"class":203},[182,824,825],{"class":184,"line":245},[182,826,827],{"class":203},"}\n",[182,829,830],{"class":184,"line":252},[182,831,249],{"emptyLinePlaceholder":248},[182,833,834,836,838,840,842,845,847,849],{"class":184,"line":363},[182,835,255],{"class":199},[182,837,258],{"class":203},[182,839,262],{"class":261},[182,841,649],{"class":199},[182,843,844],{"class":261},"sayGoodbye",[182,846,784],{"class":199},[182,848,324],{"class":203},[182,850,851],{"class":188}," // Error: sayGoodbye is not a function\n",[182,853,854],{"class":184,"line":368},[182,855,249],{"emptyLinePlaceholder":248},[182,857,858,861,864,866,869,872],{"class":184,"line":374},[182,859,860],{"class":195},"var",[182,862,863],{"class":199}," sayGoodbye ",[182,865,204],{"class":203},[182,867,868],{"class":195}," function",[182,870,871],{"class":203}," ()",[182,873,807],{"class":203},[182,875,877,879,881,884,886],{"class":184,"line":876},12,[182,878,813],{"class":812},[182,880,550],{"class":203},[182,882,883],{"class":452},"Goodbye!",[182,885,555],{"class":203},[182,887,433],{"class":203},[182,889,891],{"class":184,"line":890},13,[182,892,893],{"class":203},"};\n",[152,895,896],{},[160,897,273],{},[152,899,900,901,903,904,906],{},"The ",[179,902,781],{}," function declaration is hoisted, while the ",[179,905,844],{}," function expression is only hoisted as an undefined variable.",[389,908],{},[156,910,912],{"id":911},"null-is-an-object",[160,913,914],{},"Null Is an Object",[152,916,900,917,920,921,924],{},[179,918,919],{},"typeof"," operator treats ",[179,922,923],{},"null"," as an object, which can confuse developers.",[152,926,927],{},[160,928,170],{},[172,930,932],{"className":174,"code":931,"language":176,"meta":177,"style":177},"console.log(typeof null); // Outputs \"object\"\n",[179,933,934],{"__ignoreMap":177},[182,935,936,938,940,942,944,946,949,951,953],{"class":184,"line":185},[182,937,255],{"class":199},[182,939,258],{"class":203},[182,941,262],{"class":261},[182,943,649],{"class":199},[182,945,919],{"class":203},[182,947,948],{"class":203}," null",[182,950,665],{"class":199},[182,952,324],{"class":203},[182,954,955],{"class":188}," // Outputs \"object\"\n",[152,957,958],{},[160,959,273],{},[152,961,962,963,965,966,968],{},"This is a historical quirk from JavaScript’s early implementation. ",[179,964,923],{}," is not actually an object, but its ",[179,967,919],{}," result remains \"object\" for backward compatibility.",[152,970,971,972,974,975,978,979,985,986,988,989,991,992,258],{},"The reason ",[179,973,923],{}," is of type ",[179,976,977],{},"\"object\""," in JavaScript is due to a bug in the language's initial implementation. You can dig deeper ",[287,980,984],{"href":981,"rel":982},"https://stackoverflow.com/questions/18808226/why-is-typeof-null-object#:~:text=The%20reasoning%20behind%20this%20is,",[983],"nofollow","here","%20to%20return%20%22object%22) for more, but the most important here is that checking ",[179,987,923],{}," using ",[179,990,919],{}," results to ",[179,993,994],{},"‘object’",[389,996],{},[998,999,1001],"h3",{"id":1000},"conclusion",[160,1002,1003],{},"Conclusion",[152,1005,1006],{},"JavaScript's quirks reflect its flexible and forgiving nature, but they can lead to unexpected behavior. By understanding these quirks, developers can write more robust and predictable code. Staying vigilant and using modern tools like linters and type systems (e.g., TypeScript, ESLint, Prettier) can further mitigate these issues.",[152,1008,1009,1010,1013],{},"Third-party integrations/automations for CI/CD workflows (in our case in ",[179,1011,1012],{},"Sysarb"," we have SonarCube) that actually throws build/compilation errors and check coding conventions on your project.",[152,1015,1016,1017,1020,1021,1024,1025,1028],{},"AI-powered assistants can be invaluable in navigating JavaScript's quirks. Tools like ",[160,1018,1019],{},"GitHub Copilot",", ",[160,1022,1023],{},"ChatGPT",", and ",[160,1026,1027],{},"CodeWhisperer"," can:",[1030,1031,1032,1039,1045,1051],"ul",{},[1033,1034,1035,1038],"li",{},[160,1036,1037],{},"Detect potential issues",": Flagging problematic patterns such as reliance on implicit type coercion or ASI.",[1033,1040,1041,1044],{},[160,1042,1043],{},"Provide code suggestions",": Recommending best practices and modern alternatives to avoid common pitfalls.",[1033,1046,1047,1050],{},[160,1048,1049],{},"Explain behavior",": Offering insights into unexpected outputs and suggesting ways to fix them.",[1033,1052,1053,1056],{},[160,1054,1055],{},"Enhance debugging",": Assisting in pinpointing the root causes of errors related to these quirks.",[152,1058,1059],{},"By leveraging AI tools, developers can accelerate learning, reduce bugs, and focus on building innovative solutions rather than wrestling with language oddities.",[389,1061],{},[152,1063,1064,1068],{},[1065,1066,1067],"em",{},"Happy coding!"," 🥲",[1070,1071,1072],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}",{"title":177,"searchDepth":192,"depth":192,"links":1074},[1075,1076,1077,1078,1079,1080],{"id":158,"depth":192,"text":162},{"id":393,"depth":192,"text":396},{"id":523,"depth":192,"text":526},{"id":615,"depth":192,"text":618},{"id":745,"depth":192,"text":748},{"id":911,"depth":192,"text":914,"children":1081},[1082],{"id":1000,"depth":211,"text":1003},"2024-11-01T00:00:00.000Z","*By Sean Erick C. Ramones, Vue SME | JavaScript/TypeScript SME*","md","https://images.pexels.com/photos/1089440/pexels-photo-1089440.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",{},{"title":14,"description":1084},"H1rGQGuShJTzpeeqjV8xA8A66iw5d7STKFnLnVVKRts",[1091,1093],{"title":10,"path":11,"stem":12,"description":1092,"children":-1},"For this month, Niclas - a frontend developer from the Sysarb SWE team has introduced a new architecture in the project client that can help scale and maintain the project better in the long-run.",{"title":18,"path":19,"stem":20,"description":1084,"children":-1},1773209887614]