۲۵ ژوئیه ۲۰۲۲

متغیرها

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

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

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

متغیر

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

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

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

let message;

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

let message;

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

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

let message;
message = 'Hello!';

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

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

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

alert(message); // Hello!

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

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

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

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

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

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

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

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

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

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

var بجای let

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

var message = 'Hello';

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

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

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

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

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

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

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

let message;

message = 'Hello!';

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

alert(message);

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

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

let hello = 'Hello world!';

let message;

// 'Hello world' را از hello در message کپی کن
message = hello;

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

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

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

let message = "This";

// تکرار کردن `let` منجر به خطا می‌شود
let message = "That"; // SyntaxError: 'message' از قبل تعریف شده است

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

زبان‌های Functional

جالب است بدانید زبان‌های functional مانند Scala یا Erlang تغییر مقدار متغیر را ممنوع کرده‌اند.

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

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

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

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

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

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

let userName;
let test123;

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

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

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

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

alert($ + _); // 3

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

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

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

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

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

امکان استفاده از کاراکترهای زبان‌های دیگر، شامل حروف cyrillic یا حتی hieroglyphs(حروف تصویری) وجود دارد:

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; // ارور: num تعریف نشده است

ثابت‌ها

برای تعریف ثابت (متغیری که تغیر نمی‌کند) از 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 استفاده کنیم؟ بیایید قضیه را روشن کنیم.

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 کوتاه کنیم اگر می‌دانستیم که قطعا کاربر، کاربر کنونی است.

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

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

اهمیت: 4

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

const birthday = '18.04.1982';

const age = someCode(birthday);

ما در اینجا یک ثابت با نام birthday داریم و ثابتی دیگر با نام age که با کمک کدهای دیگر از birthday محاسبه می‌شود (برای کوتاه شدن ارائه نشده‌است، و همچنین به دلیل اینکه جزییات اینجا اهمیت ندارند).

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

const BIRTHDAY = '18.04.1982'; // با حروف بزرگ؟

const AGE = someCode(BIRTHDAY); // با حروف بزرگ؟

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

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

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

نقشه آموزش

نظرات

قبل از نظر دادن این را بخوانید…
  • اگر پیشنهادی برای بهبود ترجمه دارید - لطفا یک ایشوی گیت‌هاب یا یک پول‌ریکوئست به جای کامنت‌گذاشتن باز کنید.
  • اگر چیزی را در مقاله متوجه نمی‌شوید – به دقت توضیح دهید.
  • برای قراردادن یک خط از کد، از تگ <code> استفاده کنید، برای چندین خط – کد را درون تگ <pre> قرار دهید، برای بیش از ده خط کد – از یک جعبهٔ شنی استفاده کنید. (plnkr، jsbin، codepen…)