آشنایی با مفهوم متغیر در زبان برنامه‌نویسی جاوااسکریپت

Variable به معنی «متغیر» از فعلی تحت عنوان Vary به معنی «تغییر کردن» گرفته شده است و با توجه به ماهیت متغیرها در زبان‌های برنامه‌نویسی که داده‌های ذخیره‌شده داخل آن‌ها دائماً در حال تغییرند، به نظر می‌رسد که نام مناسبی برای‌شان انتخاب شده است. در این پست قصد داریم ببینیم که در زبان برنامه‌نویسی جاوااسکریپت به چه شکل می‌توان دست به تعریف، مدیریت و استفاده از متغیرها زد.

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

alert (3 + 7);

وظیفهٔ این قطعه کد آن است که اعداد 3 و 7 را با هم جمع کرده و نتیجه را در یک پنجرهٔ پاپ‌آپ نمایش دهد. حال اگر متغیرها را وارد ماجرا کنیم، می‌توان یک برنامهٔ کاربردی‌تر نوشت که هر دو عدد دلخواه ما را گرفته، با هم جمع کرده و نتیجه را نمایش دهد به طوری که خواهیم داشت:

var firstNumber = 3;
var secondNumber = 7;
var total = Number(firstNumber) + Number(secondNumber);
alert (total);

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

var firstNumber = prompt("Enter the first number");
var secondNumber = prompt("Enter the second number");
var total = Number(firstNumber) + Number(secondNumber);
alert (total);

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

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

var myName;

متغیری که با استفاده از var ساخته شده، در ابتدا دارای مقدار نامشخص و تهی است مگر آنکه مقداری برایش در نظر بگیریم:

var myName = "Atena";

به نمادهای " " که در اطراف کلمهٔ «Atena» گذاشتیم Quotation می‌گویند که این امکان را برای‌مان فراهم می‌آورند تا مقادیر منتسب به متغیر به عنوان استرینگ (متن) شناخته شوند نَه یک عدد، کیورد از پیش تعریف شده در این زبان و یا چیز دیگر. همچنین بدون استفاده از کیورد var نیز به صورت زیر می‌توان دست به ساخت متغیر زد:

myName = "Atena";

زمانی که متغیری را بدون استفاده از var می‌سازیم، به عنوان یک متغیر Global تعریف می‌شود که در ادامه بیشتر در این خصوص بحث خواهیم کرد.

وقتی که = معنای «مساوی» نمی‌دهد
به طور معمول اگر با دستوری مانند "var myName = "Atena روبه‌رو شویم، آن را این‌گونه می‌خوانیم که متغیر myName مساوی است با کلمهٔ آتنا اما این تعبیر در برنامه‌نویسی صحیح نیست! در واقع، علامتی که بین نام متغیر myName و مقدار آن "Atena" قرار گرفته و شبیه علامت مساوی است، در برنامه‌نویسی با نام «اپراتور تخصیص‌دهنده» شناخته می‌شود و با آنکه این علامت دقیقاً شبیه مساوی است و حتی با دکمهٔ = بر روی کیبورد نیز تایپ می‌شود، اما در برنامه‌نویسی نام دیگری داشته و کاملاً با عملکرد مساوی در ریاضیات فرق می‌کند.

یکی از مهم‌ترین مسائل برای برنامه‌نویسان تازه‌کار آن است که تفاوت بین مساوی و اپراتور تخصیص‌دهنده را بدانند به طوری که اپراتور تخصیص‌دهنده یا همان علامت مساوی در زبان‌های برنامه‌نویسی چیزی که در سَمت راستش قرار دارد را به چیزی که در سَمت چپش قرار گرفته اختصاص می‌دهد:

var myName = "Atena";

در اسکریپت فوق، استرینگی معادل با «Atena» به متغیری تحت عنوان myName اختصاص داده شده است. حال اگر بخواهیم در جاوااسکریپت برابری دو چیز را بررسی کنیم، عملگری با همان مفهوم مساوی در ریاضیات در نظر گرفته شده که دقیقاً همان کاری را می‌کند که ما از یک علامت = انتظار داریم؛ یعنی بررسی می‌کند که آیا عبارت سَمت چپ با عبارت سَمت راست از لحاظ مقدار یکسان است یا خیر که در جاوااسکریپت و بسیاری زبان‌های برنامه‌نویسی دیگر این کار از طریق نماد == عملی می‌گردد (به عبارتی، دو علامت مساوی پشت سر هم.)

Variable Scope چیست؟
محدودهٔ اجرا و اعتبار متغیری که با کلمهٔ کلیدی var تعریف می‌شود، درون Scope (حوزه) خودش است که می‌تواند مثلاً یک فانکشن باشد. اساساً به این نوع متغیرها که درون یک محدودهٔ اجرایی خاص تعریف و استفاده می‌شوند، اصطلاحاً متغیرهای Local (محلی) گفته می‌شود. از طرفی، گروه دیگری از متغیرها درون محدودهٔ اجرایی خاص و یا یک فانکشن قرار نمی‌گیرند، بلکه به صورت آزادانه و در بالاترین سطح کد تعریف می‌شوند به طوری که از این متغیرها می‌توان در تمام برنامه و در تمام فانکشن‌ها نیز استفاده کرد که این نوع متغیرها را اصطلاحاً Global (عمومی) می‌نامیم.

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

SAT = 8
var SAT;
// In your parser, this code is understood as:
var SAT;
SAT = 8;

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

مثالی که در ادامه آورده‌ایم، نشان می‌دهد که عدم استفاده از var برای ساخت متغیر چه پیامدهایی می‌تواند داشته باشد. همچنین، در این مثال از ساختاری به نام فانکشن (تابع) استفاده کرده‌ایم. در تفسیر اسکریپت زیر باید بگوییم که برنامه‌نویس می‌خواهد متغیری به نام movie ایجاد کند که یک متغیر گِلوبال است. او همچنین یک متغیر دیگر با همین نام در درون فانکشن ()showBadMovie می‌سازد. اگر در زمان تعریف متغیر movie درون فانکشن ()showBadMovie فراموش کنید که از کیورد var استفاده کنید، شرایط دور از انتظاری رخ خواهد داد:

var movie = "The Godfather";
function showGoodMovie() {
    alert (movie + " is a good movie!");
}

function showBadMovie() {
    movie = "Fantastic 4";
    alert (movie + " is a bad movie!");
}

دقت کنید که کلمهٔ کلیدی var در فانکشن ()showBadMovie از قلم افتاده و متغیر movie در این فانکشن بدون هیچ‌گونه کلمه کلیدی تعریف شده است که در این شرایط مفسر زبان جاوااسکریپت تصور می‌کند که شما می‌خواهید متغیر گِلوبال movie که در بالاتر و در خط اول خارج از فانکشن‌ها تعریف شده است را هدف قرار دهید و آپدیت کنید.

برای مشاهدهٔ نتیجهٔ نهایی که کاملاً دور از انتظار است، فانکشن‌هایی که پیش از این تعریف کرده‌ایم را اصطلاحاً Call (فراخوانی) می‌کنیم تا نتیجه را بهتر متوجه شویم. برای کال کردن یک فانکشن در زبان برنامه‌نویسی جاوااسکریپت، نام فانکشن مد نظر را نوشته و علائم () مقابل آن قرار داده و در نهایت یک علامت ; مقابل آن قرار می‌دهیم:

showGoodMovie(); // pops up "The Godfather is a good movie!"
showBadMovie(); // pops up "Fantastic 4 is a bad movie!"
/* Oh no! The global variable value is now "Fantastic 4" and not the good movie anymore! */
showGoodMovie(); // pops up "Fantastic 4 is a good movie!"

در اجرای اول و دوم همه چیز به خوبی پیش می‌رود و نتیجه دقیقاً همانند انتظار چاپ می‌شود اما در تابع ()showBadMovie مقدار متغیر movie به «Fantastic 4» تغییر پیدا می‌کند و به همین دلیل زمانی که برای بار دوم فانکشن ()showGoodMovie را صدا می‌زنیم، با پیغامی اشتباه مواجه می‌شویم.

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

نامگذاری متغیرها
نام هر متغیر می‌تواند به سه روش شروع شود که عبارتند از حروف بزرگ و یا کوچک انگلیسی و اعداد، یک آندراِسکور و یا یک علامت دلار که گرچه می‌توان از علائم _ و $ برای نامگذاری متغیرها استفاده کرد، اما بهتر است از حروف انگلیسی استفاده کنید زیرا کاراکترهای پیچیده و نامعمول می‌توانند خواندن کد شما را سخت و دشوار کند.

پس از اولین کاراکتر، می‌توانید از هر حرف و یا عدد برای اسم متغیر خود استفاده کنید و نام متغیر نیز می‌تواند به میزان دلخواه طولانی باشد. البته نام متغیرهای جاوااسکریپت نمی‌تواند شامل فاصله، عملگرهای ریاضی و یا علامت‌های نگارشی (به جز آندراِسکور) باشد مضاف بر اینکه تحت هیچ عنوان از اسامی رزروشده در خودِ زبان جاوااسکریپت مثل var یا function برای نامگذاری متغیرها استفاده ننمایید. همچنین همیشه یادتان باشد که زبان جاوااسکریپت به بزرگی و کوچکی حروف حساس است به طوری که متغیری به نام myname با متغیرهای Myname و myName کاملاً متفاوت است.

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

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

روش نامگذاری camelCase بدین شکل است که برای اتصال کلمات و عبارات انگلیسی به یکدیگر، حرف اول از کلمهٔ اول را کوچک نوشته و پس از آن حرف اول هر کلمه را بزرگ می‌نویسیم. برای نمونه، اگر بخواهیم دو کلمهٔ «active» و «user» را به عنوان نام یک متغیر انتخاب کنیم، روش نامگذاری camelCase آن به صورت activeUser خواهد بود. همان‌طور که مشاهده می‌کنید، در این روش فاصله و یا علامتی میان کلمات وجود ندارد و هر کلمه تنها با استفاده از حرف اول بزرگ از سایر کلمات تمایز داده می‌شود (Camel به معنی «شتر» است و علت وجه‌تسمیهٔ این سَبک نامگذاری این بوده که ساختار نام مد نظر به صورت شماتیک همچون کوهان شتر خواهد شد.)

همچنین برخی نکات و قواعد برای نامگذاری در زبان جاوااسکریپت وجود دارند که توسط برنامه‌نویسان حرفه‌ای انتخاب شده و بر سر آن‌ها به توافق رسیده‌اند که برخی از مهم‌ترین آن‌ها عبارتند از:

- از نام‌های خیلی کوتاه استفاده نکنید. نام‌های یک کلمه‌ای، یک حرفهی و یا آن‌هایی که معنی خاصی نمی‌دهند گزینهٔ خوبی نیستند (مثلاً digit ،number یا x)
- از نام‌های چندکلمه‌ای استفاده کنیم که تا حد ممکن دقیق باشند (مثل personName)
- در نام‌های چندکلمه‌ای همیشه صفات متغیر را در سمت چپ و در ابتدا بیاوریم (مثلاً activeUser)

زمانی که می‌خواهید یک نام چندکلمه‌ای ایجاد کنید، یک روش نامگذاری را انتخاب کرده و تا آخر با همان روش پیش بروید. برای اتصال کلمات در نام‌های چندکلمه‌ای هم دو راه وجود دارد که عبارتند از camelCase و Underscore که روش camelCase در میان برنامه‌نویسان رایج‌تر است.

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

abstract	else	instanceof	switch
boolean	enum	int	synchronized
break	export	interface	this
byte	extends	long	throw
case	false	native	throws
catch	final	new	transient
char	finally	null	true
class	float	package	try
const	for	private	typeof
continue	function	protected	var
debugger	goto	public	void
default	if	return	volatile
delete	implements	short	while
do	import	static	with
double	in	super

متغیرهایی که همیشه ثابت هستند
گاهی اوقات در فرآیند توسعهٔ نرم‌افزار به متغیرهایی نیاز پیدا می‌کنیم که نمی‌توان یا نباید آن‌ها را تغییر داد که در این شرایط برای ساخت این متغیرها باید از کلمهٔ کلیدی const استفاده کنیم:

const heightOfMiladTower = 435;
const speedOfLight = 299792458;
const numberOfProblems = 99;
const minNumberOfBooksReadIn2015 = 13;

به منظور تست کردن ماهیت کانستنت‌ها، یکی از آن‌ها را مد نظر قرار داده و داخل تابع ()alert قرار می‌دهیم:

const heightOfMiladTower = 435;
alert(heightOfMiladTower);

با ذخیره کردن فایل و رِفرش کردن آن در مرورگر، خواهیم دید که یک پاپ‌آپ نمایانگر مقدار 435 در معرض دیدمان قرار می‌گیرد. حال قصد داریم تا مقدار این کانستنت را تغییر دهیم که برای این منظور، کد زیر را مد نظر قرار می‌دهیم:

const heightOfMiladTower = 435;
alert(heightOfMiladTower);
heightOfMiladTower = 500;
alert(heightOfMiladTower);

مجدد صفحهٔ مرورگر را رِفرش می‌کنیم و خواهیم دید که دو پاپ‌آپ در معرض دیدمان قرار می‌گیرد اما این در حالی است که همان مقدار اولیهٔ 435 در پاپ‌آپ دوم هم که پیش از آن مقدار 500 را برای heightOfMiladTower در نظر گرفته بودیم نمایش داده خواهد شد.

Constant (متغیر ثابت) از همان قوانینی پیروی می‌کند که بر متغیرهای دیگر حاکم است، اما زمانی که یک کانستنت را تعریف می‌کنیم، دیگر امکان تغییر مقدار آن وجود ندارد. معنی لغوی واژهٔ Constant معادل‌هایی همچون «ثابت»، «پایدار» و یا «نامتغیر» است و با توجه به ماهیت کانستنت‌ها در زبان برنامه‌نویسی جاوااسکریپت، به نظر می رسد که نام بامُسمایی برای آن در نظر گرفته شده است. در واقع، کانستنت‌ها برای نگهداری مقادیری که عمومی و همواره ثابت هستند (مانند سرعت نور) و یا مقادیری در برنامه که می‌دانیم همیشه ثابت هستند، استفاده می‌شوند.