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

Для меня основной критерий хорошего когда — его читаемость. Поэтому важно чтобы переменные, функции и методы легко читались и понимались. Далее я расскажу как я называю переменные и что мне в этом помогает.

Строки

Традиционно название строковой переменной — существительное. Как и везде, мы должны понимать что находится в переменной по её названию. Со строкой сложно напортачить, используйте существительные и давайте более осмысленные имена, например:

const serverMessage = 'hello from server'
const componentHtml = '<h1>Hello</h1>'
const login = 'username'
const password = 'qwerty'
const ACCESS_TOKEN = 'xxxxx'

Числа

С числами уже интереснее, можно встретить общие практики которые есть почти в каждом проекте:

• код чего-либо (code)
• размер (size, length)
• номер (number)
• количество (count)

Использование этих слов привычно и не вызывает дополнительных вопросов:

const keyCode = 17
const numberFromEnd = 10
const maxWindowSize = 800
const minCharacterLength = 10
const newMessageCount = 2

Булевое значение

Лучшее название для булевой переменной — вопрос с ответом да-нет. Так-же часто встречаются в виде префиксов и суфиксов слова:

• это (is)
• содержит (has/contain)
• может (can)
• должен (shoud)
• возможность (able)

const isPopupOpen = true;
const hasUpperLetters = true;
const containsObject = false;
const shouldUpdate = false;
const disabled = true;

Массивы

Массивы это существительные во множественном числе. Оканчиваются на суффиксы s и es.

const users = [{ name: 'Yury'}];
const letters = ['A', 'B', 'C'];
const codes = [21, 37];

Объекты

Так-же как и строки. Мне это не очень нравится, т.к. нельзя сразу-же отличить строку от объекта. Можно добавлять суффикс obj, но это мне кажется уже лишним.

Важное правило, не дублируйте название объекта в названии свойства или метода:

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

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

Функции и методы

Для функций первое слово глагол:

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

const initApp = () => {};
const computeMaxHeight = () => {};
const findClosestElement = () => {};
const toString = () => {};
const filterUsers = () => {};

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

Общие:

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

Для функций:

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

Источник