راهنمای کامل، کاربردی و حرفه‌ای برای یادگیری متغیرها، Scope، Hoisting و تفاوت var, let, const

مقدمه

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

این مقاله راهنمای جامع و کامل متغیرها در جاوااسکریپت است.

در این مطلب با مثال‌های واقعی یاد می‌گیریم:

• متغیر چیست؟

• با var، let و const چه تفاوتی دارند؟

• Scope دقیقاً چگونه کار می‌کند؟

• Hoisting چیست و چرا درک آن حیاتی است؟

• چه اشتباهاتی در استفاده از متغیرها رخ می‌دهد؟

• بهترین شیوه‌ها در پروژه‌های حرفه‌ای چیست؟

و چندین سناریوی کاربردی که برنامه‌نویسان روزانه با آنها روبه‌رو می‌شوند.

بخش ۱: متغیر چیست و چرا مهم است؟

متغیر در جاوااسکریپت یک ظرف برای ذخیره داده است.

هر متغیر می‌تواند در طول زمان:

• مقدار بگیرد

• مقدارش تغییر کند

• به عنوان ورودی یا خروجی یک تابع استفاده شود

• ساختارهای پیچیده مانند آرایه یا شیء را نگه دارد

مثال ساده:

let name = "Sara";
let age = 25;
let isLoggedIn = true;

جاوااسکریپت یک زبان Dynamic Typed است یعنی:

• نوع متغیر هنگام تعریف تعیین نمی‌شود

• مقدار تعیین‌کننده نوع است

• می‌توان مقدار متغیر را در طول برنامه عوض کرد

مثال:

let x = 10;
x = "Hello"; // کاملاً معتبر است

بخش ۲: معرفی var، let و const

جاوااسکریپت سه روش برای تعریف متغیر ارائه می‌دهد:

1. var (قدیمی – ES5 و قبل‌تر)
2. let (جدید – ES6)
3. const (جدید – ES6)

اما تفاوت آنها چیست؟

قبل از ورود به جزئیات، یک جدول کوتاه:

• var → اسکوپ تابعی، رفتار قدیمی، مشکلات زیاد

• let → اسکوپ بلوکی، مناسب‌ترین گزینه برای متغیرهای تغییرپذیر

• const → اسکوپ بلوکی، برای مقادیر ثابت یا ساختارهای غیرقابل تغییر

در ادامه به‌صورت کامل و با مثال بررسی می‌کنیم.

بخش ۳: var — روش قدیمی و پرعیب‌ونقص تعریف متغیر

متغیر var قبل از ES6 تنها روش تعریف متغیر بود.

اما var مشکلات جدی دارد.

مثال پایه:

var name = "Ali";
var age = 30;

مشکل ۱: Scope تابعی و عدم بلوک‌پذیری

برخلاف let و const، متغیر var به بلاک محدود نمی‌شود.

مثال:

if (true) {
    var x = 10;
}
console.log(x); // 10 — خارج از بلاک قابل دسترسی است!

این رفتار می‌تواند در پروژه‌های بزرگ باعث ایجاد باگ‌های پنهان شود.

مشکل ۲: امکان تعریف دوباره متغیر

var x = 10;
var x = 20; // بدون خطا

در پروژه‌های بزرگ این مسئله بسیار خطرناک است.

مشکل ۳: Hoisting خطرناک

var قبل از اجرا به بالای Scope منتقل می‌شود:

console.log(x);  // undefined
var x = 10;

اگرچه کد بالا خطا نمی‌دهد، اما یکی از رایج‌ترین منابع ایجاد باگ است.

به همین دلیل در استانداردهای مدرن استفاده از var تقریباً ممنوع است.

بخش ۴: let — روش استاندارد و مدرن برای تعریف متغیر

let در ES6 معرفی شد و تقریباً همیشه گزینه مناسب‌تری نسبت به var است.

مثال:

let age = 25;
age = 26;

ویژگی اصلی let:

بلوک اسکوپ (Block Scope)

if (true) {
    let y = 20;
}
console.log(y); // خطا: y is not defined

این رفتار کدنویسی را قابل پیش‌بینی‌تر و امن‌تر می‌کند.

مثال کاربردی واقعی:

در یک حلقه برای افزودن Event Listener همیشه باید از let استفاده کرد:

for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 1000);
}

خروجی:

0 1 2 3 4

اما اگر var استفاده شود:

5 5 5 5 5

به همین دلیل کل جامعه جاوااسکریپت استفاده از let را توصیه می‌کند.

بخش ۵: const — برای مقادیر ثابت یا ساختارهای غیرقابل تغییر

const نیز بلوک‌اسکوپ است.

اما مهم‌ترین ویژگی آن:

مقدار متغیر const قابل تغییر نیست.

const PI = 3.14;
PI = 4; // ❌ خطا

اما نکته بسیار مهم:

const ساختار را قفل نمی‌کند؛ فقط reference ثابت می‌ماند!

مثال:

const user = { name: "Ali" };
user.name = "Sara"; // ✔️ معتبر

اما:

user = {}; // ❌ خطا

مثال کاربردی: تعریف تنظیمات برنامه

const CONFIG = {
    apiUrl: "/api",
    timeout: 3000
};

در پروژه‌های بزرگ بیشتر مقادیر ثابت را با const تعریف می‌کنند.

بخش ۶: مقایسه کامل var، let، const

1. Scope

• var → تابعی

• let → بلوکی

• const → بلوکی

2. قابلیت تغییر مقدار

• var → قابل تغییر

• let → قابل تغییر

• const → غیرقابل تغییر (reference ثابت)

3. Hoisting

• var → بالا می‌رود ولی مقدار ندارد

• let و const → بالا می‌روند اما در TDZ قرار می‌گیرند (خطا می‌دهند)

4. قابلیت تعریف دوباره

• var → بله

• let → خیر (خطا)

• const → خیر (خطا)

انتخاب حرفه‌ای:

• برای متغیرهایی که مقدارشان تغییر نمی‌کند: const

• برای متغیرهای تغییرپذیر: let

• هرگز از var استفاده نکنید مگر برای سازگاری قدیمی

بخش ۷: Hoisting — از مهم‌ترین مفاهیم متغیرها

Hoisting یعنی:

• جاوااسکریپت متغیرها و توابع را قبل از اجرای کد بالا می‌کشد.

رفتار var:

console.log(a); // undefined
var a = 5;

رفتار let و const:

console.log(b); // ❌ خطا: Cannot access before initialization
let b = 20;

این حالت به نام TDZ (Temporal Dead Zone) شناخته می‌شود.

بخش ۸: انواع Scope در جاوااسکریپت

جاوااسکریپت سه نوع Scope دارد:

1. Global Scope
2. Function Scope
3. Block Scope

۱. Global Scope

متغیرهای تعریف شده بیرون از همه بلوک‌ها:

let site = "Example.com";

به همه جا دسترسی دارند (حتی داخل توابع).

۲. Function Scope

متغیر var فقط تابع‌اسکوپ است:

function test() {
    var x = 10;
}
console.log(x); // خطا

۳. Block Scope

let و const بلوک‌اسکوپ هستند:

if (true) {
    let a = 5;
}
console.log(a); // خطا

بخش ۹: Shadowing — سایه انداختن متغیرها

اگر متغیری داخل یک Scope با نام متغیر بیرونی تعریف شود، متغیر داخلی “بر روی” بیرونی سایه می‌اندازد.

مثال:

let x = 10;

function test() {
    let x = 20;
    console.log(x); // 20
}

test();
console.log(x); // 10

بخش ۱۰: تفاوت major بین let و const در پروژه‌های واقعی

let برای “وضعیت‌های متغیر”:

• شمارنده‌ها

• محتویات فرم

• وضعیت UI (toggle، open/close)

• داده‌های قابل تغییر

let isOpen = false;
isOpen = true;

const برای موارد ثابت:

• تنظیمات

• انتخاب المان‌ها از DOM

• ساختارهای ثابت

const button = document.querySelector("button");

در پروژه‌های مدرن تقریباً:

• 70٪ متغیرها → const

• 30٪ → let

بخش یازدهم: قوانین نام‌گذاری متغیرها (Best Practices)

مجاز نیستند:

• شروع با عدد

• استفاده از فاصله

• کاراکترهای خاص مثل ! % / \

قوانین صحیح:

• استفاده از camelCase

• نام معنی‌دار

• پرهیز از یک‌حرفی بودن (به‌جز مواردی مثل i در حلقه)

مثال خوب:

let totalPrice = 1500;
let userName = "Sara";
let isLoggedIn = true;

بخش دوازدهم: انواع مقداردهی و تعریف متغیر

۱. تعریف همراه مقدار:

let a = 10;

۲. تعریف بدون مقدار:

let b;
console.log(b); // undefined

۳. مقداردهی مجدد:

let c = 5;
c = 12;

۴. تعریف چند متغیر:

let x = 1, y = 2, z = 3;

بخش سیزدهم: بهترین شیوه‌ها (Best Practices)

• همیشه از const استفاده کنید مگر اینکه نیاز به تغییر مقدار باشد

• هرگز var استفاده نکنید

• متغیرها را در بالاترین محدوده لازم تعریف کنید

• نام‌های واضح انتخاب کنید

• از تعریف متغیرهای بدون مقدار پرهیز کنید مگر ضروری باشد

• در اسکوپ‌های کوچک از let/const استفاده کنید

• از تغییر بی‌دلیل نوع داده پرهیز کنید

بخش چهاردهم: سناریوهای واقعی استفاده از متغیرها

سناریو ۱: مدیریت سبد خرید

let cartTotal = 0;

function addToCart(price) {
    cartTotal += price;
}

addToCart(100);
addToCart(50);
console.log(cartTotal); // 150

سناریو ۲: ذخیره وضعیت UI

let isSidebarOpen = false;

toggleBtn.addEventListener("click", () => {
    isSidebarOpen = !isSidebarOpen;
});

سناریو ۳: استفاده از const برای DOM

const modal = document.getElementById("modal");
modal.style.display = "block";

سناریو ۴: تسک‌های API

const API_URL = "/api/products";

بخش پانزدهم: اشتباهات رایج درباره متغیرها

❌ ۱. استفاده از var

❌ ۲. استفاده از نام‌های بی‌معنی

❌ ۳. تعریف متغیرهایی که فقط در یک خط استفاده می‌شوند

❌ ۴. تغییر نوع متغیر بدون دلیل

❌ ۵. ناآگاهی از Scope و Hoisting

جمع‌بندی نهایی

متغیرها قلب برنامه‌نویسی جاوااسکریپت هستند.

در این مقاله یاد گرفتیم که:

• var قدیمی و پرخطر است

• let برای مقادیر تغییرپذیر عالی است

• const برای مقادیر ثابت یا references است

• let و const بلوک‌اسکوپ هستند

• var تابع‌اسکوپ است

• Hoisting برای var متفاوت و خطرناک است

• برای انتخاب متغیر باید اصول Best Practice رعایت شود

درک درست متغیرها باعث می‌شود:

• کدهای حرفه‌ای‌تر بنویسید

• باگ‌های کمتر داشته باشید

• ساختار پروژه شفاف‌تر باشد

• رفتار کد قابل‌پیش‌بینی‌تر شود