var: میراث گذشته

کلمه کلیدی var از ابتدای پیدایش جاوا اسکریپت برای تعریف متغیرها استفاده می‌شد. با این حال، دارای خصوصیاتی است که می‌تواند منجر به بروز خطاها و رفتارهای غیرمنتظره در کدهای پیچیده شود.

حوزه (Scope):

• متغیرهای تعریف‌شده با var دارای حوزه تابعی (function scope) یا حوزه سراسری (global scope) هستند. این بدان معناست که اگر متغیری با var در داخل یک تابع تعریف شود، فقط در همان تابع قابل دسترسی است. اما اگر خارج از هر تابعی تعریف شود، به یک متغیر سراسری تبدیل شده و از هر کجای برنامه قابل دسترسی خواهد بود.
• نکته مهم این است که var حوزه بلوکی (block scope) را نادیده می‌گیرد. بلوک‌ها شامل حلقه‌های for، دستورات if و سایر ساختارهای مشابه هستند. این موضوع می‌تواند منجر به سردرگمی و خطاهای ناخواسته شود، زیرا متغیری که انتظار می‌رود فقط در داخل یک بلوک خاص قابل دسترسی باشد، در کل تابع قابل مشاهده و تغییر خواهد بود.

Hoisting (بالابری):

• یکی از ویژگی‌های منحصربه‌فرد var، hoisting است. در جاوا اسکریپت، تعریف متغیرها (و توابع) قبل از اجرای کد به بالای حوزه خود (تابعی یا سراسری) "بالابرده" می‌شوند. این بدان معناست که شما می‌توانید از یک متغیر قبل از اینکه در کد تعریف شده باشد، استفاده کنید، بدون اینکه با خطای "reference error" مواجه شوید. با این حال، تنها تعریف متغیر بالابرده می‌شود، نه مقداردهی اولیه آن. بنابراین، اگر قبل از مقداردهی از متغیر استفاده کنید، مقدار آن undefined خواهد بود.

مثال برای Hoisting با var:

console.log(myVar); // خروجی: undefined
var myVar = 10;
console.log(myVar); // خروجی: 10

در مثال بالا، var myVar به بالای حوزه خود بالابرده می‌شود، بنابراین در خط اول myVar تعریف شده اما مقداردهی نشده است.

بازتعریف و به‌روزرسانی (Redeclaration and Updating):

• متغیرهای تعریف‌شده با var را می‌توان بدون هیچ خطایی مجدداً تعریف (redeclare) و به‌روزرسانی (update) کرد. این انعطاف‌پذیری گاهی می‌تواند منجر به بازنویسی ناخواسته مقادیر متغیرها در بخش‌های مختلف کد شود، خصوصاً در پروژه‌های بزرگ.

var x = 5;
console.log(x); // خروجی: 5
var x = "hello"; // بازتعریف و به‌روزرسانی بدون خطا
console.log(x); // خروجی: "hello"

let: معرفی حوزه بلوکی

کلمه کلیدی let به عنوان جایگزینی مدرن‌تر برای var معرفی شد و مشکلات مربوط به حوزه بلوکی را حل کرد.

حوزه (Scope):

• متغیرهای تعریف‌شده با let دارای حوزه بلوکی (block scope) هستند. این بدان معناست که متغیر فقط در داخل بلوکی که در آن تعریف شده است (مثلاً داخل یک حلقه for یا یک دستور if) و همچنین در بلوک‌های داخلی‌تر قابل دسترسی است. این رفتار، کد را خواناتر و قابل پیش‌بینی‌تر می‌کند، زیرا دامنه دسترسی متغیرها محدودتر و واضح‌تر است.

مثال برای حوزه بلوکی با let:

function testLet() {
  let a = 1;
  if (true) {
    let b = 2;
    console.log(a); // خروجی: 1
    console.log(b); // خروجی: 2
  }
  // console.log(b); // خطا: b is not defined (چون خارج از حوزه بلوک if است)
}
testLet();

Hoisting (بالابری):

• متغیرهای let نیز hoisting می‌شوند، اما برخلاف var، آن‌ها مقداردهی اولیه نمی‌شوند. تلاش برای دسترسی به یک متغیر let قبل از تعریف آن منجر به خطای ReferenceError می‌شود. این منطقه بین شروع بلوک و تعریف متغیر به عنوان "منطقه مرده موقت" (Temporal Dead Zone - TDZ) شناخته می‌شود. این ویژگی به جلوگیری از استفاده تصادفی از متغیرهای تعریف نشده کمک می‌کند.

مثال برای Hoisting با let (و TDZ):

// console.log(myLetVar); // خطا: Cannot access 'myLetVar' before initialization
let myLetVar = 20;
console.log(myLetVar); // خروجی: 20

بازتعریف و به‌روزرسانی (Redeclaration and Updating):

• متغیرهای تعریف‌شده با let را می‌توان به‌روزرسانی (update) کرد، اما نمی‌توان در همان حوزه مجدداً تعریف (redeclare) کرد. این ویژگی از بازنویسی تصادفی متغیرها که با var امکان‌پذیر بود، جلوگیری می‌کند.

JavaScript

let y = 15;
console.log(y); // خروجی: 15
y = "world"; // به‌روزرسانی مجاز است
console.log(y); // خروجی: "world"

// let y = 30; // خطا: Identifier 'y' has already been declared

const: ثبات و تغییرناپذیری (نسبی)

کلمه کلیدی const برای تعریف متغیرهایی استفاده می‌شود که مقدار آن‌ها پس از مقداردهی اولیه نباید تغییر کند. این مفهوم "ثبات" را به کد شما اضافه می‌کند.

حوزه (Scope):

• مانند let، متغیرهای تعریف‌شده با const نیز دارای حوزه بلوکی (block scope) هستند.

Hoisting (بالابری):

• مشابه let، متغیرهای const نیز hoisting می‌شوند اما مقداردهی اولیه نمی‌شوند و دسترسی به آن‌ها قبل از تعریف در TDZ منجر به ReferenceError می‌شود.

مقداردهی اولیه و تغییرناپذیری:

• نکته کلیدی در مورد const این است که باید در زمان تعریف، مقداردهی اولیه شود. تلاش برای تعریف یک const بدون مقداردهی اولیه منجر به خطای SyntaxError می‌شود.
• پس از مقداردهی، نمی‌توان مقدار یک متغیر const را مجدداً تخصیص داد. این به معنای تغییرناپذیری (immutability) برای انواع داده اولیه (primitive types) مانند اعداد، رشته‌ها و بولین‌ها است.

const PI = 3.14159;
// PI = 3; // خطا: Assignment to constant variable.

// const GRAVITY; // خطا: Missing initializer in const declaration

نکته مهم در مورد اشیاء و آرایه‌ها با const:

• وقتی یک شیء (object) یا آرایه (array) با const تعریف می‌شود، خود ارجاع (reference) به آن شیء یا آرایه ثابت است و قابل تغییر نیست. این بدان معناست که شما نمی‌توانید متغیر const را وادار کنید که به یک شیء یا آرایه دیگر اشاره کند.
• با این حال، محتوای داخلی (properties یا elements) آن شیء یا آرایه قابل تغییر است. این یک نکته بسیار مهم است که اغلب باعث سردرگمی می‌شود. const تضمین نمی‌کند که خود شیء یا آرایه تغییرناپذیر باشد، بلکه فقط تضمین می‌کند که متغیر همیشه به همان شیء یا آرایه اشاره خواهد کرد.

مثال برای تغییر محتوای شیء const:

const person = {
  name: "Alice",
  age: 30
};

console.log(person.name); // خروجی: "Alice"

person.name = "Bob"; // مجاز است، زیرا محتوای شیء تغییر می‌کند، نه خود ارجاع
console.log(person.name); // خروجی: "Bob"

// person = { name: "Charlie", age: 40 }; // خطا: Assignment to constant variable.

برتری‌های let و const نسبت به var

استفاده از let و const مزایای قابل توجهی نسبت به var دارد که منجر به نوشتن کدهای بهتر، ایمن‌تر و قابل فهم‌تر می‌شود:

1. حوزه بلوکی (Block Scoping):

   • برتری: let و const حوزه بلوکی را اعمال می‌کنند که به محدود کردن دامنه دسترسی متغیرها کمک می‌کند. این امر از آلودگی حوزه (scope pollution) و تداخل ناخواسته متغیرها در بخش‌های مختلف کد جلوگیری می‌کند.
   • تأثیر: کد خواناتر، قابل پیش‌بینی‌تر و نگهداری آن آسان‌تر می‌شود. احتمال بروز خطا به دلیل دسترسی یا تغییر ناخواسته متغیرها کاهش می‌یابد.

2. جلوگیری از بازتعریف مجدد (Redeclaration):

   • برتری: let و const اجازه بازتعریف متغیر در همان حوزه را نمی‌دهند. این ویژگی از خطاهای ناشی از تعریف مجدد تصادفی یک متغیر که می‌توانست منجر به از دست رفتن مقدار قبلی شود، جلوگیری می‌کند.
   • تأثیر: کد قوی‌تر و کمتر مستعد خطا می‌شود.

3. منطقه مرده موقت (Temporal Dead Zone - TDZ):

   • برتری: TDZ برای let و const از استفاده متغیر قبل از تعریف آن جلوگیری می‌کند و منجر به ReferenceError می‌شود. این رفتار به شناسایی زودهنگام خطاها کمک می‌کند. در مقابل، var به دلیل hoisting بدون مقداردهی اولیه، در چنین شرایطی مقدار undefined را برمی‌گرداند که می‌تواند منجر به خطاهای منطقی پنهان شود.
   • تأثیر: اشکال‌زدایی (debugging) آسان‌تر و کد قابل اعتمادتر می‌شود.

4. ایجاد متغیرهای ثابت (Constants):

   • برتری: const به شما امکان می‌دهد متغیرهایی تعریف کنید که مقدار آن‌ها پس از تخصیص اولیه قابل تغییر نیست (برای انواع داده اولیه) یا ارجاع آن‌ها ثابت است (برای اشیاء و آرایه‌ها). این امر خوانایی کد را افزایش می‌دهد و تضمین می‌کند که مقادیر مهم به طور تصادفی تغییر نمی‌کنند.
   • تأثیر: کد گویاتر می‌شود و مقاصد برنامه‌نویس را واضح‌تر بیان می‌کند. همچنین از تغییرات ناخواسته در داده‌های حساس جلوگیری می‌کند.

5. کاهش متغیرهای سراسری:

   • برتری: به دلیل حوزه بلوکی، استفاده از let و const به طور طبیعی منجر به کاهش تعداد متغیرهای سراسری می‌شود. متغیرهای سراسری می‌توانند منجر به تداخل نام، افزایش پیچیدگی و مشکلات در نگهداری کد شوند.
   • تأثیر: کد ماژولارتر، با وابستگی‌های کمتر و نگهداری آسان‌تر.

نکات امنیتی

انتخاب صحیح بین var، let و const می‌تواند تأثیرات امنیتی نیز داشته باشد، هرچند این تأثیرات اغلب غیرمستقیم هستند و بیشتر به کیفیت و قابلیت نگهداری کد مربوط می‌شوند.

1. جلوگیری از آلودگی حوزه سراسری (Global Scope Pollution):

   • استفاده بی‌رویه از var در خارج از توابع منجر به ایجاد متغیرهای سراسری می‌شود. در برنامه‌های بزرگ یا هنگام استفاده از کتابخانه‌های متعدد، این امر می‌تواند منجر به تداخل نام (name collision) شود، جایی که یک اسکریپت متغیر سراسری تعریف شده توسط اسکریپت دیگر را ناخواسته بازنویسی می‌کند. این می‌تواند منجر به رفتارهای غیرمنتظره و آسیب‌پذیری‌های امنیتی شود، اگر متغیری که برای کنترل دسترسی یا نگهداری داده‌های حساس استفاده می‌شود، به طور ناخواسته تغییر کند.
   • let و const با حوزه بلوکی خود، این خطر را به میزان قابل توجهی کاهش می‌دهند، زیرا متغیرها را در محدوده‌های کوچک‌تری محصور می‌کنند.

2. جلوگیری از بازنویسی ناخواسته مقادیر حساس:

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

3. خوانایی و قابلیت نگهداری کد:

   • کدی که با استفاده از let و const نوشته شده است، به دلیل حوزه بندی واضح‌تر و محدودیت‌های بیشتر، عموماً خواناتر و قابل فهم‌تر است. کدهای پیچیده و مبهم بیشتر مستعد حفره‌های امنیتی هستند، زیرا شناسایی و رفع مشکلات در آن‌ها دشوارتر است.
   • استفاده از const برای مقادیری که نباید تغییر کنند، به وضوح قصد برنامه‌نویس را نشان می‌دهد و به سایر توسعه‌دهندگان (و خود شما در آینده) کمک می‌کند تا منطق کد را بهتر درک کنند و از ایجاد تغییرات ناخواسته که می‌تواند منجر به آسیب‌پذیری شود، خودداری کنند.

4. کاهش خطاهای منطقی:

   • ویژگی‌هایی مانند TDZ در let و const به شناسایی زودهنگام خطاها کمک می‌کنند. خطاهای منطقی می‌توانند در شرایط خاص منجر به آسیب‌پذیری‌های امنیتی شوند. به عنوان مثال، اگر یک بررسی امنیتی به دلیل مقدار undefined یک متغیر (ناشی از hoisting با var) به درستی انجام نشود، می‌تواند یک حفره امنیتی ایجاد کند.

توصیه‌های امنیتی:

• var را فراموش کنید: در کدهای مدرن جاوا اسکریپت، تا حد امکان از var استفاده نکنید. let و const گزینه‌های بسیار بهتری هستند.
• پیش‌فرض const: سعی کنید همیشه به طور پیش‌فرض از const استفاده کنید. تنها زمانی از let استفاده کنید که می‌دانید مقدار متغیر نیاز به تغییر دارد. این رویکرد به تقویت اصل "کمترین امتیاز" (principle of least privilege) در سطح متغیرها کمک می‌کند.
• مراقب تغییرپذیری اشیاء و آرایه‌های const باشید: به یاد داشته باشید که const فقط ارجاع را ثابت نگه می‌دارد. اگر نیاز به تغییرناپذیری کامل محتوای یک شیء یا آرایه دارید، باید از تکنیک‌های دیگری مانند Object.freeze() یا کتابخانه‌های تغییرناپذیری (immutability libraries) استفاده کنید.
• کد خود را تمیز و خوانا نگه دارید: صرف نظر از کلمات کلیدی که استفاده می‌کنید، نوشتن کد تمیز، ماژولار و با مستندات مناسب، بهترین دفاع در برابر بسیاری از مشکلات امنیتی است.

چه زمانی از کدام یک استفاده کنیم؟ یک راهنمای عملی

• از var استفاده نکنید: به طور کلی، هیچ دلیل قانع‌کننده‌ای برای استفاده از var در کدهای جدید جاوا اسکریپت وجود ندارد. اگر با کدهای قدیمی کار می‌کنید که از var استفاده می‌کنند، در صورت امکان و با احتیاط، آن‌ها را به let یا const بازنویسی (refactor) کنید.

• const را به عنوان پیش‌فرض در نظر بگیرید:

  • زمانی که می‌دانید مقدار یک متغیر پس از مقداردهی اولیه تغییر نخواهد کرد، از const استفاده کنید. این شامل:
    • مقادیر ثابت ریاضی یا علمی (مانند PI، GRAVITY).
    • تنظیمات پیکربندی که در طول اجرای برنامه ثابت هستند.
    • ارجاع به توابع (اگر نمی‌خواهید تابع بازنویسی شود).
    • ارجاع به اشیاء و آرایه‌هایی که خودشان نباید با یک شیء یا آرایه دیگر جایگزین شوند (حتی اگر محتوای داخلی آن‌ها تغییر کند).
  • استفاده از const کد شما را خواناتر می‌کند و به صراحت نشان می‌دهد که این مقدار قرار نیست تغییر کند.

• از let استفاده کنید:

  • زمانی که نیاز به تعریف متغیری دارید که مقدار آن در طول اجرای بلوک کد ممکن است تغییر کند، از let استفاده کنید. این شامل:
    • شمارنده‌های حلقه (for (let i = 0; i < 10; i++)).
    • متغیرهایی که نتیجه یک عملیات را در خود نگه می‌دارند و ممکن است بعداً به‌روز شوند.
    • متغیرهایی که در داخل دستورات شرطی مقداردهی یا تغییر می‌کنند.

مثال ترکیبی:

const API_URL = "https://api.example.com/data";
let userData = null; // مقدار اولیه می‌تواند null باشد و بعداً با داده‌های کاربر به‌روز شود

function fetchData(userId) {
  const endpoint = `${API_URL}/${userId}`; // endpoint برای هر کاربر ثابت است در این فراخوانی
  fetch(endpoint)
    .then(response => response.json())
    .then(data => {
      userData = data; // به‌روزرسانی متغیر let
      displayUserData();
    })
    .catch(error => {
      console.error("Error fetching data:", error);
      let errorMessage = "Failed to load user data."; // متغیر محلی برای پیام خطا
      displayError(errorMessage);
    });
}

function displayUserData() {
  if (userData) {
    const nameElement = document.getElementById("name");
    if (nameElement) {
      nameElement.textContent = userData.name;
    }
  }
}

در این مثال:

• API_URL با const تعریف شده زیرا آدرس پایه API تغییر نمی‌کند.
• userData با let تعریف شده زیرا مقدار اولیه آن null است و پس از دریافت داده‌ها از API به‌روز می‌شود.
• endpoint در داخل تابع fetchData با const تعریف شده، زیرا برای هر فراخوانی خاص تابع، این مقدار ثابت است.
• errorMessage در بلوک catch با let تعریف شده است.

نتیجه‌گیری

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

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