اشتباهات رایج

از موتو کد، دانشنامهٔ برنامه‌نویسی

این فصل به برخی از اشتباهات رایج در برنامه‌نویسی جاوا اسکریپت اشاره می‌کند. [۱]

استفاده از عملگر مقداردهی به صورت اتفاقی[ویرایش | ویرایش]

برنامه‌های جاوا اسکریپت ممکن است اگر برنامه‌نویس به صورت اتفاقی عملگر مقداردهی (=) را به جای عملگر مقایسه (==) در جملات شرطی یا همان if استفاده کند موجب بروز نتایج ناخواسته شود.

جمله شرطی زیر if مقدار false را (همان‌طور که انتظار می‌رفت) برمی‌گرداند زیرا که مقدار متغیر x با ۱۰ برابر نیست:

var x = 0;
if (x == 10)


مشاهدهٔ نتیجه


جمله شرطی if زیر مقدار true را (شاید انتظارش را نداشتید) برمی‌گرداند، زیرا عدد ۱۰ برابر با True است:

var x = 0;
if (x = 10)


مشاهدهٔ نتیجه


جمله شرطی زیر if مقدار false (شاید انتظارش را نداشتید) را برمی‌گرداند، زیرا که عدد صفر برابر با false است:

var x = 0;
if (x = 0)


مشاهدهٔ نتیجه


در مقداردهی همیشه مقدار مقداردهی شده برمی‌گردد.

مقایسهٔ اشتباه[ویرایش | ویرایش]

در مقایسه‌های عادی نوع داده‌ها مهم نیست. جمله شرطی if if زیر مقدار true را برمی‌گرداند:

var x = 10;
var y = "10";
if (x == y)


مشاهدهٔ نتیجه


در مقایسه‌های سخت گیرانه یا Strict نوع داده در مقایسه مهم است. جمله شرطی if زیر مقدار false را برمی‌گرداند:

var x = 10;
var y = "10";
if (x === y)


مشاهدهٔ نتیجه


این یک اشتباه رایج است که در دستور switch از مقایسه سخت گیرانه یا strict استفاده نمی‌کنند:

دستور case switch زیر یک پیغام alert را نمایان خواهد کرد:

var x = 10;
switch(x) {
  case 10: alert("Hello");
}


مشاهدهٔ نتیجه


دستور case switch زیر یک پیغام alert را نمایان نخواهد کرد:

var x = 10;
switch(x) {
  case "10": alert("Hello");
}


مشاهدهٔ نتیجه


فراموش کردن تفاوت بین جمع بستن و الحاق رشته های متنی[ویرایش | ویرایش]

جمع بستن برای جمع کردن اعداد استفاده می‌شود.

الحاق درمورد رشته های متنی است.

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

به همین دلیل، جمع بستن یک عدد با عدد دیگر موجب ایجاد نتیجه ای متفاوت از جمع بستن یک عدد با یک رشته متنی می‌شود:

var x = 10 + 5;          // the result in x is 15
var x = 10 + "5";        // the result in x is "105"


مشاهدهٔ نتیجه


زمانی که دو متغیر را با یک دیگر جمع می‌بندید، حدس زدن نتیجه کمی مشکل خواهد بود:

var x = 10;
var y = 5;
var z = x + y;           // the result in z is 15

var x = 10;
var y = "5";
var z = x + y;           // the result in z is "105"


مشاهدهٔ نتیجه


ادراک اشتباه اعداد اعشاری (Floats)[ویرایش | ویرایش]

تمامی اعداد در جاوا اسکریپت به صورت اعدادهای اعشاری ۶۴ بیت (float) ذخیره می‌گردند.

تمامی زبان‌های برنامه‌نویسی که شامل جاوا اسکریپت هم می‌شود، با مقادیر اعشاری کمی مشکل دارند:

var x = 0.1;
var y = 0.2;
var z = x + y            // the result in z will not be 0.3


مشاهدهٔ نتیجه


برای حل این مشکل بهتر است که از ضرب و تقسیم استفاده کنید:

مثال[ویرایش | ویرایش]

var z = (x * 10 + y * 10) / 10;       // z will be 0.3


مشاهدهٔ نتیجه


ایجاد فاصله در بین رشته های متنی در جاوا اسکریپت[ویرایش | ویرایش]

جاوا اسکریپت این اجازه را به شما می‌دهد که یک عبارت را در دو خط بنویسید:

مثال ۱[ویرایش | ویرایش]

var x =
"Hello World!";


مشاهدهٔ نتیجه


اما ایجاد فاصله در وسط یک رشته متنی، کار نخواهد کرد:

مثال ۲[ویرایش | ویرایش]

var x = "Hello
World!";


مشاهدهٔ نتیجه


اگر شما می‌خواهید درون یک رشته بین خطوط فاصله ایجاد کنید می‌بایست از "بک اسلش \" استفاده کنید:

مثال ۳[ویرایش | ویرایش]

var x = "Hello \
World!";


مشاهدهٔ نتیجه


جایگذاری اشتباه سمیکالن ;[ویرایش | ویرایش]

به خاطر جای‌گذاری اشتباه نقطه ویرگول ;، این بلاک از کد بدون توجه به مقدار متغیر x اجرا خواهد شد:

if (x == 19);
{
  // code block 
}


مشاهدهٔ نتیجه


ایجاد فاصله در هنگام استفاده از دستور Return[ویرایش | ویرایش]

این ویژگی پیشفرض جاوا اسکریپت است که به صورت خودکار یک عبارت را در انتهای یک خط می‌بندد.

به خاطر این امر، دو مثال زیر نتیجه‌ای یکسان خواهند داشت:

مثال ۱[ویرایش | ویرایش]

function myFunction(a) {
  var power = 10 
  return a * power
}


مشاهدهٔ نتیجه


مثال ۲[ویرایش | ویرایش]

function myFunction(a) {
  var power = 10;
  return a * power;
}


مشاهدهٔ نتیجه


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

به این خاطر مثال شماره سه نیز نتیجه ای مشابه خواهد داشت:

مثال ۳[ویرایش | ویرایش]

function myFunction(a) {
  var
  power = 10; 
  return a * power;
}


مشاهدهٔ نتیجه


اما اگر در دستور Return شما از فاصله استفاده کنید، چه اتفاقی خواهد افتاد:

مثال ۴[ویرایش | ویرایش]

function myFunction(a) {
  var
  power = 10; 
  return
  a * power;
}


مشاهدهٔ نتیجه


تابع مقدار undefined را برمی‌گرداند!

چرا؟ زیرا جاوا اسکریپت فکر می‌کند که منظور شما این بوده‌است:

مثال ۵[ویرایش | ویرایش]

function myFunction(a) {
  var
  power = 10; 
  return;
  a * power;
}


مشاهدهٔ نتیجه


توضیحات[ویرایش | ویرایش]

اگر یک عبارت همانند عبارت زیر ناقص باشد:

var

جاوا اسکریپت سعی می‌کند که با خواندن خط بعدی عبارت را کامل کند:

power = 10;

اما از آنجایی که عبارت زیر عبارت کاملی است:

return

جاوا اسکریپت به صورت خودکار و به شکل زیر این عبارت را می‌بندد:

return;

این اتفاق می‌افتد چرا که بستن (به پایان بردن) عبارات با نقطه ویرگول ; یا سمیکالن در جاوا اسکریپت اختیاری است.

جاوا اسکریپت عبارت Return را در انتهای خط می‌بندد زیرا که این عبارت، یک عبارت کامل است.

هرگز در دستور Return، فاصله ایجاد نکنید.

دسترسی به عناصر آرایه با اندیس های نام گذاری شده[ویرایش | ویرایش]

بسیاری از زبانهای برنامه‌نویسی از اندیس‌های نام گذاری شده برای آرایه‌ها پشتیبانی می‌کنند.

آرایه‌ها با اندیس‌های نامگذاری شده آرایه‌های associative (و یا هش hash) نامیده می‌شوند.

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

در جاوا اسکریپت، آرایه ها از اندیس های عددی استفاده می‌کنند:

مثال[ویرایش | ویرایش]

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;       // person.length will return 3
var y = person[0];           // person[0] will return "John"


مشاهدهٔ نتیجه


در جاوا اسکریپت، اشیاء (objects) از اندیس های نامگذاری شده استفاده می‌کنند.

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

بعد از این تبدیل خودکار، متدهای آرایه‌ها و ویژگی‌های آنها ممکن است مقدار undefined یا نتایج اشتباه تولید کنند:

مثال[ویرایش | ویرایش]

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;      // person.length will return 0
var y = person[0];          // person[0] will return undefined


مشاهدهٔ نتیجه


به پایان بردن تعریفات با ویرگول (Comma)[ویرایش | ویرایش]

استفاده از ویرگول , (Comma) در هنگام تعریف شیء یا آرایه در ECMAScript 5 مجاز است.

مثال شیء:[ویرایش | ویرایش]

person = {firstName:"John", lastName:"Doe", age:46,}

مثال آرایه:[ویرایش | ویرایش]

points = [40, 100, 1, 5, 25, 10,];

هشدار !!!

مرورگر اینترنت اکسپلور نسخه ۸ از هم فرو می‌پاشد یا اصطلاحاً Crash می‌کند.

JSON اجازه استفاده از comma یا ویرگول , را نمی‌دهد:
person = {"firstName":"John", "lastName":"Doe", "age":46}
points = [40, 100, 1, 5, 25, 10];

مقدار undefined برابر با مقدار Null نیست[ویرایش | ویرایش]

اشیاء، متغیرها و ویژگی‌ها و متدها در جاوا اسکریپت می‌توانند مقدار undefined داشته باشد.

به علاوه، اشیاء خالی در جاوا اسکریپت نیز مقدار null دارند.

این امر تست کردن اینکه یک شیء خالی است یا نه را سخت می‌کند.

شما می‌توانید وجود یک شیء را با تست کردن نوع آن که برابر با مقدار undefined است متوجه شوید:

مثال[ویرایش | ویرایش]

if (typeof myObj === "undefined")


مشاهدهٔ نتیجه


اما شما نمی‌توانید که null بودن یک شیء را بررسی کنید، چرا که این امر موجب بروز خطا می‌شود در صورتی شیء برابر با undefined باشد.

شیوه نادرست:[ویرایش | ویرایش]

if (myObj === null)

برای حل این مشکل می‌بایست شما هم null نبودن و هم undefined نبودن یک شیء را بررسی کنید.

اما این کار نیز همچنان موجب بروز خطا می‌شود:

شیوه نادرست:[ویرایش | ویرایش]

if (myObj !== null && typeof myObj !== "undefined")

به خاطر این موضوع، شما می‌بایست undefined بودن یک شیء را قبل از بررسی null بودن آن شیء، بررسی کنید:

شیوه درست:[ویرایش | ویرایش]

if (typeof myObj !== "undefined" && myObj !== null)


مشاهدهٔ نتیجه


منابع آموزشی[ویرایش]