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

امروز میخواهیم درباره ی متغیر ها در جاوااسکریپت صحبت کنیم.پس از خواندن دو مقاله آخر(عیب یابی و انواع خطا 3JavaScript و آموزش برنامه‌نویسی در 2JavaScript)، اکنون باید بدانید جاوا اسکریپت چیست، چه کاری می تواند برای شما انجام دهد، چگونه از آن در کنار سایر فناوری های وب استفاده می کنید، و ویژگی های اصلی آن از سطح بالا چگونه به نظر می رسد. در این مقاله، ما به اصول اولیه واقعی می پردازیم و به نحوه کار با اساسی ترین بلوک های سازنده جاوا اسکریپت یعنی متغیر ها می پردازیم.

پیش نیازها:

سواد اولیه کامپیوتر، درک اولیه HTML و CSS، درک اینکه جاوا اسکریپت چیست.

هدف:

آشنایی با مبانی متغیر های جاوا اسکریپت.

ابزارهایی که نیاز دارید

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

متغیر چیست؟

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

مثال متغیر ها :

بیایید به یک مثال ساده نگاه کنیم :

<button id=”button_A“>Press me</button>

<h3 id=”heading_A“></h3>

const buttonA = document.querySelector(‘#button_A’);

const headingA = document.querySelector(‘#heading_A’);

buttonA.onclick =() => {

  const name =prompt(‘What is your name?’);

  alert(`Hello ${name}, nice to see you!`);

  headingA.textContent = `Welcome ${name}`;

}

در این مثال با فشار دادن دکمه Press me مقداری کد اجرا می شود. خط اول کادری روی صفحه ظاهر می شود که از خواننده می خواهد نام خود را وارد کند و سپس مقدار را در یک متغیر ذخیره می کند. خط دوم یک پیام خوشامدگویی را نشان می دهد که شامل نام آنها است که از مقدار متغیر گرفته شده است و خط سوم آن نام را در صفحه نمایش می دهد.

بدون متغیر:

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

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

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

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

توجه:

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

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

.توجه:

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

فقط با تایپ کردن نام متغیر، می توانید آزمایش کنید که آیا این مقادیر اکنون در محیط اجرا وجود دارند یا خیر.به طور مثال:

myName;

myAge;

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

scoobyDoo;

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

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

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

myName = ‘Chris’;

myAge = 37;

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

myName;

myAge;

شما می توانید یک متغیر را به طور همزمان اعلام و مقداردهی اولیه کنید، مانند این:

let myDog = ‘Rover’;

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

نکته ای در مورد var

احتمالاً با استفاده از کلمه کلیدی var، روش متفاوتی برای اعلام متغیرها نیز مشاهده خواهید کرد:

var myName;

var myAge;

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

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

myName = ‘Chris’;

function logName() {

  console.log(myName);

}

logName();

var myName;

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

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

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

var myName = ‘Chris’;

var myName = ‘Bob’;

اما موارد زیر باعث ایجاد خطا در خط دوم می شود:

در عوض باید این کار را انجام دهید:

let myName = ‘Chris’;

myName = ‘Bob’;

باز هم، این یک تصمیم منطقی زبانی است. هیچ دلیلی برای اعلام مجدد متغیرها وجود ندارد – فقط همه چیز را گیج کننده تر می کند.به این دلایل و موارد دیگر، توصیه می کنیم به جای var، از کد let in استفاده کنید. دیگر دلیلی برای استفاده از var وجود ندارد، زیرا از Internet Explorer 11 پشتیبانی می شود.

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

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

myName = ‘Bob’;

myAge = 40;

کنار گذاشتن قوانین نامگذاری متغیر ها

شما می توانید یک متغیر را تقریباً هر چیزی که دوست دارید فراخوانی کنید، اما محدودیت هایی وجود دارد. به طور کلی، شما باید فقط از نویسه های لاتین (0-9، a-z، A-Z) و نویسه زیرخط استفاده کنید.

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

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

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

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

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

متغیرها به حروف کوچک و بزرگ حساس هستند – بنابراین myage یک متغیر متفاوت از myAge است.
نکته آخر: شما همچنین باید از استفاده از کلمات رزرو شده جاوا اسکریپت به عنوان نام متغیر خودداری کنید ، منظور ما از این کلمه کلماتی است که نحو واقعی جاوا اسکریپت را تشکیل می دهند! بنابراین، شما نمی توانید از کلماتی مانند var، function، let و for به عنوان نام متغیر استفاده کنید. مرورگرها آنها را به عنوان آیتم های کد مختلف می شناسند و بنابراین با خطا مواجه خواهید شد.

اکنون با در نظر گرفتن راهنمایی بالا، چند متغیر دیگر ایجاد کنید.

انواع متغیر

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

تاکنون دو مورد اول را بررسی کرده ایم، اما موارد دیگری نیز وجود دارد.

اعداد:

می توانید اعداد را در متغیرها ذخیره کنید، یا اعداد کامل مانند ۳۰ (که اعداد صحیح نیز نامیده می شود) یا اعداد اعشاری مانند ۲.۴۵۶ (همچنین اعداد شناور یا ممیز شناور نیز نامیده می شوند). برخلاف برخی از زبان های برنامه نویسی دیگر، نیازی به تعریف انواع متغیر در جاوا اسکریپت ندارید. هنگامی که به یک متغیر مقدار عددی می دهید، نقل قول را وارد نمی کنید:

let myAge = 17;

 (رشته ها)Strings:

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

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

بولین ها:

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

let iAmAlive = true;

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

let test = 6 < 3;

این از عملگر “کمتر از” (<) برای آزمایش اینکه آیا ۶ کوچکتر از ۳ است یا خیر استفاده می کند. بعداً در این دوره اطلاعات بیشتری در مورد چنین اپراتورهایی خواهید آموخت.

آرایه ها:

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

let myNameArray = [‘Chris’, ‘Bob’, ‘Jim’];

let myNumberArray = [10, 15, 40];

هنگامی که این آرایه ها تعریف شدند، می توانید به هر مقدار با توجه به موقعیت آنها در آرایه دسترسی داشته باشید. این خطوط را امتحان کنید:

myNameArray[0]; // should return ‘Chris’

myNumberArray[2]; // should return 40

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

اشیاء (Objects):

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

سعی کنید خط زیر را در کنسول خود وارد کنید:

let dog = { name : ‘Spot’, breed : ‘Dalmatian’ };

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

dog.name

تایپ دینامیک:

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

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

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 استفاده می کنیم ، این نوع داده متغیری را که بعد از آن تایپ می کنید برمی گرداند. اولین باری که فراخوانی می شود، باید رشته را برگرداند، زیرا در آن نقطه متغیر myNumber حاوی یک رشته، ‘500’ است. نگاهی بیندازید و ببینید بار دوم که با آن تماس می گیرید چه چیزی برمی گرداند.

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

علاوه بر متغیرها، می توانید ثابت ها را نیز اعلام کنید. اینها مانند متغیرها هستند، با این تفاوت که:

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

let count;

اگر سعی کنید این کار را با استفاده از const انجام دهید، با یک خطا روبرو می شوید:

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

let count = 1;

count = 2;

اگر سعی کنید این کار را با استفاده از const انجام دهید، با یک خطا روبرو می شوید:

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

const bird = { species : ‘Kestrel’};

console.log(bird.species);  // “Kestrel”

می‌توانید ویژگی‌های یک شئ اعلام شده با استفاده از const را به‌روزرسانی، اضافه یا حذف کنید، زیرا حتی اگر محتوای شئ تغییر کرده باشد، ثابت همچنان به همان شئ اشاره می‌کند:

bird.species = ‘Striated Caracara’;

console.log(bird.species);  // “Striated Caracara”

چه زمانی از const و چه زمانی از let استفاده کنیم؟

اگر نمی‌توانید آنقدر که می‌توانید با let با const انجام دهید، چرا ترجیح می‌دهید از آن استفاده کنید تا اجازه دهید؟ در واقع const بسیار مفید است. اگر از const برای نامگذاری یک مقدار استفاده کنید، به هر کسی که به کد شما نگاه می کند می گوید که این نام هرگز به مقدار دیگری اختصاص داده نخواهد شد. هر زمان که این نام را ببینند، متوجه خواهند شد که به چه چیزی اشاره دارد.

در این دوره، ما اصل زیر را در مورد زمان استفاده از let و زمان استفاده از const اتخاذ می کنیم:

در صورت امکان از const و در صورت لزوم از let استفاده کنید.

این بدان معناست که اگر می توانید یک متغیر را هنگام اعلام،مقداردهی اولیه کنید و بعداً نیازی به تخصیص مجدد آن ندارید، آن را ثابت کنید.

در پایان

شما به پایان این مقاله رسیده اید، اما آیا می توانید مهمترین اطلاعات را به خاطر بسپارید؟ می‌توانید آزمایش‌های بیشتری برای تأیید اینکه این اطلاعات را قبل از ادامه کار حفظ کرده‌اید پیدا کنید؟پس به تمرین ادامه دهید و مهارت هایی که تا کنون آموختید بسنجید.در مقاله بعدی، با جزئیات بیشتر بر روی اعداد تمرکز خواهیم کرد و به نحوه انجام ریاضیات پایه در جاوا اسکریپت خواهیم پرداخت.

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