توی جاوااسکریپت ما ۳ کلمه کلیدی برای درست کردن متغیر داریم:
var: یک متغیر معمولی میسازه و اگه دلت خواست، همون موقع بهش مقدار میدی.
let: یک متغیر محلی و محدود به "بلاک" میسازه (پایینتر میگم بلاک چیه).
const: یک متغیر ثابت (فقط خواندنی) درست میکنه که مقدارش رو بعداً نمیشه تغییر داد.
ما از متغیرها به عنوان اسمهای نمادین برای ذخیره کردن اطلاعات استفاده میکنیم. برای انتخاب اسم متغیرها (Identifiers) باید یکسری قانون رو رعایت کنی:
اسم متغیر معمولاً باید با یک حرف انگلیسی، خط زیرین (_) یا علامت دلار ($) شروع بشه.
کاراکترهای بعدی میتونن عدد (0 تا 9) هم باشن.
چون جاوااسکریپت به حروف بزرگ و کوچک حساسه، متغیر A با a فرق داره.
میتونی از کاراکترهای خاص یونیکد مثل å و ü هم استفاده کنی.
چند نمونه اسم قانونی و درست:
Number_hits،temp99،$credit،_name
به دو روش کلی میتونی متغیر تعریف کنی:
با کلمه کلیدی var: مثلاً var x = 42. این مدل بسته به اینکه کجا بنویسیش، میتونه سراسری (Global) یا محلی (Local) باشه.
با کلمههای کلیدی let یا const: مثلاً let y = 13. این مدل متغیرها فقط توی همون محدوده یا بلاکی که تعریف شدن کار میکنن.
میتونی متغیرها رو طوری تعریف کنی که اطلاعات رو از دل یک شیء یا آرایه بیرون بکشن و باز کنن. به این مثال نگاه کن:
const { bar } = foo;
این کار میاد یک متغیر به اسم bar میسازه و مقدار کلیدی که اسمش bar هست رو از دل شیء foo بیرون میکشه و میریزه داخلش.
یک قانون طلایی: همیشه متغیرها رو قبل از استفاده تعریف کن! قدیما جاوااسکریپت اجازه میداد بدون تعریف کردن، به یک متغیر جدید مقدار بدی (که یک متغیر سراسریِ ناخواسته میساخت)، اما الان این کار در حالت strict mode ارور میده و کلاً کار اشتباهیه.
توی عبارتی مثل let x = 42:
به بخش let x میگن Declaration (تعریف متغیر). این کار به جاوااسکریپت میگه این متغیر وجود داره تا بعداً به ارور ReferenceError نخوری.
به بخش = 42 میگن Initializer (مقداردهی اولیه) که یک مقدار رو میریزه داخل متغیر.
توی var و let گذاشتن مقدار اولیه اختیاریه. اگه مقداری ندی، جاوااسکریپت خودش مقدار undefined (تعریف نشده) رو بهش میده:
let x;
console.log(x); // توی خروجی چاپ میکنه: undefined
در واقع نوشتن let x = 42 دقیقاً معادل اینه که اول بنویسی ;let x و خط بعد بنویسی x = 42.
اما در مورد const داستان فرق میکنه! متغیرهای const (ثابت) حتماً و باید همون لحظه اول مقداردهی بشن؛ چون بعداً اجازه نداری مقدارشون رو عوض کنی. اگه بهش مقدار اوليه ندی ارور میگیری:
const x; // ارور سینتکس: مقدار اولیه برای const فراموش شده!
هر متغیری که میسازی، توی یک محدوده یا فضای خاص معتبره. ما کلاً این محدودهها رو داریم:
محدوده سراسری (Global scope): حالت پیشفرض برای کدهایی که روان و عادی اجرا میشن.
محدوده ماژول (Module scope): مخصوص کدهایی که در حالت ماژولار هستند.
محدوده تابع (Function scope): محدودهای که داخل یک تابع ایجاد میشه.
علاوه بر اینها، متغیرهای let و const یک محدوده اضافه هم دارن:
محدوده بلاک (Block scope): هر جا که یک جفت آکلواد یا کروشه باز و بسته ({ }) ببینی، یک بلاک داری!
اگه متغیری رو بیرون از همه تابعها بسازی، میشه سراسری (Global) و همه جای کد بهش دسترسی دارن. اگه داخل یک تابع بسازی، میشه محلی (Local) و فقط داخل همون تابع زندهست.
حالا به این مثال نگاه کن تا تفاوت محدوده let/const رو با var ببینی:
if (Math.random() > 0.5) {
const y = 5;
}
console.log(y); // ارور میده: y تعریف نشده است!
چون y با کلمه کلیدی const (یا let) داخل بلاکِ if تعریف شده، بیرون از آکلواد وجود نداره.
اما var این محدودیت بلاک رو حالیش نمیشه!
if (true) {
var x = 5;
}
console.log(x); // خروجی عدد 5 رو چاپ میکنه!
چون var محدود به آکلوادِ if نمیشه و به محیط بالاترش (که اینجا کل صفحه یا تابع هست) متصل میشه.
متغیرهایی که با var تعریف میشن، یک رفتار عجیب دارند به نام Hoisting (بالا کشیدن). یعنی تو میتونی قبل از اینکه به خط تعریف متغیر برسی، توی کدت بهش اشاره کنی! جاوااسکریپت تمام varها رو مثل جاروبرقی میکشه میبره بالاترین خطِ تابع یا صفحه.
البته یک نکته داره: فقط تعریف متغیر بالا کشیده میشه، نه مقدارش! پس اگه قبل از خطِ مقداردهی صداش کنی، مقدارش undefined هست:
console.log(x === undefined); // چاپ میکنه: true
var x = 3;
(function () {
console.log(x); // چاپ میکنه: undefined
var x = "local value";
})();
جاوااسکریپت پشت صحنه کد بالا رو اینطوری ترجمه و اجرا میکنه:
var x;
console.log(x === undefined); // true
x = 3;
(function () {
var x;
console.log(x); // undefined
x = "local value";
})();
بهترین روش (Best Practice): به خاطر همین داستانِ بالا کشیدن، بهتره همیشه متغیرهای
varرو همون بالا و اولِ توابعت بنویسی تا کدت تمیزتر و خواناتر باشه (البته امروزه بیشتر ازletوconstاستفاده میشه تا این مشکلات پیش نیاد).
let و const چطوریه؟آیا اینها هم بالا کشیده میشن؟ بین دانشمندهای برنامهنویسی سر تعریف این موضوع بحثه! اما چیزی که عملاً اتفاق میافته اینه: اگر قبل از خطِ تعریفِ let یا const بهشون دسترسی پیدا کنی، حتماً ارور ReferenceError میگیری. به این بازه زمانی (از شروع بلاک تا خطی که متغیر رسماً تعریف میشه) اصطلاحاً منطقه مرده موقت (Temporal Dead Zone) میگن.
console.log(x); // ارور ReferenceError
const x = 3;
console.log(y); // ارور ReferenceError
let y = 3;
نکته: برخلاف متغیرها، توابع معمولی (Function Declarations) کاملاً و به همراه بدنه و مقدارشون بالا کشیده میشن و هر جای محدوده که بخوای میتونی راحت قبل از تعریف شدنشون صداشون کنی.
متغیرهای سراسری در واقع ویژگیهایی (Property) از «شیء سراسری یا Global Object» سیستم هستند.
توی صفحات وب و مرورگر، این شیء سراسری همان window هست. پس میتونی یک متغیر سراسری رو با فرمت window.myVariable بخونی یا تغییر بدی.
توی بقیه محیطها (مثل Node.js)، یک متغیر استاندارد و یکپارچه به نام globalThis داریم که در تمام محیطها کار میکنه و میتونی ازش استفاده کنی.
به خاطر همین ساختار، شما میتونی از یک پنجره (یا آیفریم - iframe) به متغیرهای سراسری یک پنجره دیگه دسترسی داشته باشی. مثلاً اگه متغیری به اسم phoneNumber توی سند اصلی باشه، توی آیفریم میتونی با دستور parent.phoneNumber صداش کنی.
با کلمه کلیدی const میتونی یک ثابتِ فقطخواندنی بسازی. قوانین اسمگذاریش هم مثل بقیه متغیرهاست. (برنامهنویسها معمولاً اسم ثابتهای خیلی مهم رو با حروف بزرگ مینویسن):
const PI = 3.14;
یک ثابت رو در طول اجرای برنامه نه میتونی دوباره مقداردهی کنی و نه میتونی دوباره تعریفش کنی. حتماً هم باید موقع تعریف، بهش مقدار اولیه بدی. قوانین محدودهاش (Scope) هم دقیقاً مثل let هست.
توی یک محدوده مشترک، نمیتونی اسمی که برای تابع یا متغیر گذاشتی رو برای const هم بگذاری:
// این کار ارور میده!
function f() {}
const f = 5;
// این هم ارور میده!
function f() {
const g = 5;
var g;
}
کلمه کلیدی const جلوی تغییر آدرس و مقداردهی مجدد رو میگیره، اما جلوی تغییرات داخلی (Mutation) رو نمیگیره! یعنی اگر یک شیء (Object) یا آرایه (Array) رو با const بسازی، محتویات داخلش رو راحت میتونی تغییر بدی:
// تغییر دادن ویژگیهای یک شیء ثابت بدون مشکل انجام میشه:
const MY_OBJECT = { key: "value" };
MY_OBJECT.key = "otherValue";
// کم و زیاد کردن آیتمهای یک آرایه ثابت هم بدون مشکل انجام میشه:
const MY_ARRAY = ["HTML", "CSS"];
MY_ARRAY.push("JAVASCRIPT");
console.log(MY_ARRAY); // خروجی: ['HTML', 'CSS', 'JAVASCRIPT']
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://developer.mozilla.org/en-US/docs/Web/JavaScript