Why are Symbol-keyed properties not included in Object.keys()?

By design in the ECMAScript specification, symbol properties are non-enumerable to legacy reflection methods like Object.keys() and for...in loops to prevent accidental collision with string-based properties. They can be inspected using Object.getOwnPropertySymbols() or Reflect.ownKeys().

What is the difference between Symbol('id') and Symbol.for('id') in JavaScript?

Symbol('id') generates a new, unique local symbol every time it is called. Symbol.for('id') queries the Global Symbol Registry, returning the shared symbol instance for that string key across the entire application runtime.

JavaScript/Modern JavaScript: ES Modules, Iterators, and Weak Collections/Symbols & Metaprogramming

Symbols & Metaprogramming

Hard100% Free~25 mins#symbol#es6#metaprogramming#symbol-to-primitive#reflect#global-symbol-registry#iterators

Key Learning Objectives

✓

Master JavaScript Symbol primitive mechanics: factory function invocation, guaranteed uniqueness, and immutability.

✓

Differentiate local Symbols from the Global Symbol Registry via Symbol.for() and Symbol.keyFor().

✓

Understand object reflection and property enumeration: why symbols are hidden from Object.keys() but visible to Reflect.ownKeys().

✓

Implement custom type conversion protocols using the well-known Symbol.toPrimitive hook.

✓

Master other well-known symbols including Symbol.iterator and Symbol.hasInstance for advanced metaprogramming.

The Interview Problem

What is logged to the console when local vs global symbols are compared, an object with a symbol key and Symbol.toPrimitive hook is inspected via reflection, and type coercions execute?

1const s1 = Symbol('id');
2const s2 = Symbol('id');
3const s3 = Symbol.for('shared');
4const s4 = Symbol.for('shared');
5
6const user = {
7  name: 'Alex',
8  [s1]: 101,
9  [Symbol.toPrimitive](hint) {
10    if (hint === 'number') return 42;
11    if (hint === 'string') return 'User:Alex';
12    return 'Alex-default';
13  }
14};
15
16const keysCount = Object.keys(user).length;
17const ownKeysCount = Reflect.ownKeys(user).length;
18const isSameGlobal = s3 === s4;
19const isSameLocal = s1 === s2;
20const numCoercion = +user;
21const strCoercion = `${user}`;
22
23console.log(
24  keysCount,
25  ownKeysCount,
26  isSameGlobal,
27  isSameLocal,
28  numCoercion,
29  strCoercion
30);

Predict Console Output

Interactive Challenge

Select the option that matches what standard ECMAScript prints to the console:

1 3 true false 42 User:Alex

3 3 true true 42 User:Alex

1 3 false false 42 [object Object]

1 1 true false NaN [object Object]

V8 Engine Execution Trace

Step 1 of 6 (Line 1)

Allocates two distinct, unique local Symbol primitives with description 'id'.

Call Stack (Top = Active)

Global Execution Context

Lexical Scope / Bindings

s1:Symbol(id)

s2:Symbol(id)

Console Stream

> [empty]

Deep Technical Breakdown

Deep Dive into JavaScript Symbols & Metaprogramming

Introduced in ES6, Symbol is a primitive type designed to serve as collision-proof property keys for objects:

1. Creation and Guaranteed Uniqueness

Always create symbols via the factory function Symbol('optional description'). Calling new Symbol() throws a TypeError because Symbol is a primitive, not an object constructor.
Every invocation of Symbol() generates a completely distinct value in memory: Symbol('key') !== Symbol('key').

2. The Global Symbol Registry (`Symbol.for` & `Symbol.keyFor`)

If you need a symbol shared across different files, packages, or iframes in the same execution environment, use Symbol.for(key).
Symbol.for(key) searches the global runtime registry: if the symbol exists, it returns it; otherwise, it registers and returns a new one.
Symbol.keyFor(sym) retrieves the string key associated with a globally registered symbol (returns undefined for local symbols).

3. Object Reflection and Introspection Rules

Symbols are intentionally semi-private:

Excluded from: Object.keys(obj), Object.values(obj), Object.entries(obj), for...in loops, and JSON.stringify(obj).
Included in: Object.getOwnPropertySymbols(obj) and Reflect.ownKeys(obj) (which returns both strings and symbols).

4. Well-Known Symbols (Language Metaprogramming Hooks)

ECMAScript exposes internal language behaviors through predefined well-known symbols:

Symbol.toPrimitive: Overrides standard conversion protocols. Receives a hint ('number', 'string', or 'default') and takes precedence over both valueOf and toString.
Symbol.iterator: Specifies the default iterator for an object, enabling for...of loops, spread syntax [...obj], and Array.from().
Symbol.hasInstance: Customizes how instanceof evaluates against a constructor: obj instanceof MyClass delegates to MyClass[Symbol.hasInstance](obj).
Symbol.species: Allows subclasses to customize which constructor is used when built-in methods (like map or slice) derive new instances.

Common Traps & Mistakes

Calling `new Symbol('id')`, which throws `TypeError: Symbol is not a constructor`.

Assuming `JSON.stringify()` serializes symbol-keyed properties. Symbols are completely omitted from JSON outputs.

Expecting `Object.keys()` or `for...in` to enumerate symbol keys. Only `Reflect.ownKeys()` or `Object.getOwnPropertySymbols()` retrieve them.

Confusing `Symbol('shared')` (unique local symbol) with `Symbol.for('shared')` (reused global symbol registry instance).

FAANG Follow-Up Probes

Probe #1

How does Symbol.iterator differ from Symbol.asyncIterator when streaming chunks in Node.js or browser streams?

Probe #2

Why are Symbol keys useful in library development for adding private metadata or branding without colliding with user properties?

Probe #3

How does Object.assign() handle Symbol-keyed properties compared to spread syntax?

Prev: Iterators & Generators Next: Maps, Sets, WeakMap & WeakSet