متغیرها در جاوااسکریپت چیست ؟ هر آنچه که نیازه از Javascript Variables بدانید

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

variable یا همان متغیر چیست ؟

متغیرها مانند جعبه هایی برای ذخیره داده های ما هستند و ما میتونیم داده ایی مانند یک Number را درون آن ذخیره و بعدا در یک عملیات ریاضی مثل جمع یا تفریق از مقدار اون استفاده کنیم و یا میتونیم داده ایی چون یک String را درون یک متغیر ذخیره و بعدا در یک عبارت متنی از مقدار اون متغیر استفاده کنیم. بطور کل دیدما نسبت به متغیر ها به این صورت هست که اونهارو همانند یکسری جعبه اسم دار میبینیم که هرنوع داده ایی مثل string, number, array, boolean, object, function یا حتی یک element از dom را میتونیم توی اون ذخیره کنیم.

مثالی از یک variable

به مثال زیر توجه کنید:

<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}`;
};

در مثال بالا، کلیک کردن برروی دکمه کدی را اجرا خواهد کرد، خط اول یک prompt را نشان میده و از کاربر میخاد تا اسمش رو وارد کنه و سپس اسم وارد شده توسط کاربر رو در متغیر name ذخیره میکنه، خط دوم اسمی که کاربر وارد کرده را در کنار یک متن خوش آمد گویی نمایش میده و در نهایت خط سوم هم اسم وارد شده توسط کاربر را در صفحه وب و در تگ h3 نمایش میده.

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

نکته جالب و قابل توجهی که درمورد متغیرها وجود داره این هست که اونا هرنوعی از data type را شامل میشوند و فقط محدود به number یا string نیستند.

declaring variable یا تعریف متغیر

برای استفاده از یک متغیر، طبیعتا در ابتدای امر باید اونرو ایجاد کنیم و به اینکار declaring variable یا تعریف متغیر میگوییم و برای اینکار کافیه تا از کلمه کلیدی let یا var یا const که هر سه با تفاوتی کوچک جهت ایجاد متغیر به کار میروند استفاده کنیم و در ادامه نامی دلخواه را بنویسیم تا متغیر ما ایجاد شود.

let myName;
let myAge;

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

ایجاد مقدار برای متغیرها

بعد از اینکه یک متغیر را تعریف کردیم میتونیم با نوشتن نام متغیر و پس از آن یک علامت برابر یا مساوی (‌ = ) و سپس مقدار موردنظر،‌میتونیم به متغیر مدنظرمون مقداری را منصوب کنیم و داده مدنظر را توی متغیر مدنظرمون ذخیره کنیم ( توجه داشته باشید که این شکل از اختصاص دادن مقدار به یک متغیر را فقط زمانی میتوانیم استفاده کنیم که برای ایجاد آن متغیر از کلمه var یا let استفاده کرده باشیم )

myName = "Chris";
myAge = 37;

حال اگر مجدد از این دو متغیر ()console.log بگیریم میبینیم که مقادیری که به اونها اضافه کردیم اکنون در console برای ما چاپ میشود.

همچنین ما میتونیم همزمان با ایجاد متغیر، اونرو مقدار دهی هم بکنیم، همانند مثال زیر:

let website = "vaspar";

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

نکته ای درمورد استفاده از کلمه var

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

var myName;
var myAge;

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

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

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

myName = "Chris";

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

logName();

var myName;

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

همچین با استفاده از کلمه var ما میتونیم یک متغیر را با یک نام بارها و بارها تعریف کنیم، بدون اینکه اروری بگیریم اما با استفاده از کلمه let این امر ممکن نیست و با دومین تکرار ما با ارور مواجه خواهیم شد:

var myName = "Chris";
var myName = "Bob";
// کدبالا بدون مشکل کارخواهد کرد

let myName = "Chris";
let myName = "Bob";
// اما این کد به ارور خواهد خورد

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

بروزرسانی variables ( متغیرها )

پس از تعریف و مقداردهی یک متغیر میتونیم با دادن value متفاوت، مقدار اون متغیر را بروزرسانی کنیم

let myName = "John";
let myAge = 32;

myName = "Bob";
myAge = 40;

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

شما میتونید تقریبا از هر اسمی برای نامگذاری متغیرهاتون استفاده کنید،‌اما یکسری محدودیت هایی هم برای این امر وجود داره و بطور کلی ما میتونیم فقط از اسامی لاتین (0-9, a-z, A-Z) و underscore ( _ ) استفاده کنیم.

• شما نباید از عبارات یا کلمات دیگری استفاده کنید چراکه یا باعث ارور میشه و یا باعث سخت فهم شدن کد.
• در ابتدای نام متغیر از _ استفاده نکنید چراکه از _ بیشتر در برخی constructor های جاوااسکریپت استفاده میشه و ممکنه کد گیج کننده بشه.
• در ابتدای نام متغیر از اعداد استفاده نکنید، چراکه باعث بوجود آمدن ارور میشه.
• مهمترین اصلی که در نامگذاری متغیرها باید به اون پایبند بود lower camel case هست. به عنوان مثال فرض کنید متغیری داریم که برای ذخیره اطلاعات یک مقاله قراره ازش استفاده کنیم و طبق این اصل اسم اونرو articleData قرار میدیم.
• از کلمات شهودی و توصیفی برای متغیرها استفاده کنید، نه کلمات تک حرفی یا خیلی کوتاه یا برعکس خیلی طولانی. از کلماتی استفاده کنید که به خوبی داده ایی که در اون متغیر قرار ذخیره بشه رو توصیف میکنه دقیقا مثل کلمه articleData که قبلتر گفتیم.
• نام متغیر ها case sensitive هست و به بزرگی و کوچکی کلمات حساسه،‌به عنوان مثال متغیری با نام myage با متغیری با نام myAge متفاوت و مستقل هست.
• همچنین به عنوان نکته آخر از کلمات رزرو شده جاوااسکریپت استفاده نکنید چراکه باعث ایجاد ارور میشن. به عنوان مثال کلماتی چون var , function , for , while

چند مثال خوب از نامگذاری متغیرهارو در زیر باهم ببینیم:

age
myAge
init
initialColor
finalOutputValue
audio1
audio2

همچنین چند مثال بد از نامگذاری متغیرها:

1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongvariablenameman

variable types ( انواع متغیرها )

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

Number

ما میتونیم اعداد کاملی ( integers ) مانند 30، یا اعداد اعشاری ( decimal ) مانند 2.275 را در متغیرها ذخیره کنیم

let myAge = 17;

String

string ها تکه های متنی هستند و نشانه اصلی اونها بین singe quote ( ' ' ) یا double quote ( " " ) بودنشونه و اگر متن موردنظرمان را بین یکی از این دو قرار ندیم، جاوااسکریپت سعی میکنه اونهارو به چشم نام متغیر ببینه.

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

Boolean

boolean ها مقدارهای true / false هستند و اونا فقط میتونن شامل دوتا مقدار true یا false باشن و کاربرد اونها توی تست عبارات شرطی هست.

let isOnline = true;
// مثالی ساده از متغیری با مقدار boolean

اما در واقعیت بیشتر به صورت زیر از boolean ها استفاده میشه:

let test = 6 < 3;

در اینجا ما داریم از operator عملیاتی کوچکتر ( > ) استفاده میکنیم و شرطی رو برسی میکنیم که آیا عدد 6 از 3 کوچکتر هست یا خیر و همانطور که انتظار دارید جواب false خواهد بود چراکه 6 از 3 کوچکتر نیست.

Array

آرایه یک آبجکت تکی هست با مقادریر متعددی که در بین bracket ( [ ] ) محصور شده اند و هر مقدار با مقدار بعدی خود با commas ( , ) جدا شده.

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

 پس از اینکه یک متغیر با مقدار آرایه تعریف کردیم میتونیم به هر عضو اون آرایه از طریق شماره جایگاهش ( index ) دسترسی داشته باشیم و به این نکته توجه داشته باشید که شمارش index اعضای آرایه از 0 شروع میشه:

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

Object

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

let person = { name: "Mehran", age: 23 };

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

person.name

تعیین تایپ متغیرها بصورت خودکار

جاوااسکریپت یک زبان "dynamically typed language" هست و به این بدان معناست که نیازی نیست تا شما تایپ تک تک متغیرهارو تعیین کنید و خود زبان بصورت خودکار تایپ متغیرهارو تعریف میکنه. به عنوان مثال اگر شما یک متغیر ایجاد کنید و به آن مقدار " hello world " را بدید، مرورگر بصورت خودکار آنرا به عنوان string تلقی میکنه.

let myString = "Hello World";

حتی اگر شما یک عدد را بین double quotes ( " " ) قرار دهید، بازهم مرورگر اونرو به عنوان یک string درنظر میگیره

let myNumber = "500";
typeof myNumber; // string
myNumber = 500;
typeof myNumber; // number

constant ها در جاوااسکریپت

دقیقا مشابه متغیرها ( variables ) ما میتونیم constant هایی رو تعریف کنیم که درواقع همان نوعی از متغیرها هستند که با کلمه کلیدی const تعریف میشوند و دو فرق خیلی مهم با var و let دارند:

• در همان زمان تعریف کردنشون لازمه مقداری رو هم براشون درنظر بگیریم.
• نمیتونیم بعد از تعریف شدن مقدار جدیدی رو  بصورت مستقیم و با عملیات ( = )  بهشون منصوب کنیم.

به عنوان مثال ما میتونیم با استفاده از کلمه let متغیری را بدون مقدار تعریف کنیم،‌اما با استفاده از کلمه const این مورد امکان پذیر نیست و به ارور میخوریم:

let count; // بدون مشکل

const count; // باعث ایجاد ارور میشه

همچنین امکان منصوب کردن مقدار جدید به آن صورت که برای متغیر های let یا var انجام میدادیم امکان پذیر نیست:

let count = 1;
count = 2;
// کد بالا بدون مشکل کار میکنه و مقدار جدید به متغیر منصوب میشه

const number = 1;
number = 2;
// اما این کد به ارور میخوره و امکان پذیر نیست

اما ما میتونیم مقدار یک constant را حذف، بروزرسانی و یا داده جدیدی را به اون اضافه کنیم:

const person = { age: 24 };
console.log(person.age); // 24

person.age = 32;
console.log(person.age); // 32

اینکار امکان پذیر هست به این دلیل که ما صرفا داریم در برخی از data type ها صرفا مقدار این object را به عنوان مثال ویرایش میکنیم،‌اما این constant هنوز داره به همان object قبل از ویرایش اشاره میکنه و کلیت و ماهیت اونرو ما با عملگر ( = ) تغییر ندادیم!