۳ دسامبر ۲۰۲۲

متغیرها

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

  1. یک فروشگاه آنلاین – اطلاعات ممکن است شامل كالاهایی شود که فروخته می‌شوند و در سبد خرید هستند.
  2. یک نرم‌افزار چت – اطلاعات ممکن است شامل کاربران، پیام‌ها و دیگر موارد شود.

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

متغیر

یک متغیر (variable) “حافظه‌ای نام گذاری شده” برای داده است. ما می‌توانیم از متغیرها برای ذخیره کالاها، بازدید کننده‌ها و داده‌های دیگر استفاده کنیم.

برای ساخت یک متغیر در جاوااسکریپت از let استفاده کنید.

عبارت زیر یک متغیر با نام “message” می‌سازد (یا به عبارتی دیگر: تعریف می‌کند):

let message;

حالا می‌توانیم اطلاعاتی را از طریق عملگر = در این متغیر قرار دهیم :

let message;

message = 'Hello'; // ذخیره کن message را در متغیر «Hello» رشته

حال رشته‌ای که نوشتیم در بخشی از حافظه کامپیوتر که در اختیار این متغیر می‌باشد ذخیره شده است. ما می‌توانیم با استفاده از اسم متغیر به آن دسترسی داشته باشیم:

let message;
message = 'سلام!';

alert(message); // محتوای متغیر را نشان می‌دهد

برای اختصار می‌توانیم تعریف متغیر و مقداردهی به آن را در یک خط قرار دهیم :

let message = 'Hello!'; // متغیر را تعریف کن و مقداردهی کن

alert(message); // !سلام

همینطور می‌توانیم چند متغیر را در یک خط تعریف کنیم :

let user = 'John', age = 25, message = 'سلام';

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

تعریف کردن در چند خط کمی طولانی‌تر است، اما برای خواندن راحت تر است:

let user = 'John';
let age = 25;
let message = 'سلام';

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

let user = 'John',
  age = 25,
  message = 'سلام';

…یا حتی به صورت “comma-first” اینکار را انجام می‌دهند:

let user = 'John'
  , age = 25
  , message = 'Hello';

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

var بجای let

در اسکریپت‌های قدیمی ممکن است بجای کلیدواژه let با کلیدواژه var برخورد کنید :

var message = 'سلام';

کلیدواژه var تقریبا* با* let یکسان است. آن هم یک متغیر را تعریف می‌کند، ولی روش کار آن قدیمی است.

تفاوت‌های کوچکی بین این دو وجود دارد که در حال حاضر به آن نمی‌پردازیم. در مبحث ‌کلمه‌ی "var" قدیمی با جزییات به آن خواهیم پرداخت.

یک مقایسه‌ی واقعی

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

برای نمونه، تصور کنید متغیر “message” در جعبه‌ای با برچسب message و با مقدار “سلام!” داخل آن وجود دارد:

ما می‌توانیم هر مقداری در آن قرار دهیم.

همینطور می‌توانیم هر چند بار که خواستیم این مقدار را تغییر دهیم:

let message;

message = 'سلام!';

message = 'World!'; // مقدار تغییر کرد

alert(message);

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

ما همینطور می‌توانیم دو متغیر تعریف کرده و اطلاعات یکی را در دیگری کپی کنیم.

let hello = 'سلام دنیا!';

let message;

// کپی کن message در hello مقدار «سلام دنیا» را از
message = hello;

// حالا هر دو متغیر یک مقدار دارند
alert(hello); // !سلام دنیا
alert(message); // !سلام دنیا
دوبار تعریف کردن باعث ارور می‌شود

یک متغیر باید فقط یک بار تعریف شود.

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

let message = "این";

// منجر به خطا می‌شود `let` تکرار کردن
let message = "آن"; // SyntaxError: Identifier 'message' has already been declared

بنابراین، ما باید متغیر را یک بار تعریف کنیم و سپس بدون let به آن رجوع کنیم.

زبان‌های Functional

جالب است بدانید زبان‌های تمام functional (تمام تابع‌محور) مانند Haskell وجود دارند که تغییر مقدار متغیر را ممنوع کرده است.

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

اگرچه در نگاه اول این زبان‌ها عجیب به نظر می‌رسند، ولی کاملا توانایی توسعه پروژه‌های جدی را دارند. مهم‌تر از آن، در زمینه‌هایی مانند محاسبات موازی (Parallel Computation) این محدودیت‌ها تبدیل به مزیت می‌شوند.```

نام‌گذاری متغیرها

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

  1. نام باید فقط از حروف، اعداد یا علامت $ و _ تشکیل شده باشد.
  2. اولین کاراکتر نمی‌تواند عدد باشد.

مثال‌هایی از نام‌های قابل قبول:

let userName;
let test123;

زمانی‌ که یک نام متشکل از چند کلمه است، عموما از روش camelCase استفاده می‌شود. به این صورت که کلمات یکی پس از دیگری پشت هم نوشته می‌شوند و حرف اول هر کلمه (به جز حرف اول کلمه اول) به حرف بزرگ است: myVeryLongName.

همینطور از '$' و '_' نیز می‌توان استفاده کرد. آنها فقط علامت هستند و معنی خاصی ندارند و همانند حروف قابل استفاده هستند.

این نام‌ها معتبر هستند :

let $ = 1; // یک متغیر را با نام "$" تعریف کردیم
let _ = 2; // و حالا یک متغیر با نام "_" تعریف کردیم

alert($ + _); // 3

مثال‌هایی از نام‌های نامعتبر:

let 1a; // نمی‌تواند با یک عدد شروع شود

let my-name; // خط‌های پیوند '-' در نام‌ها ممنوع هستند
بزرگی و کوچکی حروف مهم است

متغیرهای apple و Apple دو متغیر متفاوت هستند.

کاراکترهای غیر انگلیسی مجاز هستند ولی توصیه نمی‌شوند

امکان استفاده از هر زبانی، شامل حروف cyrillic، لوگوگرام‌های چینی و دیگر زبان‌ها وجود دارد، مثلا اینگونه::

let имя = '...';
let 我 = '...';

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

نام‌های رِزِرو شده

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

برای نمونه let، class، return و function رزرو شده‌اند.

کد پایین یک Syntax error خواهد داشت:

let let = 5; // !نامید "let" نمی‌توان یک متغیر را
let return = 5; // !نامید "return" همچنین نمی‌توان آن را
مقدار دهی بدون use strict

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

// در این مثال نیست "use strict" :در نظر داشته باشید

num = 5; // ساخته شده است حتی اگر قبلا وجود نداشت "num" متغیر

alert(num); // 5

این روش مناسب نیست و در صورت وجود use strict با خطا مواجه خواهد شد :

"use strict";

num = 5; // Error: num is not defined
//

ثابت‌ها

برای تعریف ثابت (متغیری که تغیر نمی‌کند) از const بجای let استفاده می‌کنیم:

const myBirthday = '18.04.1982';

متغیرهایی که با const ساخته می‌شود را ثابت (constant) می‌گوییم. آنها قابل تغییر نیستند و تلاش برای اینکار با خطا روبرو خواهد شد :

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // !ارور، نمی‌توان ثابت را دوباره مقداردهی کرد

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

ثابت‌های با حروف بزرگ

به صورت یک عُرفِ همه‌گیر، از ثابت‌های با حروف بزرگ به عنوان نام مستعار برای مقادیری که به خاطر سپردن آنها دشوار است، استفاده می‌شود. این دسته از ثابت‌ها اصطلاحا prior to execution (پیش از اجرای برنامه) مقدارشان مشخص است.

در ثابت‌ها از حروف بزرگ و _ استفاده می‌شود:

برای مثال، بیایید ثابت‌هایی برای رنگ‌ها در قالب به اصطلاح “وب” (هگزادسیمال) بسازیم:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...زمانی که نیاز داشته باشیم رنگ انتخاب کنیم
let color = COLOR_ORANGE;
alert(color); // #FF7F00

مزایا :

  • COLOR_ORANGE بسیار راحت‌تر از "#FF7F00" به یاد می‌ماند.
  • اشتباه در نوشتن "#FF7F00" بسیار محتمل‌تر از COLOR_ORANGE است.
  • در هنگام خواندن کد، خواندن COLOR_ORANGE بسیار معنادارتر از #FF7F00 است.

چه زمانی باید از حروف بزرگ و چه زمانی باید از حروف معمولی برای نام‌گذاری یک constant استفاده کنیم؟ بیایید قضیه را روشن کنیم.

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

برای نمونه:

const pageLoadTime = /* زمان بارگیری برای یک صفحه وب */;

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

به تعبیری دیگر، ثابت‌های با حروف بزرگ فقط به عنوان نام مستعار برای مقدارهای «hard-coded» استفاده می‌شوند.

نام‌های مناسب انتخاب کنید

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

نام یک متغیر باید معنی واضح و روشنی داشته باشد که داده درون خود را توصیف می‌کند.

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

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

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

بعضی از دستورالعمل‌های مفید:

  • از نام‌هایی که برای انسان قابل فهم است استفاده کنید مانند userName یا shoppingCart.
  • از نام‌های مخفف یا کوتاه استفاده نکنید مانند a، b، c، مگر آنکه واقعا بدانید چه می‌کنید.
  • نام‌های کاملا واضح و مختصر انتخاب کنید. نمونه‌هایی از نام‌های بد data و value هستند. این نام‌ها هیچ‌چیز را توضیح نمی‌دهند. استفاده از این دست نام‌ها فقط زمانی قابل قبول است که محتوای کدی که می‌نویسید به طور استثنا مشخص کند که data یا value به چه چیزی اشاره می‌کند.
  • با ذهن خود و تیم کاریتان توافق نظر داشته باشید. اگر به مخاطبان وب‌سایت‌تان user می‌گویید، متغیرهای مرتبط را بجای currentVisitor یا newManInTown باید currentUser یا newUser بنامید.
ایجاد یا استفاده مجدد?

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

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

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

یک متغیر اضافی خوب است، نه مضر.

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

خلاصه

ما می‌توانیم با استفاده از کلیدواژه‌های var، let یا const متغیرهایی را برای ذخیره سازی اطلاعات تعریف کنیم.

  • let – حالت جدید تعریف متغیر است.
  • var – حالت قدیمی تعریف متغیر می‌باشد. معمولا به هیچ وجه از این روش استفاده نمی‌کنیم، اما تفاوت‌های آن را در بخش ‌کلمه‌ی "var" قدیمی بیان خواهیم کرد تا در صورت نیاز بتوانید از آن استفاده نمایید.
  • const – همانند let است با این تفاوت که مقدار آن قابل تغییر نیست.

نام متغیرها باید به گونه‌ای باشد که به ما اجازه دهد به راحتی متوجه شویم چه چیزی درون آن است.

تمارین

اهمیت: 2
  1. دو متغیر تعریف کنید : admin و name.
  2. مقدار John را به name اختصاص دهید.
  3. مقدار name را در admin کپی کنید.
  4. با استفاده از alert مقدار admin را نمایش دهید (خروجی باید John باشد).

در کدهای زیر، هر خط مربوط به مواردی است که در لیست تمرین بیان شد.

let admin, name; // می‌توانیم دو متغیر را یکجا تعریف کنیم

name = "John";

admin = name;

alert( admin ); // "John"
اهمیت: 3
  1. متغیری با نام سیاره‌مان تعریف کنید. چطور نامی مناسب برای آن انتخاب می‌کنید؟
  2. متغیری برای ذخیره نام کاربر کنونی در وب‌سایت تعریف کنید. چطور نامی مناسب برای آن انتخاب می‌کنید؟

متغیر برای سیاره ما

ساده است:

let ourPlanetName = "زمین";

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

اسم بازدیدکننده کنونی

let currentUserName = "John";

دوباره، ما می‌توانستیم آن را به userName کوتاه کنیم اگر می‌دانستیم که قطعا کاربر، کاربر کنونی است.

ویرایشگرهای مدرن و خاصیت autocomplete نوشتن اسم متغیرهای طولانی را راحت می‌کنند. در اسم آنها صرفه جویی نکنید. یک اسم تشکیل شده از 3 کلمه خوب است.

و اگر ویرایشگر شما autocompletion مناسبی ندارد، یک ویرایشگر جدید بگیرید.

اهمیت: 4

کد زیر را آزمایش کنید :

const birthday = '18.04.1982';

const age = someCode(birthday);

ما در اینجا یک ثابت با نام birthday برای تاریخ داریم و ثابتی دیگر با نام age.

مقدار ageبا استفاده از someCode()، یعنی فراخوانی تابع که ما هنوز آن را توضیح نداده‌ایم (به زودی توضیح داده خواهد شد)، از birthday محاسبه می‌شود. اما اینجا جزئیات مهم نیستند و نکته این است که age به نحوی بر اساس birthday محاسبه می‌شود.

آیا نوشتن birthday با حروف بزرگ درست است؟ برای age چطور؟

const BIRTHDAY = '18.04.1982'; // با حروف بزرگ باشد؟ birthday آیا

const AGE = someCode(BIRTHDAY); // با حروف بزرگ باشد؟ age آیا

به طور کلی از ثابت‌های با حروف بزرگ برای مقادیر “hard-code” شده استفاده می‌کنیم. یا به عبارتی دیگر، زمانی که مقدار، قبل از اجرا مشخص باشد و به صورت مستقیم درون کد نوشته شود.

در این کد birthday دقیقا این شرایط را دارد، پس آن را با حروف بزرگ می‌نویسیم.

در مقابل age در هنگام اجرای برنامه (Run Time) محاسبه خواهد شد. ما امروز یک سن داریم و سال آینده سن ما تغییر خواهد کرد. به یک معنا age ثابت است چون در هنگام اجرای کد تغییری نمی‌کند. اما “ثبات کمتری” نسبت به birthday دارد: محاسبه می‌شود، پس باید آن را با حروف کوچک بنویسیم.

نقشه آموزش