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

آیا فقط انگشتان پای خود را در اقیانوس جاوا اسکریپت فرو میکنید؟ خود را برای سفرهای غیرمنتظره بر فریبنده ترین سنگریزه ها آماده کنید.
بازی پنهان و جستجوی “این”
“این” جاوا اسکریپت کمی آفتاب پرست است که اغلب به عنوان “دکتر جکیل و آقای هاید” جاوا اسکریپت شناخته می شود. هنگامی که “this” خارج از یک شی استفاده می شود، به شی جهانی اشاره دارد. اما در یک متد، “this” به شیئی اشاره دارد که متد را فراخوانی می کند. اگر مراقب نباشید، می توانید خود را در حال انجام یک بازی بی پایان مخفی کاری با “این” بیابید.
راه اشتباه:
function car() {
this.speed = 100;
setTimeout(function() {
console.log(this.speed); // Output: undefined
}, 1000);
}
new car();
راه راست: از تابع پیکان استفاده کنید.
function car() {
this.speed = 100;
setTimeout(() => {
console.log(this.speed); // Output: 100
}, 1000);
}
new car();
بحران وجودی: تعریف نشده در مقابل صفر
آه، بحث قدیمی. آیا شما غایب هستید (تهی) یا فقط تعریف نشده است؟ در حالی که null یک مقدار اختصاص داده شده است که به معنای “بدون مقدار یا بدون شی” است، undefined به این معنی است که یک متغیر اعلام شده است اما هنوز مقداری به آن اختصاص داده نشده است. می توان گفت تهی در مورد پوچی آن فلسفی است، در حالی که تعریف نشده به طرز سعادتمندانه ای نادان است.
let emptyFridge = null; // You know it's empty
let myFridge; // Where did it go?
ساعت شلوغی: بارگیری اسکریپت ها قبل از شروع مهمانی DOM
آن مردی نباشید که قبل از میزبان در مهمانی حاضر می شود. بارگذاری اسکریپت ها قبل از بارگیری DOM مانند رفتن روی صحنه بدون اسکریپت است. بازیگران (عناصر HTML) هنوز برای شما آماده نیستند!
راه اشتباه:
<script src="myscript.js"></script>
<body>
<!-- Here be dragons...or maybe just HTML -->
</body>
بلاقاصله:
<body>
<!-- Here be dragons...or maybe just HTML -->
<script src="myscript.js"></script>
</body>
نام گذاری متغیرها: یک تراژیکمدی
جاده جهنم برنامه نویسی با متغیرهای بد نام هموار شده است. به خاطر داشته باشید: ‘x’، ‘temp’، ‘stuff’ نام های واقعی نیستند، آنها خط خطی های یک کدنویس آشفته هستند.
راه اشتباه:
let x = 10; // What does 'x' even mean?
بلاقاصله:
let numberOfApples = 10; // Oh, now it makes sense!
قسمت اضافی چمدان: بیانیه های اضافی دیگر
همیشه وسوسه انگیز است که آن جفت جوراب اضافی را “فقط در مورد” بسته بندی کنید. اما با عبارات دیگر، بیشتر همیشه خوشایندتر نیست. کدنویسی نباشید که وقتی یک روز آفتابی است، کولاک را جمع کنید.
راه اشتباه:
if (condition) {
return x;
} else {
return y;
}
بلاقاصله:
if (condition) {
return x;
}
return y;
دوقلوهای فریبنده: اپراتورهای واگذاری و برابری
عملگر تخصیص (=) فرزند مطیع است که مقداری را برای یک متغیر تعیین می کند. عملگر برابری (==) یک عملگر کنجکاوی است که بررسی می کند آیا دو مقدار برابر هستند یا خیر. اما مراقب دوقلوی شیطانی آنها (===) باشید که برابری و نوع داده را بررسی می کند! فریب شباهت خانوادگی آنها را نخورید.
let x = 10; // Assigns the value 10 to x
console.log(x == "10"); // Returns true
console.log(x === "10"); // Returns false, different datatypes
از سفر خود با جاوا اسکریپت لذت ببرید. و به یاد داشته باشید، همه ما روی همین سنگ ها لگد زده ایم!