اشتباهات رایج (Mistakes)
اینجا خطاهای رایج جاوااسکریپت را ساده می گوییم. هدف، جلوگیری از باگ های مدرسه ای است. با مثال های کوتاه و روشن جلو می رویم.
به جای مقایسه، انتساب (Assignment) زدی
اپراتور انتساب = مقدار می دهد. اپراتور مقایسه == یا === مقایسه می کند. اشتباه رایج است.
let x = 0;
if (x == 10) {
// false: x برابر 10 نیست
}
let x = 0;
if (x = 10) {
// true: چون 10 مقداردهی شد و truthy است
}
let x = 0;
if (x = 0) {
// false: چون 0 مقداردهی شد و falsy است
}
مقایسه سست (==) و سخت (===)
مقایسه سست نوع را تبدیل می کند. مقایسه سخت نوع را هم می سنجد. در switch مقایسه سخت است.
let x = 10;
let y = "10";
if (x == y) {
// true: نوع تبدیل شد
}
let x = 10;
let y = "10";
if (x === y) {
// false: نوع ها متفاوت است
}
let x = 10;
switch (x) {
case 10:
alert("Hello");
break;
}
let x = 10;
switch (x) {
case "10":
alert("Hello");
break;
}
// اجرا نمی شود چون نوع ها یکی نیست
جمع عدد با چسباندن رشته قاطی شد
اپراتور + هم جمع عدد است هم چسباندن رشته. نوع ها نتیجه را عوض می کنند.
let x = 10;
x = 10 + 5;
// اکنون 15 است
let y = 10;
y += "5";
// اکنون "105" است
let x = 10;
let y = 5;
let z = x + y;
// 15
let a = 10;
let b = "5";
let c = a + b;
// "105"
اعداد اعشاری دقیق نیستند
همه اعداد، اعشاری 64بیتی اند. 0.1 + 0.2 دقیقاً 0.3 نمی شود.
let x = 0.1;
let y = 0.2;
let z = x + y;
// نتیجه دقیقاً 0.3 نیست
let z = (x * 10 + y * 10) / 10;
// نتیجه 0.3 می شود
شکستن رشته ها در خط بد
شکستن عبارت مجاز است؛ اما وسط رشته نه. از بک اسلش استفاده کن.
let x =
"Hello World!";
let x = "Hello
World!";
// خطا: رشته شکسته شد
let x = "Hello \
World!";
// درست: با بک اسلش
نقطه ویرگول نابجا
اگر بعد از if سمی کالن بگذاری، بلوک همیشه اجرا می شود.
if (x == 19);
{
// این بلوک همیشه اجرا می شود
}
شکستن return در دو خط
خودکار؛ انتهای خط را تمام شده می بیند. return را نشکن.
function myFunction(a) {
let
power = 10;
return a * power;
}
function myFunction(a) {
let power = 10;
return
a * power;
}
// برمی گرداند undefined
ایندکس نام دار برای آرایه ها؟ نه!
آرایه، اندیس عددی دارد. نام دار یعنی شیء. قاطی نکن.
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
person[0];
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length;
person[0];
// حالا مثل شیء شده و length خراب است
ویرگول انتهایی در تعریف ها
در برخی مرورگرهای قدیمی مشکل ساز است. در JSON هم ممنوع است.
const person = { firstName: "John", lastName: "Doe", age: 46 };
const points = [40, 100, 1, 5, 25, 10];
undefined با null یکی نیست
برای وجود داشتن شیء، اول undefined را چک کن؛ سپس null.
if (typeof myObj === "undefined") {
// شیء وجود ندارد
}
if (typeof myObj !== "undefined" && myObj !== null) {
// ایمن: هم undefined نیست هم null نیست
}
گام های عملی
===را به جای==بزن.- متغیر را قبل از استفاده بررسی کن.
- return را در یک خط بنویس.
جمع بندی سریع
- انتساب را با مقایسه قاطی نکن.
- اعداد اعشاری دقیق نیستند.
- آرایه نام دار نیست؛ شیء بساز.
- سمی کالن نابجا نگذار.
- JSON ویرگول آخر ندارد.
برای ادامه، بهترین شیوه ها و بهینه سازی عملکرد را ببین.