حلقه for-of

حلقه for...of (دریافت مستقیم مقادیر)

حلقه for...of یک ابزار مدرن و فوق‌العاده برای چرخیدن بین اعضای اشیای قابل‌پیمایش (Iterable Objects) هست. یعنی هر چیزی که یک لیست یا مجموعه‌ای از مقادیر باشه؛ مثل آرایه‌ها (Array)، مپ‌ها (Map)، ست‌ها (Set)، آرگومان‌های ورودی یک تابع (arguments) و غیره.

این حلقه در هر دور، خودِ مقدارِ هر عضو رو مستقیم برمی‌داره و کدهایی که نوشتی رو روش اجرا میکنه.

ساختار کلی این حلقه به این صورت هست:

for (variable of iterable) {
  // کدهایی که برای مقدار هر عضو اجرا میشن
}

تفاوت اساسی بین for...in و for...of چیست؟

این بخش یکی از مهم‌ترین سوالات مصاحبه‌های کاری جاوااسکریپت هست!

• حلقه for...in دور نام ویژگی‌ها یا همان کلیدها/ایندکس‌ها (Property Names) می‌چرخه.

• حلقه for...of دور خودِ مقادیر اصلی (Property Values) می‌چرخه.

بیا با یک مثال عینی تفاوتشون رو ببینیم. فرض کن یک آرایه داریم و عمداً یک ویژگی دست‌ساز هم بهش اضافه کردیم:

const arr = [3, 5, 7];
arr.foo = "hello"; // یک ویژگی دست‌ساز اضافه کردیم

// حالت اول: استفاده از for...in
for (const i in arr) {
  console.log(i);
}
// خروجی در کنسول: "0" "1" "2" "foo" (ایندکس‌ها و اسم کلید دست‌ساز رو چاپ کرد)

// حالت اول: استفاده از for...of
for (const i of arr) {
  console.log(i);
}
// خروجی در کنسول: 3 5 7 (فقط مقادیر اصلی خود آرایه رو چاپ کرد!)

همان‌طور که می‌بینی، for...of کاملاً هوشمندانه رفتار میکنه، کاری به ایندکس‌ها و ویژگی‌های جانبی نداره و صاف میره سراغ دیتای اصلی داخل آرایه. برای همین، بهترین گزینه برای پیمایش آرایه‌ها، حلقه for...of هست.

یک ترکیب خفن: استفاده از for...of به همراه Destructuring

تو می‌تونی این حلقه رو با قابلیت «متلاشی کردن ساختار» یا همان Destructuring ترکیب کنی. مثلاً اگر بخوای روی یک شیء معمولی (Object) چرخ بزنی، می‌دونی که اشیاء معمولی مستقیماً با for...of سازگار نیستند؛ اما می‌تونی با کمک متد Object.entries() کلیدها و مقادیر شیء رو به شکل جفت‌جفت بیرون بکشی و با for...of هم‌زمان به هردوشون دسترسی داشته باشی:

const obj = { foo: 1, bar: 2 };

// باز کردن هم‌زمان کلید و مقدار در هر دور از حلقه:
for (const [key, val] of Object.entries(obj)) {
  console.log(key, val);
}
// خروجی در کنسول:
// "foo" 1
// "bar" 2