decodex | آموزش برنامه نویسی و طراحی سایت
decodex | تفاوت var، let و const در جاوا اسکریپت

تفاوت var، let و const در جاوا اسکریپت

var، let و const رو کِی استفاده کنیم؟

وقتی می‌خوای یه کد تمیز، قابل‌اعتماد و بی‌دردسر بنویسی، انتخاب بین var، let و const می‌تونه فرق یه شب آروم بدون باگ، با یه باگ اعصاب خورد کن باشه! هر سه برای تعریف متغیرن، اما تفاوت‌هاشون مهمه:

  • var قدیمی‌تره و اسکوپش تابعیه؛ یعنی تو کل تابع (یا بعضی‌وقت‌ها کل فایل) در دسترسه و راحت پخش می‌شه.
  • let و const اسکوپ بلاکی دارن؛ فقط همون‌جایی که تعریف شدن (داخل { }‌ها) قابل استفاده‌ان.
  • هوئیستینگ یعنی چی؟ مرورگر قبل از اجرای کد، اسم متغیرها رو می‌بینه. برای var یه متغیر با مقدار undefined از قبل ایجاد می‌شه؛ اما let و const تا قبل از خط تعریف، آماده‌ی استفاده نیستن (و اگه صداشون کنی خطا می‌گیری). همین موضوع باعث خیلی از باگ‌های عجیب با var می‌شه.
  • با const نمی‌تونی دوباره به همون متغیر مقدار بدی؛ با let می‌تونی. (برای اشیاء/آرایه‌ها با const هم می‌شه محتوای داخلی رو عوض کرد، ولی خودِ متغیر رو نه.)

تو ادامه‌ی مطلب با مثال‌های سرراست و نکته‌های کاربردی، قدم‌به‌قدم می‌بینی که دقیقاً کِی باید از کدوم استفاده کنی تا باگ غافلگیرت نکنه 😎

تفاوت var، let و const در جاوا اسکریپت | decodex | دیکدایکس

۱) دامنه (Scope): بلوکی در برابر تابعی

بزرگ‌ترین تفاوت بین var، let و const در دامنه یا همون Scope اون‌هاست. var دامنه‌ی تابعی داره؛ یعنی اگه داخل یه تابع تعریفش کنی، بیرون از اون تابع در دسترس نیست، ولی داخل بلاک‌هایی مثل if یا for محدود نمی‌شه. در عوض، let و const دامنه‌ی بلوکی دارن؛ یعنی فقط همون‌جایی که تعریف شدن قابل استفاده‌ان و به‌محض خروج از اون بلاک، از دسترس خارج می‌شن.

  • var: تابع‌-اسکوپ و قابل دسترسی بیرون از بلاک‌های ساده مثل if یا for
  • let و const: بلوک‌-اسکوپ؛ به‌محض خروج از بلاک، متغیر از دسترس خارج می‌شه
  • در سطح سراسری، var روی window / globalThis آویزون می‌شه؛ ولی let و const نه.
// مثال دامنه بلوکی
if (true) {
  var x = 1;      // بیرون if هم در دسترس
  let y = 2;      // فقط داخل بلاک
  const z = 3;    // فقط داخل بلاک
}
console.log(x); // 1
// console.log(y); // ReferenceError
// console.log(z); // ReferenceError

نکته کاربردی

  • برای جلوگیری از «نشت متغیر» و تداخل نام‌ها، استفاده از let/const تقریباً همیشه انتخاب بهتریه.
  • در محیط مرورگر، تعریف var در سطح سراسری به صورت ناخواسته به window متصل میشه و میتونه با کتابخونه‌های دیگه تداخل ایجاد کنه.

۲) هوئیستینگ (Hoisting): بالا کشیدن متغیرها

هر سه نوع تعریف var، let و const در جاوااسکریپت هوئیست می‌شن؛ یعنی موتور جاوااسکریپت اسم متغیر رو قبل از اجرای کد، به ابتدای محدوده (Scope) می‌بره. تفاوت اصلی توی نحوه‌ی مقداردهی اولیه است: var موقع هوئیست شدن به‌صورت خودکار با undefined مقداردهی می‌شه، اما let و const تا زمانی که به خط تعریف واقعی‌شون برسن، توی چیزی به اسم منطقه‌ی مرده‌ی زمانی (Temporal Dead Zone یا به اختصار TDZ) باقی می‌مونن.

  • var: دسترسی به متغیر قبل از اعلان ممکنه، ولی مقدارش undefined خواهد بود.
  • let / const: اگه قبل از اعلان بهشون دسترسی پیدا کنی، خطای ReferenceError می‌گیری (به خاطر TDZ).
console.log(a); // undefined (به‌خاطر hoisting با مقدار اولیه)
// console.log(b); // ReferenceError (TDZ)
// console.log(c); // ReferenceError (TDZ)
var a = 1;
let b = 2;
const c = 3;

TDZ دقیقاً چه مشکلی رو حل می‌کنه؟

  • خطا دادن زودهنگام به‌جای ادامه دادن با مقدار undefined باعث می‌شه باگ‌ها سریع‌تر لو برون.
  • کد خواناتر و قابل اعتمادتر می‌شه؛ چون دسترسی قبل از اعلان ممنوعه!

۳) بازاعلان و دوباره‌نسبت‌دهی (Redeclaration & Reassignment)

var اجازه می‌ده یه متغیر رو تو همون محدوده (Scope) دوباره تعریف کنی، اما let و const این اجازه رو نمی‌دن. از نظر دوباره‌نسبت‌دهی (یعنی دادن مقدار جدید به یه متغیر)، var و let آزاد و بدون محدودیت هستن، ولی const فقط یه بار مقدار می‌گیره و بعدش دیگه قابل تغییر نیست. یه نکته‌ی مهم درباره‌ی const اینه که فقط جلوی تغییر «ارجاع» رو می‌گیره، نه خود محتوای داخلی رو. یعنی اگه یه const آبجکت یا آرایه باشه، می‌تونی داخلش رو عوض کنی، ولی نمی‌تونی کل متغیر رو با چیز دیگه‌ای جایگزین کنی.

  • var: قابل بازاعلان و دوباره‌نسبت‌دهی
  • let: غیرقابل بازاعلان در یک Scope، اما قابل دوباره‌نسبت‌دهی
  • const: نه بازاعلان، نه دوباره‌نسبت‌دهی؛ ولی محتوای داخلی آبجکت یا آرایه می‌تونه تغییر کنه.
const user = { id: 1 };
user.id = 2;     // مجاز: تغییر خاصیت
// user = {};    // غیرمجاز: تغییر ارجاع

چرا const، همیشه به معنای واقعی «ثابت» نیست؟

  • const جلوی تغییر ارجاع رو می‌گیره، اما برای «فریز کامل» یک آبجکت باید از Object.freeze() استفاده کنی.
  • برای داده‌هایی که نباید ارجاعشون عوض بشه (مثلاً dependency‌های ماژول‌ها)، const انتخاب خیلی خوبی محسوب می‌شه.
تفاوت var، let و const در js | decodex

۴) استفاده‌های پیشنهادی، تله‌های رایج و بهترین‌روش‌ها

از نظر نگهداشت و استانداردهای مدرن، استفاده از let و const توصیه می‌شه و var بیشتر مخصوص کدهای قدیمی باقی مونده. با این حال، دونستن تله‌های رایج و الگوهای درست باعث می‌شه بتونی خطاها رو از ریشه حذف کنی و کدت همیشه تمیز و قابل اعتماد بمونه. 💪

تله‌های رایج

  • var در حلقه‌ها: موقع استفاده از var داخل حلقه‌ها، ممکنه به‌جای مقدار هر تکرار، مقدار نهایی حلقه توی Closure گرفته بشه.
  • دسترسی قبل از اعلان با let/const: باعث ReferenceError می‌شه، چون متغیر هنوز توی Temporal Dead Zone (TDZ) قرار داره.
  • فرض «ثابتِ مطلق» بودن const برای آبجکت‌ها: اشتباهه! چون خاصیت‌های داخلی آبجکت یا آرایه هنوز قابل تغییره، فقط خود ارجاعش ثابت می‌مونه.
// مشکل رایج با var در حلقه و Closure
var fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(function() { console.log(i); });
}
fns[0](); // 3
fns[1](); // 3
fns[2](); // 3

// راه‌حل با let (بلاک-اسکوپ)
let fns2 = [];
for (let j = 0; j < 3; j++) {
  fns2.push(function() { console.log(j); });
}
fns2[0](); // 0
fns2[1](); // 1
fns2[2](); // 2

بهترین‌ تمرین ها (Best Practices)

  • پیش‌فرض از const استفاده کنید؛ فقط وقتی واقعاً نیاز به تغییر مقدار دارید، سراغ let برید.
  • از var فقط در مواقع خاص و برای سازگاری با کدهای خیلی قدیمی استفاده کنید.
  • برای ثابت‌های معنایی (مثل مقادیر پیکربندی یا تنظیمات کلی)، const بهترین انتخابه.
  • نام‌گذاری شفاف داشته باشید: متغیرهایی که قراره تغییر کنن، اسم‌هایی بگیرن که این موضوع رو برسونن (مثلاً count، total، index و ...).

مقایسه var، let و const سریع در یک نگاه

ویژگیvarletconst
دامنه (Scope)تابعیبلوکیبلوکی
هوئیستینگبله، با مقدار اولیه undefinedبله، اما در TDZ تا اعلانبله، اما در TDZ تا اعلان
بازاعلان در همان Scopeبلهخیرخیر
دوباره‌نسبت‌دهیبلهبلهخیر
اتصال به window (در مرورگر)بله (سطح سراسری)خیرخیر

جمع بندی و نتیجه گیری

در عمل، let و const انتخاب‌های امن‌تر و قابل پیش‌بینی‌تری هستن. const رو به‌عنوان پیش‌فرض در نظر بگیر و هر وقت لازم شد مقدار رو تغییر بدی، به let روی بیار. var رو فقط وقتی استفاده کن که واقعاً نیاز خاصی داری یا با کدهای قدیمی سروکار داری. این رویکرد باعث می‌شه کدت منسجم‌تر، خواناتر و نگهداریش راحت‌تر باشه.

اگه تجربه یا سؤال خاصی درباره‌ی استفاده از var، let و const داری یا به مورد عجیبی برخورد کردی، خوشحال می‌شم توی بخش کامنت‌ها مطرحش کنی تا با هم بررسیش کنیم. 💬

دیدگاه شما

ثبت دیدگاه

اگه در مورد این مطلب نظری داری یا در همین موضوع سوالی داری، همینجا مطرح کن تا از دیدگاه ارزشمندت استفاده کنیم و انرژی بگیریم، یا سوالت رو جواب بدیم

در ضمن، شماره موبایلت تو سایت نمایش داده نمیشه و پیش ما به صورت محرمانه میمونه

کد تایید پیامک شده به شماره را وارد نمایید