Как писать современный JavaScript код? Sébastien Castiel

JavaScript-разработчик из Франции, Себастьян Кастель, поделился мыслями о том, как на его взгляд должен выглядеть современный JavaScript код в 2017 году.

А вы помните те времена, когда JavaScript был языком, который использовали только для оживления страниц сайта? Это время уже прошло, так как, языки программирования развиваются вместе с методами их использования. Посмотрите на код, который вы написали один, два года назад: он вас смущает? Если да, этот пост для вас.

Ниже вы найдете мой список из хороших практик, которые помогут сделать ваш JavaScript код проще в написании, чтении и поддержке.

Используйте линтер для форматирования вашего кода

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

Что более важно, линтер делает исправления в вашем коде, когда это возможно. ESLint, например, делает довольно таки хорошо (используйте опцию –fix) и он отлично интегрируется с популярными IDE.

Вы также можете использовать Prettier, если сравнивать с ESLint, он больше сфокусирован на форматировании кода. Разница между ними небольшая.

Следующие пункты помогут вам выбрать какие правила использовать с линтером:

Используйте современные правила для линтера

Если вы в замешательстве и не можете решить, какой набор правил использовать для кода, выбирайте StandardJS. Это очень строгий линтер, который не даст вам отступить от правил. Несколько примеров:

Используйте 2 пробела для табуляции
Не используйте точки с запятой (мне это показалось очень странным, но через несколько дней я привык)
Пробелы после ключевых слов (например if) и фигурных скобок
И другие

StandardJS может устанавливаться в виде отдельного Node модуля. Но если вы хотите использовать его в большом проекте с существующей кодовой базой и отключить некоторые правила, используйте ESLint predefined config. Я например отключил no-mixed-operators и import/no-webpack-loader-syntax.

Используйте новые фишки ES2015+

Вы скорее всего, слышали об изменениях в ES2015+ (или ES6, ES7…). Вот несколько, без которых я больше не могу жить:

Arrow functions: написание функций типа x => x*2 очень полезно в функциональном программировании
Классы: перестаньте использовать прототипы, классы гораздо круче
Операции с массивами и объектами:

function doSomething() {
const a = doSomethingElse()
const b = doSomethingWithA(a)
const otherResults = { c: '', d: '' }
return { a, b, ...otherResults } // equivalent to { a: a, b: b }
}
const { a, c, ...rest } = doSomething() // Also works with arrays!
// `rest` looks like { b: ..., d: '' }

    Создание промисов становится легче с async/await:

// Please try to write the same code with classic promises ;)
async function doSomething() {
const a = await getValueForA()
const b = await getValueForBFromA(a)
const [c, d] = await Promise.all([
// parallel execution
getValueForC(), getValueForDFromB(b)
])
const total = await calculateTotal(a, b, c, d)
return total / 1000
}

function doSomething() {

const a = doSomethingElse()

const b = doSomethingWithA(a)

const otherResults = { c: '', d: '' }

return { a, b, ...otherResults } // equivalent to { a: a, b: b }

}

const { a, c, ...rest } = doSomething() // Also works with arrays!

// `rest` looks like { b: ..., d: '' }

Создание промисов становится легче с async/await:

// Please try to write the same code with classic promises ;)

async function doSomething() {

const a = await getValueForA()

const b = await getValueForBFromA(a)

const [c, d] = await Promise.all([

// parallel execution

getValueForC(), getValueForDFromB(b)

])

const total = await calculateTotal(a, b, c, d)

return total / 1000

}

Используйте функциональное программирование

Вокруг данной темы точится много споров. Но не смотря на это, функциональное программирование набирает популярность и не только в JavaScript. В чем причина? Оно делает код более предсказуемым, безопасным и гораздо более поддерживаемым. Вот вам несколько простых советов:

Для начала перестаньте использовать for для циклов. В большинстве случаев они вам не нужны. Доказательство:

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:
const res = {}
for (let i = 0; i < arr.length; i++) { const calculatedValue = arr[i].value * 10 if (calculatedValue > 100) {
res[arr[i].name] = calculatedValue
}
}

// Prefer:
const res = arr
.map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))
.filter(elem => elem.calculatedValue > 100)
.reduce((acc, elem) => ({
[elem.name]: calculatedValue,
...acc
}), {})

const arr = [{ name: 'first', value: 13 }, { name: 'second', value: 7 }]

// Instead of:

const res = {}

for (let i = 0; i < arr.length; i++) { const calculatedValue = arr[i].value * 10 if (calculatedValue > 100) {

res[arr[i].name] = calculatedValue

}

// Prefer:

const res = arr

.map(elem => ({ name: elem.name, calculatedValue: elem.value * 10 }))

.filter(elem => elem.calculatedValue > 100)

.reduce((acc, elem) => ({

[elem.name]: calculatedValue,

...acc

}), {})

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

const enrichElementWithCalculatedValue =
elem => ({ name: elem.name, calculatedValue: elem.value * 10 })
const filterElementsByValue = value =>
elem => elem.calculatedValue > value
const aggregateElementInObject = (acc, elem) => ({
[elem.name]: calculatedValue,
...acc
})
const res = arr
.map(enrichElementWithCalculatedValue)
.filter(filterElementsByValue(100))
.reduce(aggregateElementInObject, {})

const enrichElementWithCalculatedValue =

elem => ({ name: elem.name, calculatedValue: elem.value * 10 })

const filterElementsByValue = value =>

elem => elem.calculatedValue > value

const aggregateElementInObject = (acc, elem) => ({

[elem.name]: calculatedValue,

...acc

})

const res = arr

.map(enrichElementWithCalculatedValue)

.filter(filterElementsByValue(100))

.reduce(aggregateElementInObject, {})

Здесь мы определили три функции, названия которых указывают на то, что эти функции делают.
Второй совет: создавайте локальные функции (даже в существующих функциях) подобрав для них грамотные названия, вы можете документировать код без комментариев!

Обратите внимание, что три локальные функции не изменяют контекст, в котором они выполняются. Не меняют внешние переменные, не обращаются к внешним сервисам… В функциональном программировании они называются pure (чистыми) функциями. У них есть большие преимущества:

Их легко тестировать, поскольку из заданных параметров возможен только один возможный результат, даже если мы вызываем функцию несколько раз;
Они гарантированно дают одинаковый результат независимо от фактического состояния приложения;
Состояние приложения остается прежним до и после вызова функции.

Исходя из вышесказанного, мой третий совет: используйте такие функции как можно чаще!

Несколько советов в завершение

Привыкайте работать с асинхронным кодом, как можно чаще используйте промисы, посмотрите на observales в RxJS (вот отличный туториал по функциональному реактивному программированию)
Пишите тесты! Возможно вам это покажется очевидным, но я знаю кучу проектов с непроверенным кодом. Хотя современный JavaScript позволяет тестировать (front или backend) достаточно легко.
Используйте последние возможности языка: например, прекратите писать arr.indexOf(elem) !== -1. Замените это на arr.includes(elem).
Читайте много технических статей: subreddit JavaScript – очень хороший источник черпания информации о самых крутых практиках в экосистеме.

И в заключение самый важный совет, который я могу вам дать: всегда занимайтесь рефакторингом! Попробуйте улучшить модуль, который вы написали год назад. Попробуйте заменить var на const, используйте стрелочные функции или async / await чтобы упростить код… Всегда приятно работать с простым и понятным кодом.

Изучайте веб разработку, с помощью онлайн уроков, каждый понедельник и среду в 20:00, на канале: Быстрый старт в веб-разработке (на странице проекта доступный записи всех уроков).

Education Ecosystem Blog

Featured in

Написание современного JavaScript кода

Используйте линтер для форматирования вашего кода

Используйте современные правила для линтера

Используйте новые фишки ES2015+

Используйте функциональное программирование

Несколько советов в завершение

About author

Dr. Michael J. Garbade