محمد مسعودی
محمد مسعودی
خواندن ۸ دقیقه·۴ سال پیش

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

let box = 'Cat'
let box = 'Cat'


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

  • فروشگاه آنلاین: اطلاعاتی مثل کالاهای فروخته شده و سبد خرید داره
  • برنامه چت آنلاین: اطلاعاتی مثل لیست کاربران، پیام ها و خیلی چیزای دیگه داره

متغیر های برای نگهداری اطلاعات استفاده میشن


متغیر چیه؟

متغیر یه حافظه نام گذاری شده هست که برای نگهداری اطلاعات میتونیم ازش استفاده کنیم

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

دستور زیر یه متغیر رو با نام message تعریف میکنه :

let message;

حالا ما میتونیم یه سری اطلاعات رو با عملگر = بریزیم توش

let message; message = 'Hello'; // یه رشته رو نگهداری میکنه


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

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';

یا ویرگول رو اولش میذارن :‌

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

از نظر فنی همه اینا یه کار انجام میدن و انتخاب این که از کدوم مدلش استفاده کنین سلیقه‌ای هست و شخصیه


استفاده از var به جای let

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

var message = 'Hello';

کلمه var تقریبا مثل let هست و متغیر تعریف میکنه اما یکم فرق میکنه و روش قدیمی هست

تفاوت های ریزی بین let و var هست اما هنوز برای ما مهم نیست توی فصل «var قدیمی» به طور مفصل توضیح میدیمش

یه مثال توی زندگی واقعی

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

برای نمونه، متغیر message رو میتونین یه برچسب در نظر بگیرین که روی جعبه زده شده و مقدار داخلش هم hello هست :

میتونیم هر داده دیگه‌ای داخل این جعبه قرار بدیم

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

let message; message = 'Hello!'; message = 'World!'; // مقدار متغیر اینجا تغییر کرد alert(message);

وقتی که مقدار متغیر عوض میشه اطلاعات قبلیش پاک میشه :


همچنین میتونیم دو تا متغیر تعریف کنیم و اطلاعات رو از یکی به دیگری کپی کنیم


let hello = 'Hello world!'; let message; // copy 'Hello world' from hello into message message = hello; // حالا دو تا متغیر اطلاعات یکسانی دارن alert(hello); // Hello world! alert(message); // Hello world!

دوبار تعریف کردن باعث ایجاد خطا میشه، یه متغیر فقط یه بار باید تعریف بشه تعریف دوباره متغیری که قبلا تعریف شده خطا میده:

let message = &quotThis&quot // repeated 'let' leads to an error let message = &quotThat&quot // اینجا ارور میده که از قبل تعریف شده

پس باید متغیر رو یه بار تعریف کنیم و برای اشاره کردن بهش از let استفاده نکنیم


زبان‌های رویه‌ای(Functional)
جالبه بدونین زبان‌های functional مثل Scala یا Erlang تغییر مقدار متغیر رو ممنوع کردن
توی این نوع زبان‌ها وقتی مقداری رو توی جعبه قرار می‌دیم تا ابد اونجا می‌مونه و اگه بخوایم مقدار دیگه‌ای رو ذخیره کنیم، ما رو مجبور می‌کنن تا جعبه‌‌ی جدید بسازیم
اگرچه توی نگاه اول این زبان‌ها عجیب به نظر میان، ولی کاملا توانایی توسعه‌ (توی پروژه‌های) جدی رو دارن مهم‌تر از اون توی زمینه‌هایی مثل محاسبات موازی (Parallel Computation) این محدودیت‌ها تبدیل به مزیت میشن مطالعه‌ی این زبان‌ها (حتی اگه به این زودی قصد استفاده از اونا را ندارین) برای وسیع شدن دیدتون، توصیه می‌شه

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

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

  • نام حتما باید حروف، اعداد، یا نماد های $ و _ باشه
  • اولین کاراکتر نباید با عدد شروع بشه

یه مثال از نام‌گذاری درست :

let userName; let test123;


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

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

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

let $ = 1; //تعریف یک متغیر با : &quot$&quot let _ = 2; // تعریف یک متغیر با : &quot_&quot alert($ + _); // 3


مثالی از نام‌گذاری غلط:

let 1a; // نمیتونه با عدد شروع بشه let my-name; // علامت منفی (خط تیره) نباید استفاده بشه


حروف کوچیک و بزرگ فرق میکنه

متغیر apple و AppLE دو تا متغیر جداگانه هستن و یکی نیستن

حروف غیر انگلیسی هم مجازه ولی توصیه نمیشه

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

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

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

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

مثلا let، class، return و function رزرو شده هستن

این کد خطای دستوری میده:

let let = 5; /* نمیشه نام یه متغیر رو let گذاشت */ let return = 5; /* همچنین نمیشه نامش رو return گذاشت */


مقدار دهی بدون «use strict»

قبلا این امکان وجود داشت تا متغیری رو بدون استفاده از let و صرفا با مقدار دهی تعریف کرد درصورتیکه از use strict استفاده نکنیم، این امکان همچنان وجود داره

توی این مثال از use strict استفاده نشده:

num = 5; /* متغیر num اگه وجود نداشته باشه ایجاد میشه */ alert(num); // 5

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

&quotuse strict&quot num = 5; /* ارور :‌ متغیر num تعریف نشده! */

ثابت ها

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

const myBirthday = '18.04.1982';

متغیر هایی که با کلمه const تعریف میشن رو ثابت میگیم بهشون ثابت‌ها دوباره قابل مقدار دهی نیستن و اگه سعی کنیم اونا رو تغییر بدیم به خطا میخوریم:

const myBirthday = '18.04.1982'; myBirthday = '01.01.2001'; // ارور میده چون نمیشه مقدار ثابت رو تغییر داد

وقتی یه برنامه نویس مطمئنه که متغیر هیچ‌وقت عوض نمیشه میتونه اونو به عنوان ثابت تعریف کنه


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

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

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


const COLOR_RED = &quot#F00&quot const COLOR_GREEN = &quot#0F0&quot const COLOR_BLUE = &quot#00F&quot const COLOR_ORANGE = &quot#FF7F00&quot // ... ما نیاز داریم یه رنگ انتخاب کنیم let color = COLOR_ORANGE; alert(color); // #FF7F00


مزایای استفاده از ثابت‌ها :

  • به خاطر سپردن COLOR_ORANGE خیلی راحت‌تر از FF7F00# هست
  • غلط نوشتن #FF7F00 از COLOR_ORANGE خیلی آسون‌تره
  • موقعی خوندن کدها، COLOR_ORANGE با معنی تر از FF7F00# هست


چه زمانی باید از حروف بزرگ و چه زمانی باید از حروف معمولی برای نام‌گذاری ثابت استفاده کنیم؟

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

برای نمونه :‌

const pageLoadTime = /* زمانی که طول کشیده تا صفحه وب بارگذاری بشه*/;


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

ثابت‌های با حروف بزرگ زمانی که اصطلاحا مقداری به صورت "hard code" شده داریم، استفاده می‌شه (مثل کد رنگ قرمز)

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

لطفا نام متغیرهای خودتونو با حساسیت انتخاب کنین و برای اینکار خوب فکر کنین

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

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

لطفا قبل از انتخاب نام برای یک متغیر خوب بهش فکر کنین نتیجه‌اش رو حتما میبینین


یه سری قوانین که اگه رعایت کنین خوبه :

از نام‌هایی که برای انسان قابل فهم است استفاده کنید مانند userName یا shoppingCart

از نام‌های مخفف یا کوتاه استفاده نکنین مثل a، b، c، مگه اینکه بدونین چیکار دارین میکنین


نام‌های کاملا واضح و مختصر انتخاب کنین نمونه‌هایی از نام‌های بد data و value هستن این نام‌ها هیچ‌چیزی رو توضیح نمی‌دن. استفاده از این مدل نام‌ها فقط زمانی قابل قبوله که محتوای کدی که می‌نویسین استثنا مشخص کنه که data یا value به چه چیزی اشاره می‌کنه

با ذهن خود و تیم کاریتان توافق نظر داشته باشین اگر به مخاطبان وب‌سایت‌تون user میگین، متغیرهای مرتبط رو به جای currentVisitor یا newManInTown باید currentUser یا newUser نام‌گذاری کنین


ایجاد یا استفاده مجدد ؟

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

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

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


خلاصه

  • متغیرها رو برای نگهداری اطلاعات میتونیم با کلمه های var , let و یا const تعریف کنیم
  • کلمه let روش مدرن تعریف کردن متغیره
  • کلمه var یه روش قدیمی هست برای تعریف متغیر در حالت معمولی ازش استفاده‌ای نمیکنیم اما تفاوت هاش با let رو توی قسمت «var قدیمی» توضیح میدیم
  • کلمه const مثل let هست اما مقدارش نمیتونه تغییر کنه
  • متغیرها باید جوری نام‌گذاری بشن تا راحت متوجه بشیم داخلشون چیه

پست بعدی (دیتا تایپ‌ها در جاوااسکریپت )

https://virgool.io/@mmasoudih/types-nhhebxk3m1ej


پست قبلی(این قسمت جاوا اسکریپت سخت گیر می‌شود !)

https://virgool.io/Only-js/strict-mode-wfjkbwn4w0lo


اگر توی این مقاله مشکلی بود یا خواستین توی این پروژه مشارکت کنین این لینک گیت‌هابش هست.

منبع

گیت‌هاب

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