4. Общие правила

4.1. Переменные (const, let, var) (opens in a new tab)

• Для объявления переменных всегда используйте const или let.
• По умолчанию используйте const, если только переменную не нужно переназначить.
• ❗Никогда не используйте var.

4.2. Параметры функции

Упаковка параметров функции в объект может иметь несколько преимуществ:

• Читаемость кода: Когда параметры функции упакованы в объект, это делает код более читаемым, особенно если функция принимает множество параметров. Вместо того, чтобы перечислять каждый параметр по отдельности, вы можете просто передать объект с соответствующими свойствами.

• Упрощение поддержки: Если в будущем вы решите добавить или изменить парамеры функции, вам придется внести изменения только в объекте, который передается функции, а не в каждом вызове функции.

• Предотвращение ошибок: При передаче параметров функции возможно допустить ошибку, например, перепутать порядок параметров или забыть какой-то параметр. Упаковка параметров в объект позволяет избежать таких ошибок

// ❌
const createTodolist1 = (id: string, title: string, author: string) => {
  // code
}
 
// ✅
const createTodolist2 = (todo: Todo) => {
  const { id, title, author } = todo
  // code
}

4.3. Утилитные функции (utils, helpers)

• Если утилитная функция используется во многих местах проектах, то выносим ее в common/utils
• Если функция необходима чтобы не загромождать логику компонента, то кладем ее рядом с компонентой / фичей (в зависимости от структуры папок в приложении)
• Желательно покрывать логику утилит тестами

4.4. Утилитные функции, кастомные хуки и т.д. дробим на несколько файлов, т.е. не создаем файл utils куда все складываем

// ❌
export const handleServerAppError = () => {}
export const handleServerNetworkError = () => {}

// ✅
export const handleServerAppError = () => {}

// ✅
export const handleServerNetworkError = () => {}

4.5. Однострочный метод

⚡ Однострочный метод должен выглядеть так же как и обычный метод

Когда в теле функции несколько строк кода, тогда все однозначно. Пишем вот так

if (a> 10) {
  // code 1
  // code 2
  // code 3
}

Разногласия возникают, когда в теле функции одна строка кода. Смотри примеры ниже

// ❌
if (a>10) code 1
 
// ✅
if (a>10) {
  // code 1
}

// ❌
const deletedTodosArray = produce(todosArray, draft => {
    const index = draft.findIndex(todo => todo.id === "id1")
    if (index !== -1) draft.splice(index, 1)
})
 
// ✅
const deletedTodosArray = produce(todosArray, draft => {
    const index = draft.findIndex(todo => todo.id === "id1")
    if (index !== -1) {
      draft.splice(index, 1)
    }
})

4.6. Принцип "положительное утверждение"

• Принцип "положительное утверждение" часто делает код более легким для восприятия.
• В большинстве случаев код лучше читается от истины (true), а написание логики от обратного (false) заставляет задуматься

// ❌
<button onClick={addProductToCartHandler} >
      <img src={cartWhite} alt="" />
      {!isProductInCart ? 'Add to cart' : 'Go to cart'}
</button>
 
// ✅
<button onClick={addProductToCartHandler} >
      <img src={cartWhite} alt="" />
      {isProductInCart ? 'Go to cart' : 'Add to cart'}
</button>