Функция как переменная в JavaScript

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

На самом деле все намного интереснее. В JavaScript, в отличие от других языков, функции являются такими же значениями переменных, как числа, строки и массивы.

Давайте посмотрим на примере. Пусть у нас есть, например, функция func:

function func() {
	alert('!');
}

На самом деле у нас нет функции func. У нас есть переменная func, хранящая в себе исходный код функции.

Мы можем, к примеру, затереть переменную func чем-нибудь другим, например, строкой. В этом случае функция func больше не будет функцией, а будет строкой. Смотрите на примере:

function func() {
	alert('!');
}
func(); // выведет '!'

func = 'string'; // затрем переменную func
alert(func); // выведет 'string'

Сделайте функцию func, которая будет возвращать через return какую-либо строку.

Выведите результат работы функции func алертом на экран.

Выведите исходный код функции func алертом на экран.

Запишите в переменную func число 123, тем самым затерев функцию из этой переменной. Выведите новое значение переменной func на экран.

Запись функции в другую переменную

Пусть у нас есть наша функция func:

function func() {
	alert('!');
}

Давайте скопируем ее исходный код в переменную test:

function func() {
	alert('!');
}

let test = func; // теперь test такая же функция, как и func

// Проверим:
test(); //выведет '!'
func(); //выведет '!'

Сделайте функцию func1, которая будет возвращать через return число 3.

Скопируйте исходный код функции func1, в переменную func2.

Выведите на экран сумму результатов работы функций func1 и func2.

Присваивание функций в переменные при создании

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

Давайте посмотрим на примере:

let func = function() {
	alert('!');
};

func(); // выведет '!'

Сделайте безымянную функцию, которая будет возвращать через return число 1. Запишите эту функцию в переменную func1.

Сделайте безымянную функцию, которая будет возвращать через return число 2. Запишите эту функцию в переменную func2.

Найдите сумму значений функций func1 и func2. Выведите эту сумму алертом на экран.

Важный нюанс

Из описанного выше следует, что существование переменной и функции с одинаковым именем легко может привести к проблеме.

В следующем примере функция func будет затерта и вместо нее станет строка 'string':

function func() {
	return '!';
}

func = 'string'; // затрем переменную с функцией строкой
func(); // получим ошибку, тк func - не функция

Чтобы такого не происходило, следует придерживаться правила, общего для всех языков программирования: функции должны быть глаголами, а переменные - существительными.