Функция

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

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

Для использования функции, сначала, нужно её объявить. Существует несколько способов, но пока мы сосредоточимся на одном простом варианте.

function sayHello(name) {
 alert("Здравствуйте, " + name);
}

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

Для вызова объявленной функции вводим её имя и следом за ним, в круглых скобках, передаем необходимые параметры.

sayHello("Иван"); // "Здравствуйте, Иван"
sayHello("Светлана"); // "Здравствуйте, Светлана"

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

Также в JavaScript есть анонимные (или безымянные) функции. Такие функции не имеют своего имени.

function() {
  alert('привет'); // встроенная функция, показывающая диалоговое окно с сообщением
}

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

let myFunc = function() {
 alert("привет");
};
myFunc();

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

setTimeout(func, delay);

Допустим, мы хотим показать приветствие пользователю через 5 секунд после захода на сайт. Тогда, во втором аргументе нужно указать 5000 (5 секунд), а в первом - передать функцию, которая будет непосредственно выполнять необходимую задачу по отображению приветствия. Для этой цели лучше всего подойдет анонимная функция потому, что здесь основное значение имеет само тело функции, а не её название.

setTimeout(function() {
 alert("привет");
}, 5000);

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

function sayHello(name) {
 alert("Здравствуйте, " + name);
}

function processUserInput(callback) {
 var name = prompt("Введите своё имя.");
 callback(name);
}

processUserInput(sayHello);

В этом примере, при вызове функции processUserInput, ей передаётся в качестве аргумента функция sayHello. После того, как пользователь введёт своё имя name, эта функция обратного вызова будет вызвана с именем пользователя в качестве аргумента.

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

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

{  
 name: sayHello,
 length: 1,
 // другие свойства....
}

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

function sayHello(name) {
 alert("Здравствуйте, " + name);
}
sayHello.newProperty = "Новое свойство";
sayHello.newProperty;

Или же можно наоборот, добавить функцию в свойство другого объекта:

let car = {
 color: "red",
 wheels: 4,
 engine: {
  cylinders: 4,
  size: 2.2
 },
 drive: function() {
  alert("Внимание, я еду!");
 }
};

Здесь drive - это свойство объекта car, значением которого является анонимная функция. Такая функция, присвоенная свойству объекта, называется методом.

В JavaScript есть набор уже встроенных функций, например:

let myNumber = Math.random();

Здесь Math является встроенным объектом, хранящим в своих свойствах и методах различные математические константы и функции. А его метод random() генерирует и возвращает случайное число от 0 до 1. Также, в самом браузере есть встроенные функции, например alert и prompt, которые использовались ранее. Технически эти встроенные функции являются методами внутреннего объекта браузера window и полная запись их вызова выглядит так:

window.alert(message);

let result = window.prompt(message, default);

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

Все функции в JavaScript возвращают значение. Им является то, что указано после ключевого слова return

function square(number) {
 return number * number;
}
let result = square(2); // 4

Если в функции явно не указано возвращаемое значение, то она вернет undefined

function sayHello(name) {
 alert("Здравствуйте, " + name);
 // нет явно указанного возвращаемого значения через return
}

let result = sayHello("Мария"); // сначала отобразится сообщение, а затем переменной result присвоится значение undefined

Ключевое слово return завершает выполнение функции и возвращает то, что указано после него, или undefined, если после него нет никакого значения. Поэтому код, написанный ниже команды return, выполнятся не будет

function sayHello(name) {
 alert("Здравствуйте, " + name);
 return;
 alert("До свидания, " + name); // не выполнится, т. к. команда return завершит выполнение функции раньше, чем выполнится эта строка
}
let result = sayHello("Мария"); // сначала отобразится сообщение "Здравствуйте, Мария", а затем переменной result присвоится значение undefined, второе сообщение не отобразится

Так как сейчас уже пройдены основные концепции JavaScript, такие, как переменные, объекты и функции, то теперь можно остановится на таком понятии, как Идентификатор, которое будет часто использоваться в дальнейшем. Идентификаторы - это имена переменных, функций или свойств объекта.