Как понять работу данной функции js? в нее передается несколько параметров или как?

Question

[alexx46]

к примеру:

removeItem = (id) => (e) => {
   //....
  };

Собственно как правильно объяснить работу этой функции? принимаем параметр id, далее вызов, ловим событие и далее опять вызов функции?

Comments

[Дима Долготер]

через запятую перечислить

removeItem = (id, e) => {
   //....
  };

[Сергей Сергей]

функция принимает аргумент id и возвращает другую функцию, которую надо будет запускать с аргументом e.

Answer 1

[Robur]

понять можно вот так:

const func = (e) => {   //....  };
removeItem = (id) => func

const f1 = removeItem(1)
const f2 = removeItem(2)

f1(e)
f2(e)

removeItem получает id и возвращает func.
func можно, например вызывать, передав ей e.
и там внутри скорее всего замыкание (которого в моем примере нет) чтобы func могла получить доступ к id. f1 будет "помнить" что id=1, f2 будет "помнить" что id=2

Comments

[alexx46]

спасибо!

[Евгений]

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

Answer 2

[Андрей Hecc]

Это называется High Order Function.

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

function removeItem(id){
    return function(e){
        ...
    }
}

Ну, а использование у вас очень простое - возможность использования дополнительных параметров, в обработчике.
По стилю кода, могу предпложить, что это код из реакта и его использвание будет выглядеть примерно вот так:

render = () => {
    const { removeItem, id } = this.props;
    return(
        <button onClick={removeItem(id)}> Remove item </button>
    )
}

Comments

[alexx46]

спасибо!