Как называть переменные в JavaScript
Когда мы пишем код на JavaScript, важно не только то, как он работает, но и как легко его можно понять. Одним из ключевых моментов здесь является правильный выбор имен для переменных. Хорошо подобранные названия переменных помогают не только тебе, но и другим разработчикам быстро понять смысл кода. В этом посте мы обсудим, как лучше всего называть переменные, чтобы код был читаемым, понятным и легким в сопровождении.
Числа
Работа с числами в коде — это отдельная тема, и для них существует несколько общепринятых практик, которые можно встретить почти в каждом проекте. Часто для переменных с числами используют такие слова, как:
- code (код чего-либо)
- length (длина)
- number (номер)
- count (количество)
- size (размер)
Эти слова интуитивно понятны и не требуют дополнительных пояснений. Примеры правильного использования:
const keyCode = 21; // код клавиши
const indexFromLast = 7; // индекс с конца
const maxScreenWidth = 480; // максимальная ширина экрана
const minPasswordLength = 13; // минимальная длина пароля
const unreadMessagesCount = 96; // количество непрочитанных сообщений
Строки
Для строковых переменных обычно используют существительные, так как они лучше всего описывают содержимое. Главное правило — имя переменной должно чётко отражать, что в ней хранится. Со строками сложно ошибиться, если давать переменным осмысленные и понятные имена. Примеры хороших названий:
const serverAlert = 'Connection successful'; // сообщение от сервера
const headerTemplate = '<header>Welcome</header>'; // HTML шаблон заголовка
const userEmail = 'user@example.com'; // email пользователя
const userPin = '12345'; // пин-код пользователя
const API_KEY = 'abcde12345'; // API ключ (константа)
Такие имена переменных делают код понятным, и любой разработчик сразу поймёт, что хранится в каждой строке.
Булевое значение
Для булевых переменных лучше всего подходят имена, представляющие собой вопросы, на которые можно ответить «да» или «нет». Часто в названии переменных используются такие префиксы и суффиксы, как:
is
(это)has
/contain
(содержит)can
(может)should
(должен)able
(возможность)
Примеры:
const isUserLoggedIn = true; // пользователь вошёл в систему
const hasValidEmail = true; // email валидный
const containsSpecialChars = false; // содержит специальные символы
const shouldReloadPage = false; // нужно ли перезагрузить страницу
const isFormDisabled = true; // форма отключена
Такие переменные позволяют легко понять, какую логику несёт код и как он работает.
Объекты
Названия для объектов часто схожи с названиями для строк, что может иногда вызывать путаницу. Хотя можно использовать суффикс obj
, это не всегда обязательно. Основное правило — стараться не дублировать название объекта в его свойствах или методах.
Пример плохого и хорошего подхода:
// Плохо
const product = {
productTitle: 'Smartphone',
getProductTitle() {},
};
// Хорошо
const product = {
title: 'Smartphone',
getTitle() {},
};
В первом случае название объекта дублируется в свойствах, что делает код избыточным, тогда как второй вариант более чистый и понятный.
Массивы
Для массивов принято использовать существительные во множественном числе, что помогает сразу понять, что переменная хранит набор значений. Обычно такие названия заканчиваются на суффиксы s
или es
.
Примеры:
const products = [{ name: 'Laptop' }]; // массив товаров
const categories = ['Electronics', 'Clothing']; // массив категорий
const scores = [98, 85, 92]; // массив оценок
Использование таких названий делает код интуитивно понятным, так как сразу видно, что переменная содержит несколько элементов.
Функции и методы
При именовании функций и методов важно начинать с глагола, так как это отражает действие, которое они выполняют. Вот несколько подходящих примеров первых слов для функций:
init
/initialize
(инициализировать)compute
(вычислить)find
(найти)create
(создать объект, массив и т.д.)to
(преобразовать в строку, массив и т.д.)filter
(фильтровать) и другие
Примеры:
const initializeApp = () => {}; // инициализация приложения
const calculateTotalPrice = () => {}; // вычисление общей стоимости
const findMaxValue = () => {}; // поиск максимального значения
const convertToArray = () => {}; // преобразование в массив
const filterActiveUsers = () => {}; // фильтрация активных пользователей
Такие названия делают код более понятным и помогают легко определить, что именно делает каждая функция.
Здесь вы можете почитать дополнительную информацию про переменные в JS: