Symbol & WeakMap Usage

You are reading Part 36 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]

Introduction

JavaScript provides advanced data structures such as Symbols and WeakMaps to manage object properties efficiently. Symbols offer unique, non-enumerable property keys, while WeakMaps allow weakly referenced key-value storage, preventing memory leaks. This article explores their practical usage and benefits.

1. Understanding JavaScript Symbols

A Symbol is a unique and immutable data type that can be used as an object property key.

Creating a Symbol:

const sym1 = Symbol("identifier");
const sym2 = Symbol("identifier");
console.log(sym1 === sym2); // Output: false (each Symbol is unique)

Using Symbols as Object Properties:

let user = {
    name: "Alice",
    [Symbol("id")]: 1234 // Symbol as a unique key
};
console.log(Object.keys(user)); // Output: [ 'name' ] (Symbol is not enumerable)

Benefits of Symbols:

• Prevents property name collisions.

• Ensures private-like object properties.

• Hidden from Object.keys() and JSON.stringify().

2. Global Symbols Registry

The Symbol.for() method checks for an existing symbol in the global registry and creates a new one if none exist.

Example:

let globalSym1 = Symbol.for("shared");
let globalSym2 = Symbol.for("shared");
console.log(globalSym1 === globalSym2); // Output: true (same symbol retrieved)

Retrieving a Symbol’s Key:

console.log(Symbol.keyFor(globalSym1)); // Output: "shared"

3. Understanding WeakMaps

A WeakMap is a collection of key-value pairs where keys must be objects, and values are garbage-collectable.

Creating a WeakMap:

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "Secret Data");
console.log(weakMap.get(obj)); // Output: "Secret Data"

WeakMap Characteristics:

• Keys must be objects, not primitives.

• Prevents memory leaks by allowing automatic garbage collection.

• Cannot be iterated (forEach() or keys() does not work).

4. Practical Use Cases of Symbols & WeakMaps

1. Using Symbols for Private Object Properties

const privateId = Symbol("id");
let employee = {
    name: "John",
    [privateId]: 5678
};
console.log(employee[privateId]); // Accesses hidden property
console.log(Object.keys(employee)); // Output: [ 'name' ] (Symbol is hidden)

2. Using WeakMaps for Private Data Storage

const privateData = new WeakMap();

class User {
    constructor(name) {
        privateData.set(this, { secret: "Hidden Info" });
        this.name = name;
    }
    getSecret() {
        return privateData.get(this).secret;
    }
}

const user1 = new User("Alice");
console.log(user1.getSecret()); // Output: "Hidden Info"

• The secret property is not exposed publicly.

• Only accessible through getSecret() method.

3. WeakMap for Efficient DOM Node Caching

let cache = new WeakMap();
function processElement(element) {
    if (!cache.has(element)) {
        cache.set(element, { data: "Processed Data" });
    }
    return cache.get(element);
}

let div = document.createElement("div");
console.log(processElement(div)); // Stores data

• The DOM node reference will be garbage-collected when removed from the page.

5. When to Use Symbols & WeakMaps

You are reading Part 36 of the 39-part series: JavaScript Skill Progression: The Path from Beginner to Extreme. [Level 6]