What Happens If You Run JavaScript Code Below
Explore the execution path of JavaScript code, including parsing, hoisting, synchronous vs asynchronous flow, and the event loop. Practical examples show what happens when you run JavaScript code below in browsers and Node.
When you run JavaScript code, the engine first parses the source to build a syntax tree, then compiles it to optimized machine-like code, and finally executes it within a host environment (browser or Node). The flow distinguishes synchronous work from asynchronous tasks: synchronous statements run immediately, while asynchronous callbacks are scheduled via the event loop, microtasks, and macrotasks. The exact outcome depends on hoisting, scope, and timing, especially with promises and timers. What happens if you run javascript code below illustrates these concepts in practice.
What happens if you run javascript code below
To understand the lifecycle of JavaScript execution, start with a simple snippet that relies on hoisting and the order of evaluation. Consider the following code:
console.log('start');
var x = 5;
console.log(x);This demonstrates hoisting: the declaration of x is moved to the top, but its initialization remains in place. The console will print start and then 5. If we inspect the type of a hoisted variable before initialization:
console.log(typeof y); // undefined (hoisted but not yet initialized)
var y = 2;The typeof check before the assignment reveals the internal state during hoisting. Now replace var with let to observe a different behavior:
try {
console.log(typeof z);
let z = 3;
} catch (e) {
console.error(e.name + ': ' + e.message);
}This will throw a ReferenceError because let declarations are not initialized until their scope is entered. The initial value is not accessible before the let binding is created, illustrating the difference between hoisted bindings.
Why this matters: understanding hoisting and initialization order helps predict runtime results and avoid subtle bugs.
_repeatNote_0_0__shouldBeUniqueInEachBlock__0CheckThatContentIsUniqueOnly_1_0
Steps
Estimated time: 30-45 minutes
- 1
Set up a minimal test file
Create a small JavaScript file with a couple of varying declarations (var, let) to observe hoisting and initialization. Save as run.js and keep the content focused on evaluation order.
Tip: Keep the example short and isolated to avoid distractions. - 2
Run the file in Node or browser
Execute the file in Node or paste blocks into the browser console to see the actual output. Compare results across environments to understand differences.
Tip: Environment quirks matter; don’t assume identical output across platforms. - 3
Experiment with timing and async
Add an example with `setTimeout` and `Promise.resolve().then(...)` to see how microtasks and macrotasks are scheduled.
Tip: Observe the microtask queue flush before macrotasks. - 4
Document the observed behavior
Note the exact console output and the order of operations. This builds intuition for debugging real projects.
Tip: Use comments to annotate why each line prints what it does. - 5
Extend with error handling
Introduce a try/catch around a code block that can throw, then inspect error names and messages.
Tip: Error objects reveal root causes and help you triage issues quickly. - 6
Review hoisting rules
Summarize how `var`, `let`, and `const` behave, and note when bindings are created versus when they’re initialized.
Tip: Hoisting surprises are common sources of bugs; always test edge cases.
Prerequisites
Required
- Required
- Required
- Basic command line knowledgeRequired
Optional
- Familiarity with console loggingOptional
- Optional: TypeScript for type-checked experimentsOptional
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| Open the browser consoleChrome/Edge/Firefox devtools | Ctrl+⇧+J |
| Run a script with Node.jsFrom the terminal/command prompt | node yourfile.js |
| Copy codeIn editor or terminal | Ctrl+C |
| Paste codeIn editor or terminal | Ctrl+V |
Questions & Answers
What happens if there is a syntax error in the code?
Syntax errors are detected during parsing and prevent the code from executing. The engine reports the error with a stack trace or message, helping you locate the offending token. Fixing the syntax allows the code to run normally and reveal any logical errors afterward.
Syntax errors stop execution at parse time; the code won’t run until you fix the syntax. The console shows an error message pointing to the line and column where the problem occurred.
How does asynchronous code run relative to synchronous code?
Synchronous code runs to completion before control returns to the event loop. Asynchronous tasks scheduled via promises or timers are queued: microtasks (promises) run after the current stack but before macrotasks (setTimeout), which run after microtasks finish.
Synchronous code runs first. Async tasks pop in after the current operation, with microtasks ahead of macrotasks.
What is hoisting and how does it affect output?
Hoisting moves declarations to the top of their scope, with different behavior for var, let, and const. Declarations hoisted with var are initialized as undefined, whereas let/const bindings stay uninitialized until execution reaches them, causing ReferenceErrors if accessed early.
Hoisting changes when variables are known to exist; let and const block access until initialized, while var is initialized to undefined.
Why might a global variable leak, and how can you prevent it?
Variables declared without a proper scope become properties of the global object. Use strict mode, modules, or closures to keep variables scoped locally and avoid accidental pollution that could affect other parts of your program.
Global leakage happens when you declare a variable without a proper scope. Use modules or closures to prevent it.
How can I debug asynchronous code effectively in the browser?
Use breakpoints, console.time/console.timeEnd, and async stack traces. The browser’s DevTools lets you inspect the call stack across async boundaries and watch the order of microtasks vs macrotasks.
DevTools helps you see the call stack across async steps and identify where things went wrong.
What changes between Node.js and the browser when running code?
Both environments share JavaScript semantics, but global objects, timers, and I/O APIs differ. For example, `setImmediate` exists in Node while browsers use `setTimeout`; always consult environment-specific docs when building cross-platform code.
Node and browsers run JavaScript the same way, but their APIs and timers differ, so test in both if targeting multiple environments.
What to Remember
- Understand hoisting and initialization with var/let/const
- Differentiate synchronous vs asynchronous execution in the event loop
- Recognize how microtasks precede macrotasks in practice
- Use small experiments to predict JavaScript behavior
- Leverage debugging tools to trace execution flow