Fundamentals 24 min read

Why Reading the ECMAScript Specification Matters: Uncovering JavaScript’s Hidden Mechanics

This article explains why developers should dive into the massive ECMAScript specification, outlines the kinds of language features it defines, shows how to locate the official text, and walks through concrete examples that reveal the spec’s role in everyday JavaScript behavior.

Taobao Frontend Technology
Taobao Frontend Technology
Taobao Frontend Technology
Why Reading the ECMAScript Specification Matters: Uncovering JavaScript’s Hidden Mechanics

Even though JavaScript is familiar to most developers, the ECMAScript specification spans nearly 600 000 words, which can discourage reading; nevertheless, understanding the spec is essential because it defines the exact behavior of JavaScript engines in browsers and Node.js.

In this article, ECMAScript refers to the language specification produced by Ecma International Technical Committee 39, while JavaScript denotes the everyday programming language we write.

Why do we need to read the ECMAScript specification?

The spec is the implementation standard for JavaScript engines; by studying its defined algorithms and steps, we can explain puzzling runtime phenomena such as unexpected results from Array.prototype methods or the difference between == and ===.

> Array.prototype.push('foo')
1
> Array.isArray(Array.prototype)
true
> Set.prototype.add('foo')
Uncaught TypeError: Method Set.prototype.add called on incompatible receiver #<Set>

When such behavior cannot be clarified by Google or StackOverflow, the spec provides the definitive description of operations like Array.prototype.push and the abstract equality comparison used by ==.

What does the ECMAScript specification contain?

The spec covers syntax definitions, static semantics, runtime semantics, and built‑in APIs. It distinguishes language features from host‑environment capabilities (e.g., document, XMLHttpRequest, process, require), which are not part of the spec but are accessed via host objects.

Syntax elements (e.g., the grammar for a for‑in loop)

Static semantics (e.g., the meaning of the typeof operator)

Runtime semantics (algorithms that describe how code executes)

Built‑in object methods (e.g., String.prototype.substring)

Only a subset of these topics is relevant to a particular problem, so developers should locate the relevant section by asking which stage of execution the issue occurs in.

How to obtain the ECMAScript specification

The latest version is available at https://tc39.es/ecma262 . The spec is versioned annually (e.g., ES2020) and the source is hosted on GitHub at https://github.com/tc39/ecma262 .

Spec navigation example

Consider the expression 'foobar'.substring(3). The spec explains that the primitive string is first converted to a String object via the abstract operation ToObject, then the [[Get]] internal method of String.prototype retrieves the substring function, which is finally called with the newly created object as the receiver.

'foobar'.substring(3);
// → 'bar'
Note: The article was written in March 2020; later editions of the spec may contain updates.

Member expression runtime semantics

The spec defines member‑expression evaluation as a series of steps. For MemberExpression . IdentifierName, the algorithm evaluates the base expression, obtains its value, determines strict mode, and then calls EvaluatePropertyAccessWithIdentifierKey to produce a reference.

MemberExpression : MemberExpression . IdentifierName
1. Let baseReference be the result of evaluating MemberExpression.
2. Let baseValue be ? GetValue(baseReference).
3. Let strict be true if the code is strict mode, otherwise false.
4. Return ? EvaluatePropertyAccessWithIdentifierKey(baseValue, IdentifierName, strict).

The reference is later resolved by GetValue, which, for primitive bases, first applies ToObject and then invokes the object's [[Get]] internal method.

GetValue ( V )
1. ReturnIfAbrupt(V).
2. If Type(V) is not Reference, return V.
3. Let base be GetBase(V).
4. If IsUnresolvableReference(V) is true, throw ReferenceError.
5. If IsPropertyReference(V) is true, then
   a. If HasPrimitiveBase(V) is true, set base to ! ToObject(base).
   b. Return ? base.[[Get]](GetReferencedName(V), GetThisValue(V)).
6. Else, return ? base.GetBindingValue(...).

The [[Get]] internal method for ordinary objects delegates to OrdinaryGet, which walks the prototype chain, checks data versus accessor descriptors, and ultimately calls the getter function if present.

OrdinaryGet ( O, P, Receiver )
1. Let desc be ? O.[[GetOwnProperty]](P).
2. If desc is undefined, let parent be ? O.[[GetPrototypeOf]]().
   a. If parent is null, return undefined.
   b. Return ? parent.[[Get]](P, Receiver).
3. If IsDataDescriptor(desc) is true, return desc.[[Value]].
4. Let getter be desc.[[Get]].
5. If getter is undefined, return undefined.
6. Return ? Call(getter, Receiver).

Internal slots such as [[Prototype]] store object metadata, while internal methods like [[Call]] and [[Construct]] enable functions to be callable objects.

Understanding these mechanisms clarifies why primitive values can access methods (they are temporarily wrapped as objects) and why certain operations throw errors when the abstract steps are violated.

Further reading

For more details, see the sections “Ordinary Object Internal Methods and Internal Slots”, “Proxy Object Internal Methods and Internal Slots”, and “Array Exotic Objects” in the ECMAScript specification.

ECMAScript object model diagram
ECMAScript object model diagram
Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Sign in to view source
Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactadmin@besthub.devand we will review it promptly.

JavaScriptprogrammingECMAScriptspecificationLanguageinternals
Taobao Frontend Technology
Written by

Taobao Frontend Technology

The frontend landscape is constantly evolving, with rapid innovations across familiar languages. Like us, your understanding of the frontend is continually refreshed. Join us on Taobao, a vibrant, all‑encompassing platform, to uncover limitless potential.

0 followers
Reader feedback

How this landed with the community

Sign in to like

Rate this article

Was this worth your time?

Sign in to rate
Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.