Функциональное программирование с точки зрения EcmaScript. Чистые функции, лямбды, имутабельность

const add(x,y) => y => x + y;

1) Почему решили писать так:

Старая добрая запись никуда не делась

function add(x, y) {
  return x + y;
}

ее по-прежнему можно использовать, если штука с const неудобно читается.

2) Может я не понимаю, что такое замыкание, но откуда берется Y во втором выражении? Визуально не очевидно, что оно передается в функцию вместе с X.

То, что здесь происходит, называется каррированием. Вот тут есть отдельная статья с объяснением, что это такое

3) В примере компилятор будет ругаться?

Какой компилятор? В Javascript ругаться точно не будет, но в typescript можно объявить объект неизменяемым и получить ошибку.

const User = { name: 'Alex' } as const; // неизменяемый объект

User.name = 'Boris'; // Error: Cannot assign to 'name' because it is a read-only property.(2540)

// ошибок компиляции нет 
const NewUser = { ...User, name: 'Boris' }; 

Работающий пример.

Конструкция as const – это специальный синтаксис Typescript, которого в обычном Javascript нет. Документация вот тут.

4) разве объект Admin не делит свое состояние с объектом User (имея в виду, что оба они могут быть в реальной жизни намного сложнее)?

Все верно, если у вас внутри есть вложенные объекты или массивы, их тоже нужно не забыть склонировать.

const user = {
   name: 'Alex',
   location: {
      country: 'RU'
   }
}

// не забываем склонировать location
const newUser = { ...user, location: {...user.location}, name: 'Boris' };

Каждый раз писать такой код может оказаться утомительно, поэтому можно взять утилиту, вроде lodash.cloneDeep.

Почему решили писать так

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

откуда берется Y во втором выражении? Визуально не очевидно, что оно передается в функцию вместе с X.

Так оно же передаётся не "вместе", а очень даже раздельно. Функция add принимает x и возвращает анонимную функцию, которая уже принимает y.

Возможно, с лишней парой скобок будет понятнее?

const add = x => (y => x + y);

const add = x => {
    const addx = y => x + y;
    return addx;
}

1) Если написать код так, как вам хотелось бы — будет просто SyntaxError. Похожим на желаемый синтаксис будет определение именованной функции с помощью function name(arg) {}.

Это работает, т.к. вы дали функции имя, чтобы ее можно было использовать в дальнейшем. В случае с лямбда-функциями (которые в JS описываются "стрелочным" синтаксисом вроде a => a + 1) — их не просто так называют анонимными.

При объявлении они не получают имени и поэтому должны быть где-то сохранены, чтобы их можно было использовать в дальнейшем. В данном случае их сохраняют в константу. Поэтому нам нужно объявить константу так же, как обычно. Если в примере const obj = {a: 1} мы сохранили в константу obj ссылку на объект { a: 1 }, то в const func = (x, y) => x + y мы сохраняем в константу func ссылку на объект функции.

Это единый и привычный синтаксис для данного использования лямбда-функций. Мы также можем объявить лямбда-функцию прямо в аргументах некой функции. Тогда она будет сохранена в замыкании. Пример:

function onClick(elId, callback) {
  if (elId == 1) {
    callback()
  }
}

onClick(1, () => console.log('Вызван коллбек'))

Мы объявляем анонимную функцию, не сохраняя ее в константу. Она будет доступна внутри функции onClick под именем callback.

3) У обычного js в целом нет компилятора — это интерпретируемый язык. Данный пример не несет в себе ошибке и НЕ является плохим по определению. Это плохой код только в парадигме функционального программирования, при условии, что есть возможность написать "чистую" функцию.

4) Ответ автора не совсем верен. Как вы правильно упомянули, структура данных User может быть достаточно сложна. В этом случае ...object скопирует в новый объект только поля и значения первого уровня. Если в нем будут вложенные объекты — они НЕ будут скопированы, и могут изменяться, если какой-нибудь код будет иметь к нему доступ. Пример:

let a = { c: 1 }
let b = { m: 1, a }
let d = { ...b, k: 1 }
a.c = 2
b.m = 2
console.log(d) // { m: 1, a: { c: 2 }, k: 1 }

Как видно, объект a, вложенный в b, а потом в d при изменении повлиял на d, тогда как при изменении поля m, которое находится на верхнем уровне объекта b, объект d не изменился.

Таким образом, для иммутабельности стоит использовать специальные либы, которые делают "глубокие" копии для объектов, массивов и т.д. В простом варианте это lodash с его cloneDeep или более специализированная Immutable.js

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

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

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

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)