Uncategorized

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

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
}

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

Вокруг данной темы точится много споров. Но не смотря на это, функциональное программирование набирает популярность и не только в 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 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 чтобы упростить код… Всегда приятно работать с простым и понятным кодом.


Рекомендуем к прочтению: Upwork: вывод средств. Как вывести средства с международной биржи труда в России и Украине?


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


 

Dr. Michael J. Garbade

I, Dr. Michael J. Garbade is the co-founder of the Education Ecosystem (aka LiveEdu), ex-Amazon, GE, Rebate Networks, Y-combinator. Python, Django, and DevOps Engineer. Serial Entrepreneur. Experienced in raising venture funding. I speak English and German as mother tongues. I have a Masters in Business Administration and Physics, and a Ph.D. in Venture Capital Financing. Currently, I am the Project Lead on the community project -Nationalcoronalvirus Hotline I write subject matter expert technical and business articles in leading blogs like Opensource.com, Dzone.com, Cybrary, Businessinsider, Entrepreneur.com, TechinAsia, Coindesk, and Cointelegraph. I am a frequent speaker and panelist at tech and blockchain conferences around the globe. I serve as a start-up mentor at Axel Springer Accelerator, NY Edtech Accelerator, Seedstars, and Learnlaunch Accelerator. I love hackathons and often serve as a technical judge on hackathon panels.

Recent Posts

Win Big with Our Amazon Fire Max 11 & AirPods Pro Giveaway!

We’re thrilled to announce an exciting opportunity for you to win not one but two…

1 month ago

Unleashing Potential: How Education Ecosystem Transforms Learning into Real-World Success

Acquiring practical skills is crucial for career advancement and personal growth. Education Ecosystem stands out…

3 months ago

The Role of Artificial Intelligence in Modern Software Development

Artificial Intelligence (AI) has been making significant strides in various industries, and the software development…

6 months ago

Highest Stable Coin Yields – (W16 – 2024)

Another week to bring you the top yield platforms for three of the most prominent…

7 months ago

LEDU Token OTC Trading

If you hold a large volume of LEDU tokens above 1 million units and wish…

8 months ago

Highest Stable Coin Yields – (W12 – 2024)

It’s another week and like always we have to explore the top yield platforms for…

8 months ago