# Unveiling the Magic: Exploring JavaScript Symbols

> Introduction to JavaScript Symbols JavaScript Symbols are a new primitive data type...

- **Author**: Luca Del Puppo (@puppo92) — AI Native Engineer at Nearform
- **Published**: Sep 20, 2023
- **Canonical URL**: https://delpuppo.net/blog/javascript-you-dont-know/unveiling-the-magic-exploring-javascript-symbols/
- **Series**: The JavaScript You Don't Know (Part 1 of 8) — https://delpuppo.net/blog/series/javascript-you-dont-know/
- **Series LLMs.txt**: https://delpuppo.net/blog/series/javascript-you-dont-know/llms.txt
- **Category**: The JavaScript You Don't Know
- **Tags**: javascript, es6, symbols, js
- **Hashnode Mirror**: https://blog.delpuppo.net/unveiling-the-magic-exploring-javascript-symbols
- **Dev.to Mirror**: https://dev.to/playfulprogramming/unveiling-the-magic-exploring-javascript-symbols-15d9
- **Blog Index LLMs.txt**: https://delpuppo.net/blog/llms.txt

## Series Context: The JavaScript You Don't Know

- Part 1: [Unveiling the Magic: Exploring JavaScript Symbols](https://delpuppo.net/blog/javascript-you-dont-know/unveiling-the-magic-exploring-javascript-symbols/) **(Current Article)**
- Part 2: [Unlocking JavaScript's Secret Weapon: The Power of WeakMaps](https://delpuppo.net/blog/javascript-you-dont-know/unlocking-javascripts-secret-weapon-the-power-of-weakmaps/)
- Part 3: [Unlock the Power of JavaScript WeakSet: Mastering a Hidden Gem!](https://delpuppo.net/blog/javascript-you-dont-know/unlock-the-power-of-javascript-weakset-mastering-a-hidden-gem/)
- Part 4: [JavaScript WeakRef Explained: Harnessing Memory Management Magic](https://delpuppo.net/blog/javascript-you-dont-know/javascript-weakref-explained-harnessing-memory-management-magic/)
- Part 5: [Unlocking the Power of Proxies: JavaScript's Secret Superheroes](https://delpuppo.net/blog/javascript-you-dont-know/unlocking-the-power-of-proxies-javascripts-secret-superheroes/)
- Part 6: [JavaScript FinalizationRegistry Unraveled: Memory Management Magic Explained!](https://delpuppo.net/blog/javascript-you-dont-know/javascript-finalizationregistry-unraveled-memory-management-magic-explained/)
- Part 7: [Cracking the JavaScript Code: Unveil the Magic of Object Property Descriptors](https://delpuppo.net/blog/javascript-you-dont-know/cracking-the-javascript-code-unveil-the-magic-of-object-property-descriptors/)
- Part 8: [The Reflect API: The Swiss Army Knife Every JavaScript Developer Needs](https://delpuppo.net/blog/javascript-you-dont-know/the-reflect-api-the-swiss-army-knife-every-javascript-developer-needs/)

---

## Introduction to JavaScript Symbols

JavaScript Symbols are a new primitive data type introduced in ECMAScript 6 (ES6). They are used as unique, non-string identifiers for object properties, useful in avoiding naming collisions and enabling more advanced programming techniques.


> 🎬 **Watch / View Embedded Resource:** [https://youtu.be/o8YDHAS-fo0](https://youtu.be/o8YDHAS-fo0)


## Creating and Understanding Symbols

Symbols are created using the `Symbol()` function, which can take an optional description as an argument. Each symbol is unique; even if two symbols have the same description, they are considered distinct.

```js
const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

propSymbol === propSymbol2 // false
```

## Unique Identifiers and Property Keys

Symbols are often used as property keys in objects to ensure uniqueness and prevent naming collisions. They can be used alongside string keys without conflict, and their uniqueness makes them ideal for use as metadata or private properties in objects.

```js
const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

const obj = {
  [propSymbol]: "propSymbol",
  [propSymbol2]: "propSymbol2"
}
```

## The Global Symbol Registry

The global Symbol registry allows you to create and share symbols across different scopes and realms. To create a global symbol, use `Symbol.for(key)`, which takes a string as its argument. This method checks if a symbol with the same key exists in the registry; if not, it creates a new one.

```js
// my-module-1.js
export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

// my-module-2.js
export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

// index.js
import { propSymbol as propSymbolM1, propSymbolShare as propSymbolShareM1 } from './my-module.js'
import { propSymbol as propSymbolM2, propSymbolShare as propSymbolShareM2 } from './my-module-2.js'

console.log(propSymbolM1 === propSymbolM2); // false

console.log(propSymbolM1 === propSymbolShareM1); // false
console.log(propSymbolM2 === propSymbolShareM2); // false

console.log(propSymbolShareM1 === propSymbolShareM2); // true
```

It's also possible to retrieve the key of a Symbol using `Symbol.keyFor(key)` but only for shared keys.

```js
export const propSymbol = Symbol("propName");
export const propSymbolShare = Symbol.for("propName");

console.log(Symbol.keyFor(propSymbol)); // undefined
console.log(Symbol.keyFor(propSymbolShare)); // propName
```

## Symbols and Iteration

Symbols are not enumerable, which means they are not included in standard iteration methods like `for...in` loops or `Object.keys()`. To access an object's symbol properties, use `Object.getOwnPropertySymbols()`.

```js
const propSymbol = Symbol("propName");
const propSymbol2 = Symbol("propName");

const obj = {
  [propSymbol]: "propSymbol",
  [propSymbol2]: "propSymbol2"
}
console.log(JSON.stringify(obj)); // {}
console.log(Object.keys(obj)); // []
console.log(Object.getOwnPropertyNames(obj)); // []
for (const key in obj) {
  console.log(key); // nothing
}

console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(propName), Symbol(propName)]
```

## Well-Known Symbols in JavaScript

Well-known symbols are predefined global symbols that represent common behaviours in JavaScript, such as `Symbol.iterator`, `Symbol.asyncIterator`, `Symbol.toStringTag`, and `Symbol.species`. These symbols can be used to customize the behaviour of built-in JavaScript objects and classes.

## Use Cases and Practical Applications

Symbols can be used to implement private properties, metadata, or methods, avoiding naming collisions in libraries and frameworks. They are also used to customize the behaviour of well-known JavaScript objects and classes, such as iterators and string conversion.

## Limitations and Considerations

Symbols are not supported in older JavaScript environments, and their unique nature may require additional care when working with serialization or proxy objects. Additionally, they are not directly accessible during iteration, which may require extra steps to access their properties.

## Conclusion

JavaScript Symbols provide a powerful, unique identifier for object properties, helping to avoid naming collisions and enabling advanced programming techniques. Understanding their use cases and limitations is essential for modern JavaScript developers.

_You can find the source code_ [in the GitHub repository](https://github.com/Puppo/javascript-you-dont-know/tree/01-symbols)


> 🎬 **Watch / View Embedded Resource:** [https://dev.to/puppo](https://dev.to/puppo)