В этом руководств е вы узнаете о функциях JavaScript и о том, как их использовать для структурирования кода, применяя мелкие и повторяющиеся единицы.
При разработке приложения часто требуется выполнять одно и то же действие во многих местах. Например, вы можете захотеть показывать сообщение всякий раз, когда возникает ошибка.
Чтобы избежать повторения одного и того же кода повсюду, вы можете использовать функцию, чтобы обернуть этот код и использовать его повторно.
JavaScript предоставляет множество встроенных функций, таких как parseInt() и parseFloat(). В этом руководстве вы узнаете, как разрабатывать пользовательские функции.
Объявление функции
Чтобы объявить функцию, вы используете ключевое слово function, за которым следует имя функции, список параметров и тело функции, следующим образом:
function functionName(parameters) {
// function body // ...
}Имя функции должно быть действительным идентификатором JavaScript. По соглашению имена функций пишутся в camelCase и начинаются с таких глаголов, как getData(), fetchContents() и isValid().
Функция может принимать ноль, один или несколько параметров. В случае нескольких параметров необходимо использовать запятую для разделения двух параметров.
Следующий код объявляет функцию say(), которая не принимает никаких параметров:
function say() {
}Далее объявляется функция с именем square(), которая принимает один параметр:
function square(a) {
}И следующий пример объявляет функцию с именем add(), которая принимает два параметра:
function add(a, b) {
}Внутри тела функции вы можете написать код для реализации действия. Например, следующая функция say() просто выводит сообщение на консоль:
function say(message) {
console.log(message);
}В теле функции say() мы вызываем функцию console.log() для вывода сообщения на консоль.
Вызов функции
Чтобы использовать функцию, ее нужно вызвать. Вызов функции также известен как вызов функции. Чтобы вызвать функцию, вы используете ее имя, за которым следуют аргументы, заключенные в круглые скобки, например:
functionName(arguments);
При вызове функции JavaScript выполняет код внутри тела функции. Например, ниже показано, как вызвать функцию say() :
say('Hello');В этом примере мы вызываем функцию say() и передаем ей буквальную строку 'Hello'.
Параметры и аргументы
Термины параметры и аргументы часто используются взаимозаменяемо. Однако по сути они разные.
При объявлении функции вы указываете параметры. Однако при вызове функции вы передаете аргументы, соответствующие параметрам.
Например, в функции say() message является параметром, а строка 'Hello' — аргументом, соответствующим параметру message.
Возврат значения
Каждая функция в JavaScript неявно возвращает undefined значение, если вы явно не укажете возвращаемое значение. Например:
function say(message) {
console.log(message);
}
let result = say('Hello');
console.log('Result:', result);Выход:
Hello Result: undefined
Чтобы указать возвращаемое значение для функции, вы используете оператор return, за которым следует выражение или значение, например:
return expression;
Следующая функция add() возвращает сумму двух аргументов:
function add(a, b) {
return a + b;
}Ниже показано, как вызвать функцию add() :
let sum = add(10, 20);
console.log('Sum:', sum);Выход:
Sum: 30
В следующем примере несколько операторов return используются в функции для возврата разных значений в зависимости от условий:
function compare(a, b) {
if (a & gt; b) {
return - 1;
} else if (a & lt; b) {
return 1;
}
return 0;
}Функция compare() сравнивает два значения. Она возвращает:
- -1, если первый аргумент больше второго.
- 1, если первый аргумент меньше второго.
- 0, если первый аргумент равен второму.
Функция немедленно прекращает выполнение, как только достигает оператора return. Следовательно, вы можете использовать оператор return без значения для преждевременного выхода из функции, например:
function say(message) {
// show nothing if the message is empty
if (!message) {
return;
}
console.log(message);
}В этом примере, если message пустое (или undefined ), функция say() ничего не покажет.
Функция может возвращать одно значение. Если вы хотите вернуть несколько значений из функции, вам нужно упаковать эти значения в массив или объект.
Объект arguments
Внутри функции вы можете получить доступ к объекту с именем arguments, который представляет именованные аргументы функции.
Объект arguments ведет себя как массив, хотя он не является экземпляром типа Array.
Например, вы можете использовать квадратную скобку [] для доступа к аргументам: arguments[0] возвращает первый аргумент, arguments[1] возвращает второй и так далее.
Кроме того, вы можете использовать свойство length объекта arguments для определения количества аргументов.
В следующем примере реализована универсальная функция add(), которая вычисляет сумму любого количества аргументов.
function add() {
let sum = 0;
for (let i = 0; i & lt; arguments.length; i++) {
sum += arguments[i];
}
return sum;
}Следовательно, вы можете передать любое количество аргументов функции add(), например:
console.log(add(1, 2)); // 3 console.log(add(1, 2, 3, 4, 5)); // 15
Поднятие функции
В JavaScript вы можете использовать функцию до ее объявления. Например:
showMe(); // a hoisting example
function showMe() {
console.log('an hoisting example');
}Эта особенность называется подъемом функции.
Поlднятие функций — это механизм, с помощью которого движок JavaScript физически перемещает объявления функций в начало кода перед их выполнением.
Ниже показана версия кода перед его выполнением движком JavaScript:
function showMe(){
console.log('a hoisting example');
}
showMe(); // a hoisting exampleЗаключение
- Используйте ключевое слово
functionдля объявления функции. - Используйте
functionName()для вызова функции. - Все функции неявно возвращают undefined, если они явно не возвращают значение.
- Используйте оператор
return, чтобы явно вернуть значение из функции. - Переменная
arguments— это массивоподобный объект внутри функции, представляющий аргументы функции. - Подъем функции позволяет вызывать функцию перед ее объявлением.