LearnJS

Функция как значение в JavaScript

В JavaScript функция - это значение.

Это значит, что функцию можно записать в переменную, передать в другое место, положить в объект или массив.

function sayHello() {
  console.log('Привет!');
}

let message = sayHello;

message();

Результат:

Привет!

В переменную message попала функция sayHello. После этого ее можно вызвать через новое имя.

Что значит функция как значение

Мы привыкли, что в переменные можно записывать строки, числа, массивы и объекты.

let name = 'Анна';
let age = 25;
let skills = ['HTML', 'CSS'];

Функцию тоже можно использовать как значение.

let showName = function () {
  console.log('Анна');
};

showName();

В этом примере функция записана в переменную showName.

Функция в переменной

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

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

console.log(sum(2, 3));

Результат:

5

Переменная sum хранит функцию. Через эту переменную мы и вызываем функцию.

Ссылка на функцию

Если записать одну функцию в другую переменную, сама функция не копируется заново.

Новая переменная получает ссылку на ту же функцию.

function greet() {
  console.log('Здравствуйте!');
}

let hello = greet;

greet();
hello();

Результат:

Здравствуйте!
Здравствуйте!

greet и hello указывают на одну и ту же функцию.

Функция и вызов функции

Важно отличать саму функцию от результата ее вызова.

function getMessage() {
  return 'Привет!';
}

let message = getMessage;

console.log(message);

В переменной message находится функция.

let text = getMessage();

console.log(text);

А в переменной text находится результат вызова функции.

Привет!

Скобки () запускают функцию. Без скобок мы передаем или сохраняем саму функцию.

Функция в объекте

Функцию можно записать в объект. В этом случае ее часто называют методом объекта.

let user = {
  name: 'Анна',
  showName: function () {
    console.log('Анна');
  }
};

user.showName();

Результат:

Анна

Свойство showName хранит функцию.

Функция в массиве

Функцию можно положить и в массив.

let actions = [
  function () {
    console.log('Сохранить');
  },
  function () {
    console.log('Удалить');
  }
];

actions[0]();
actions[1]();

Результат:

Сохранить
Удалить

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

Зачем это нужно

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

Например, выбрать нужную функцию в зависимости от условия.

function showSuccess() {
  console.log('Операция выполнена');
}

function showError() {
  console.log('Ошибка');
}

let isSuccess = true;
let showResult = isSuccess ? showSuccess : showError;

showResult();

Результат:

Операция выполнена

Мы выбрали одну из двух функций и записали ее в переменную showResult.

На этой идее строятся callback-функции, функции высшего порядка и многие методы массивов.

Итого

1. Функция может быть значением.

2. Функцию можно записать в переменную, объект или массив.

3. Без скобок мы работаем с самой функцией.

4. Со скобками () функция вызывается, и мы получаем результат ее выполнения.

5. Возможность работать с функцией как со значением лежит в основе callback-функций и функций высшего порядка.