JavaScript Different ways to use Symbol as property of an object

In JavaScript, Symbol values are often used as unique property keys in objects. Here are different ways you can use Symbol as a property of an object:

1. Using Symbols Directly as Property Keys

You can create a unique Symbol and use it as a key for an object property directly:

const mySymbol = Symbol('mySymbol');
const obj = {
  [mySymbol]: 'value'
};
console.log(obj[mySymbol]); // Output: 'value'

2. Using Object.defineProperty with Symbol

You can use Object.defineProperty to define a Symbol property with specific descriptors (like writable, enumerable, configurable):

const mySymbol = Symbol('mySymbol');
const obj = {};
Object.defineProperty(obj, mySymbol, {
  value: 'value',
  writable: true,
  enumerable: false,
  configurable: true
});
console.log(obj[mySymbol]); // Output: 'value'

3. Using Object.defineProperties with Multiple Symbols

You can define multiple Symbol properties at once with Object.defineProperties:

const symbol1 = Symbol('symbol1');
const symbol2 = Symbol('symbol2');
const obj = {};

Object.defineProperties(obj, {
  [symbol1]: { value: 'value1', enumerable: true },
  [symbol2]: { value: 'value2', enumerable: false }
});

console.log(obj[symbol1]); // Output: 'value1'
console.log(obj[symbol2]); // Output: 'value2'

4. Adding Symbol Properties with Bracket Notation

Another way to add Symbol properties is by using bracket notation after the object is created:

const mySymbol = Symbol('mySymbol');
const obj = {};
obj[mySymbol] = 'value';
console.log(obj[mySymbol]); // Output: 'value'

5. Using Symbol Properties in Classes

Symbols can also be used as private or unique keys within class instances.

const mySymbol = Symbol('mySymbol');

class MyClass {
  constructor() {
    this[mySymbol] = 'value';
  }

  getSymbolValue() {
    return this[mySymbol];
  }
}
const instance = new MyClass();
console.log(instance.getSymbolValue()); // Output: 'value'

6. Using Well-Known Symbols

JavaScript has built-in, well-known Symbol properties (e.g., Symbol.iterator, Symbol.toStringTag). You can use these to define specific behavior for objects:

const obj = {
  [Symbol.toStringTag]: 'CustomObject'
};

console.log(obj.toString()); // Output: '[object CustomObject]'

7. Using Symbols to Create Private-Like Properties

Symbols can act as "private" properties since they aren't accessible by normal enumeration. They're accessible only if you have a reference to the Symbol:

const _private = Symbol('private');
const obj = {
  [_private]: 'secret value'
};

console.log(obj[_private]); // Output: 'secret value'
console.log(Object.keys(obj)); // Output: [] (Symbol key is not listed)

8. Using Object.getOwnPropertySymbols to Access Symbol Properties

While Symbols are not listed with Object.keys or for...in, you can retrieve them with Object.getOwnPropertySymbols:

const symbol1 = Symbol('symbol1');
const symbol2 = Symbol('symbol2');
const obj = {
  [symbol1]: 'value1',
  [symbol2]: 'value2'
};

const symbols = Object.getOwnPropertySymbols(obj);
console.log(symbols); // Output: [Symbol(symbol1), Symbol(symbol2)]
console.log(obj[symbols[0]]); // Output: 'value1'

9. Using Symbol Properties with Reflect.ownKeys

The Reflect.ownKeys method can retrieve both string and symbol keys of an object:

const symbol1 = Symbol('symbol1');
const obj = {
  [symbol1]: 'value'
};
const keys = Reflect.ownKeys(obj);
console.log(keys); // Output: [Symbol(symbol1)]

These are various ways to use Symbol as properties in JavaScript, providing flexibility and unique property keys in your objects.