Функция — это группа операторов, которые выполняют конкретные задачи и могут храниться и поддерживаться отдельно от основной программы. Функции предоставляют способ создавать повторно используемые пакеты кода, которые являются более переносимыми и более простыми в отладке. Вот некоторые преимущества использования функций:
- Функции сокращают количество повторений кода в программе — функция позволяет извлекать часто используемый блок кода в один компонент. Теперь вы можете выполнить ту же задачу, вызывая эту функцию в любом месте вашего скрипта, не копируя и вставляя один и тот же блок кода снова и снова;
- Функции делают код намного проще в обслуживании — поскольку созданная однажды функция может использоваться много раз, поэтому любые изменения, сделанные внутри функции, автоматически внедряются во всех местах, не затрагивая несколько файлов;
- Функции облегчают устранение ошибок — когда программа подразделяется на функции и если возникает какая-либо ошибка, вы точно знаете, какая функция вызвала ошибку и где ее найти. Поэтому исправление ошибок становится намного проще.
Определение и вызов функции
Объявление функции начинается с ключевого слова function, за которым следует имя функции, которую вы хотите создать, после чего круглые скобки, т.е. (), и, наконец, код вашей функции, заключенный в фигурные скобки {}. Вот основной синтаксис для объявления функции:
function functionName() {
// Code to be executed
}Вот простой пример функции, которая покажет приветственное сообщение:
// Функция
function sayHello() {
alert("Hello, welcome to this website!");
}
// Вызов функции
sayHello(); // Выводит: Hello, welcome to this website!Как только функция определена, ее можно вызывать из любого места в документе, вводя ее имя, а затем набор скобок, например, sayHello(), как в приведенном выше примере.
Имя функции должно начинаться с буквы или символа подчеркивания, а не с цифры, за которыми могут следовать дополнительные буквы, цифры или символы подчеркивания. Имена функций чувствительны к регистру, как и имена переменных.
Добавление параметров в функции
Вы можете указать параметры, когда определяете свою функцию для приема входящих значений во время выполнения. Параметры (аргументы) работают как переменные-заполнители внутри функции; они заменяются во время выполнения значениями, предоставленными функции во время вызова.
Параметры задаются в первой строке функции внутри круглых скобок, например:
function functionName(parameter1, parameter2, parameter3) {
// Code to be executed
}Функция displaySum() в следующем примере принимает два числа в качестве аргументов, просто складывает их вместе и затем отображает результат в браузере.
// Функция
function displaySum(num1, num2) {
var total = num1 + num2;
alert(total);
}
// Вызов функции
displaySum(6, 20); // Выводит: 26
displaySum(-5, 17); // Выводит: 12Вы можете определить столько параметров, сколько хотите. Однако для каждого указанного параметра необходимо передать соответствующий аргумент функции при его вызове, в противном случае его значение становится undefined. Давайте рассмотрим следующий пример:
// Функция
function showFullname(firstName, lastName) {
alert(firstName + " " + lastName);
}
// Вызов функции
showFullname("Clark", "Kent"); // Выводит: Clark Kent
showFullname("John"); // Выводит: John undefinedЗначения по умолчанию для параметров функции
С ES6, теперь вы можете указать значения по умолчанию для параметров функции. Это означает, что если при вызове функции не предоставлено никаких аргументов, будут использоваться эти значения параметров по умолчанию. Вот пример:
function sayHello(name = 'Guest') {
alert('Hello, ' + name);
}
sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, JohnХотя до ES6, чтобы добиться того же, нам пришлось написать что-то вроде этого:
function sayHello(name) {
var name = name || 'Guest';
alert('Hello, ' + name);
}
sayHello(); // Выводит: Hello, Guest
sayHello('John'); // Выводит: Hello, JohnЧтобы узнать о других функциях ES6, ознакомьтесь с Руководством по функциям ES6 в JavaScript.
Возвращение значений из функции
Функция может вернуть значение обратно с помощью оператора return. Значение может быть любого типа, включая массивы и объекты.
Оператор return обычно помещается в качестве последней строки функции перед закрывающей фигурной скобкой и заканчивается точкой с запятой, как показано в следующем примере.
// Функция
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// Отображение возвращенного значения
alert(getSum(6, 20)); // Выводит: 26
alert(getSum(-5, 17)); // Выводит: 12Функция не может возвращать несколько значений. Однако вы можете получить аналогичные результаты, возвращая массив значений, как показано в следующем примере.
// Функция
function divideNumbers(dividend, divisor){
var quotient = dividend / divisor;
var arr = [dividend, divisor, quotient];
return arr;
}
// Сохраняем возвращаемое значение в переменной
var all = divideNumbers(10, 2);
// Отображение отдельных значений
alert(all[0]); // Выводит: 10
alert(all[1]); // Выводит: 2
alert(all[2]); // Выводит: 5Работа с выражениями функций
Синтаксис, который мы использовали ранее для создания функций, называется объявлением функции. Существует другой синтаксис для создания функции, которая называется выражением функции.
// Объявление функции
function getSum(num1, num2) {
var total = num1 + num2;
return total;
}
// Выражение функции
var getSum = function(num1, num2) {
var total = num1 + num2;
return total;
};Как только выражение функции сохранено в переменной, переменная может использоваться как функция:
var getSum = function(num1, num2) {
var total = num1 + num2;
return total;
};
alert(getSum(5, 10)); // Выводит: 15
var sum = getSum(7, 25);
alert(sum); // Выводит: 32Нет необходимости ставить точку с запятой после закрывающей фигурной скобки в объявлении функции. Но выражения функций, с другой стороны, всегда должны заканчиваться точкой с запятой.
В JavaScript функции могут храниться в переменных, передаваться в другие функции в качестве аргументов, передаваться из функций в качестве возвращаемых значений и создаваться во время выполнения.
Синтаксис объявления функции и выражения функции выглядит очень похоже, но они различаются по способу их представления, посмотрите следующий пример:
declaration(); // Выводит: Hi, I'm a function declaration!
function declaration() {
alert("Hi, I'm a function declaration!");
}
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
alert("Hi, I'm a function expression!");
};Как видите, в приведенном выше примере, функция может быть вызвана до ее определения, но в случае с переменной это вызовет ошибку.
ES6 ввел еще более короткий синтаксис для написания выражения функции, которое называется arrow-функцией. См. Руководство по функциям ES6 в JavaScript.
Область действия переменной
Вы можете объявлять переменные в любом месте JavaScript. Но расположение объявления определяет степень доступности переменной в программе JavaScript, т.е. где переменная может использоваться. Эта доступность называется областью действия переменной (variable scope).
По умолчанию переменные, объявленные внутри функции, имеют локальную область, что означает, что их нельзя как-либо использовать извне этой функции, как показано в примере ниже:
// Функция
function greetWorld() {
var greet = "Hello World!";
alert(greet);
}
greetWorld(); // Выводит: Hello World!
alert(greet); // Uncaught ReferenceError: greet is not definedОднако любые переменные, объявленные в программе вне функции, имеют глобальную область видимости, то есть они будут доступны всем скриптам, независимо от того, находится ли этот скрипт внутри функции или снаружи. Вот пример:
var greet = "Hello World!";
// Функция
function greetWorld() {
alert(greet);
}
greetWorld(); // Выводит: Hello World!
alert(greet); // Выводит: Hello World!
