اصول نامگذاری متغیرها، فانکشن ها و کلاس ها در جاوااسکریپت

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

اصول نامگذاری متغیرها در جاوااسکریپت

نام متغیرها در جاوااسکریپت به حروف بزرگ و کوچک حساس هستند ( case sensitive ) و از اینرو در مثال زیر ما سه متغیر متفاوت داریم:

var name = 'vaspar';

var Name = 'vaspar.io';

var NAME = 'https://vaspar.io';

console.log(name);
// "vaspar"

console.log(Name);
// "vaspar.io"

console.log(NAME);
// "https://vaspar.io"

متغیرها در جاوااسکریپت باید خود بیانگر باشند. یعنی چی ؟ یعنی نیاز به کامنت گذاری و مستند نویسی برای توضیح کاری که میکنند نداشته باشن و تا جای ممکن اسم متغیر بیانگر کار و ماهیت اون متغیر باشه:

// بد
var value = 'vaspar';

// بد
var val = 'vaspar';

// خوب
var siteName = 'vaspar';

و زمانیکه نام متغیر به بیش از دو کلمه میرسه بهتره تا کلمه  بعدی با حروف بزرگ شروع بشه و بطور کل توصیه میشه تا نام متغیرها camel case باشند. یعنی با یک حروف کوچک شروع بشن و در ادامه هر کلمه جدید با حروف بزرگ شروع بشه:

// بد
var sitename = 'vaspar';

// بد
var site_name = 'vaspar';

// بد
var _siteName = 'vaspar';

// بد
var SITENAME = 'vaspar';

// بد
var SITE_NAME = 'vaspar';

// خوب
var siteName = 'vaspar';

بطور کل 4 سبک جهت نامگذاری وجود داره که عبارت اند از:

• camel case مثل siteName
• pascal case مثل SiteName
• snake case مثل site_name
• kebab case مثل site-name

قواعد نام گذاری Boolean ها در جاوااسکریپت

نام متغیرهایی که مقدار اونها برابر با boolean هست اگر با کلمات پرسشی مثل is, are, has شروع بشه باعث میشه تا هر برنامه نویس دیگه ایی فقط با یک نگاه به نام این متغیر ها به ماهیت اونها پی ببره:

// بد
var visible = true;

// خوب
var isVisible = true;

// بد
var equal = false;

// خوب
var areEqual = false;

// بد
var encryption = true;

// خوب
var hasEncryption = true;

نام گذاری فانکشن ها در جاوااسکریپت

در نامگذاری فانکشن ها هم بهتره camel case رعایت بشه و علاوه بر آن موقع نامگذاری یک فانکشن بهتره تا نام انتخابی، کاری که فانکشن انجام میده را توصیف کنه:

// بد
function name(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

// خوب
function getName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

همچون مثال ذکر شده که نام getName به خوبی فانکشن بالا را که یک string یکپارچه از نام و نام خانوادگی میسازه را توصیف میکنه، بهتره تا فانکشن شما به خودی خود بیانگر کاری که انجام میده باشه. ( کلمات دیگری که میتونیم در جاهای مختلف بکار ببریم : get, fetch, push, apply, calculate, compute, post )

اصول نامگذاری کلاس ها در جاوااسکریپت

نام گذاری کلاس ها برخلاف سایر data type های بهتره که PascalCase نوشته بشن:

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

var me = new SoftwareDeveloper('my name', 'my family');

قواعد نامگذاری component ها

component ها در فریمورک های جاوااسکریپتی مثل Reactjs وجود دارند و از آنجایی که این component ها مثل tag های html درون کد ما استفاده میشن ما ملزم هستیم تا اونهارو PascalCase تعریف کنیم چراکه ممکنه به عنوان یک تگ html تلقی بشن، نه یک component

// بد
function userProfile(user) {
  return (
    <div>
      <span>First Name: {user.firstName}</span>
      <span>Last Name: {user.lastName}</span>
    </div>
  );
}

// خوب
function UserProfile(user) {
  return (
    <div>
      <span>First Name: {user.firstName}</span>
      <span>Last Name: {user.lastName}</span>
    </div>
  );
}

<div>
  <UserProfile
    user={{ firstName: 'name', lastName: 'family' }}
  />
</div>

نامگذاری متدها

دقیقا مثل نامگذاری فانکشن ها، در متدهایی که تعریف میکنیم هم بهتره تا camel case رعایت بشه و علاوه بر آن نام انتخابی، کاری که متد انجام میده را توصیف کنه:

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  getName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

var me = new SoftwareDeveloper('my', 'name');

console.log(me.getName());
// "my name"

نامگذاری Private ها در جاوااسکریپت

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

class SoftwareDeveloper {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.name = _getName(firstName, lastName);
  }

  _getName(firstName, lastName) {
    return `${firstName} ${lastName}`;
  }
}

var me = new SoftwareDeveloper('name', 'family');

// خوب
var name = me.name;
console.log(name);
// "Robin Wieruch"

// بد
name = me._getName(me.firstName, me.lastName);
console.log(name);
// "name family"

نامگذاری ثابت ها (‌ constants )

ممکنه در برنامه ما متغیری وجود داشته باشه با مقداری که هرگز نباید اون مقدار تغییر کنه و طبق قراردادی که میان برنامه نویس ها وجود داره باید اسم این متغیرهارو تماما با حروف بزرگ نوشت تا به برنامه نویس های بعدی حواسشان جمع باشه تا مقدار این متغیرهارو تغییر ندن:

const SECONDS = 60;
const MINUTES = 60;
const HOURS = 24;

const DAY = SECONDS * MINUTES * HOURS;

در این شکل از نامگذاری اگر نام متغیر حاوی بیش از یک کلمه بود، برای تفکیک این کلمات از یکدیگر باید از خط فاصله بزرگ ـ استفاده کرد.

const DAYS_UNTIL_TOMORROW = 1;

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

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

متغیر global به متغیری گفته میشه که در بالاترین سطح scope یک فایل جاوااسکریپتی تعریف شده و برای این متغیر ها سبک خاصی از نامگذاری وجود نداره.

• یک متغیر global اگر تغییر پذیر هست بصورت camelCase نوشته میشه.
• یک متغیر global اگر تغییر پذیر نیست، بصورت UPPERCASE و با حروف بزرگ نوشته میشه.

قواعد نامگذاری فایل ها

دو  سبک مختلف PascalCase و kebab-case برای نامگذاری فایل ها وجود داره و معمولا در پروژه های فرانت اند نام گذاری فایل هارو به سبک PascalCase میبینیم:

- components/
--- user/
----- UserProfile.js
----- UserList.js
----- UserItem.js
--- ui/
----- Dialog.js
----- Dropdown.js
----- Table.js

و در پروژه های بک اندی هم بصورت kebab-case میبینیم:

- routing/
--- user-route.js
--- messages-route.js

پیشنهاد میشه در نامگذاری فایل ها بصورت camelCase عمل نکنید، چراکه ممکنه سیستم عامل اونهارو به شکل متفاوتی ببینه و در نتیجه باگ و ارور ایجاد بشه.