JavaScript - The Symbol Object

Hello there, aspiring JavaScript developers! Today, we're going to embark on an exciting journey into the world of JavaScript Symbols. Don't worry if you're new to programming; I'll guide you through this concept step by step, just as I've done for countless students in my years of teaching. So, let's dive in!

JavaScript Symbol

Imagine you're at a fancy masquerade ball. Everyone's wearing a mask, and each mask is unique. In the JavaScript world, Symbols are like these masks – they're unique identifiers that help us distinguish one thing from another, even if they look similar at first glance.

A Symbol is a primitive data type in JavaScript, introduced in ECMAScript 2015 (ES6). It's different from other primitives like strings or numbers because each Symbol is guaranteed to be unique.

Let's create our first Symbol:

const mySymbol = Symbol();
console.log(mySymbol);  // Output: Symbol()

Here, we've created a Symbol and stored it in the variable mySymbol. When we log it to the console, we see Symbol(). But don't be fooled – each time you create a Symbol, it's a brand new, unique identifier.

Syntax

Creating a Symbol is simple. You can do it in two ways:

1. Without a description:

   const sym1 = Symbol();

2. With a description:

   const sym2 = Symbol('My description');

The description is optional and is mainly used for debugging purposes. It doesn't affect the uniqueness of the Symbol.

Here's a fun fact: you can't use the new keyword with Symbol. If you try new Symbol(), JavaScript will throw an error. It's like trying to clone a unique mask at our masquerade ball – it just doesn't work!

Symbol Properties

Symbols have a few interesting properties. Let's explore them:

Symbol.length

console.log(Symbol.length);  // Output: 0

This always returns 0. It's like asking how many people are wearing a particular unique mask at our ball – there's always just one!

Symbol.prototype

This is the prototype for the Symbol constructor. It's a bit advanced, so we'll save that for another day.

Symbol Methods

Symbols come with some handy methods. Let's look at a few:

Method	Description
Symbol.for(key)	Searches for existing symbols with the given key and returns it if found. Otherwise, a new symbol is created and returned.
Symbol.keyFor(sym)	Retrieves a shared symbol key from the global symbol registry for the given symbol.
toString()	Returns a string representation of the symbol.

Let's see these in action:

const globalSymbol = Symbol.for('myGlobalSymbol');
console.log(Symbol.keyFor(globalSymbol));  // Output: "myGlobalSymbol"

const localSymbol = Symbol('myLocalSymbol');
console.log(Symbol.keyFor(localSymbol));  // Output: undefined

console.log(localSymbol.toString());  // Output: "Symbol(myLocalSymbol)"

In this example, globalSymbol is like a mask that's registered at the entrance of our ball. Anyone can ask for it by name. localSymbol, on the other hand, is like a mask you made yourself – it's unique to you, and no one else knows about it.

Examples

Let's look at some practical examples of using Symbols:

Example 1: Using Symbols as unique property keys

const NAME = Symbol('name');
const AGE = Symbol('age');

const person = {
[NAME]: 'Alice',
[AGE]: 30
};

console.log(person[NAME]);  // Output: "Alice"
console.log(person[AGE]);   // Output: 30

In this example, we're using Symbols as keys in an object. This ensures that these properties won't clash with any other properties, even if they have the same name.

Example 2: Symbols in a for...in loop

const VISIBLE = Symbol('visible');
const HIDDEN = Symbol('hidden');

const obj = {
[VISIBLE]: 'This is visible',
[HIDDEN]: 'This is hidden',
normalProperty: 'This is normal'
};

for (let prop in obj) {
console.log(prop);  // Output: "normalProperty"
}

Notice how the Symbol properties aren't included in the for...in loop. It's like they're wearing invisibility cloaks at our masquerade ball!

Benefits of using Symbols

1. Uniqueness: Symbols are always unique. This makes them perfect for adding properties to objects when you want to be sure you're not overwriting existing properties.

2. Privacy: Symbol-keyed properties are not enumerable by default. This means they don't show up in for...in loops or Object.keys().

3. Collision-free: When working with large codebases or third-party libraries, Symbols help prevent naming collisions.

4. Special behaviors: Some built-in Symbols allow you to customize object behaviors. For example, Symbol.iterator lets you define how an object should be iterated.

In conclusion, Symbols are like the secret handshakes of the JavaScript world. They provide a way to create unique identifiers that can be used in various ways to enhance your code's functionality and maintainability.

Remember, just like each mask at our masquerade ball is unique and special, so too are Symbols in JavaScript. They may seem mysterious at first, but with practice, you'll find them to be powerful tools in your programming toolkit.

Keep coding, keep learning, and most importantly, have fun on your JavaScript journey!

轉換為繁體中文：


# JavaScript - The Symbol 物件

你好，有志於JavaScript開發者！今天，我們將踏上一段令人興奮的旅程，進入JavaScript符號的世界。如果你是編程新手，別擔心；我會一步步引導你理解這個概念，正如我這些年來為無數學生所做的那樣。那麼，我們一起來探索吧！

## JavaScript Symbol

想像你身處一個豪華的化裝舞會。每個人都在戴著面具，而且每個面具都是獨一的。在JavaScript的世界中，符號就像這些面具一樣——它們是唯一的標識符，幫助我們區分即使在外觀上相似的事物。

符號是JavaScript中的一種原始數據類型，在ECMAScript 2015（ES6）中引入。它與其他原始類型如字符串或數字不同，因為每個符號都保證是唯一的。

讓我們創建我們的第一個符號：

```javascript
const mySymbol = Symbol();
console.log(mySymbol);  // 輸出: Symbol()

在這裡，我們創建了一個符號並將其存儲在變量mySymbol中。當我們將其打印到控制台時，我們看到Symbol()。但是別被愚弄——每次你創建一個符號時，它都是全新且唯一的標識符。

語法

創建符號很簡單。你可以用兩種方式來做：

1. 沒有描述：

   const sym1 = Symbol();

2. 有描述：

   const sym2 = Symbol('My description');

描述是可選的，主要用於調試目的。它不會影響符號的唯一性。

這裡有一個有趣的知識：你不能對符號使用new關鍵字。如果你嘗試new Symbol()，JavaScript會拋出錯誤。這就像在我們的化裝舞會上嘗試克隆一個獨特的面具一樣——這簡直是不可能的！

Symbol 屬性

符號有一些有趣的屬性。讓我們來探討它們：

Symbol.length

console.log(Symbol.length);  // 輸出: 0

這總是返回0。這就像問我們舞會上有多少人戴著特定獨特的面具一樣——總是只有一個！

Symbol.prototype

這是Symbol構造函數的原型。這有點先進，所以我們留到另一天再討論。

Symbol 方法

符號帶有一些方便的方法。讓我們看看幾個：

方法	描述
Symbol.for(key)	搜索具有給定鍵的現有符號，如果找到則返回。否則，創建並返回一個新符號。
Symbol.keyFor(sym)	從全局符號註冊表中為給定的符號检索共享的符號鍵。
toString()	返回符號的字符串表示形式。

讓我們看看這些方法如何工作：

const globalSymbol = Symbol.for('myGlobalSymbol');
console.log(Symbol.keyFor(globalSymbol));  // 輸出: "myGlobalSymbol"

const localSymbol = Symbol('myLocalSymbol');
console.log(Symbol.keyFor(localSymbol));  // 輸出: undefined

console.log(localSymbol.toString());  // 輸出: "Symbol(myLocalSymbol)"

在這個例子中，globalSymbol就像是在我們舞會入口註冊的面具。任何人都可以通過名字來索取它。另一方面，localSymbol就像你自己做的面具——它對你來說是獨特的，沒有其他人知道它。

示例

讓我們看看一些使用符號的實際示例：

示例 1：使用符號作為唯一的屬性鍵

const NAME = Symbol('name');
const AGE = Symbol('age');

const person = {
[NAME]: 'Alice',
[AGE]: 30
};

console.log(person[NAME]);  // 輸出: "Alice"
console.log(person[AGE]);   // 輸出: 30

在這個例子中，我們將符號用作對象中的鍵。這保證了這些屬性不會與任何其他屬性冲突，即使它們有相同的名字。

示例 2：符號在 for...in 循環中

const VISIBLE = Symbol('visible');
const HIDDEN = Symbol('hidden');

const obj = {
[VISIBLE]: 'This is visible',
[HIDDEN]: 'This is hidden',
normalProperty: 'This is normal'
};

for (let prop in obj) {
console.log(prop);  // 輸出: "normalProperty"
}

注意符號屬性沒有包含在for...in循環中。這就像它們在我們的化裝舞會上穿著隐形斗篷一樣！

使用符號的好處

1. 唯一性：符號總是唯一的。這使得它們成為添加屬性到對象時的完美選擇，當你想要確保不會覆蓋現有的屬性時。

2. 隱私：符號鍵屬性默認是不可枚舉的。這意味著它們不會出現在for...in循環或Object.keys()中。

3. 無衝突：在處理大型代碼庫或第三方庫時，符號有助於防止命名冲突。

4. 特殊行為：一些內置的符號允許你定制對象的行為。例如，Symbol.iterator讓你定義對象應如何被迭代。

總之，符號就像是JavaScript世界的秘密握手。它們提供了一種創建唯一標識符的方式，可以用於增强代碼的功能性和可维护性。

記住，正如我們舞會上的每個面具都是獨特和特別的，JavaScript中的符號也是如此。它們起初可能看起來有些神秘，但隨著練習，你會發現它們是你的編程工具包中的強大工具。

持續編碼，持續學習，最重要的是，在你們的JavaScript旅程上玩得開心！

Credits: Image by storyset