5 نکته خفن در جاوا اسکریپت!

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

البته همه نکات آن هم چندان مفید نیستند، زیرا هر چیزی که توسط دیگران به خوبی شناخته نشده باشد فقط باعث سردرگمی شما می‌شود. با این حال استفاده از برخی نکات و ترفندهای مخفی باعث سریع‌تر اجرا شدن کد و شاید حتی کم حجم‌تر شدن آن می‌گردد. حتی ممکن است گاهی خوانایی آن را نیز کاهش دهد که برای خوانندگان امری آزاردهنده است (از جمله خود شما در آینده).

بنابراین بدون هیچ صحبت اضافی بیایید 5 مورد از اسرار ناشناخته جاوااسکریپت را کشف کنیم.

1. عملگر Void

آیا می‌دانستید که در جاوااسکریپت عملگر void وجود دارد؟ شاید بپرسید چه کاری انجام می‌دهد؟ این عبارتی (ساده یا پیچیده قرار گرفته در پرانتز) که بلافاصله پس از آن نوشته شود را می‌گیرد، آن را ارزیابی می‌کند و همیشه undefined را برمی‌گرداند.

void 0; // undefined
void "text"; // undefined                                                                                                       
void {}; // undefined
void (() => {}); // undefined

اما چه موارد استفاده‌ای برای چنین عملگری وجود دارد؟ خوب همانطور که معلوم خواهد شد، یک مورد وجود دارد. چه باور کنید یا نه، undefined در واقع می‌تواند تعریف شود!

(() => {
  const undefined = "foo";
  console.log(undefined, typeof undefined); // "foo", "string"
  console.log(void 0, typeof void 0); // undefined, "undefined"
})();

جهت اطلاع شما، در جاوااسکریپت undefined یک کلمه کلیدی رزرو شده نیست و می‌تواند به عنوان نام یک متغیر مورد استفاده قرار گیرد و به طور موثر در یک محدوده خاص بر نوع گلوبال غلبه کند.

استفاده از عملگر void با عبارات تصادفی (معمولا 0) به شما اطمینان می‌دهد که بدون توجه به چیز دیگری، undefined را بدون تغییر دریافت خواهید کرد.

2. پرانتز اختیاری

پرانتز مانند هر زبان برنامه‌نویسی دیگری در همه جای جاوااسکریپت وجود دارد. اما آیا می‌دانید که لازم نیست همیشه آن را بنویسید، حتی در جاهایی که همیشه آن‌ها را قرار می‌دهید؟

سازنده کلاس

امن‌ترین مکان برای حذف پرانتز، هنگام فراخوانی سازنده کلاس بدون پارامتر است. بله در چنین موقعیتی می‌توانید پرانتزها را بردارید، آن 2 بایت فضا را ذخیره کنید و خواهید دید که کد به خوبی کار می‌کند.

new Date();
new Date;
new Date().getYear();
(new Date).getYear(); // parentheses needed in a different place

IIFE

دومین (آنچه من می‌دانم) جایی که می‌توانید پرانتز را حذف کنید، در IIFE یا همان عبارات تابع بلافاصله فراخوانی شده است.

به طور معمول، برای استفاده از IIFE باید عبارت تابع را داخل پرانتز قرار دهید و آن را درون یک جفت پرانتز دیگر بگذارید تا در واقع بتوانید تابع را فراخوانی کنید.

(() => {
  // ...
})();

(function () {
  // ...
})();

اما در حقیقت پرانتزهای باز و بسته همیشه مورد نیاز نیستند، حداقل تحت شرایط خاصی. به همین جهت می‌توانید این کار را با عبارات تابع تعریف شده با کلمه کلیدی function انجام دهید، تنها زمانی که نتیجه IIFE به یک متغیر اختصاص داده می‌شود یا زمانی که توسط یک عملگر unary (مانند void، ! و ...) قبل از آن قرار می‌گیرد.

void (function () {
  // ...
})();

const result = (function () {
  // ...
})();

قرار دادن عملگر یا تخصیص ضرورتی است تا تجزیه کننده بداند که تابع زیر در واقع عبارت تابع است.

متأسفانه این روش با توابع arrow کار نمی‌کند، بنابراین اگر هدف شما حذف برخی از بایت‌ها است، پیشنهاد می‌کنم از arrow استفاده کرده و بعد در مورد پرانتزها بحث کنید.

3. عملگر کاما

در این بخش یک عملگر دیگر داریم، کمی کوتاه‌تر و البته مفیدتر و آن هم کاما (،) است. کاما در جاوااسکریپت به شما امکان می‌دهد چندین عبارت را یک به یک اجرا کنید، در حالی که مقدار بازیابی شده از آخرین عبارت را برمی‌گردانید. به قطعه کد زیر نگاهی بیاندازید:

// parentheses are required for proper assignment

const x = (1, 2, 3, 4); // 4
const y = ((() => "a")(), (() => "b")()); // "b"

const test = () => {
  return console.log(y), y;
};

test(); // logs "b" and returns "b"

بنابراین همانطور که می‌بینید، کاربرد این عملگر واقعا چشمگیر است. شما می‌توانید از هر عبارتی با کمی کمک گرفتن از IIFE استفاده کنید و وقتی آن را با توابع arrow یا ()console.log به منظور دیباگینگ ترکیب می‌کنید، تجربه رفع اشکال بهتری بدون خطوط کد اضافی خواهید داشت.

4. عملگر In

حالا که داریم در مورد عملگرها بحث می‌کنیم، چرا راجع به یک ساختار دیگر از این دسته بحث نکنیم، یعنی عملگر in. تنها مورد استفاده بررسی این است که آیا یک شی دارای خصوصیات خاصی هست یا نه، مانند موارد زیر:

const obj = { a: 1, b: 2, c: 3 };
"a" in obj; // true
"d" in obj; // false
delete obj.a;
obj.b = undefined;
"a" in obj; // false
b" in obj; // true"

اما چرا به جای بررسی یک خصوصیت با سینتکس obj \ [prop \] از یک عملگر دیگر استفاده می‌کنید؟

خوب، برخی تفاوت‌های خاص و همچنین مزایایی برای این روش وجود دارد. اولا بررسی ویژگی‌هایی که می‌توانند مقادیر نادرست را نگهداری کنند بسیار راحت است. در چنین مواردی typeof obj\[prop\]=== "undefined" مورد نیاز است که مطمئنا بسیار واضح‌تر از "prop" in obj خواهد بود.

با این اوصاف، مشکل (یا شاید ویژگی، بسته به نوع نگاه شما دارد) عملگر in آن است که حتی برای خصوصیاتی که مستقیما مقدار undefined به آنها اختصاص داده شده است، true برمی‌گردد. اگر این همان چیزی است که شما می‌خواهید پس می‌توان گفت ویژگی خوبی است، اما این بدان معناست که باید از عملگر delete برای حذف خصوصیات به جای تخصیص undefined (که کمی کندتر است) استفاده کنید.

5. Labelها

در آخر یک ویژگی داریم که به ندرت مورد استفاده قرار می‌گیرد و آن label است. در جاوااسکریپت از labelها (مانند name:) می‌توان برای نام گذاری موثر بلوک‌های کد و دستورات حلقه (به عنوان مثال for) استفاده کرد. اختصاص چنین اسامی به قسمت‌های خاصی از کد به شما این امکان را می‌دهد که بعدا این بلوک‌ها را برای استفاده با دستوراتی مانند continue و break ارجاع دهید.

outer: for (let i = 0; i < 10; i++) {

  inner: for (let j = 0; j < 10; j++) {
    if (i === j) {
      continue outer;
    }
    console.log(i, j);
  }
}

block: {
  // Yup, code blocks are a thing
  console.log("You'll see this");
  break block; // You can break form code blocks when they're labelled
  console.log("But not that");
}

Labelها هنگام کار با عبارات پیچیده در حلقه‌های تو در تو بسیار مفید هستند. مطمئنا می‌توانید از آن‌ها برای break بلوک‌های کد استفاده کنید، اما واقعا نمی‌دانم چرا این کار را انجام می‌دهید. فقط کافی است به سادگی از توابع یا حتی IIFE استفاده کنید.

جمع‌بندی

این لیستی از برخی نکات جالب و کمتر شناخته شده جاوااسکریپت بود. در بخش نظرات بنویسید که قبل از خواندن این مقاله چند مورد از آنها را می‌دانستید و کدام‌ها را نمی‌شناختید.

همچنین به منظور یادگیری بیشتر این زبان محبوب و پرکاربرد می‌توانید از آموزش جاوا اسکریپت آموزشی مفید و ارزشمند در وب سایت راکت استفاده نمایید.