JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت

از ویکی کد
پرش به ناوبری پرش به جستجو
دورهٔ آموزشی جاوااسکریپت
Javascript.jpg
Tutorial
۱آموزش جاوااسکریپت
۲مقدمه‌ای بر جاوااسکریپت
۳JavaScript:قوانین و اصول اولیه زبان جاوااسکریپت
۴JavaScript:خروجی جاوااسکریپت
۵JavaScript:عبارت‌ها در جاوااسکریپت
۶JavaScript:شیوهٔ نوشتن (Syntax) عبارات یا دستورات در جاوااسکریپت
۷JavaScript:نظرات یا کامنت‌ها (Comments) در جاوااسکریپت
۸JavaScript:متغیرها در جاوااسکریپت
۹JavaScript:عملگرهای جاوااسکریپت
۱۰JavaScript:عملگرهای ریاضی در جاوااسکریپت
۱۱JavaScript:عملگرهای مقداردهی در جاوااسکریپت
۱۲JavaScript:انواع داده‌ها در جاوااسکریپت
۱۳JavaScript:توابع در جاوااسکریپت
۱۴JavaScript:اشیاء (object) در جاوااسکریپت
۱۵JavaScript:رویدادها در جاوااسکریپت
۱۶JavaScript:رشته‌های متنی (string) در جاوااسکریپت
۱۷JavaScript:متدهای نوع داده متنی یا رشته‌ای در جاوااسکریپت
۱۸JavaScript:اعداد در جاوااسکریپت
۱۹JavaScript:متدهای داده‌های عددی در جاوااسکریپت
۲۰JavaScript:آرایه‌ها در جاوااسکریپت
۲۱JavaScript:متدهای آرایه در جاوااسکریپت
۲۲JavaScript:مرتب‌سازی آرایه‌ها در جاوااسکریپت
۲۳JavaScript:متدهای پیمایش آرایه در جاوااسکریپت
۲۴JavaScript:اشیاء تاریخ و زمان در جاوااسکریپت
۲۵JavaScript:فرمت‌های تاریخ و زمان در جاوااسکریپت
۲۶JavaScript:متدهای دریافت تاریخ و زمان در جاوااسکریپت
۲۷JavaScript:متدهای تنظیم زمان و تاریخ در جاوااسکریپت
۲۸JavaScript:شی ریاضی (Math) در جاوااسکریپت
۲۹JavaScript:ایجاد عدد تصادفی در جاوااسکریپت
۳۰JavaScript:مقادیر بولین (Booleans) در جاوااسکریپت
۳۱JavaScript:عملگرهای منطقی و مقایسه‌ای در جاوااسکریپت
۳۲JavaScript:ساختار if else و else if در جاوااسکریپت
۳۳JavaScript:تکه کد Switch در جاوا اسکریپت
۳۴JavaScript:حلقه For در جاوااسکریپت
۳۵JavaScript:حلقه While در جاوااسکریپت
۳۶JavaScript:کلمات کلیدی Break و Continue در جاوااسکریپت
۳۷JavaScript:تبدیل نوع داده‌ها در جاوااسکریپت
۳۸JavaScript:عملیات‌های بیتی در جاوااسکریپت
۳۹JavaScript:عبارات با قاعده در جاوااسکریپت
۴۰JavaScript:خطاها در جاوااسکریپت - رخ دادن خطا و رفع آن
۴۱JavaScript:Scope در جاوااسکریپت
۴۲JavaScript:Hoisting یا جا به جایی کدها در جاوااسکریپت
۴۳JavaScript:استفاده از مد یا حالت سخت‌گیرانه (use strict) در جاوااسکریپت
۴۴JavaScript:کلمه کلیدی This در جاوااسکریپت
۴۵JavaScript:کلمه کلیدی Let در جاوااسکریپت
۴۶JavaScript:ثابت‌ها در جاوااسکریپت
۴۷JavaScript:تعریف توابع به صورت پیکان
۴۸JavaScript:کلاس‌ها در جاوااسکریپت
۴۹JavaScript:اشکال‌زدایی در جاوااسکریپت
۵۰JavaScript:راهنمای استایل و استانداردهای کدنویسی در جاوااسکریپت
۵۱JavaScript:بهترین تمرینات جاوااسکریپت
۵۲JavaScript:اشتباهات رایج در برنامه‌نویسی جاوااسکریپت
۵۳JavaScript:کارایی در جاوااسکریپت
۵۴JavaScript:کلمات رزرو شده در جاوااسکریپت
۵۵JavaScript:ورژن‌های جاوااسکریپت
۵۶JavaScript:ECMAScript 5 - JavaScript 5
۵۷JavaScript:ECMAScript 6 - ECMAScript 2015
۵۸JavaScript:جیسون (JSON) در جاوااسکریپت
---

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

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

برنامه‌های جاوااسکریپت ممکن است اگر برنامه‌نویس به صورت اتفاقی عملگر مقداردهی(=)را به جای عملگر مقایسه(==)در جملات شرطی یا همان 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 را در انتهای خط می‌بندد زیرا که این عبارت، یک عبارت کامل است.


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

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

آرایه‌ها با اندیس‌های نامگذاری شده آرایه‌های 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,];


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)

منابع آموزشی