JavaScript Runtime and Fundamentals

Understand what JavaScript actually is, how source code becomes executable behavior, and the fundamentals that everything else builds upon.

What JavaScript Actually Is

JavaScript is a dynamically typed, garbage-collected, multi-paradigm programming language standardized as ECMAScript. The language itself does not define the DOM, fetch(), timers, or browser APIs. Those capabilities are provided by the host environment. A browser embeds a JavaScript engine such as V8, SpiderMonkey, or JavaScriptCore and exposes Web APIs around that engine. Node.js similarly embeds V8 but provides server-oriented APIs such as filesystem, networking, streams, and process management.

A useful mental model is: JavaScript is the language; the runtime is the language engine plus host-provided capabilities. This distinction explains why some APIs exist in browsers but not Node.js.

Language vs Runtime

ECMAScript defines language behavior. The browser or Node.js provides the surrounding runtime APIs.

Key Takeaways

JavaScript and the browser are not the same thing.
ECMAScript specifies the language standard.
Runtime APIs such as DOM and timers come from the host environment.

Knowledge Check

Which statement best describes JavaScript?

Execution Contexts and the Call Stack

When JavaScript executes code, it does so inside execution contexts. The global execution context is created when a script starts. Function calls create function execution contexts, and modern JavaScript also has lexical environments associated with blocks and modules.

The call stack tracks active execution. Calling a function pushes a frame onto the stack. Returning from the function removes that frame. JavaScript code running on a single agent executes one piece of synchronous JavaScript at a time, which is why an expensive synchronous loop can block other work.

Basic Call Stack Flow

Reading the Call Stack

function third() {
  console.log('third');
}

function second() {
  third();
  console.log('second');
}

function first() {
  second();
  console.log('first');
}

first();

💡 Calling first pushes first onto the stack. Calling second pushes another frame, and calling third pushes another. The frames unwind in reverse order as each function returns.

Key Takeaways

Function calls create execution frames.
The call stack follows last-in-first-out behavior.
Long synchronous work blocks the current JavaScript execution agent.

Knowledge Check

What happens when a function calls another function synchronously?

Strict Mode

Strict mode changes several historically permissive JavaScript behaviors. It can be enabled with "use strict", although ECMAScript modules are automatically strict. Strict mode prevents accidental global variable creation, changes some this behavior, rejects certain duplicate or restricted constructs, and makes several silent failures become errors.

Strict mode is not a security sandbox. Its purpose is to make language semantics safer and less error-prone.

Strict Mode Prevents Accidental Globals

"use strict";

function createUser() {
  username = 'Suriya';
}

createUser();

💡 Without strict mode, assigning to an undeclared identifier in older non-module code could create or attempt to create a global property. Strict mode throws a ReferenceError instead.

Key Takeaways

ES modules execute in strict mode automatically.
Strict mode catches several classes of accidental programming errors.
Strict mode is not equivalent to a security boundary.

Knowledge Check

What happens when an undeclared variable is assigned inside strict-mode code?

Comments and Automatic Semicolon Insertion

JavaScript allows line comments with // and block comments with /* ... */. Semicolons are generally optional because ECMAScript defines Automatic Semicolon Insertion (ASI). However, ASI does not simply insert a semicolon at every newline. It operates according to grammar rules and restricted productions.

A classic example is a return followed by a newline. Because of the grammar rules, the newline can terminate the return statement before the expression.

The Return-Newline Trap

function getUser() {
  return
  {
    name: 'Suriya'
  };
}

console.log(getUser());

💡 The newline after return causes the statement to terminate, so the function returns undefined. Formatting can therefore affect behavior in specific JavaScript grammar situations.

Key Takeaways

ASI is grammar-driven rather than simply newline-driven.
Be especially careful after return, throw, break, and continue.
Consistent formatting and semicolon conventions reduce ambiguity.

Knowledge Check

What does the function in the example return?

What JavaScript Actually Is

Execution Contexts and the Call Stack

Strict Mode

Comments and Automatic Semicolon Insertion

STAY UPDATED WITH BYTES!