const add = x => y => x + y

Такой прием делается не просто для краткости кода, а как минимум для создания:

— композиции функций
— передачи переменных в скоуп функции

к примеру, есть колбэк функция onClick:

<button onClick={}>Delete</button>

и нам необходимо создать универсальную функцию удаления по id, однако функция onClick принимает только один параметр event:

const onClick = event => {
  event.preventDefault()
  remove(id)
}

для передачи дополнительных переменных в эту функцию без глобального объявления тут не обойтись, как мы знаем глобальные переменные — это зло.

Вот для таких случаях подходит этот прием «функция которая возращает другую функцию»


const deleteOnClick = ({id, remove}) => event => {
  event.preventDefault()
  remove(id)
}
 
const DeleteUser = props => (
  <button onClick={deleteOnClick(props)}>
    Delete
  </button>
)

const DeleteProduct = props => (
  <button onClick={deleteOnClick(props)}>
    Delete
  </button>
)

и второй случай:


const add = x => y => x + y
const compose = (...fns) => fns.reduce((a, b) => (...args) => a(b(...args)))
const update = (prop, updater) => obj => ({...obj, [prop]: updater(obj[prop])})
const now = () => new Date

const likePost = compose(
  update(`date`, now),
  update(`likes`, add(1)),
)

const post = {id: 1, title: 'Learn FP & love it', date: new Date('2019-01-01'), likes: 130}

likePost(post)

В этом примере мы создаем новую функцию likePost на основе уже двух существующих функции.