📝 Як іменувати змінні

Перша та найголовніша ознака хорошо коду - його читабельність. Тому це так надважливо, щоб змінні, методи та функції легко читалися та були зрозумілими.

Як я називаю змінні?

Є два обмеження на імена змінних:

• Ім’я може складатися з літер, цифр, та символів «$» та «_»
• Перший символ не повинен бути цифрою

Врахуйте, регістр літер має значення:

const text = 'Some text';

// Зовсім інший «текст»
const Text = 'Another text';

Константи

Константи необхідні, щоб уникнути появи magic numbers. У JavaScript до ES-2015 не було констант (const), але оскільки необхідність у них все ж таки була і до того, то була негласна домовленість: змінні, набрані у верхньому регістрі через підкреслення (UPPER_SNAKE_CASE), не змінювати:

const API_TOKEN = '********';
const THEME_TYPE = 'dark';
...

Рядки

Традиційно назва рядкової змінної - іменник. Як і скрізь, ми повинні розуміти, що знаходиться в змінній за її назвою. З рядком складно напортачити, використовуйте іменники і давайте більш осмислені імена, наприклад:

const title = 'Як іменувати змінні';
const category = 'JavaScript';
const formError = 'This field is required';
...

Числа

З числами вже цікавіше, можна зустріти загальні практики, які є майже в кожному проекті:

• Розмір (size)
• Довжина (length)
• Номер (number)
• Кількість (count)
• Крок (step)
• Код (code)

Тут все логічно:

const windowSize = 1200
const maxCharacterLength = 20
const orderNumber = 1
const itemsCount = 100
const currentStep = 2
const keyCode = 123
...

Булеве значення

Найкраща назва для булевої змінної - питання з відповіддю так-ні. Також часто зустрічаються у вигляді префіксів і суфіксів слова:

• Це (is)
• Містить (has/contain)
• Може (can)
• Повинен (shoud)
• Можливість (able)

const isActive = true;
const hasNumbers = false;
const canEdit = true;
const shouldUpdate = false;
const disabled = false;
...

Масиви

Масиви - це іменники у множині. Закінчуються на суфікси s та es.

const items = [{id: 1, title: 'First item'}];
const categories = ['JavaScript", "Best practice'];
...

Об’єкти

Так само як і рядки. Мені це не дуже подобається, так як не можна відразу відрізнити рядок від об’єкта. Можна додавати суфікс obj, але це вже зайве.

Важливе правило не дублюйте назву об’єкта в назві властивості або методу:

// Плохо
const user = {
    userName: 'Admin',
    getUsername() {},
};

// Хорошо
const user = {
    name: 'Admin',
    getName() {},
};
...

Функції та методи

Для функцій перше слово дієслово:

• init/initialize
• compute
• find
• create (object, array…)
• to (string, number)
• filter

const initApp = () => {};
const computeLength = () => {};
const findFirstLetter = () => {};
const toNumber = () => {};
const filterItems = () => {};
...

Симетрична пара

Загальні:

• old/new
• begin/end
• first/last
• up/down
• min/max
• next/previous

const newTitle = 'New Title';
const beginPosition = [0, 0];
const firstItem = [{name: 'First Item'}];
const maxWidth = 240;
const nextPage = 2;
...

Для функцій:

• get/set
• add/remove
• create/destroy
• start/stop
• insert/delete
• increment/decrement
• open/close
• show/hide
• suspend/resume

const getUser = () => {};
const removeItem = () => {};
const openPopup = () => {};
const showBanner = () => {};
...

JQuery

Всі змінні, що містять об’єкт jQuery, найкраще назвати, починаючи з символу $. Повірте, така невелика хитрість заощаджує багато часу.

const $someElement = $('#some_element');
const $input = $('#input');
...

Якщо ви новачок у програмуванні, або у вас погано з англійською мовою, то ось вам лайфхак:

1. Добре подумайте та назвіть змінну українською мовою
2. Переведіть її через Google Translate