JavaScript ES6+

Symbols

Unique identifiers for object properties

Find videos you like?

Save to resource drawer for future reference!

Symbols: Guaranteed Unique

Symbols are primitive unique values. Every Symbol() creates a completely unique identifier, even with the same description. Perfect for private properties!

Why Use Symbols?

✓ Unique - No collisions, even with same name
✓ Hidden - Don't show in for...in or Object.keys()
✓ Safe - Won't override existing properties

Creating Symbols

Every Symbol() is unique

✨ Always Unique

// Each Symbol() is unique
const sym1 = Symbol();
const sym2 = Symbol();

console.log(sym1 === sym2);  // false

// Even with same description
const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2);    // false

// Description is just for debugging
console.log(id1.description); // 'id'

🔑 As Property Keys

// Use as object property
const id = Symbol('id');

const user = {
  name: 'Alice',
  [id]: 123  // Symbol as key
};

console.log(user[id]);     // 123
console.log(user.name);    // Alice

// Won't clash with other properties
const otherId = Symbol('id');
user[otherId] = 456;       // Different property!

Symbol Basics

Creating and using symbols

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Hidden from Enumeration

Symbols don't appear in normal loops

Private-like Properties

const password = Symbol('password');
const email = Symbol('email');

const user = {
  name: 'Alice',
  [password]: 'secret123',
  [email]: 'alice@example.com'
};

// Hidden from normal methods
console.log(Object.keys(user));
// ['name'] - Symbols not included!

console.log(JSON.stringify(user));
// {"name":"Alice"} - Symbols excluded!

for (const key in user) {
  console.log(key);  // Only 'name'
}

// But still accessible if you have the symbol
console.log(user[password]);  // 'secret123'
console.log(user[email]);     // 'alice@example.com'

Symbol as Private Properties

Simulating private object properties

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Global Symbol Registry

Share symbols across modules

Symbol.for() & Symbol.keyFor()

// Symbol.for() creates/retrieves from global registry
const globalId = Symbol.for('app.id');
const sameId = Symbol.for('app.id');

console.log(globalId === sameId);  // true!

// Symbol.keyFor() gets the key
console.log(Symbol.keyFor(globalId));  // 'app.id'

// Regular symbols don't have keys
const localId = Symbol('id');
console.log(Symbol.keyFor(localId));   // undefined

// Useful across modules
// module1.js
export const APP_ID = Symbol.for('app.id');

// module2.js
const APP_ID = Symbol.for('app.id');
// Same symbol!

Well-Known Symbols

Built-in symbols for special behaviors

javascript

code

DarkEditable

// Symbol.iterator - Make object iterable
const range = {
  from: 1,
  to: 5,
  
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    
    return {
      next() {
        if (current <= last) {
          return { done: false, value: current++ };
        }
        return { done: true };
      }
    };
  }
};

for (const num of range) {
  console.log(num);  // 1 2 3 4 5
}

// Symbol.toStringTag - Customize toString
class CustomArray {
  get [Symbol.toStringTag]() {
    return 'MyCustomArray';
  }
}

const arr = new CustomArray();
console.log(arr.toString());  // [object MyCustomArray]

// Symbol.hasInstance - Customize instanceof
class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyArray);  // true
console.log({} instanceof MyArray);  // false

// Symbol.toPrimitive - Custom type conversion
const obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') return 42;
    if (hint === 'string') return 'hello';
    return true;
  }
};

console.log(+obj);      // 42 (number)
console.log(`${obj}`); // 'hello' (string)
console.log(obj + '');  // 'true' (default)

Console Output

Click "Run Code" to see output here...

Real-World Example: Object Metadata

Using symbols for metadata that won't interfere

javascript

code

DarkEditable

// Library that adds metadata to objects
const META = {
  created: Symbol('created'),
  modified: Symbol('modified'),
  version: Symbol('version')
};

const user = trackMetadata({
  name: 'Alice',
  age: 25
});

console.log(user.name);  // Alice

user.age = 26;

console.log(Object.keys(user));
// ['name', 'age'] - metadata hidden

console.log(user[META.version]);   // 2
console.log(user[META.modified]);  // Recent date

// Event system with symbol keys
const LISTENERS = Symbol('listeners');

class EventEmitter {
  constructor() {
    this[LISTENERS] = {};
  }
  
  on(event, handler) {
    if (!this[LISTENERS][event]) {
      this[LISTENERS][event] = [];
    }
    this[LISTENERS][event].push(handler);
  }
  
  emit(event, data) {
    const handlers = this[LISTENERS][event] || [];
    handlers.forEach(handler => handler(data));
  }
}

const emitter = new EventEmitter();
emitter.on('data', data => console.log('Received:', data));
emitter.emit('data', { value: 42 });

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔑

Always Unique

Every Symbol() creates a unique value
Even Symbol('id') !== Symbol('id')

🔒

Hidden Properties

Don't show in Object.keys(), for...in
Use Object.getOwnPropertySymbols()

🌍

Global Registry

Symbol.for(key) - Share across modules
Symbol.keyFor(sym) - Get key

⚙️

Well-Known Symbols

Symbol.iterator, Symbol.toStringTag
Symbol.hasInstance, Symbol.toPrimitive

Pro Tip

Use symbols for metadata, internal properties, or when you need guaranteed unique keys that won't clash with existing properties!

Previous Topic

Modules

ES6 import/export for modular code organization.

Next Topic

Iterators

Creating custom iterators for object iteration.

Ask a Question

Have a question about Symbols? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript ES6+

Symbols

Unique identifiers for object properties

Find videos you like?

Save to resource drawer for future reference!

Symbols: Guaranteed Unique

Symbols are primitive unique values. Every Symbol() creates a completely unique identifier, even with the same description. Perfect for private properties!

Why Use Symbols?

✓ Unique - No collisions, even with same name
✓ Hidden - Don't show in for...in or Object.keys()
✓ Safe - Won't override existing properties

Creating Symbols

Every Symbol() is unique

✨ Always Unique

// Each Symbol() is unique
const sym1 = Symbol();
const sym2 = Symbol();

console.log(sym1 === sym2);  // false

// Even with same description
const id1 = Symbol('id');
const id2 = Symbol('id');

console.log(id1 === id2);    // false

// Description is just for debugging
console.log(id1.description); // 'id'

🔑 As Property Keys

// Use as object property
const id = Symbol('id');

const user = {
  name: 'Alice',
  [id]: 123  // Symbol as key
};

console.log(user[id]);     // 123
console.log(user.name);    // Alice

// Won't clash with other properties
const otherId = Symbol('id');
user[otherId] = 456;       // Different property!

Symbol Basics

Creating and using symbols

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Hidden from Enumeration

Symbols don't appear in normal loops

Private-like Properties

const password = Symbol('password');
const email = Symbol('email');

const user = {
  name: 'Alice',
  [password]: 'secret123',
  [email]: 'alice@example.com'
};

// Hidden from normal methods
console.log(Object.keys(user));
// ['name'] - Symbols not included!

console.log(JSON.stringify(user));
// {"name":"Alice"} - Symbols excluded!

for (const key in user) {
  console.log(key);  // Only 'name'
}

// But still accessible if you have the symbol
console.log(user[password]);  // 'secret123'
console.log(user[email]);     // 'alice@example.com'

Symbol as Private Properties

Simulating private object properties

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Global Symbol Registry

Share symbols across modules

Symbol.for() & Symbol.keyFor()

// Symbol.for() creates/retrieves from global registry
const globalId = Symbol.for('app.id');
const sameId = Symbol.for('app.id');

console.log(globalId === sameId);  // true!

// Symbol.keyFor() gets the key
console.log(Symbol.keyFor(globalId));  // 'app.id'

// Regular symbols don't have keys
const localId = Symbol('id');
console.log(Symbol.keyFor(localId));   // undefined

// Useful across modules
// module1.js
export const APP_ID = Symbol.for('app.id');

// module2.js
const APP_ID = Symbol.for('app.id');
// Same symbol!

Well-Known Symbols

Built-in symbols for special behaviors

javascript

code

DarkEditable

for (const num of range) {
  console.log(num);  // 1 2 3 4 5
}

// Symbol.toStringTag - Customize toString
class CustomArray {
  get [Symbol.toStringTag]() {
    return 'MyCustomArray';
  }
}

const arr = new CustomArray();
console.log(arr.toString());  // [object MyCustomArray]

// Symbol.hasInstance - Customize instanceof
class MyArray {
  static [Symbol.hasInstance](instance) {
    return Array.isArray(instance);
  }
}

console.log([] instanceof MyArray);  // true
console.log({} instanceof MyArray);  // false

// Symbol.toPrimitive - Custom type conversion
const obj = {
  [Symbol.toPrimitive](hint) {
    if (hint === 'number') return 42;
    if (hint === 'string') return 'hello';
    return true;
  }
};

console.log(+obj);      // 42 (number)
console.log(`${obj}`); // 'hello' (string)
console.log(obj + '');  // 'true' (default)

Console Output

Click "Run Code" to see output here...

Real-World Example: Object Metadata

Using symbols for metadata that won't interfere

javascript

code

DarkEditable

// Library that adds metadata to objects
const META = {
  created: Symbol('created'),
  modified: Symbol('modified'),
  version: Symbol('version')
};

const user = trackMetadata({
  name: 'Alice',
  age: 25
});

console.log(user.name);  // Alice

user.age = 26;

console.log(Object.keys(user));
// ['name', 'age'] - metadata hidden

console.log(user[META.version]);   // 2
console.log(user[META.modified]);  // Recent date

// Event system with symbol keys
const LISTENERS = Symbol('listeners');

const emitter = new EventEmitter();
emitter.on('data', data => console.log('Received:', data));
emitter.emit('data', { value: 42 });

Console Output

Click "Run Code" to see output here...

Key Takeaways

🔑

Always Unique

Every Symbol() creates a unique value
Even Symbol('id') !== Symbol('id')

🔒

Hidden Properties

Don't show in Object.keys(), for...in
Use Object.getOwnPropertySymbols()

🌍

Global Registry

Symbol.for(key) - Share across modules
Symbol.keyFor(sym) - Get key

⚙️

Well-Known Symbols

Symbol.iterator, Symbol.toStringTag
Symbol.hasInstance, Symbol.toPrimitive

Pro Tip

Use symbols for metadata, internal properties, or when you need guaranteed unique keys that won't clash with existing properties!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Modules

Iterators

JavaScript Code Editor

Building Your Learning Module...

Symbols

Symbols: Guaranteed Unique

Why Use Symbols?

✨ Always Unique

🔑 As Property Keys

Symbol Basics

Private-like Properties

Symbol as Private Properties

Symbol.for() & Symbol.keyFor()

Well-Known Symbols

Real-World Example: Object Metadata

Key Takeaways

Always Unique

Hidden Properties

Global Registry

Well-Known Symbols

Pro Tip

Modules

Iterators

JavaScript Code Editor

Symbols

Symbols: Guaranteed Unique

Why Use Symbols?

✨ Always Unique

🔑 As Property Keys

Symbol Basics

Private-like Properties

Symbol as Private Properties

Symbol.for() & Symbol.keyFor()

Well-Known Symbols

Real-World Example: Object Metadata

Key Takeaways

Always Unique

Hidden Properties

Global Registry

Well-Known Symbols

Pro Tip