MATIN MOLKARA
SERIES: JavaScript — PART 77 OF 108

77- آموزش جاوااسکریپت | آشنایی با Symbol

در این آموزش با نوع داده Symbol در جاوااسکریپت آشنا می‌شویم، ویژگی یکتا بودن آن را بررسی می‌کنیم و یاد می‌گیریم چطور از Symbol به‌عنوان کلید اختصاصی در آبجکت‌ها استفاده کنیم.

در این بخش به یکی از انواع داده‌های ES6 یعنی Symbol می‌پردازیم.
در معرفی اولیه نوع داده‌ها اشاره شد که Symbol یک نوع داده Primitive است، اما در این آموزش آن را دقیق‌تر بررسی می‌کنیم.

مهم‌ترین ویژگی Symbol این است که هر Symbol کاملاً یکتا است. همین ویژگی باعث می‌شود در سناریوهایی مثل تعریف کلیدهای منحصربه‌فرد برای آبجکت‌ها بسیار مفید باشد.


Symbol چیست؟

Symbol یک مقدار Primitive در جاوااسکریپت است. برای ساخت آن از تابع Symbol() استفاده می‌کنیم.

ساخت Symbol

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

در این مثال:

  • sym1 یک Symbol بدون توضیح است.
  • sym2 یک Symbol با شناسه توضیحی 'sym2' است.

این شناسه فقط برای خوانایی بهتر است و باعث یکسان شدن Symbolها نمی‌شود.


بررسی نوع Symbol

برای بررسی نوع داده Symbol می‌توانیم از typeof استفاده کنیم:

const sym1 = Symbol();

console.log(typeof sym1); // "symbol"

خروجی نشان می‌دهد که Symbol یک نوع داده Primitive مستقل است و مانند آبجکت‌ها رفتار نمی‌کند.


هر Symbol یکتا است

حتی اگر دو Symbol با توضیح یکسان بسازیم، باز هم برابر نخواهند بود:

console.log(Symbol() === Symbol()); // false

console.log(Symbol('123') === Symbol('123')); // false

این موضوع مهم‌ترین ویژگی Symbol است:
هیچ دو Symbolی با هم برابر نیستند.


تبدیل Symbol به رشته

نمی‌توان Symbol را مستقیماً داخل رشته قرار داد، چون خطا ایجاد می‌شود:

const sym1 = Symbol();

console.log(`Hello ${sym1}`); // Error: Cannot convert a Symbol value to a string

اگر بخواهیم آن را به رشته تبدیل کنیم، باید از String() یا toString() استفاده کنیم:

const sym1 = Symbol();

console.log(`Hello ${String(sym1)}`); // Hello Symbol()
console.log(sym1.toString()); // Symbol()

استفاده از Symbol به‌عنوان کلید آبجکت

یکی از مهم‌ترین کاربردهای Symbol این است که بتوانیم از آن به‌عنوان کلید یکتا در آبجکت‌ها استفاده کنیم.

const key1 = Symbol();
const key2 = Symbol('sym2');

const myObj = {
  [key1]: 'prop1',
  [key2]: 'prop2'
};

console.log(myObj[key1]); // prop1
console.log(myObj[key2]); // prop2

نکته مهم

اگر بخواهیم از مقدار یک متغیر به‌عنوان کلید آبجکت استفاده کنیم، باید از Bracket Notation استفاده کنیم:

const key = Symbol();

const obj = {
  [key]: 'value'
};

اگر براکت نگذاریم، جاوااسکریپت نام متغیر را به‌عنوان کلید معمولی در نظر می‌گیرد، نه مقدار داخل آن را.


Symbolها در حلقه for...in نمایش داده نمی‌شوند

ویژگی‌های Symbol در حلقه for...in قابل پیمایش نیستند. برای درک بهتر، این مثال را ببینید:

const key1 = Symbol();
const key2 = Symbol('sym2');

const myObj = {
  [key1]: 'prop1',
  [key2]: 'prop2'
};

myObj.key3 = 'prop3';
myObj.key4 = 'prop4';

for (let i in myObj) {
  console.log(`${i}: ${myObj[i]}`);
}

خروجی

key3: prop3
key4: prop4

همان‌طور که می‌بینید:

  • key3 و key4 که کلیدهای معمولی هستند نمایش داده می‌شوند.
  • اما کلیدهای Symbol در حلقه for...in ظاهر نمی‌شوند.

این رفتار باعث می‌شود Symbolها برای تعریف ویژگی‌های خاص و داخلی آبجکت‌ها گزینه مناسبی باشند.


Symbolها در JSON.stringify() نادیده گرفته می‌شوند

وقتی از JSON.stringify() استفاده می‌کنیم، کلیدهای Symbol در خروجی JSON قرار نمی‌گیرند.

نمونه با کلید معمولی

console.log(
  JSON.stringify({
    prop: 'value'
  })
);

خروجی

{"prop":"value"}

نمونه با کلید Symbol

console.log(
  JSON.stringify({
    [Symbol('sym1')]: 'value'
  })
);

خروجی

{}

در اینجا خروجی یک آبجکت خالی است، چون JSON.stringify() ویژگی‌هایی که با Symbol تعریف شده‌اند را نادیده می‌گیرد.


جمع‌بندی

در این آموزش با Symbol در جاوااسکریپت آشنا شدیم و نکات مهم زیر را بررسی کردیم:

  • Symbol یک نوع داده Primitive در ES6 است.
  • هر Symbol منحصربه‌فرد است و با Symbol دیگر برابر نمی‌شود.
  • می‌توان از Symbol به‌عنوان کلید یکتا برای آبجکت‌ها استفاده کرد.
  • ویژگی‌های Symbol در حلقه for...in نمایش داده نمی‌شوند.
  • کلیدهای Symbol در JSON.stringify() نادیده گرفته می‌شوند.

به‌طور کلی، Symbol زمانی مفید است که بخواهیم در یک آبجکت، ویژگی‌هایی تعریف کنیم که:

  • با کلیدهای دیگر تداخل نداشته باشند
  • یکتا باشند
  • در پیمایش‌ها و تبدیل به JSON به‌صورت پیش‌فرض دیده نشوند
// 0 comments
#JavaScript#Web Development#Frontend#JSON#Objects#Primitive Data Types#Symbol#ES6

نظرات (0)

نظر خود را بنویسید