۱۱ ترفند بسیار کاربردی جاوا اسکریپت — به زبان ساده

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

در این نوشته فهرستی از 11 نکته این چنین را ارائه می‌کنیم که همگی به خاطر وجود یک جنبه ذکاوت یا مفید بودن جمع‌آوری شده‌اند. این مطلب برای افراد مبتدی بسیار مفید است؛ اما امید می‌رود که حتی توسعه‌دهندگان در سطح متوسط جاوا اسکریپت نیز در این فهرست، نکات جدیدی را مشاهده کنند.

با این که بسیاری از این ترفندها در هر زمینه‌ای مفید هستند؛ اما چند مورد از آن‌ها بیشتر برای نوشتن با حداکثر خلاصه‌سازی مفید هستند تا کدی که برای محیط توزیع نهایی مناسب است، چون در محیط production وضوح و خوانایی کد بسیار مهم‌تر از فشردگی آن است. قضاوت در مورد این خصوصیت‌ها را بر عهده شما می‌گذاریم.

بنابراین فهرست زیر بدون هیچ ترتیب خاصی، 11 روش نوشتن کدهای فشرده‌تر و با عملکرد بالاتر را در اختیار شما قرار می‌دهد.

1. فیلتر کردن مقادیر یکتا (Arrays)

نوع شیء set در ES6 معرفی شده است و می‌توان از آن به همراه عملگر spread (…) برای ایجاد یک آرایه جدید با استفاده صرف از مقادیر یکتا بهره گرفت.

1const array = [1, 1, 2, 3, 5, 5, 1]
2const uniqueArray = [...new Set(array)];
3console.log(uniqueArray); // Result: [1, 2, 3, 5]

تا پیش از ES6 جداسازی مقادیر یکتا نیاز به کد بسیار بیشتر از این داشت.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

این ترفند برای آرایه‌هایی که شامل انواع ابتدایی یعنی undefined ،null ،boolean ،string و number هستند مناسب است. اگر آرایه‌ای دارید که شامل اشیا، تابع‌ها یا آرایه‌های دیگر است به رویکرد متفاوتی نیاز دارد.

2. ارزیابی اتصال کوتاه (CONDITIONALS)

عملگر سه‌تایی روشی سریع برای نوشتن گزاره‌های شرطی ساده (و گاهی اوقات نه چندان ساده) به صورت زیر است:

1x > 100 ? 'Above 100' : 'Below 100';
2x > 100 ? (x > 200 ? 'Above 200' : 'Between 100-200') : 'Below 100';

اما در پاره‌ای موارد حتی عملگر سه‌تایی نیز بیش از حد ضرورت پیچیده است. به جای آن می‌توان از عملگرهای منطقی and (&&) و or (||) برای ارزیابی عبارت‌های خاص به روشی فشرده‌تر استفاده کرد. این وضعیت غالباً به نام «اتصال کوتاه» یا «ارزیابی اتصال کوتاه» نامیده می‌شود.

ارزیابی اتصال کوتاه چگونه کار می‌کند؟

فرض کنید می‌خواهیم تنها یک یا دو گزینه را بازگشت دهیم. با استفاده از && نخستین مقدار false یا کاذب بازگشت می‌یابد. اگر همه عملوندها به صورت true ارزیابی شوند، آخرین عبارت ارزیابی‌شده بازگشت می‌یابد.

1let one = 1, two = 2, three = 3;
2console.log(one && two && three); // Result: 3
3console.log(0 && null); // Result: 0

استفاده از عملگر || نخستین مقدار true یا صادق را بازگشت می‌دهد. اگر همه عملوندها false ارزیابی شوند، آخرین عبارت ارزیابی‌شده بازگشت می‌یابد.

1let one = 1, two = 2, three = 3;
2console.log(one || two || three); // Result: 1
3console.log(0 || null); // Result: null

مثال اول

تصور کنید می‌خواهیم length یک متغیر را پیدا کنیم؛ اما نوع متغیر را نمی‌دانیم. در این شرایط می‌توان از گزاره if/else برای بررسی این که متغیر foo از نوع قابل قبول باشد استفاده کرد؛ اما این رویکرد بسیار طولانی است. «ارزیابی اتصال کوتاه»، امکان این کار را به صورت زیر فراهم می‌سازد:

1return (foo || []).length;

اگر متغیر foo صادق باشد، این عبارت مقدار بازگشتی خواهد داشت، در غیر این صورت length آرایه خالی به صورت 0 بازگشت می‌یابد.

مثال دوم

آیا کنون با مسائلی سر و کار داشته‌اید که بخواهید به مشخصه یک شیء تودرتو دسترسی پیدا کنید؟ ممکن است ندانید که آن شیء یا یکی از مشخصه‌های فرعی آن وجود دارند یا نه و این وضعیت منجر به خطاهای ناگواری می‌شود.

تصور کنید می‌خواهیم به یک مشخصه به نام data درون this.state دسترسی پیدا کنیم؛ اما data تا زمانی که برنامه ما یک درخواست واکشی را با موفقیت بازگشت نداده است، تعریف نشده است.

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

1if (this.state.data) {
2  return this.state.data;
3} else {
4  return 'Fetching Data';
5}

اما این وضعیت کاملاً مفصل به نظر می‌رسد. عملگر or یک راه‌حل بسیار فشرده‌تر ارائه می‌کند:

1return (this.state.data || 'Fetching Data');

نمی‌توان کد فوق را برای استفاده از && «بازسازی» (refactor) کرد. گزاره زیر:

 'Fetching Data' && this.state.data

مقدار this.data.state را چه تعریف شده باشد و یا نباشد، بازگشت می‌دهد. دلیل این امر آن است که 'Fetching Data' صادق است و از این رو && زمانی که در ابتدا قرار گیرد همواره از آن رد می‌شود.

پیشنهاد یک ویژگی جدید: زنجیره‌سازی اختیاری

در حال حاضر پیشنهاد شده است که «زنجیره‌سازی اختیاری» (Optional Chaining) در زمان تلاش برای بازگشت یک مشخصه از اعماق ساختارهای شبه درختی مورد استفاده قرار گیرد. در این پیشنهاد علامت سؤال (?) می‌تواند برای استخراج مشخصه تنها در صورتی قابل استفاده است که null نباشد.

برای نمونه، می‌توانیم مثال فوق را طوری به صورت this.state.data?. () بازسازی کنیم که data تنها در صورتی بازگشت یابد که null نباشد.

همچنین اگر دغدغه اصلی ما در مورد این باشد که آیا state تعریف شده یا نه، می‌توانیم this.state?.data را بازگشت دهیم. این پیشنهاد هنوز در مرحله 1 و به عنوان یک ویژگی آزمایشی است. البته شما می‌توانید از طریق Babel و از طریق افزودن babel/plugin-proposal-optional-chaining@ به فایل babelrc. از آن استفاده کنید.

3. تبدیل به بولی (TYPE CONVERSION)

جاوا اسکریپت علاوه بر مقادیر معمول بولی true و false با همه مقادیر دیگر به صورت «صادق» (truthy) یا «کاذب» (falsy) برخورد می‌کند. همه مقادیر در جاوا اسکریپت به جز 0، "" ،null ،undefined ، NaN و البته false صادق هستند.

فیلم آموزش JavaScript ES6 جاوا اسکریپت در فرادرس

کلیک کنید

می‌توان به سادگی بین مقادیر true و false با استفاده از عملگر منفی (!) سوئیچ کرد. این عملگر نوع متغیر را نیز به Boolean تغییر می‌دهد.

1const isTrue  = !0;
2const isFalse = !1;
3const alsoFalse = !!0;
4console.log(isTrue); // Result: true
5console.log(typeof true); // Result: "boolean"

این نوع از تبدیل نوع در گزاره‌های شرطی بسیار کارآمد است؛ اما شاید تنها هدف از این که بخواهیم false را به صورت 1! تعریف کنیم، این است که می‌خواهیم کدمان تا حد امکان فشرده باشد.

4. تبدیل به رشته (TYPE CONVERSION)

برای تبدیل سریع یک عدد به رشته، می‌توان از عملگر الحاق + و سپس یک مجموعه تهی از علامت نقل قول "" استفاده کرد.

1const val = 1 + "";
2
3console.log(val); // Result: "1"
4console.log(typeof val); // Result: "string"

5. تبدیل به عدد (TYPE CONVERSION)

متضاد حالت قبل زمانی است که بخواهیم یک متغیر رشته را به عدد تبدیل کنیم و در این مورد می‌توانیم از یک عملگر جمع + استفاده کنیم.