Определение функций в JavaScript
Функция – это блок кода, который выполняет действие или возвращает значение. Функции – это настраиваемый код, который можно использовать повторно; поэтому благодаря функциям программы становятся модульными и более производительными.
Этот мануал предлагает несколько способов определения и вызова функции и использования параметров функции в JavaScript.
Определение функции
Функции определяются или объявляются с помощью ключевого слова function. Синтаксис функции в JavaScript выглядит так:
function nameOfFunction() {
// Code to be executed
}
Объявление функции начинается с ключевого слова function, за которым следует имя функции. Имена функций составляются по тем же правилам, что и имена переменных: они могут содержать буквы, цифры, знаки подчеркивания и доллара и часто записываются в верблюжьем регистре. За именем следует набор скобок, которые могут использоваться для опциональных параметров. Код функции содержится в фигурных скобках, как операторы for или if.
Читайте также:
Для примера создайте файл greet.js и составьте в нем объявление функции, которая будет выводить в консоль приветствие:
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}
Этот код выведет в консоль фразу Hello, World!, содержащуюся внутри функции greet (). Однако код не будет выполняться до тех пор, пока вы не вызовете функцию. Чтобы вызвать функцию, укажите имя функции и скобки.
// Invoke the function
greet();
Если объединить определение функции и вызов, получится такой код:
// Initialize greeting function
function greet() {
console.log("Hello, World!");
}
// Invoke the function
greet();
Последняя строка – вызов функции – запустит функцию и выведет в консоль фразу «Hello, World!».
Hello, World!
Теперь вы можете повторно использовать эту функцию в программе.
Параметры позволяют сделать код функции более динамическим.
Параметры функции
В файле greet.js вы создали базовую функцию, которая выводит в консоль приветствие. С помощью параметров можно расширить действия функции и сделать код более гибким. Параметры – это входные данные, которые передаются в функции как имена и ведут себя как локальные переменные.
К примеру, когда пользователи входят в приложение, программа может приветствовать их по имени.
Добавьте в функцию параметр name, чтобы объявить имя приветствуемого пользователя.
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
Теперь функция greet имеет один параметр внутри круглых скобок. Имена параметров следуют тем же правилам, что и имена переменных. Теперь внутри функции вместо статической строки «Hello, World» есть строка шаблона, содержащая параметр, который ведет себя как локальная переменная.
Читайте также: Работа со строками в JavaScript
Как вы могли заметить, значение параметра name не присваивается в коде, это делается при вызове функции. При вызове функции имя пользователя передается в качестве аргумента. Аргумент – это фактическое значение, которое передается в функцию (в данном случае это имя пользователя, например 8host).
// Invoke greet function with "8host" as the argument
greet("8host");
Значение 8host передается в функцию через параметр name. Теперь параметр name будет представлять в данной функции это значение. Код файла greetUser.js выглядит так:
// Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
// Invoke greet function with "8host" as the argument
greet("8host");
Запустив эту программу, вы получите такой вывод:
Hello, 8host!
Теперь вы знаете, как можно повторно использовать функцию.
Кроме параметров, внутри функций можно объявлять переменные. Эти переменные называются локальными и существуют только внутри их блока функции. Область переменных определяет доступность переменных; переменные, которые определены внутри функции, недоступны извне функции, но их можно использовать столько раз, сколько используется в программе функция, которой они принадлежат.
Возвращение значений
В функции можно использовать более одного параметра. Вы можете передать в функцию несколько значений и вернуть значение. Для примера создайте файл sum.js и объявите в нем функцию, которая будет искать сумму двух значений, x и y.
// Initialize add function
function add(x, y) {
return x + y;
}
// Invoke function to find the sum
add(9, 7);
В этом коде определяется функция с параметрами х и у. Затем функция получает значения 9 и 7. Запустите программу:
16
Программа сложит полученные значения, 9 и 7, и вернет результат 16.
Когда используется ключевое слово return, функция перестает выполняться и возвращает значение выражения. В этом случае браузер отобразит значение в консоли, однако это не то же самое, что использовать console.log() для вывода в консоль. При вызове функция выводит значение туда, откуда она была вызвана. Это значение можно использовать или поместить в переменную.
Функциональные выражения
В предыдущем разделе вы объявили функцию, которая складывает два числа и возвращает полученное значение. Также вы можете создать функциональное выражение, присвоив функцию переменной.
Используйте предыдущую функцию, чтобы применить полученное значение к переменной sum.
// Assign add function to sum constant
const sum = function add(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(20, 5);
25
Теперь константа sum является функцией. Это выражение можно сократить, превратив его в анонимную функцию (так называются функции без параметра name). В настоящее время функция называется add, но в функциональных выражениях имя обычно опускается.
// Assign function to sum constant
const sum = function(x, y) {
return x + y;
}
// Invoke function to find the sum
sum(100, 3);
103
Теперь у функции больше нет имени, она стала анонимной.
Функциональные выражения с именем могут использоваться для отладки.
Стрелочные функции
До сих пор функции определялись с помощью ключевого слова function. Тем не менее, существует более новый и сжатый способ определения функции – это стрелочные функции ECMAScript 6. Стрелочные функции представлены значком равенства, за которым следует знак больше: =>.
Стрелочные функции всегда анонимны и являются типом функционального выражения. Попробуйте создать базовую стрелочную функцию, чтобы найти сумму двух чисел.
// Define multiply function
const multiply = (x, y) => {
return x * y;
}
// Invoke function to find product
multiply(30, 4);
120
Вместо того чтобы писать function, можно просто использовать символы =>.
В остальном функция работает аналогично регулярному функциональному выражению, хотя и здесь есть несколько отличий, больше о которых можно узнать на Mozilla Developer Network.
Если в функции всего один параметр, скобки можно опустить. В следующем примере функция возводит в квадрат х, потому в качестве аргумента ей нужно всего одно число.
// Define square function
const square = x => {
return x * x;
}
// Invoke function to find product
square(8);
64
Примечание: Если в стрелочной функции нет параметров, нужно добавить пустые круглые скобки ().
Стрелочные функции, которые состоят только из оператора return, можно сократить. Если функция состоит только из одной строки return, вы можете опустить фигурные скобки и оператор return, как в приведенном ниже примере.
// Define square function
const square = x => x * x;
// Invoke function to find product
square(10);
100
Заключение
Данный мануал знакомит вас с объявлением функций, функциональных выражений и стрелочных функций, возвращением значений и присваиванием значений функции переменным.
Функция – это блок кода, который возвращает значение или выполняет действие.
Tags: Javascript