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

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

پیش‌نیازها

• سواد مقدماتی رایانه
• درکی ابتدایی از 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';

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

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

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

به همین دلایل و همچنین دلایل دیگر توصیه می‌شود که تا حد امکان به جای var از let در کد خود استفاده کنید. دلیلی برای استفاده از var وجود ندارد؛ مگر این که بخواهید از نسخه‌های قدیمی‌تر اینترنت اکسپلورر در کد خود پشتیبانی کنید، چون اینترنت اکسپلورر تا نسخه 11 خود از کلیدواژه let پشتیبانی نمی‌کرد؛ با این حال مرورگر مدرن‌تر مایکروسافت به نام edge از let پشتیبانی می‌کند.

به‌روزرسانی متغیر

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

myName = 'Bob';
myAge = 40;

مروری بر قواعد نامگذاری متغیرها

برای یک متغیر می‌توان هر نام دلخواهی تعیین کرد؛ اما محدودیت‌هایی نیز وجود دارند. به طور کلی باید صرفاً از کاراکترهای لاتین (0-9, a-z, A-Z) و همچنین کاراکتر زیرخط (_) استفاده کرد.

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

نمونه‌هایی از نام‌های خوب برای متغیرها به صورت زیر هستند:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

نمونه‌هایی از نام‌های بد برای متغیرها به شرح زیر هستند:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

فهرست زیر نام‌هایی هستند که در صورت استفاده اعلام خطا خواهد شد:

var
Document

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

انواع متغیر

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

نوع عددی

اعداد را می‌توان در متغیرها ذخیره کرد، چه عدد کاملی مانند 30 باشد که عدد صحیح نیز نامیده می‌شود یا اعداد اعشاری مانند 2.456 که اعداد اعشاری (float) نامیده می‌شوند. در جاوا اسکریپت برخلاف برخی دیگر از زبان‌های برنامه‌نویسی، نیازی به اعلان نوع متغیر وجود ندارد. زمانی که به یک متغیر مقدار عددی می‌دهیم نباید آن را درون گیومه قرار دهیم:

let myAge = 17;

نوع رشته‌ای

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

let dolphinGoodbye = 'So long and thanks for all the fish';

نوع بولی

انواع بولی (Boolean) به مقادیر درست/نادرست گفته می‌شود که دو نوع می‌توانند داشته باشند: (true/false). این نوع از متغیرها عموماً برای تست یک شرط استفاده می‌شوند که پس از آن کد به صورت مناسب اجرا می‌شود. بنابراین برای مثال یک حالت ساده استفاده از انواع بولی می‌تواند به صورت زیر باشد:

let iAmAlive = true;

در حالی که در عمل این نوع‌ها معمولاً بیشتر به صورت زیر استفاده می‌شوند:

let test = 6 < 3;

در کد فوق از عملگر «کمتر از» با علامت (>) برای بررسی کوچک‌تر بودن 6 از 3 استفاده شده است. همان طور که انتظار می‌رود تست فوق نتیجه false بازمی‌گرداند، چون 6 کوچک‌تر از 3 نیست.

نوع آرایه

یک آرایه (array) شیئی منفرد است که شامل چند مقدار محصور درون پرانتز است که با کاما از هم جدا شده‌اند. اگر دستورهای زیر را در کنسول مرورگر وارد کنید:

let myNameArray = ['Chris', 'Bob', 'Jim'];
let myNumberArray = [10, 15, 40];

متوجه می‌شوید که با تعریف کردن این آرایه‌ها می‌توانید بر اساس مکان هر عنصر درون آرایه به آن عنصر دسترسی داشته باشید:

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

کروشه‌ها برای تعیین مقدار اندیس متناظر با مکان مقدار مورد نظر استفاده می‌شوند. شاید متوجه شده باشید که اندیس آرایه‌ها در جاوا اسکریپت از 0 آغاز می‌شود، یعنی اندیس نخستین عنصر برابر با صفر است.

شیءها

در برنامه‌نویسی منظور از شیء (object) ساختار کدی است که یک شیء در زندگی واقعی را مدلسازی می‌کند. ما می‌توانیم شیءهای ساده‌ای داشته باشیم که نماینده یک جعبه باشند و شامل اطلاعاتی در مورد عرض، طول، ارتفاع آن باشند و یا این که شیئی داشته باشیم که نماینده یک فرد باشد و داده‌هایی در مورد نام، قد، وزن، زبان و شیوه سلام کردن این فرد در آن شیء ذخیره شده باشد. دستورهای زیر را در کنسول مرورگر وارد کنید:

et dog = { name: 'Spot', breed: 'Dalmatian' };

برای بازیابی اطلاعات ذخیره شده در یک شیء می‌توان از ساختار زیر استفاده کرد:

dog.name

نوع‌بندی دینامیک

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

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

کلیک کنید

برای نمونه، اگر یک متغیر را اعلان کنید و به آن یک مقدار محصور درون گیومه بدهید، مرورگر با آن متغیر به صورت یک رشته رفتار می‌کند:

let myString = 'Hello';

این مقدار حتی در صورتی که شامل ارقامی نیز باشد از نظر جاوا اسکریپت همچنان یک رشته خواهد بود، لذا باید به این نکته توجه داشته باشید:

let myNumber = '500'; // oops, this is still a string
typeof myNumber;
myNumber = 500; // much better — now this is a number
typeof myNumber;

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

ثابت‌ها در جاوا اسکریپت

زبان‌های برنامه‌نویسی زیادی مفهوم «ثابت» (constant) را در خود دارند. ثابت به مقداری گفته می‌شود که یک بار اعلان می‌شود؛ ولی هرگز تغییر نمی‌یابد. دلایل زیادی برای انجام این کار وجود دارند، از امنیت (برای جلوگیری از تغییر یافتن یک مقدار از سوی یک اسکریپت شخص ثالث) تا دیباگ کردن و خلاصه‌سازی کد (تغییر دادن مقادیر ثابت کار دشوارتری است).

در روزهای نخست ارائه جاوا اسکریپت، مقادیر ثابت وجود نداشتند، در نسخه‌های جدیدتر جاوا اسکریپت کلیدواژه const ارائه شده است که امکان تعریف مقادیری را ایجاد کرده است که هرگز تغییر نمی‌یابند:

const daysInWeek = 7;
const hoursInDay = 24;

const دقیقاً به همان روشی عمل می‌کند که let کار می‌کند؛ به جز این که نمی‌توان یک مقدار برای const تعریف کرد. در مثال زیر در خط دوم یک خطا اعلام خواهد شد:

const daysInWeek = 7;
daysInWeek = 8;

سخن پایانی

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

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

کلیک کنید

اگر این مطلب برایتان مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌های طراحی و توسعه پروژه های وب
• آموزش جاوا اسکریپت (JavaScript)
• مجموعه آموزش‌های برنامه‌نویسی
• آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
• جاوا اسکریپت چیست؟
• آموزش تعریف توابع در جاوا اسکریپت (JavaScript)
• تابع های Arrow در جاوا اسکریپت — از صفر تا صد

==