Функция как тип данных

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

Технически, функция — это объект JavaScript, у которого есть внутренний метод Call(), который добавляет возможность вызова функции.

Если вы хотите узнать о синтаксисе функций, читайте статью function.

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

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

О функции удобно думать как об объекте, который поддерживает операцию вызова.

Функции можно объявлять различными способами. Объявление функции с помощью функционального выражения не что иное, как присваивание безымянной функции переменной:

        
          
          const answer = function() {  console.log('42!')}answer()// 42!
          const answer = function() {
  console.log('42!')
}

answer()
// 42!

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно сохранять в переменную и функцию, объявленную другим способом. При этом оба имени функции будут работать:

        
          
          function answerNumber() {  console.log('42!')}const answer = answerNumberanswerNumber()// 42!answer()// 42!
          function answerNumber() {
  console.log('42!')
}

const answer = answerNumber

answerNumber()
// 42!
answer()
// 42!

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Переменная хранит ссылку на функцию, поэтому мы можем создавать столько переменных, сколько нам нужно и все они будут именами функции:

        
          
          const answer = function() {  console.log('42!')}const answerNumber = answerconst fn = answer
          const answer = function() {
  console.log('42!')
}

const answerNumber = answer
const fn = answer

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция может передаваться в качестве аргумента при вызове другой функции.

Например, функция, которая может выполнить произвольную операцию между двумя числами. Два числа хранятся внутри функции, а операция, которую нужно выполнить, передаётся при вызове:

        
          
          function performOperation(operation) {  const a = 10  const b = 99  return operation(a, b)}const sum = performOperation(function(one, two) { return one + two })console.log(sum)// 109const result = performOperation(function(num1, num2) { return num1 ** (num1 / num2)})console.log(result)// 1.2618568830660204
          function performOperation(operation) {
  const a = 10
  const b = 99
  return operation(a, b)
}

const sum = performOperation(function(one, two) { return one + two })
console.log(sum)
// 109

const result = performOperation(function(num1, num2) { return num1 ** (num1 / num2)})
console.log(result)
// 1.2618568830660204

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Таким образом логика операции может определяться вне функции, что делает её гибкой.

Функции, которые ожидают получить другую функцию в качестве параметра — стандартное явление в JavaScript. Даже встроенные методы, такие как forEach() и filter() используют этот подход.

Другой случай использования — колбэки в асинхронном коде. Иногда необходимо выполнить операцию после того, как закончится какое-то действие. Например, когда пользователь кликнет на кнопку. В этом случае используется метод addEventListener(), который принимает имя события, и колбэк, который нужно вызвать при его наступлении:

        
          
          document.getElementsByTagName('button')[0].addEventListener('click', function() {  console.log('Пользователь кликнул!')})
          document.getElementsByTagName('button')[0].addEventListener('click', function() {
  console.log('Пользователь кликнул!')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функцию можно вернуть как результат работы другой функции. Например, можно сохранить данные для математической операции, но не выполнять её сразу, а вернуть функцию, которая выполнит операцию над указанными числами:

        
          
          function lazySum(a, b) {  return function() {    return a + b  }}
          function lazySum(a, b) {
  return function() {
    return a + b
  }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Здесь очень легко запутаться во вложенности. При вызове lazySum() мы передаём два аргумента. Эти аргументы не используются тут же — мы создаём новую функцию, которая складывает два числа и возвращаем её. После вызова lazySum() мы можем сохранить эту функцию в переменную и использовать её, когда нужно:

        
          
          const performSum = lazySum(99, 1)console.log(performSum)// function lazySum()console.log(performSum())// 100
          const performSum = lazySum(99, 1)
console.log(performSum)
// function lazySum()

console.log(performSum())
// 100

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обратите внимание, что значения параметров a и b остаются доступны внутри вложенной функции. Эта особенность связана с контекстом выполнения и лексическим окружением функции. Такой подход также активно используется при разработке на JavaScript.

        
          
          const answer = function() {  console.log('42!')}console.log(typeof answer)// 'function'
          const answer = function() {
  console.log('42!')
}

console.log(typeof answer)
// 'function'

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const answer = function() {  console.log('42!')}console.log(answer.length)// 0const sum = function(a, b) {  return a + b}console.log(sum.length)// 2
          const answer = function() {
  console.log('42!')
}

console.log(answer.length)
// 0

const sum = function(a, b) {
  return a + b
}

console.log(sum.length)
// 2

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          const calc = function() {}calc.type = 'numbers'console.log(calc.type)// numbers
          const calc = function() {}

calc.type = 'numbers'

console.log(calc.type)
// numbers

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать