متغیرهای جاوا اسکریپت و ذخیره سازی اطلاعات در آنها — راهنمای مقدماتی

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

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی ابتدایی از HTML و CSS
• داشتن درکی مقدماتی از زبان برنامه‌نویسی جاوا اسکریپت

هدف این مقاله آشنا ساختن خواننده با مبانی متغیرهای جاوا اسکریپت است.

ابزارهای مورد نیاز

در سراسر این نوشته از شما خواسته می‌شود که برخی خطوط کد را روی سیستم خود وارد کنید تا درک خود از این محتوا را بررسی کنید. اگر از یک مرورگر دسکتاپ استفاده می‌کنید، بهترین مکان برای وارد کردن کدهای نمونه، کنسول جاوا اسکریپت مرورگر وب کامپیوترتان است.

فیلم آموزش جاوا اسکریپت JavaScript – جامع و کاربردی در فرادرس

کلیک کنید

متغیر چیست؟

متغیر (variable)، مکانی برای یک مقدار محسوب می‌شود، مانند یک عدد که برای جمع استفاده می‌شود یا رشته متنی که به عنوان بخشی از یک جمله مورد استفاده قرار می‌گیرد. اما یک نکته خاص در مورد متغیرها این است که مقادیر موجود در آن‌ها می‌توانند تغییر یابند. به مثال ساده زیر نگاه کنید:

<button>Press me</button>

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

button.onclick = function() {
  let name = prompt('What is your name?');
  alert('Hello ' + name + ', nice to see you!');
}

در این مثال با فشردن دکمه «Press me» چند خط کد اجرا می‌شود. در خط اول یک کادر باز می‌شود که از خواننده می‌خواهد نام خود را وارد کند، سپس این مقدار در یک متغیر ذخیره می‌شود. خط دوم یک پیام خوشامدگویی ارائه می‌کند که شامل نام کاربر است که از مقدار متغیر ذخیره شده اخذ می‌شود.

برای درک این که چرا متغیر مفید است، تصور کنید مثال فوق را طوری بنویسید که از یک متغیر استفاده نکند. در این صورت مثال فوق به صورت زیر خواهد بود:

var name = prompt('What is your name?');

if (name === 'Adam') {
  alert('Hello Adam, nice to see you!');
} else if (name === 'Alan') {
  alert('Hello Alan, nice to see you!');
} else if (name === 'Bella') {
  alert('Hello Bella, nice to see you!');
} else if (name === 'Bianca') {
  alert('Hello Bianca, nice to see you!');
} else if (name === 'Chris') {
  alert('Hello Chris, nice to see you!');
}

// ... and so on ...

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

متغیرها در چنین مواردی کاربرد دارند و با افزایش مهارت در زبان برنامه‌نویسی جاوا اسکریپت متوجه خواهید شد که نیازمند استفاده گسترده‌ای از متغیرها هستید.

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

گفتیم که متغیرها مکانی برای ذخیره‌سازی مقادیر هستند. این تفاوت مهمی است و باید توجه داشته باشید که متغیرها همان مقادیر نیستند؛ بلکه محفظه‌ای برای نگهداری از مقدارها هستند. آن‌ها را می‌توان مانند جعبه‌های کوچکی در نظر گرفت که می‌توان چیزهایی را درونشان قرار داد.

اعلان کردن یک متغیر

برای استفاده از یک متغیر ابتدا باید آن را ایجاد و به بیان دقیق‌تر آن را اعلان کنیم. به این منظور کلیدواژه var یا let و سپس نام متغیر را وارد می‌کنیم:

let myName;
let myAge;

در کد فوق ما دو متغیر به نام‌های myName و myAge ایجاد کردیم. تلاش کنید این خطوط را در کنسول مرورگر وب وارد کنید. برای باز کردن بخش کنسول مرورگر می‌توانید دکمه CTRL+SHIFT+I را بزنید.

در جاوا اسکریپت همه کدها به یک نقطه‌ویرگول ختم می‌شوند. البته اگر تنها یک خط کد بنویسید، ممکن است بدون نقطه‌ویرگول پایانی نیز کار کند؛ اما در صورتی که کد شما شامل چندین خط باشد، بدون استفاده از آن کار نخواهد کرد. بنابراین باید خود را عادت دهید که همیشه در انتهای دستورهای خود نقطه‌ویرگول را درج کنید.

اینک می‌توانید وجود یا عدم وجود این مقادیر در محیط اجرایی را با وارد کردن نام متغیر به صورت زیر بررسی کنید:

myName;
myAge;

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

scoobyDoo;

دقت کنید که نام یک متغیر را که وجود دارد؛ اما مقدار ندارد را با متغیری که کلاً وجود ندارد اشتباه نگیرید. این‌ها دو چیز کاملاً متفاوت هستند. اگر به مثال جعبه‌ها بازگردیم، عدم وجود جعبه به این معنی است که هیچ جعبه (متغیر) ی وجود ندارد که مقداری در آن قرار دهیم. اما عدم تعریف مقدار به این معنی است که جعبه وجود دارد؛ اما هنوز چیزی درون آن قرار نگرفته است.

مقداردهی اولیه یک متغیر

زمانی که متغیری اعلان شد، می‌توان آن را با یک مقدار، مقداردهی اولیه کرد. این کار از طریق وارد کردن نام متغیر به همراه علامت تساوی (=) و در نهایت مقدار مورد نظر صورت می‌گیرد. برای نمونه:

myName = 'Chris';
myAge = 37;

اگر اینک به کنسول بازگردیم و دو خط زیر را در آن وارد کنیم، می‌بینیم که مقادیر مورد نظر به متغیرها انتساب یافته‌اند. در این مورد می‌توان مقادیر متغیرها را با وارد کردن نام آن‌ها در کنسول دریافت کرد:

myName;
myAge;

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

let myDog = 'Rover';

این وضعیتی است که احتمالاً در اغلب موارد مورد استفاده قرار می‌دهید، چون اجرای آن سریع‌تر از انجام دو عمل در خطوط مجزا است.

تفاوت بین var و let

در این مرحله ممکن است از خود بپرسید: «چرا به دو کلیدواژه برای تعریف کردن متغیرها نیاز داریم؟» چرا باید هم var و هم let را مورد استفاده قرار دهیم؟

دلایل این مسئله ریشه تاریخی دارند. زمانی که جاوا اسکریپت به تازگی معرفی شده بود، تنها کلیدواژه var وجود داشت. این کلیدواژه در اغلب موارد به خوبی کار می‌کرد؛ اما در برخی موارد با مشکلاتی همراه بود، چون طراحی آن در پاره‌ای موارد سردرگم‌کننده یا آزاردهنده بود. بنابراین let در نسخه‌های جدیدتر جاوا اسکریپت ایجاد شد تا ایجاد متغیرها به روشی متفاوت نسبت به var صورت بپذیرد و اشکالاتی که در var وجود داشت را اصلاح کند.

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

myName = 'Chris';

function logName() {
  console.log(myName);
}

logName();

var myName;

دقت کنید که کد فوق زمانی که خطوط منفرد را در کنسول مرورگر وارد می‌کنید کار نخواهد کرد و صرفاً در یک سند وب که می‌تواند خطوط چندگانه کد را پردازش کند قابل اجرا است.

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

نکته دوم این که وقتی از var استفاده می‌کنیم، می‌توانیم متغیر یکسانی را به هر تعداد که دوست داریم اعلان کنیم؛ اما let اجازه چنین کاری را نمی‌دهد. به این ترتیب، کد زیر کار می‌کند:

var myName = 'Chris';
var myName = 'Bob';

اما کد زیر در خط دوم اعلام خطا خواهد کرد:

let myName = 'Chris';
let myName = 'Bob';

به جای آن باید به صورت زیر عمل کنیم: