آموزش ترفندهایی به منظور کوتاه نوشتن کدهای JavaScript

آموزش ترفندهایی به منظور کوتاه نوشتن کدهای JavaScript

کدنویسی به اصطلاح Shorthand (شورت‌هند یا کوتاه‌شده) جاوااسکریپت نه تنها سرعت کدزنی را افزایش می‌دهد، بلکه اسکریپت‌ها را کوتاه‌تر می‌کند و این باعث می‌شود تا صفحات سریع‌تر بارگذاری شوند. این Shorthandها یا همان کدهای کوتاه شده، دقیقاً همان کاری را می‌کنند که کدهای معمولی انجام می‌دهند؛ به عبارت دیگر، عملکردشان یکی است تنها با این تفاوت که نمونه‌های شورت‌هند به مراتب کوتاه‌تر و فشرده‌تر هستند که یکی از ساده‌ترین روش‌های بهینه‌سازی کد محسوب می‌شوند.

در این مقاله به 10 مورد از شورت‌هندهای جاوااسکریپت برای مبتدیان اشاره شده است که با آگهی از آنها می‌توانند شروع به ریفکتورینگ کدهای کرده و از سورس‌کد مختصرتری برخوردار گردند (برای آشنایی بیشتر با زبان JS، می‌توانید به دورهٔ آموزش رایگان زبان جاوااسکریپت در سکان آکادمی مراجعه نمایید).

1. اعداد Decimal (دسیمال، ده‌‌دهی)
اگر به طور مرتب با اعداد دسیمال بزرگ کار می‌کنید، این شورت‌هند می‌تواند یک نعمت به حساب بیاید! چراکه دیگر مجبور نیستید تمام صفرها را تایپ کنید بلکه کافی است علامت e را جایگزین کنید. به‌عنوان مثال، 1e8 به معنای اضافه‌کردن ۸ صفر پس از رقم ۱ است که می‌شود 100000000.

اعدادی که بعد از حرف e می‌آیند نشان‌دهندهٔ صفرهایی هستند که باید جلوی رقم قبل از e قرار گیرند. به‌عنوان مثال 16e4، شورت‌هند عدد 160000 محسوب می‌شود، یعنی این شورت‌هند نشان می‌دهد که بعد از عدد 16 می‌بایست ۴ صفر قرار گیرد:

/* Shorthand */
var myVar = 1e8;
 
/* Longhand */
var myVar = 100000000;

2. افزایش و کاهش مقادیر متغیرها
شورت‌هند به‌اصطلاح Increment (افزایش) از دو علامت جمع (++) تشکیل شده و بدین معنا است که مقدار متغیر یک واحد افزایش می‌یابد. به طور مشابه، شورت‌هند Decrement (کاهش) از دو علامت مفنی (--) تشکیل شده است و به این معنی است که مقدار متغیر یک واحد کاهش می‌یابد.

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

/* Shorthand */
i++;
j--;
 
/* Longhand */
i=i+1;
j=j-1;

3. انجام ۴ عمل اصلی (جمع، تفریق، ضرب و تقسیم)
این شورت‌هندها هر کدام مخصوص ۴ اپراتور اصلی ریاضیاتی است: جمع، تفریق، ضرب و تقسیم. چنین اپراتورهایی مشابه اپراتورهای افزایش و کاهش عمل می‌کنند با این تفاوت که می‌توانید مقدار متغیر را با هر عدد دیگری عوض کنید. در واقع، اپراتورهای افزایش و کاهش تنها می‌توانستند ۱ واحد مقدار متغییر را افزایش یا کاهش دهند اما این اپراتورها می‌توانند مقدار متغیر را به هر عددی تغییر دهند.

در مثال زیر، متغیر i به میزان ۵ واحد افزایش داشته، متغیر j به میزان ۳ واحد کاهش داشته، k در عدد 10 ضرب شده و در خط پنجم هم l تقسیم بر 2 شده است. به شیوهٔ نوشتن کدها دقت کنید؛ علامت‌های +، -، *، /  قبل از علامت = قرار گرفته‌اند:

/* Shorthand */
i+=5;
j-=3;
k*=10;
l/=2;
 
/* Longhand */
i=i+5;
j=j-3;
k=k*10;
l=l/2;

4. مشخص‌کردن موقعیت کاراکترها
متد ()chartAt یکی از متدهای کار بر روی استرینگ‌ها است که بسیار مورد استفاده قرار می‌گیرد و موقعیت کاراکترهای قرار گرفته در یک استرینگ را نشان می‌دهد (مثلاً پنجمین کاراکتر یک استرینگ را نشان می‌دهد). به‌جای استفاده از این متد، از شورت‌هندها می‌توانید استفاده کنید بدین صورت که موقعیت کاراکتر مورد نظر را در داخل یک [ ]، پس از استرینگ قرار دهید.

دقت کنید که متد ()chartAt، کاراکترهای یک استرینگ را از عدد ۰ موقعیت‌بندی می‌کند؛ به عبارت دیگر، مثلاً اگر شما کاراکتر پنجم یک استرینگ را می‌خواهید بیرون بکشید، باید داخل این متد عدد 4 را نشان دهید چراکه این متد، شمارش کاراکترها را از صفر شروع می‌کند. در مثال زیر، [mySting[4، پنجمین کاراکتر استرینگ یعنی «y» را نشان می‌دهد:

var myString = "Happy birthday";
 
/* Shorthand */
myString[4];
 
/* Longhand */
myString.charAt(4);

5. ایجاد چندین متغیر به طور هم‌زمان
اگر می‌خواهید چندین متغیر به طور هم‌زمان ایجاد کنید، مجبور نیستید آن‌ها را یکی پس از دیگری تایپ کنید بلکه می‌توانید تنها یک بار Keyword یا کلمۀ کلیدی var را استفاده کنید و سپس متغیرهایی که می‌خواهید ایجاد کنید را تایپ کنید و با کاما از هم جدا سازید. با این شورت‌هند، می‌توانید هم متغیرهای بدون مقدار اولیه و هم متغیرهایی که مقدار دارند را ایجاد کنید:

/* Shorthand */
var i, j=5, k="Good morning", l, m=false;
 
/* Longhand */
var i;
var j=5;
var k="Good morning";
var l;
var m=false;

6. ایجاد چندین آرایه به طور هم‌زمان
ایجاد یک آرایه در جاوااسکریپت بسیار ساده است؛ برای مثال با دستور ["var maArray= ["apple", "pear", "orange می‌توان یک آرایه را با ۳ عضو به سادگی ایجاد کرد. با این‌ حال، ایجاد یک آرایهٔ به اصطلاح Associative (انجمنی) کمی پیچیده است. در این نوع آرایه‌ها نه تنها باید مقدار متغیر را تعریف کنید، بلکه باید Keyها (کلیدها) را هم تعریف کنید (در این نمونه کلیدها برابر با 0، 1، 2، 3 و ... هستند.)

یک آرایۀ Associative یک جفت Key-Value (کلید-مقدار) دارد؛ در روش طولانی یا معمولی، شما یک آرایه را ایجاد کرده سپس اِلمان‌ها را یکی پس از دیگری اضافه می‌کنید اما در شورت‌هند زیر، به طور هم‌زمان هم می‌توانید آرایه را ایجاد کنید و هم اِلمان‌هایی را به آن‌ اضافه کنید. در مثال زیر، آرایه‌ای تحت عنوان myArray داریم که مقادیر آن عبارتند از محل تولد افراد مشهور (که در اینجا Key محسوب می‌شوند):

/* Shorthand */
var myArray  = {
  "Grace Kelly": "Philadelphia",
  "Clint Eastwood": "San Francisco",
  "Humphrey Bogart": "New York City",
  "Sophia Loren": "Rome",
  "Ingrid Bergman": "Stockholm"
}
 
/* Longhand */
var myArray = new Array();
myArray["Grace Kelly"] = "Philadelphia";
myArray["Clint Eastwood"] = "San Francisco";
myArray["Humphrey Bogart"] = "New York City";
myArray["Sophia Loren"] = "Rome";
myArray["Ingrid Bergman"] = "Stockholm";

7. ایجاد یک Object
ایجاد آبجکت‌ها مشابه ساخت آرایه‌های Associative است اما با این‌حال در اینجا، هیچ‌گونه Key-Valueیی تعریف نمی‌شود بلکه Property و Value برای یک آبجکت تعریف می‌شود که باید آن‌ها را درون { } قرار دهید.

تنها تفاوت سینتکسی در شورت‌هند اینجا این است که پراپرتی‌های آبجکت‌ها داخل کوتیشن قرار نمی‌گیرند. در مثال زیر، placeOfBirth ،age ،name و wasJamesBond همگی پراپرتی محسوب می‌شوند:

/* Shorthand */
var myObj = { name: "Sean Connery", placeOfBirth: "Edinburgh",
age: 86, wasJamesBond: true };
 
/* Longhand */
var myObj = new Object();
myObj.name = "Sean Connery";
myObj.placeOfBirth = "Edinburgh";
myObj.age = 86;
myObj.wasJamesBond = true;

8. استفاده از دستورات شرطی
اپراتورهای شرطی به طور مداوم به عنوان میانبر برای دستور if-else استفاده می‌شود که شامل 3 بخش هستند:
- شرط
- اتفاقی که بعد از اینکه شرط برقرار بود می‌افتد (if)
ـ اتفاقی که بعد از اینکه شرط برقرار نبود می‌افتد (else)

در مثال زیر، یک پیام ساده داخل متغیر message به افرادی که می‌خواهند وارد باشگاه شوند فرستاده می‌شود. با استفاده از فرم شورت‌هند، تنها یک خط کد برای اعمال ارزیابی لازم است:

var age = 17;
 
/* Shorthand */
var message = ' ';
message = age >= 18 ? "Allowed" : "Denied";
 
/* Longhand */
if( age >= 18) {
  var message = "Allowed";
} else {
  var message = "Denied";
}

در این کد، گفته شده که اگر سن بالاتر از 18 بود، پیام Allowed نشان داده شود، در غیر این‌صورت پیام Denied به نمایش در بیاید (یعنی اگر سن بالای 18 بود می‌توانند وارد باشگاه شوند و اگر زیر 18 سال بود نمی‌تواند وارد باشگاه شوند).

اگر می‌خواهید کد را امتحان کنید، آن‌را در کنسول جاوااسکریپت مرورگر کپی کنید (در بیشتر مرورگرها با F12 کنسول به نمایش در می‌آید) و سپس مقدار متغیر age را برای چندین بار تغییر دهید و نتایج را مشاهده کنید.

9. بررسی وجود یک متغیر
به طور مرتب اتفاق می‌افتد که شما نیاز دارید چک کنید که آیا یک متغیر وجود دارد یا خیر. شورت‌هندی وجود دارد که به شما برای این کار با کدهای کمتری کمک می‌کند. دستور شرطی ( if( myVar صرفاً چک نمی‌کند تا ببیند که آیا مقدار متغیر myVar برابر با False است یا خیر، بلکه پارامترهای دیگری را نیز بررسی می‌کند. به عبارت دیگر، این دستور شرطی چک می‌کند ببیند که آیا متغیر مد نظر undefined ،empty ،null یا false نباشد:

var myVar = 99;
 
/* Shorthand */
if( myVar ) {
  console.log("The myVar variable is defined AND it's not empty AND not null AND not false.");
}
 
/* Longhand */
if( typeof myVar !== "undefined" && myVar !==  "" && myVar !== null
&& myVar !== 0 && myVar !== false  ) {
  console.log("The myVar variable is defined AND it's not empty AND not null AND not false.");
}

این کد نشان می‌دهد که اگر متغیر شما undefined، empty ،null ،false و یا ۰ نبود، یعنی متغیر وجود دارد. 

10. بررسی عدم وجود یک متغیر
در بالا به شورت‌هندی اشاره شد که وجود یک متغیر را بررسی می‌کرد. در بسیاری از زبان‌های برنامه‌نویسی من‌جمله جاوااسکریپت، علامت ! اصطلاحاً Logical Not Operator نامیده می‌شود. بنابراین با دستور ( if( !myVar می‌توانید بررسی کنید ببینید که آیا متغیر مد نظر undefined ،empty ،null یا false است:

var myVar;
 
/* Shorthand */
if( !myVar ) {
  console.warn("The myVar variable is undefined (OR) empty (OR) null (OR) false.");
} 

/* Longhand */
if( typeof myVar === "undefined" || myVar === "" || myVar === null
|| myVar === 0 || myVar === false  ) {
  console.warn("The myVar variable is undefined (OR) empty (OR) null (OR) false.");
}

کد بالا نشان می‌دهد که متغیرمان undefined ،empty ،null یا false است.

حال نوبت به نظرات شما می‌رسد. به غیر از راه‌های کوتاه‌نویسی فوق‌الذکر، چه روش‌های دیگری برای خلاصه‌نویسی کدهای جاوااسکریپت می‌شناسید؟ نظرات و دیدگاه‌های خود را با ما و سایر کاربران سکان آکادمی به اشتراک بگذارید.

منبع


سحر شاکر