Как называть переменные в JavaScript

Как называть переменные в 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: