Станьте лучшим разработчиком, изучив функциональное программирование на JavaScript

Функциональное программирование (сокращенно FP) — это парадигма программирования, популярная в JavaScript. JavaScript рассматривает функции как первоклассные граждане , и это упрощает написание функционального программирования на JavaScript.

Этот пост расскажет вам об основах и преимуществах функционального программирования и о том, как их использовать в JavaScript.

Что такое функциональное программирование?

Функциональное программирование — это способ написания программного обеспечения на определенных принципах. Идея состоит в том, что эти принципы будут

• Упростить написание, тестирование и отладку кода

• Сделайте так, чтобы вам было легче рассуждать о коде

• Повышение производительности разработчиков

• И более

Основные принципы функционального программирования

Чистые функции

Функции должны быть чистыми. Чистые функции всегда производят один и тот же вывод и не имеют побочных эффектов, влияющих на вывод. Побочные эффекты — это все, что находится вне контроля функции. например, любой ввод/вывод (I/O), такой как чтение из базы данных/файла или использование console.log. Или даже статическая переменная.

Вот простой пример.

```javascript

// Эта функция чистая, потому что она детерминированная.

// Не имеет побочных эффектов.

// Ничто вне функции не может повлиять на вывод.

// addTen(5) всегда будет 15

константа addTen = ввод => {

возврат ввода + 10;

// Получить номер из базы данных

const numberFromDb = DB.getNumber();

// Эта функция не является чистой, потому что она не детерминирована.

// Имеет побочный эффект (значение numberFromDb).

// Мы не можем знать наверняка, что результат будет таким же

// каждый раз, когда мы его вызываем, поэтому он не чистый

константа addWithNumberFromDb = input => {

возврат ввода + число из базы данных;

Но мне нужен ввод-вывод?

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

JavaScript не является чисто функциональным языком программирования. Так что ничто не мешает вам делать то, что вам удобно. Haskell, с другой стороны, является примером чисто функционального языка программирования. В Haskell вы вынуждены использовать принципы функционального программирования.

Неизменяемое состояние

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

В JavaScript вы можете передавать значения по ссылке. Это может быть опасно. Давайте посмотрим на пример.

```javascript

// Создаем человека с именем

пусть саймон = {"имя": "саймон"};

// Вместо того, чтобы копировать simon, мы присваиваем его по ссылке.

// Это опасно и может привести к нежелательному поведению позже.

пусть лиза = саймон;

// Устанавливаем правильное имя Лизы

лиза.имя = "Лиза";

// Но теперь мы также обновили имя Саймона!

console.log(Саймон); // {имя: 'Лиза' }

// Если бы мы скопировали саймона, этого бы не произошло

// Посмотрим, как бы мы это сделали в функциональном программировании

пусть Бет = {"имя": "Бет"};

// Копируем beth вместо ссылки на нее

пусть энди = {...бет};

// Установить правильное имя andy

энди.имя = "энди";

// Теперь обе переменные имеют правильное имя

console.log(Энди); // {имя: 'Энди' }

console.log(бет); // {имя: 'бет' }

Рекурсия

При рекурсии списки не повторяются с использованием for, while или do...while, поскольку они изменяют состояние (например, увеличивают счетчик). Вместо этого используются функции функционального программирования, такие как map(), filter() и reduce() .

Слово «рекурсия» меня давно пугало, должен признаться. Но в JavaScript вы можете быстро увидеть преимущества удобочитаемости и производительности, используя эти функции.

Давайте посмотрим на пример!

```javascript

// Список фруктов и их цена

константный фрукт = [

{название: 'банан', цена: 5},

{название: 'яблоко', цена: 3},

{название: 'груша', цена: 7}

// Теперь мы хотим увеличить цену на все фрукты

// Сделаем это с помощью цикла for

// ПРИМЕЧАНИЕ. Здесь мы также изменяем состояние,

// что, как вы знаете, может быть опасным

для (f фруктов) {

f.цена = f.цена + 5;

// Вместо этого воспользуемся функцией map()

const moreExpensiveFruit = фрукты

.карта (ф => {

return {...f, цена: f.price + 5}

// Теперь мы используем функциональное программирование!

// 1. Мы не мутируем фрукты, а копируем данные с помощью оператора распространения ...

// 2. map() возвращает новый список, поэтому список фруктов не изменился

Функциональное программирование в JavaScript

Я уже кратко показал вам, как использовать map(). Позвольте мне углубиться в это еще немного.

map() перебирает ваш список, по одному элементу за раз, и позволяет вам заменить его чем-то новым. Это полезно, например, для обновления значения всех элементов в списке. Затем он возвращается к новому списку, оставляя старый без изменений. Таким образом, следует принципу функционального программирования не изменять состояние.

И есть еще две функции, о которых вам следует знать: filter() и reduce().

filter() позволит вам отфильтровать ненужные элементы из списка. Это полезно для удаления из списка элементов, соответствующих определенным критериям. например, "отфильтровать фрукты дороже 5. И так же, как map(), он возвращает новый список.

```javascript

// Список фруктов и их цена

константный фрукт = [

{название: 'банан', цена: 5},

{название: 'яблоко', цена: 3},

{название: 'груша', цена: 7}

// Мы используем filter(), чтобы сказать

// "включать только фрукты, цена которых не превышает 5"

const CheapFruit = фрукты

.filter(f => f.price <= 5);

// Зарегистрируйте результат, чтобы увидеть, что "груша" была отфильтрована

console.log(дешевые фрукты); // [ {название: 'банан', цена: 5}, {название: 'яблоко', цена: 3} ]

reduce() позволит вам "уменьшить" список элементов до одного значения. Это полезно для работы с числами.

```javascript

// Список фруктов и их цена

константный фрукт = [

{название: 'банан', цена: 5},

{название: 'яблоко', цена: 3},

{название: 'груша', цена: 7}

// Мы используем метод reduce(), чтобы получить «общую стоимость всех фруктов».

const sumPriceFruit = фрукты

.reduce((предыдущая, текущая) => предыдущая + текущая.цена, 0);

// Войдите, чтобы увидеть результат

console.log(sumPriceFruit); // 15

Эта функция была для меня самой сложной для понимания. Я рекомендую вам ознакомиться с веб-документами MDN об этом.

Вывод

Теперь вы знаете, что такое функциональное программирование, почему оно полезно и как его использовать в JavaScript. Это может занять некоторое время, чтобы привыкнуть, но оно того стоит. Рассматриваемые функции доступны во всех основных языках программирования. Это не что-то конкретное для JavaScript.

Свяжитесь со мной в Twitter, LinkedIn или GitHub

Первоначально опубликовано на prplcode.dev