Зачем в JS постоянно возвращают функции которые возвращают значения?

Question

[vs1710]

Не могу никак понять зачем в js в функции возвращают другие функции.
Вот даже тут можно себе спокойно в теле функции посчитать reduce и записать его в другую переменную, а после ее вернуть вернуть.

Answer 1

[Алексей П]

Оптимизация на уровне компилятора :)
Вместо того, чтобы писать:

var sum = function(...args) {
  var result = args.reduce(...);
  return result;
}

Пишут:

var sum = function(...args) {
  return args.reduce(...);
}

Answer 2

[Антон Спирин]

По вашему примеру вам ответил Владимир. А вот простой и наглядный пример по вопросу "зачем в js в функции возвращают другие функции":

const VAT_RATES = {
  FR: 20,
  GB: 20,
  IT: 22,
  PL: 23,
};
const createWithVAT = vat => price => price + price * vat / 100;

const currentVAT = VAT_RATES.GB;
const withVAT = createWithVAT(currentVAT);
const price = 250;
const totalPrice = withVAT(price);

console.log(totalPrice); // 300

Comments

[vs1710]

Ничего не понял

[Антон Спирин]

vs1710, в таком случае могу только посоветовать изучать JavaScript последовательно по учебнику и учиться анализировать и понимать чужой код.
Это очень простой пример. Возврат функции очень распространенный и эффективный прием в современной фронтенд разработке. Часто возвращаемые функции принимаются как аргумент другими функциями. Чтобы это хорошо понимать нужен определенный уровень подготовки и хорошие знания механики и возможностей языка.

[vs1710]

Антон Спирин, Ну давайте разберем ваш пример пошагово и возможно я пойму механику.

[Владимир Проскурин]

vs1710, разбирайте, пишите что не понятно.

[Антон Спирин]

Смотрите, есть функция:

const createWithVAT = vat => price => price + price * vat / 100;

Если заменим стрелочные функции на обычные получим:

const createWithVAT = function(vat) {
  return function(price) {
    return price + price * vat / 100;
  }
}

После вызова:

const currentVAT = VAT_RATES.GB; // 20
const withVAT = createWithVAT(currentVAT);

withVAT можно представить как функцию:
price => price + price * 20 / 100;

или с заменой стрелочных функций на обычные:

function(price) {
  return price + price * 20 / 100;
}

Вот и вся магия. Мы получаем функцию withVAT в которой уже задано значение VAT и можем ее использовать.

Пример, конечно, притянут за уши, но он очень хорошо демонстрирует механику.
В случае ООП подхода можно просто держать текущее значение VAT в поле экземпляра/объекта/компонента:

{
  vat: 20,
  setVat(vat) {
    this.vat = vat,
  },
  calculatePriceWithVAT(price) {
    return price + price * this.vat * 100,
  }
}

Еще погуглите классический пример с замыканием и счетчиком.

[vs1710]

Антон Спирин, Ничего себе! Спасибо я все понял. Только вот мне не понятно ЗАЧЕМ все так усложнять и какие тут приймущества.

[Антон Спирин]

vs1710, ну примеры бывают очень сложные для понимания на первый взгляд.
Например есть такая интересная библиотека для React StyledComponents. Она создает React компоненты, генерирует для них классы и добавляет css код на страницу:

import styled from 'styled-components';

const Wrapper = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
`;

styled.div это функция которая принимает шаблонную строку как массив интерполяций(звучит сложно, но это как-то так). Она детектит в этом массиве функции и выполняет их передавая переменные из свойств компонента и опционально контекста React через компонент Provider(например можно передать в Provider тему, сведения об устройстве или еще что-нибудь и styled будет получать их из контекста).

И вот задача, я хочу добавить стили только для мобильных, не прибегая к использованию нативных медиазапросов, а используя сведения об устройстве которые я передал при инициализации. Пишу такой модуль, который будет использовать хелпер css из библиотеки styled-components для возврата массива интерполяций:

import { css } from 'styled-components';

const createMediaByConditionFn = conditionFn => (arg, ...args) =>
  props => conditionFn(props) && css(arg, ...args);

const mobile = createMediaByConditionFn(props => props.device.isMobile);
const desktop = createMediaByConditionFn(props => !props.device.isMobile);

const media = {
  mobile,
  desktop,
};

export default media;

Теперь я могу писать стили для мобильных так:

import styled from 'styled-components';
import { media } from 'app-lib';

const Wrapper = styled.div`
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;

  ${media.mobile`
    padding: 0 8px;
  `}
`;

Этот конкретный вызов media.mobile возвращает эквивалент функции:

props => (props => props.device.isMobile)(props) && css`padding: 0 8px;`;

функция выполнится при вызове styled.div c передачей туда объекта props и если props.device.isMobile будет равно true, то мы получим результат вызова css и мобильные стили будут добавлены на страницу, в противном случае получим false и библиотека его просто проигнорирует.

Мне не надо использовать никаких глобальных переменных(что неправильно и может привести к багам если используется Server Side Rendering) и не надо передавать device по всем компонентам и везде писать проверки.
Получается лаконично и красиво. А в случае если мы поменяем реализацию определения устройства, то ничего кроме двух функций аргументов передаваемых в вызов createMediaByConditionFn переписывать не придется.
Пример конечно сложный, зато жизненный.)

Answer 3

[Владимир Проскурин]

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

Comments

[vs1710]

Хорошо, тогда другой вопрос, почему данный пример возвращает строку, а не число?
Что вообще происходит с js?

[vs1710]

Где каждый раз писать? что проще?
Проще этого?

[Владимир Проскурин]

vs1710,

Хорошо, тогда другой вопрос, почему данный пример возвращает строку, а не число?

все зависит от того, что вы передадите в аргументы. Если передаете строки (пусть даже строки чисел), то получите строку, т.к. оператор + в таком случае будет выступать в роде оператора конкатенации.

Где каждый раз писать? что проще?
Проще этого?

Тоже самое. Зачем создавать переменную, которая возьмет значение из функции, и вернет его через return, если можно сразу это значение функции вернуть в return? Ну, если вам после функции reduce еще нужно поработать с этим значением, то можете создавать переменную, обрабатывать ее и уже возвращать.

[alvvi]

vs1710, откуда мы знаем почему у вас там что-то возвращает строку. Может вы в args строку передаете? Дайте конкретный пример и выложите на jsfiddle, может вам подскажут.

[vs1710]

Илья Ростопка, пожалуйста

[alvvi]

vs1710, у вас args внутри функции - массив с массивом внутри.
0 + [0,1,2,3,4,5] === "00,1,2,3,4,5"
Все верно.

[vs1710]

Илья Ростопка, О спасибо! а то попал в прострацию уже

Answer 4

[vs1710]

Спасибо парням Антон Спирин, Алексей П и Владимир Проскурин за по мощь.
Что бы понять примеры которые подал Антон Спирин потребовалось разобрать замечательную статью.
https://developer.mozilla.org/ru/docs/Web/JavaScri...