آموزش ترفندهایی به منظور خلاصه‌نویسی کدهای JavaScript

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

اعداد دسیمال (ده‌‌دهی)
اگر به طور مرتب با اعداد دِسیمال بزرگ کار می‌کنید، این شورت‌هند می‌تواند یک نعمت به حساب بیاید چرا که دیگر مجبور نیستید تمام صفرها را تایپ کنید بلکه کافی است علامت e را جایگزین کنید. به‌ عنوان مثال، 1e8 معادل با افزودن هشت صفر پس از رقم یک است (100000000) و عددی که بعد از حرف e می‌آیند نشان‌دهندهٔ صفرهایی هستند که باید جلوی رقم قبل از e قرار گیرند. به‌ عنوان مثالی دیگر، 16e4 شورت‌هند عدد 160000 محسوب می‌شود؛ به عبارتی، این شورت‌هَند نشان می‌دهد که بعد از عدد 16 می‌بایست چهار صفر قرار گیرد:

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

افزایش و کاهش مقادیر متغیرها
شورت‌هَند Increment از دو علامت جمع (++) تشکیل شده و بدین معنا است که مقدار متغیر یک واحد افزایش می‌یابد و به طور مشابه، شورت‌هند Decrement از دو علامت مفنی (--) تشکیل شده است و به این معنی است که مقدار متغیر یک واحد کاهش می‌یابد. این شورت‌هَندها تنها برای داده‌هایی از جنس اعداد قابل‌استفاده بوده و بر روی دیگر داده‌هایی همچون استرینگ‌ها قابل‌استفاده نیستند و نیاز به توضیح نیست که این دو شورت‌هَند نقشی کلیدی در حلقه‌ها ایفا می‌کنند و بسیار از آن‌ها استفاده می‌شود:

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

انجام چهار عمل اصلی (جمع، تفریق، ضرب و تقسیم)
این شورت‌هَندها هر کدام مخصوص چهار اپراتور اصلی ریاضیاتی است که عبارتند از جمع، تفریق، ضرب و تقسیم. چنین اپراتورهایی مشابه اپراتورهای Increment (افزایش) و Decrement (کاهش) عمل می‌کنند با این تفاوت که می‌توانید مقدار متغیر را با هر عدد دیگری عوض کنید. در واقع، اپراتورهای افزایش و کاهش تنها می‌توانستند یک واحد مقدار متغیر را افزایش یا کاهش دهند اما این اپراتورها می‌توانند مقدار متغیر را به هر عددی تغییر دهند. در مثال زیر، متغیر 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;

مشخص‌ کردن موقعیت کاراکترها
()chartAt یکی از متدهای کار بر روی استرینگ‌ها است که بسیار مورد استفاده قرار می‌گیرد و موقعیت کاراکترهای قرار گرفته در یک استرینگ را نشان می‌دهد (مثلاً پنجمین کاراکتر یک استرینگ را نشان می‌دهد.) به‌ جای استفاده از این متد، از شورت‌هَندها می‌توانید استفاده کنید بدین صورت که موقعیت کاراکتر مورد نظر را در داخل یک جفت [ ] پس از استرینگ قرار دهید. همچنین دقت داشته باشید که متد ()chartAt کاراکترهای یک استرینگ را از عدد صفر شماره‌گذاری می‌کند به طوری که مثلاً اگر کاراکتر پنجم یک استرینگ را می‌خواهید بیرون بکشید، باید داخل این متد عدد 4 را وارد کنید چرا که این متد شمارش کاراکترها را از 0 شروع می‌کند. در مثال زیر، [mySting[4، پنجمین کاراکتر استرینگ (یعنی حرف y) را نشان می‌دهد:

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

ایجاد چندین متغیر به طور هم‌زمان
اگر می‌خواهید چندین متغیر به طور هم‌زمان ایجاد کنید، مجبور نیستید آن‌ها را یکی پس از دیگری تایپ کنید بلکه می‌توانید تنها یک بار کیورد یا کلمۀ کلیدی 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;

ایجاد چندین آرایه به طور هم‌زمان
ایجاد یک آرایه در جاوااسکریپت بسیار ساده است به طوری که برای مثال با دستور ["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";

ایجاد یک آبجکت
ایجاد آبجکت‌ها مشابه ساخت آرایه‌های 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;

استفاده از دستورات شرطی
اپراتورهای شرطی به طور مداوم به عنوان میانبر برای دستور if-else استفاده می‌شود که شامل سه بخش هستند:

- شرط
- اتفاقی که بعد از اینکه شرط برقرار بود می‌افتد (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 را برای چندین بار تغییر دهید و نتایج را مشاهده کنید.

بررسی وجود یک متغیر
به کرات اتفاق می‌افتد که نیاز است تا چک کنید که آیا یک متغیر وجود دارد یا خیر که برای این منظور شورت‌هَندی وجود دارد که به شما برای این کار با کدهای کمتری کمک می‌کند. دستور شرطی (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 و یا ۰ نبود، یعنی متغیر وجود دارد. 

بررسی عدم وجود یک متغیر
در بالا به شورت‌هَندی اشاره شد که وجود یک متغیر را بررسی می‌کرد. در بسیاری از زبان‌های برنامه‌نویسی من‌جمله جاوااسکریپت علامت ! اصطلاحاً Logical Not Operator نامیده می‌شود:

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.");
}

همان‌طور که ملاحظه می‌شود، با دستور (if(!myVar می‌توانید بررسی کنید ببینید که آیا متغیر مد نظر undefined ،empty ،null یا false است یا خیر.