اشتباهات رایج در جاوا اسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
اشیاء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

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

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

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

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

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

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

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

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

1 var x = 0;
2 if (x = 0)
در مقداردهی همیشه مقدار مقداردهی شده برمی‌گردد.

مقایسهٔ اشتباه

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

1 var x = 10;
2 var y = "10";
3 if (x == y)

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

1 var x = 10;
2 var y = "10";
3 if (x === y)

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

1 var x = 10;
2 switch(x) {
3   case 10: alert("Hello");
4 }

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

1 var x = 10;
2 switch(x) {
3   case "10": alert("Hello");
4 }

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

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

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

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

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

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

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

1 var x = 10;
2 var y = 5;
3 var z = x + y;           // the result in z is 15
4 
5 var x = 10;
6 var y = "5";
7 var z = x + y;           // the result in z is "105"

ادراک اشتباه اعداد اعشاری (به انگلیسی: Floats)

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

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

1 var x = 0.1;
2 var y = 0.2;
3 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

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

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

مثال ۱

1 var x =
2 "Hello World!";

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

مثال ۲

1 var x = "Hello
2 World!";

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

مثال ۳

1 var x = "Hello \
2 World!";

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

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

1 if (x == 19);
2 {
3   // code block 
4 }

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

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

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

مثال ۱

1 function myFunction(a) {
2   var power = 10 
3   return a * power
4 }

مثال ۲

1 function myFunction(a) {
2   var power = 10;
3   return a * power;
4 }

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

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

مثال ۳

1 function myFunction(a) {
2   var
3   power = 10; 
4   return a * power;
5 }

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

مثال ۴

1 function myFunction(a) {
2   var
3   power = 10; 
4   return
5   a * power;
6 }

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

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

مثال ۵

1 function myFunction(a) {
2   var
3   power = 10; 
4   return;
5   a * power;
6 }

توضیحات

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

var

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

power = 10;

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

return

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

return;

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

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

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

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

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

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

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

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

مثال

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

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

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

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

مثال

1 var person = [];
2 person["firstName"] = "John";
3 person["lastName"] = "Doe";
4 person["age"] = 46;
5 var x = person.length;      // person.length will return 0
6 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 یا ویرگول , را نمی‌دهد:

JSON

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

JSON

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)

منابع آموزشی