متغیرها در جاوا اسکریپت

در این درس می خواهیم در مورد مفهوم متغیر در برنامه نویسی و شیوه تعریف متغیرها و به‌کارگیری آنها در جاوا اسکریپت آشنا شویم. در درس انواع داده یاد گرفتیم چگونه مستقیما انواع داده رشته ای، عددی و بولی را در برنامه نویسی به‌کار ببریم، اما در این حالت شما باید داده را از پیش آماده داشته باشید. برای مثال شما می توانید رشته “Hi, Bob” را با تابع alert نمایش دهید:

alert('Hi, Bob');

تکه کد بالا به هرکسی که وارد صفحه می شود پیغام Hi, Bob را نمایش می‌دهد. حال اگر بخواهیم یک پیغام سفارشی مجزا برای هر بازدید کننده نمایش دهیم، باید نام برای هر کاربر تغییر کند و پیغام مناسب نمایش داده شود مانند “Hi, Mary,” “Hi, reza,’’ “Hi, ali,” و مانند آن. خوشبختانه هر زبان برنامه نویسی قابلتی به نام متغیر دارد که چنین امکانی را برای ما فراهم می‌کند.

متغیر(variable) چیست?

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

یک بازی که از متغیر برای نمایش امتیاز استفاده میکند

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

تعریف متغیر ها در جاوا اسکریپت

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

استفاده از کلمه کلیدی let (روش جدیدو پیشنهادی)
استفاده از کلمه کلیدی var

تفاوت‌های ظریفی بین let و var وجود دارد که در آینده در یک مقاله جداگانه به ان خواهیم پرداخت.

تعریف متغیرها با استفاده از let

برای ایجاد متغیر در جاوا اسکریپت از کلمه کلیدی let استفاده کنید. عبارت زیر یک متغیر با نام ” message ” ایجاد می کند (تعریف می‌کند):

let message;

تعریف متغیرها با استفاده از var

در جاوا اسکریپت برای ساخت متغیری با نام امتیاز (score) مانند زیر عمل می کنیم:

var score;

کلمه var یک کلمه کلیدی در جاوا اسکریپت است که یک متغیر را ایجاد و یا در اصطلاح برنامه نویسی یک متغیر را تعریف می‌کند. قسمت دوم کد score نام متغیر است که به وسیله آن ما به متغیر دسترسی داریم. و در انتها هم مانند همه دستورات جاوا اسکریپت یک سیمی کالن ; قرار می‌دهیم.

استفاده از متغیرها در جاوا اسکریپت

بعد از تعریف متغیر شما می‌توانید هر نوع داده ای را که بخواهید در آن قرار دهید. برای انجام این‌کار باید از علامت = استفاده کنید. برای مثال برای ذخیره مقدار صفر یا عدد 0 در متغیر score باید از روش زیر استفاده کنید.

let score; 
score = 0;

خط اول این برنامه یک متغیر با نام score تعریف می‌کند. در خط بعدی عدد صفر را در متغیر ذخیره می‌کنیم. علامت مساوی “=” یک عملگر انتساب است که یک مقدار در سمت راست خود را در یک متغیر در سمت چپ خود قرار می‌دهد. همچنین شما می توانید هم تعریف متغیر و هم دستور انتساب مقدار به ان را با هم در یک خط مانند کد زیر انجام دهید.

let score = 0;

شما می‌توانید انواع داده مختلف را در متغیرها ذخیره کنید

 let firstName = 'Peter';
 let lastName = 'Parker';
 let age = 22;
 let isSuperHero = true;

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

var  x,  y,  z;
var  isSuperHero=true,  isAfraidOfHeights=false;

بعد از ذخیره مقدار در متغیر شما می توانید به سادگی با استفاده از نام متغیر به آن دسترسی پیدا کنید. در واقع هرکجا که به مقدار درون متغیر نیاز داشتید کافی است نام متغیر را قرار دهید. برای مثال برای نمایش محتوای متغیر score در یک پیغام کافی است مانند زیر متغیر score را در داخل تابع ()alert قرار دهید

alert(score);

البته به این نکته دقت کنید که در تابع alert نباید نام متغیر را در کوتیشن قرار دهید. اگر متغیر را در کوتیشن قرار دهیم در خروجی عبارت score نمایش داده می شود و نه محتوای متغیر.

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

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

اگر در ابتدای راه برنامه نویسی جاوااسکریپت هستید شاید مفاهیم کمی برای شما پیچیده باشند، در این بخش قصد داریم با یک مثال درک مفاهیم متغیرها را برای شما ساده تر کنیم. بیاید فرض کنیم که متغیر یک جعبه است که یک نام یکتا به صورت برچسب بر روی آن درج شده است، قرار است ما در این جعبه داده‌ای قرار بدهیم. برای مثال – مانند شکل زیر – می‌خواهیم عبارت ‘Hello’ را در جعبه ای با نام message قرار دهیم.

برای درک بهتر : فرض کنید متغیر یک جعبه است که چیزی (داده) را درآن قرار می‌دهیم

ما می‌توانیم هر مقداری را در جعبه قرار دهیم و هر چند بار که بخواهیم محتوای آن را تغییر دهیم

let message;
message = 'Hello!';
message = 'welcome'; 
alert(message);

با تغییر مقدار یک متغیر مانند کد بالا مقدار قبلی آن از بین می‌رود و دیگر قابل دسترسی نخواهد بود

انتساب یک مقدار جدید در متغیر و از بین رفتن مقدار قبلی

شما همچنین می‌توانید دو متغیر متفاوت ایجاد کرده و مقدار یکی را در دیگری (مانند کد زیر) کپی کنید. با این کار هر دو متغیر حاوی مقدار مورد نظر خواهند بود.

let massage = 'Welcome';
let name;

message = name;

alert(name);     // Welcome
alert(message);     // Welcome

انتساب یک متغیر به متغیر دیگر در جاوا اسکریپت

نام‌گذاری متغیرها در جاوااسکریپت

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

دانلود نسخه با کیفیت اینفوگرافیک

1- نام متغیر حتما باید با کاراکترهای انگلیسی، علامت دلار “$” و یا زیر خط”_” شروع شود

به عبارت دیگر شما نمی توانید نام متغیر را با عدد یا سایر کاراکترها و نمادها شروع کنید برای مثال نام های 1score ، &score اشتباه و نام های score123 ، $score و score_ صحیح هستند.

2-نام متغیر فقط می‌تواند شامل حروف،اعداد، علامت دلار و زیر خط باشند

برای مثال شما نمی توانید از فاصله، و یا هر کاراکتر ویژه دیگری در نام متغیر استفاده کنید.

3- نام متغیرها حساس به بزرگی و کوچکی حروف هستند

بدین معنی که مفسر جاوا اسکریپت نام متغیرهای یکسان با حرف بزرگ و کوچک را مجزا در نظر می‌گیرد برای مثال Score با SCORE و score سه متغیر متفاوت هستند.

4- نام متغیر نباید کلمه کلیدی باشد

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

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

کلمات کلیدی جاوا اسکریپت	رزرو شده برای آینده	رزرو شده برای مرورگر
break	abstract	alert
case	boolean	blur
catch	byte	closed
continue	char	document
debugger	class	focus
default	const	frames
delete	double	history
do	enum	innerHeight
else	export	innerWidth
false	extends	length
finally	final	location
for	float	navigator
function	goto	open
if	implements	outerHeight
in	import	outerWidth
instanceof	int	parent
new	interface	screen
null	let	screenX
return	long	screenY
switch	native	statusbar
this	package	window
throw	private
true	protected
try	public
typeof	short
var	super
void	synchronized
while	throws
with	transient
	volatile
	volatile
	static

جدول کلمات کلیدی جاوا اسکریپت

نام گذاری متغیرها و خوانایی برنامه

علاوه بر قوانین گفته شده شما باید در نامگذاری متغیرها نکاتی را برای خوانایی و با معنایی بیشتر برنامه رعایت کنید تا کد خروجی شما واضح، خوانا و زیبا باشد.

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

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

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

ثابت در جاوااسکریپت (Constants)

Constant یا ثابت یکی دیگر از مفاهیم جاوا اسکریپت است که دقیقا مانند متغیرها عمل می‌کند با این تفاوت که مقدار داخل یه ثابت را نمی‌توان در طول برنامه تغییر داد. برای تعریف یک Constant در جاوا اسکریپت کافی است بجای استفاده از let از عبارت constant قبل از نام متغیر استفاده کنیم.

const myBirthday = '18.04.1982';

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

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // error, can't reassign the constant!

ممکن است این سوال‌ها ذهن شما را درگیر کنند که اصولا چه نیازی به ثابت ها در جاوا اسکریپت داریم ؟ یا اینکه چرا از متغیرها استفاده نکنیم و خودمان مقدار آنها را ثابت نگه داریم؟ یا اصلا چرا بجای ثابت همان مقدار را قرار ندهیم؟ در پاسخ به این سوال باید بگویم که چند دلیل عمده برای استفاده از ثابت وجود دارد:

اول ایکنه ما زمانی از ثابت استفاده میکنیم که مطمئن باشیم مقدار آن هیچ‌گاه تغییر نخواهد کرد، مثلا در یک برنامه ماشین حساب نیاز دارید عدد پی را ذخیره کنید، چون عدد پی همیشه مقدار ثابت 3.14 است پس بهتر است آن را در یک ثابت مانند زیر ذخیره کنیم

const pi = '3.14';

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

خلاصه درس متغیرها در جاوا اسکریپت:

تعریف متغیرها با روش جدید let
تعریف متغیرها با روش قدیمی var
َشیوه مقدار دهی اولیه و همچنین استفاده از متغیرها
تعریف توابع با کلمه کلیدی const
قوانین نامگذاری مغیرها در جاوا اسکریپت

در این درس به تفصیل در مورد متغیرها، شیوه معرفی با let و var، مقدار دهی، ثوابت و استفاده از آنها سخن به میان آمد در درس بعدی: کار با متغیرها، بیشتر با آنها آشنا خواهید شد.

تمرینات درس متغیرها در جاوا اسکریپت

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

اگر مطالب فوق را به خوبی درک کرده و آماده درس بعدی هستید بهتر از قبل از رفتن به درس بعدی خودتان را با آزمون ساده زیر محک بزنید.

آزمون درس متغیرها Google form