Как работает этот код? Почему у функции появляется метод?

Question

[Evtera]

Всем привет. Недавно увидел такой код. Не совсем понимаю, каким образом мы получаем wrapper.cancel? И как этот код в целом работает?

const cancelable = fn =>{
  const wrapper = (...args) =>{
    if(fn) return fn(...args)
  }

  wrapper.cancel = () => fn = null


  return wrapper
}



const fn = par =>{
  console.log('Function called, par:',par)
}

const f = cancelable(fn)

f('first')
f.cancel()
f('second')

Answer 1

[LJ322]

const cancelable = fn => { // Создаётся функция cancelable, которая принимает функцию и сохраняет в переменную fn
  const wrapper = (...args) =>{ // Создаётся функция-обёртка, которая принимает любой набор аргументов
    if(fn) return fn(...args) // Если в cancelable была передана функция, то вызывает её с необходимыми аргументами
  }

  wrapper.cancel = () => fn = null // Добавляет свойство во wrapper для очистки переменной fn 

  return wrapper // Возвращает обёртку
}

const fn = par =>{ // Функция, которая оборачивается в декоратор со своим аргументом
  console.log('Function called, par:',par)
}

const f = cancelable(fn) // Создаёт обёртку вокруг fn

f('first') // Function called, par: first
f.cancel() // fn является переменной внутри cancelable, здесь мы её обнуляем
f('second') // Ничего не выводит, потому что условие у wrapper отрабатывает, только если функция есть

Answer 2

[Василий Банников]

В JS функции - это тоже объекты.
У объектов вполне могут быть какие-то поля, которые тоже могут быть функциями.