How to Use Symbol as Property Key in JavaScript

In JavaScript, you can use Symbol to create unique property keys by defining a symbol and using it inside square brackets as the object key, like obj[symbolKey] = value. This ensures the property key is unique and not accessible by normal string keys.

Syntax

To use a Symbol as a property key, first create a symbol using Symbol(). Then use the symbol inside square brackets [] when defining or accessing the property on an object.

• const sym = Symbol('description'); creates a unique symbol.
• obj[sym] = value; sets a property with the symbol as key.
• obj[sym] accesses the property value.

javascript

const sym = Symbol('id');
const obj = {};
obj[sym] = 123;
console.log(obj[sym]);

Output

123

Example

This example shows how to create a symbol, use it as a property key in an object, and access the value. The symbol key is unique and does not conflict with string keys.

javascript

const uniqueKey = Symbol('uniqueKey');

const user = {
  name: 'Alice',
  [uniqueKey]: 'secretValue'
};

console.log(user.name);          // Outputs: Alice
console.log(user[uniqueKey]);   // Outputs: secretValue

// Symbol keys do not appear in normal loops
for (const key in user) {
  console.log(key); // Only 'name' is logged
}

// To get symbol keys explicitly
const symbols = Object.getOwnPropertySymbols(user);
console.log(symbols);            // Outputs: [ Symbol(uniqueKey) ]
console.log(user[symbols[0]]);   // Outputs: secretValue

Output

Alice
secretValue
name
[ Symbol(uniqueKey) ]
secretValue

Common Pitfalls

Common mistakes include trying to use a symbol as a property key without brackets, which treats it as a string key, or expecting symbol keys to show up in normal for...in loops or Object.keys().

Symbols are unique, so two symbols with the same description are different keys.

javascript

const sym1 = Symbol('key');
const sym2 = Symbol('key');

const obj = {};

// Wrong: symbol used without brackets becomes string key
obj.sym1 = 'value1';
console.log(obj.sym1); // Outputs: value1
console.log(obj[sym1]); // Outputs: undefined

// Right: use brackets to use symbol as key
obj[sym1] = 'value2';
console.log(obj[sym1]); // Outputs: value2

// sym1 and sym2 are different keys
obj[sym2] = 'value3';
console.log(obj[sym1]); // Outputs: value2
console.log(obj[sym2]); // Outputs: value3

Output

value1
undefined
value2
value2
value3

Quick Reference

Summary tips for using symbols as property keys:

• Always use square brackets [] when using a symbol as a key.
• Symbols create unique keys that avoid name collisions.
• Symbol-keyed properties are not enumerable in for...in or Object.keys().
• Use Object.getOwnPropertySymbols() to list symbol keys.

Key Takeaways

Use Symbol() to create unique property keys in JavaScript objects.

Always use square brackets [] to set or get symbol-keyed properties.

Symbol keys do not appear in normal property enumerations like for...in or Object.keys().

Retrieve symbol keys with Object.getOwnPropertySymbols() when needed.

Two symbols with the same description are always different and unique keys.