> Markdown version of [/videos/306-javascript-the-grumpy-parts?t=2457](https://www.wearedevelopers.com/videos/306-javascript-the-grumpy-parts?t=2457). Every page supports `.md` or `Accept: text/markdown`. Links point to the HTML versions so they work for humans too. Agent guide: [/agents.md](https://www.wearedevelopers.com/agents.md). --- # JavaScript the Grumpy Parts JavaScript's frustrating quirks stem from a fail-safe philosophy built to prevent application crashes. Master its internal mechanics and two-pass compiler to finally write predictable code. - **Speakers:** Rob Richardson - **Event:** JavaScript Congress - **Published:** November 25, 2021 - **Duration:** 46:08 - **URL:** https://www.wearedevelopers.com/videos/306-javascript-the-grumpy-parts ## Summary JavaScript's perplexing behaviors—often dismissed as arbitrary quirks—stem from its origins as a 10-day project designed with a strict philosophy of keeping the web running at all costs. This fail-safe approach leads to implicit behaviors, such as auto-inserting semicolons and silently hoisting undeclared variables into the global scope to prevent application crashes. By examining the language's internal mechanics rather than observing surface-level output, engineering teams can navigate these dusty edges to write significantly more predictable code. Understanding JavaScript's two-pass compiler demystifies the convenient lie of hoisting. The compiler explicitly separates variable allocation across curly-brace and function scopes from the actual execution of assignments. This separation explains why fetching an unallocated variable triggers an immediate reference error, and why reassigning a previously transpiled constant triggers a runtime exception not caught during babel compilation. Exploring execution contexts further resolves the erratic nature of the underlying execution context, defined simply as the thing to the left of the dot. While call and bind methods afford explicit context wrapping, lexically bound arrow functions capture scope at creation to form permanent execution envelopes. These envelopes cannot be dynamically reassigned, which can inadvertently break configurations in context-heavy environments like testing frameworks. To unlock non-blocking performance in a single-threaded runtime, developers must master the application event loop along with the interplay between the core call stack, external Web APIs, and the callback queue. Purposefully yielding the thread with zero-millisecond timeouts or scheduling mechanisms allows Node to process blocking external requests without starving the active GUI stack. Finally, modernizing a legacy codebase with asynchronous iteration does not require a full structural rewrite; because it operates as a resumable state machine built entirely upon standard promises, developers can seamlessly interoperate dot-then handlers and await syntax to perform concurrent execution with promise queues. **Keywords:** javascript two-pass compiler, variable allocation and execution, variable scope and hoisting, global scope leakage, binding execution context, lexically bound arrow functions, function call and bind methods, single-threaded event loop, call stack and callback queue, yielding the event loop thread, process.nexttick scheduling, async await promise interop, legacy promise refactoring, concurrent promise execution ## Chapters 1. **The history and design philosophy of JavaScript** (00:00) — How JavaScript's creation in ten days and isolated runtime shaped its tolerant error handling. 1. **Exploring unusual type behaviors in JavaScript** (05:36) — An overview of strange type evaluations like the types of null and not-a-number. 1. **Understanding the two-pass JavaScript compiler mechanism** (07:32) — How the JavaScript engine parses allocations in the first pass and executes code sequentially. 1. **Tracing variable scope and hoisting execution behavior** (09:46) — Applying compiler logic to trace how functions and globally leaked variables behave during execution. 1. **Variable scoping with let and const declarations** (16:33) — How block-scoped declarations prevent global state leaks and safely enforce programmatic variable immutability. 1. **Determining the context of the this keyword** (23:53) — How the value of a function context relies entirely on the object executing it. 1. **Overriding execution context using call and bind** (27:12) — Methods for explicitly setting the execution context of a function to prevent scope loss. 1. **Lexical scope binding with JavaScript arrow functions** (30:54) — How arrow functions permanently capture execution context at the exact time of their creation. 1. **Visualizing the browser event loop execution architecture** (34:03) — How the call stack, web APIs, and callback queue manage asynchronous operations in tandem. 1. **Managing the single-threaded Node.js event loop** (36:32) — Techniques for yielding the execution thread to maintain responsiveness in single-threaded backend environments. 1. **Integrating promises with async and await syntax** (37:59) — How modern syntax builds upon promises to allow synchronous-style management of asynchronous program flow. 1. **Audience Q&A on arrow functions and multithreading** (40:57) — Tradeoffs of utilizing arrow functions and strategies for scaling execution capabilities across multiple instances. ## Related Moments - [Addressing the complaints about JavaScript as a programming language](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living") - [Evaluating the true impact of bad JavaScript features](https://www.wearedevelopers.com/videos/1451-best-of-the-worst-the-most-awful-anti-features-in-javascript-ranked) (from "Best of the Worst – the most awful anti-features in JavaScript, ranked!") - [Overview of extreme rules lawyering in JavaScript standards](https://www.wearedevelopers.com/videos/100116-extreme-rules-lawyering-with-the-ecmascript-specifications) (from "Extreme Rules Lawyering with the ECMAScript Specifications") - [Expanding JavaScript horizons with WebAssembly and backend possibilities](https://www.wearedevelopers.com/videos/118-how-to-stop-choosing-javascript-frameworks-and-start-living) (from "How to Stop Choosing JavaScript Frameworks and Start Living") - [Fundamentals of JavaScript minification and internal variable mangling](https://www.wearedevelopers.com/videos/1439-a-practical-guide-to-reducing-bundle-size) (from "A Practical Guide to Reducing Bundle Size") - [Modern JavaScript loop optimization and CSS innovations](https://www.wearedevelopers.com/videos/1786-wearedevelopers-live-ai-freelancing-keeping-up-with-tech-and-more) (from "WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More") ## Related Articles - [Dev Digest 136 - No JS(on) of mine](https://www.wearedevelopers.com/magazine/482-dev-digest-136-no-js-on-of-mine) - [Dev Digest 124 - None like it hot](https://www.wearedevelopers.com/magazine/460-dev-digest-124-none-like-it-hot) - [Dev Digest 131 - AI'm not sure about OSS](https://www.wearedevelopers.com/magazine/472-dev-digest-131-ai-m-not-sure-about-oss) - [Dev Digest 109 -Egg-citing things…](https://www.wearedevelopers.com/magazine/408-dev-digest-109-egg-citing-things) ## Related Jobs - [Senior Software Engineer](https://www.wearedevelopers.com/jobs/ext/15942-senior-software-engineer) at **GitHub** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1304673-software-engineer) at **Bitpanda** - [Software Engineer, React & Angular (Broker Web Platform](https://www.wearedevelopers.com/jobs/ext/1558399-software-engineer-react-angular-broker-web-platform) at **Bitpanda** - [Software Engineer](https://www.wearedevelopers.com/jobs/ext/1377585-software-engineer) at **Bitpanda** - [Senior Software Engineer, Client Apps Platform](https://www.wearedevelopers.com/jobs/ext/1773893-senior-software-engineer-client-apps-platform) at **GitHub** - [Junior Frontend Engineer](https://www.wearedevelopers.com/jobs/ext/1532351-junior-frontend-engineer) at **Almedia**