Введение
Функция — это блок кода, который выполняет действие или возвращает значение. Функции — это пользовательский код, определяемый программистами, который можно использовать повторно и, следовательно, может сделать программы более модульными и эффективными.
В этом руководстве мы изучим несколько способов определения функции, вызова функции и использования параметров функции в JavaScript.
Определение функции
Функции определяются или объявляются с помощью ключевого слова function. Ниже приведен синтаксис функции в JavaScript.
function nameOfFunction() {
//Code to be executed
}Объявление начинается с ключевого слова function, за которым следует имя функции. Имена функций подчиняются тем же правилам, что и переменные: они могут содержать буквы, цифры, символы подчеркивания и знаки доллара и часто пишутся в верхнем регистре. За именем следует ряд круглых скобок, которые можно использовать для необязательных параметров. Код функции заключен в фигурные скобки, как оператор for или оператор if.
В нашем первом примере мы сделаем объявление функции чтобы напечатать greeting инструкцию на консоли.
//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();С просьбой greet();, функция будет выполнена, и мы получим вывод Hello, World!.
Hello, World!
Теперь наш код greet() содержится в функции, и мы можем повторно использовать его столько раз, сколько захотим.
Используя параметры, мы можем сделать код более динамичным.
Параметры функции
В нашем файле greet.js мы создали базовую функцию, которая выводит Hello, World на консоль. Используя параметры, мы можем добавить дополнительные функции, которые сделают код более гибким. Параметры (Параметры) это входные данные, которые передаются функциям в виде имен и ведут себя как локальные переменные.
Когда пользователь входит в приложение, мы можем захотеть, чтобы программа «приветствовала его по имени», а не просто говорила « Hello, World! ».
Мы добавим в нашу функцию параметр с name, чтобы представлять имя человека, которого приветствуют.
//Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}Имя функции — greet, и теперь у нас есть один параметр в скобках. Имя параметра следует тем же правилам, что и имя переменной. Внутри функции вместо статической строки, состоящей из Hello, World, у нас есть литеральная строка шаблона, содержащая наш параметр, который теперь ведет себя как локальная переменная.
Вы заметите, что мы нигде не определили наши параметры name. Мы присваиваем ему значение при вызове нашей функции. Предполагая, что нашего пользователя зовут Noviello, мы вызовем функцию и введем имя пользователя в качестве аргумента. Аргумент — это фактическое значение, которое передается функции, в данном случае это строка "Noviello".
//Invoke greet function with "Noviello" as the argument
greet("Noviello");Значение "Noviello" передается в функцию через параметр name. Теперь всякий раз, когда name используется в функции, оно будет представлять значение "Noviello". Вот весь код.
//Initialize custom greeting function
function greet(name) {
console.log(`Hello, ${name}!`);
}
//Invoke greet function with "Noviello" as the argument
greet("Noviello");Когда мы запустим вышеуказанную программу, мы получим следующий вывод.
Hello, Noviello!
Теперь у нас есть пример повторного использования функции. В реальном примере функция будет извлекать имя пользователя из базы данных вместо того, чтобы напрямую предоставлять имя в качестве значения аргумента.
Помимо параметров внутри функций могут быть объявлены переменные. Эти переменные известны как локальные переменные и существуют только в рамках своего собственного функционального блока. Область действия переменных определяет доступность переменных; переменные, определенные внутри функции, недоступны извне функции, но их можно использовать всякий раз, когда их функция используется в программе.
Возвращаемые значения
В функции может использоваться более одного параметра. Мы можем передать несколько значений в функцию и вернуть значение. Мы создадим функцию для нахождения суммы двух значений, представленных x и y.
//Initialize add function
function add(x, y) {
return x + y;
}
//Invoke function to find the sum
add(9, 7);В приведенной выше программе мы определили функцию с параметрами x и y, затем передали в функцию значения 9 и 7. Когда мы запустим программу, мы получим сумму этих чисел в качестве вывода.
16
В этом случае, когда 9 и 7 переданы в функцию sum(), программа возвращается к 16.
Когда используется ключевое слово return, функция прекращает выполнение и возвращается значение выражения. Хотя в этом случае браузер отобразит значение в консоли, это не то же самое, что использовать console.log() для вывода на консоль. Вызов функции выведет значение именно там, где была вызвана функция. Это значение можно использовать сразу или вставить в переменную.
Функциональные выражения
В последнем разделе мы использовали объявление функции, чтобы получить сумму двух чисел и вернуть это значение. Мы также можем создать функциональное выражение присваивая функцию переменной.
Используя наш собственный пример функции add, мы можем напрямую применить возвращаемое значение к переменной, в данном случае к 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 является функцией. Мы можем сделать это выражение более кратким, превратив его в анонимную функцию, которая является безымянной функцией. В настоящее время наша функция имеет имя add, но с функциональными выражениями нет необходимости называть функцию, и имя обычно опускается.
//Assign function to sum constant
const sum = function(x, y) {
return x + y;
}
//Invoke function to find the sum
sum(100, 3);103
В этом примере мы удалили имя функции, которое было add, и превратили его в анонимную функцию. Именованное функциональное выражение можно использовать для облегчения отладки, но обычно его опускают.
Стрелочные функции
До сих пор мы рассматривали, как определять функции с помощью ключевого слова function. Однако существует более новый и более лаконичный способ определения функции, известный как выражения стрелочной функции. Стрелочные функции, как их обычно называют, представлены знаком равенства, за которым следует знак больше: =>.
Стрелочные функции всегда являются анонимными функциями и типом функционального выражения. Мы можем создать базовый пример для нахождения произведения двух чисел.
//Define multiply function
const multiply = (x, y) => {
return x * y;
}
//Invoke function to find product
multiply(30, 4);120
Вместо написания ключевого слова function мы используем стрелку => для обозначения функции. В остальном он работает аналогично обычному функциональному выражению, с некоторыми дополнительными отличиями, о которых вы можете прочитать в разделе «Стрелочные функции» в Mozilla Developer Network.
В случае только одного параметра скобки можно исключить. В этом примере мы возводим x в квадрат, для чего в качестве аргумента нужно передать только число. Скобки опущены.
//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
Все три из этих типов синтаксиса производят одинаковый вывод. Как правило, решение о том, как структурировать ваши функции, зависит от предпочтений или корпоративного стандарта кодирования.
Вывод
В этом руководстве мы рассмотрели объявления функций и выражения функций, возврат значений из функций, присвоение значений функций переменным ES6 и стрелочные функции.
Функции — это блоки кода, которые возвращают значение или выполняют действие, что делает программы масштабируемыми и модульными.
