تفاوت var، let و const در جاوااسکریپت
در زبان جاوااسکریپت، برای تعریف متغیرها از سه کلمه کلیدی var، let و const استفاده میشود. درک دقیق تفاوتهای این سه، یکی از مفاهیم بنیادین در برنامهنویسی مدرن جاوااسکریپت است. زیرا استفاده نادرست از آنها میتواند منجر به خطاهای ناخواسته و مشکلات نگهداری کد شود.
در این نوشته با استفاده از مثالهای عملی شکل کارکرد این سه کلمهی کلیدی را بررسی میکنیم تا به خوبی با آنها آشنا شوید و در کدنویسی جاوااسکریپت به درستی آنها را به کار بگیرید.
تفاوتهای مهم
برای شروع، به جدول زیر توجه کنید. مهمترین تفاوتهای این دستورات را مشاهده میکنید.
| ویژگی | var | let | const |
|---|---|---|---|
| محدوده (Scope) | تابعی (Function Scope) یا سراسری | بلوکی (Block Scope) | بلوکی (Block Scope) |
| بالا بردن (Hoisting) | بله (با مقدار اولیه undefined) | بله، اما دسترسی پیش از تعریف ممنوع (Temporal Dead Zone) | همانند let |
| تعریف مجدد | مجاز | ممنوع | ممنوع |
| تغییر مقدار | مجاز | مجاز | ممنوع (فقط مقدار اولیه) |
| نیاز به مقدار اولیه | اختیاری (در صورت عدم تخصیص: undefined) | اختیاری، اما پیش از استفاده باید تعریف شود | الزامی |
جزئیات کارکرد let، var و const
۱- var – روش قدیمی تعریف متغیر
var از نسخههای اولیه جاوااسکریپت وجود داشته و امروزه استفاده از آن توصیه نمیشود. محدوده آن تابعی است، یعنی متغیر تعریفشده با var در کل تابع (یا در سطح سراسری) قابل دسترسی است، حتی اگر داخل یک بلوک {} تعریف شده باشد.
|
1 2 3 4 5 6 7 |
function calcPrice() { console.log( price ); // undefined var price = 5000; // قیمت یک کیلو سیب price = 6000; // تغییر مقدار مجاز است } var city = "Tehran"; // متغیر سراسری |
استفاده از var این مشکل را دارد که در حلقهها، تمام تکرارها به یک متغیر مشترک دسترسی دارند و میتواند باعث خطا شود.
۲- let – تعریف متغیر قابل تغییر با محدوده بلوکی
let در استاندارد ES6 معرفی شد و برای متغیرهایی که مقدارشان ممکن است تغییر کند، مناسب است. محدوده آن بلوکی است و پیش از خط تعریف، دسترسی به آن خطای ReferenceError تولید میکند.
مثال:
|
1 2 3 4 5 6 7 8 9 10 |
let applePrice = 5000; if( true ) { let orangePrice = 3000; // فقط داخل این بلوک قابل دسترسی console.log( orangePrice ); // 3000 } console.log( applePrice ); // 5000 console.log( orangePrice ); // ReferenceError applePrice = 5500; // تغییر مقدار مجاز است |
رفتار در حلقهها
استفاده از let به جای var در حلقهها این مزیت را دارد که متغیر تعریف شده تنها در این ناحیه قابل استفاده است و بازنویسی محتوای آن باعث تغییر متغیرهای همنام بیرون از ناحیهی حلقه نمیشود. این روش میتواند خطاهای احتمالی را از بین ببرد.
|
1 2 3 |
for (let i = 0; i < 3; i++) { console.log(i); // 0، 1، 2 – هر تکرار متغیر مستقل دارد } |
۳- const – تعریف مقدار ثابت با محدوده بلوکی
const نیز مثل let محدوده بلوکی دارد، اما مقدار تخصیصیافته به آن قابل تغییر نیست. این کلمه کلیدی برای مقادیر ثابت که نباید تغییر کنند، بسیار مناسب است.
مثال:
|
1 2 3 4 5 |
const city = "تهران"; // city = "اصفهان"; // TypeError const bananaPrice = 2000; // bananaPrice = 2500; // TypeError |
نکته مهم در مورد آرایهها و اشیا
هنگامی که از const برای تعریف اشیا استفاده میکنید، تغییر کل شیء امکانپذیر نیست ولی همچنان میتوانید اعضای شیء را تغییر بدهید.
|
1 2 3 4 |
const shop = { name: "Tajrish", area: "Tehran East" }; shop.area = "Tehran North"; // مجاز – محتوای شیء قابل تغییر است shop = {}; // تغییر کل شیء به دلیل اشارهگر بودن ممنوع است |
نکات پیشرفته و خطاهای متداول
- برای
letوconst، حتی با وجود hoisting، دسترسی پیش از تعریف خطای ReferenceError میدهد:
|
1 2 |
console.log(x); // ReferenceError let x = 10; |
- افزودن
'use strict';در ابتدای فایل یا تابع، خطاهای مرتبط باvarرا زودتر آشکار میکند. - در پروژههای جدید بهتر است از
varاستفاده نکنید. ابتداconstرا امتحان کنید. اگر نیاز به تغییر مقدار بود، ازletاستفاده کنید. - در برنامهای برای رزرو بلیت سینما، از
constبرای قیمت پایه بلیت و ازletبرای تعداد صندلیهای انتخابشده استفاده کنید.
یادگیری بهتر عملکردها و تفاوتها
برای اینکه بهتر بتوانید با عملکردهای این سه کلمهی کلیدی آشنا شوید، پیشنهاد میشود در تمرینهای خود از let و const استفاده کنید. برای آزمایش مثالها، از کنسول مرورگر (با فشار F12) استفاده کنید. هرچه بیشتر تمرین کنید، تسلط و مهارت شما در برنامهنویسی افزایش پیدا میکند و در زمان نوشتن یک پروژهی واقعی، اشتباهات کمتری خواهید داشت.