Academy — Sanjib Sikder

The Problem With String Keys

Every property key on an object is either a string or a Symbol. You have only used strings so far. The problem with strings: they collide.

If two independent pieces of code both add a property called "id" to the same object, one silently overwrites the other. In small programs this is manageable. In libraries that touch objects they don't own, it is a serious bug waiting to happen.

JavaScript

Ctrl+Enter to run

const user = { name: "Rahul", id: 1 };

// Library A adds metadata
user.id = "lib-a-internal-001";

// Library B also adds metadata — overwrites Library A silently
user.id = "lib-b-session-xyz";

// Original id is gone. No error. No warning.
console.log(user.id); // "lib-b-session-xyz"
console.log(user);

String keys are a shared namespace. Anyone who knows the name can read or overwrite your property. Symbols solve this entirely.

Symbols — Guaranteed Unique Keys

Symbol() creates a value that is always unique — no two Symbols are ever equal, even if they have the same description:

JavaScript

Ctrl+Enter to run

const a = Symbol("id");
const b = Symbol("id");

console.log(a === b); // false — always, guaranteed
console.log(typeof a); // "symbol"
console.log(a.toString()); // "Symbol(id)"
console.log(a.description); // "id" — the label, for debugging only

// As object keys — guaranteed not to collide with any string key
const ID = Symbol("id");
const user = {
name: "Rahul",
[ID]: "internal-001", // Symbol key, not a string
};

console.log(user.name); // "Rahul" — string key
console.log(user[ID]); // "internal-001" — Symbol key
console.log(user["id"]); // undefined — the Symbol is not the string "id"

The Symbol is the only key that can access that slot. Nobody else can accidentally read or overwrite it — because nobody else has that exact Symbol object.

Symbols Are Invisible to Normal Enumeration

Symbol keys are skipped by for...in, Object.keys(), and JSON.stringify() — they are genuinely hidden from casual inspection:

JavaScript

Ctrl+Enter to run

const INTERNAL = Symbol("internal");
const VERSION  = Symbol("version");

const config = {
host: "localhost",
port: 3000,
[INTERNAL]: "secret-token-xyz",
[VERSION]: 42,
};

console.log("Object.keys:", Object.keys(config)); // only strings
console.log("for...in:");
for (const k in config) console.log(" ", k); // only strings

console.log("JSON:", JSON.stringify(config)); // Symbols excluded

// To see Symbols you must explicitly ask
console.log("Symbols:", Object.getOwnPropertySymbols(config));

// Or get everything
console.log("All keys:", Reflect.ownKeys(config));

This invisibility is intentional. Symbol-keyed properties are metadata — they do not appear in logs, serialisation, or normal iteration unless you go looking for them specifically.

Well-Known Symbols — Hooking Into Language Behaviour

You already met Symbol.iterator in the previous lesson. JavaScript has a set of well-known Symbols that let you customise how built-in operations treat your objects:

JavaScript

Ctrl+Enter to run

class Temperature {
  constructor(celsius) {
    this.celsius = celsius;
  }

get fahrenheit() { return this.celsius * 9/5 + 32; }

// Symbol.toPrimitive — controls how the object converts to a primitive
[Symbol.toPrimitive](hint) {
if (hint === "number") return this.celsius;
if (hint === "string") return `${this.celsius}°C (${this.fahrenheit.toFixed(1)}°F)`;
return this.celsius; // "default"
}

// Symbol.toStringTag — controls what [object X] says
get [Symbol.toStringTag]() { return "Temperature"; }
}

const t = new Temperature(37);

console.log(`Temp: ${t}`); // string hint → "37°C (98.6°F)"
console.log(t + 0); // number hint → 37
console.log(t > 36); // true — compares as number
console.log(Object.prototype.toString.call(t)); // [object Temperature]

Well-known Symbols are how you make custom classes behave naturally with operators, console.log, template literals, and the rest of the language — without monkey-patching anything.

Symbol.for — Shared Global Symbols

Symbol() always creates a new unique Symbol. Symbol.for(key) looks up a global registry — the same key always returns the same Symbol, even across different files:

JavaScript

Ctrl+Enter to run

// Symbol() — always unique, private
const s1 = Symbol("app.id");
const s2 = Symbol("app.id");
console.log(s1 === s2); // false

// Symbol.for() — shared global registry
const g1 = Symbol.for("app.id");
const g2 = Symbol.for("app.id");
console.log(g1 === g2); // true — same symbol

// Retrieve the key from the registry
console.log(Symbol.keyFor(g1)); // "app.id"
console.log(Symbol.keyFor(s1)); // undefined — not in registry

// Use case: a shared constant that multiple modules can reference
// without importing the same Symbol object
const ROLE = Symbol.for("user.role");

const admin = { name: "Admin", [ROLE]: "admin" };
const viewer = { name: "Viewer", [ROLE]: "viewer" };

function canEdit(user) { return user[ROLE] === "admin"; }

console.log(canEdit(admin)); // true
console.log(canEdit(viewer)); // false

WeakMap — Private Data Without Memory Leaks

A regular Map holds strong references to its keys — if you store an object as a key, the Map prevents that object from being garbage collected even if nothing else references it. WeakMap holds weak references: if the key object is no longer referenced anywhere else, it can be garbage collected and the WeakMap entry disappears automatically.

JavaScript

Ctrl+Enter to run

// Regular Map — strong reference, potential memory leak
const cache = new Map();

function processRegular(obj) {
if (!cache.has(obj)) {
cache.set(obj, { processed: true, timestamp: Date.now() });
}
return cache.get(obj);
}

// WeakMap — weak reference, no memory leak
const privateData = new WeakMap();

class Student {
constructor(name, marks) {
// Store sensitive data privately — completely inaccessible from outside
privateData.set(this, {
marks,
history: [],
});
this.name = name;
}

addAttempt(newMarks) {
const data = privateData.get(this);
data.history.push(data.marks);
data.marks = newMarks;
}

get marks() { return privateData.get(this).marks; }
get history() { return [...privateData.get(this).history]; }
}

const s = new Student("Rahul", 70);
s.addAttempt(78);
s.addAttempt(85);

console.log(s.name); // "Rahul" — public
console.log(s.marks); // 85 — via getter
console.log(s.history); // [70, 78] — via getter

// Cannot access the raw data
console.log(privateData.get(s).marks); // 85 — only works if you have privateData reference
// From outside the module, privateData is not accessible at all

// Regular Map — strong reference, potential memory leak
const cache = new Map();

function processRegular(obj) {
if (!cache.has(obj)) {
cache.set(obj, { processed: true, timestamp: Date.now() });
}
return cache.get(obj);
}

// WeakMap — weak reference, no memory leak
const privateData = new WeakMap();

class Student {
constructor(name, marks) {
// Store sensitive data privately — completely inaccessible from outside
privateData.set(this, {
marks,
history: [],
});
this.name = name;
}

addAttempt(newMarks) {
const data = privateData.get(this);
data.history.push(data.marks);
data.marks = newMarks;
}

get marks() { return privateData.get(this).marks; }
get history() { return [...privateData.get(this).history]; }
}

const s = new Student("Rahul", 70);
s.addAttempt(78);
s.addAttempt(85);

console.log(s.name); // "Rahul" — public
console.log(s.marks); // 85 — via getter
console.log(s.history); // [70, 78] — via getter

// Cannot access the raw data
console.log(privateData.get(s).marks); // 85 — only works if you have privateData reference
// From outside the module, privateData is not accessible at all

WeakMap keys must be objects (not primitives). You cannot iterate a WeakMap, get its size, or list its keys — by design. These restrictions are what allow the garbage collector to do its job.

WeakSet — Tracking Objects Without Owning Them

WeakSet is like Set but holds weak references. Useful for tracking which objects have been "seen" or "processed" without preventing their cleanup:

JavaScript

Ctrl+Enter to run

const processed = new WeakSet();

function process(obj) {
if (processed.has(obj)) {
console.log(`${obj.name}: already processed — skipping`);
return;
}
// Do the work
console.log(`${obj.name}: processing…`);
processed.add(obj);
}

const s1 = { name: "Rahul" };
const s2 = { name: "Priya" };

process(s1); // processes
process(s2); // processes
process(s1); // skips — already in WeakSet
process(s2); // skips
process(s1); // skips

// When s1 goes out of scope elsewhere, WeakSet entry disappears automatically
// No manual cleanup needed

WeakRef — Holding Without Owning

WeakRef wraps an object in a weak reference — you can hold onto it without preventing garbage collection. Call .deref() to get the object back; if it has been collected, you get undefined:

JavaScript

Ctrl+Enter to run

// WeakRef: hold a reference that doesn't prevent garbage collection
let target = { name: "Expensive Object", data: new Array(1000).fill(0) };

const ref = new WeakRef(target);

// While target is still alive
console.log(ref.deref()?.name); // "Expensive Object"
console.log(ref.deref() === target); // true — same object

// Simulate the object being collected
// (In real JS, GC timing is non-deterministic — we can only demonstrate the API)
target = null; // remove the strong reference

// Now ref.deref() MAY return undefined — GC decides when
// In practice you always guard with ?. or a null check
const value = ref.deref();
console.log(value ? value.name : "Object was collected");

// Pattern: cache that doesn't prevent cleanup
class Cache {
#store = new Map();

set(key, value) {
this.#store.set(key, new WeakRef(value));
}

get(key) {
return this.#store.get(key)?.deref(); // undefined if collected
}
}

const cache = new Cache();
const obj = { result: 42 };
cache.set("answer", obj);
console.log(cache.get("answer")?.result); // 42

// WeakRef: hold a reference that doesn't prevent garbage collection
let target = { name: "Expensive Object", data: new Array(1000).fill(0) };

const ref = new WeakRef(target);

// While target is still alive
console.log(ref.deref()?.name); // "Expensive Object"
console.log(ref.deref() === target); // true — same object

// Simulate the object being collected
// (In real JS, GC timing is non-deterministic — we can only demonstrate the API)
target = null; // remove the strong reference

// Now ref.deref() MAY return undefined — GC decides when
// In practice you always guard with ?. or a null check
const value = ref.deref();
console.log(value ? value.name : "Object was collected");

// Pattern: cache that doesn't prevent cleanup
class Cache {
#store = new Map();

set(key, value) {
this.#store.set(key, new WeakRef(value));
}

get(key) {
return this.#store.get(key)?.deref(); // undefined if collected
}
}

const cache = new Cache();
const obj = { result: 42 };
cache.set("answer", obj);
console.log(cache.get("answer")?.result); // 42

Putting It Together — A Private Event System

Here is a realistic pattern that combines Symbols and WeakMap: a private event emitter where the internal state is completely hidden from outside code:

JavaScript

Ctrl+Enter to run

const _listeners = new WeakMap();

class EventEmitter {
constructor() {
_listeners.set(this, new Map());
}

on(event, fn) {
const map = _listeners.get(this);
if (!map.has(event)) map.set(event, []);
map.get(event).push(fn);
return this;
}

emit(event, ...args) {
const fns = _listeners.get(this)?.get(event) ?? [];
fns.forEach(fn => fn(...args));
return this;
}

off(event, fn) {
const map = _listeners.get(this);
if (map.has(event)) {
map.set(event, map.get(event).filter(f => f !== fn));
}
return this;
}
}

const emitter = new EventEmitter();

const onScore = (name, score) => console.log(`Score recorded: ${name} → ${score}`);
const onPass = (name) => console.log(`🎉 ${name} passed!`);

emitter.on("score", onScore);
emitter.on("score", onPass);

emitter.emit("score", "Rahul", 82);
emitter.emit("score", "Priya", 91);

emitter.off("score", onPass);

emitter.emit("score", "Arjun", 54); // onPass no longer fires

// Internal state completely hidden — no way to access _listeners from outside this scope
console.log("listeners" in emitter); // false
console.log(Object.keys(emitter)); // []

const _listeners = new WeakMap();

class EventEmitter {
constructor() {
_listeners.set(this, new Map());
}

on(event, fn) {
const map = _listeners.get(this);
if (!map.has(event)) map.set(event, []);
map.get(event).push(fn);
return this;
}

emit(event, ...args) {
const fns = _listeners.get(this)?.get(event) ?? [];
fns.forEach(fn => fn(...args));
return this;
}

off(event, fn) {
const map = _listeners.get(this);
if (map.has(event)) {
map.set(event, map.get(event).filter(f => f !== fn));
}
return this;
}
}

const emitter = new EventEmitter();

const onScore = (name, score) => console.log(`Score recorded: ${name} → ${score}`);
const onPass = (name) => console.log(`🎉 ${name} passed!`);

emitter.on("score", onScore);
emitter.on("score", onPass);

emitter.emit("score", "Rahul", 82);
emitter.emit("score", "Priya", 91);

emitter.off("score", onPass);

emitter.emit("score", "Arjun", 54); // onPass no longer fires

// Internal state completely hidden — no way to access _listeners from outside this scope
console.log("listeners" in emitter); // false
console.log(Object.keys(emitter)); // []

What You Have Learned

Symbols, WeakMap, WeakSet, and WeakRef are precision tools — you will not reach for them daily, but when you need them there is no substitute.

The key ideas:

Symbol() creates a guaranteed-unique key — two Symbols with the same description are never equal
Symbol keys are invisible to for...in, Object.keys, and JSON.stringify — genuine metadata
Well-known Symbols (Symbol.iterator, Symbol.toPrimitive, Symbol.toStringTag) let you hook into built-in language behaviour
Symbol.for(key) uses a global registry — same key, same Symbol, across files
WeakMap stores private data keyed by object — entries disappear automatically when the key object is garbage collected
WeakSet tracks objects without owning them — no iteration, no size, no leaks
WeakRef holds an object without preventing collection — always guard .deref() against undefined

In the next lesson: Proxies & Reflect — intercept and redefine fundamental operations on any object. Property access, assignment, function calls, instanceof — every operation JavaScript performs on an object can be trapped and customised. The foundation of validation libraries, reactive frameworks, and ORMs.

Symbols, WeakMap & WeakRef

The Problem With String Keys

Symbols — Guaranteed Unique Keys

Symbols Are Invisible to Normal Enumeration

Well-Known Symbols — Hooking Into Language Behaviour

Symbol.for — Shared Global Symbols

WeakMap — Private Data Without Memory Leaks

WeakSet — Tracking Objects Without Owning Them

WeakRef — Holding Without Owning

Putting It Together — A Private Event System

What You Have Learned