Как определить функции в JavaScript

Вступление

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

В этом уроке мы изучим несколько способов определения функции, вызова функции и использования параметров функции в JavaScript.

Определение функции

Функции определяются или объявляются с помощью ключевого слова + function +. Ниже приведен синтаксис функции в JavaScript.

function nameOfFunction() {
   // Code to be executed
}

Объявление начинается с ключевого слова + function +, за которым следует имя функции. Имена функций подчиняются тем же правилам, что и переменные - они могут содержать буквы, цифры, знаки подчеркивания и знаки доллара и часто пишутся по адресу https://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure- in-javascript # идентификаторы [случай верблюда]. За именем следует набор скобок, которые можно использовать для необязательных параметров. Код функции содержится в фигурных скобках, например, в выражении for или в https: / /www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[if Statement].

В нашем первом примере мы сделаем * объявление функции *, чтобы напечатать оператор приветствия на консоль.

// Initialize greeting function
function greet() {
   console.log("Hello, World!");
}

Здесь у нас есть код для вывода + Hello, World! + На консоль, содержащийся внутри функции + greet () +. Однако ничего не произойдет, и никакой код не будет выполняться, пока мы * не вызовем * или не вызовем функцию. Вы можете вызвать функцию, написав имя функции с последующими круглыми скобками.

// Invoke the function
greet();

Теперь мы соберем их вместе, определим нашу функцию и вызовем ее.

greet.js

// Initialize greeting function
function greet() {
   console.log("Hello, World!");
}

// Invoke the function
greet();

При вызове + greet (); + функция запустится, и мы получим + Hello, World! + В качестве вывода программы.

OutputHello, World!

Теперь у нас есть код + greet () +, содержащийся в функции, и мы можем использовать его столько раз, сколько захотим.

Используя параметры, мы можем сделать код более динамичным.

Параметры функции

В нашем файле + greet.js мы создали базовую функцию, которая выводит на консоль` + Hello, World`. Используя параметры, мы можем добавить дополнительную функциональность, которая сделает код более гибким. * Параметры * являются входными данными, которые передаются в функции как имена и ведут себя как локальные переменные.

Когда пользователь входит в приложение, мы можем захотеть, чтобы программа приветствовала его по имени, вместо того, чтобы просто сказать «Привет, мир!».

Мы добавим в нашу функцию параметр, называемый + name +, для представления имени встречаемого человека.

// Initialize custom greeting function
function greet(name) {
   console.log(`Hello, ${name}!`);
}

Имя функции - + greet +, и теперь у нас есть один параметр в скобках. Имя параметра следует тем же правилам, что и имя переменной. Внутри функции вместо статической строки, состоящей из + Hello, World +, мы имеем https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript# переменные-в-строках-с-шаблоном-литералами [template literal] строка, содержащая наш параметр, который теперь ведет себя как локальная переменная.

Вы заметите, что мы нигде не определили наш параметр + name +. Мы присваиваем ему значение при вызове нашей функции. Предполагая, что нашего пользователя зовут Сэмми, мы вызовем функцию и поместим имя пользователя в качестве * аргумента *. Аргумент является фактическим значением, которое передается в функцию, в данном случае это строка " Sammy ".

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

Значение " Sammy " передается в функцию через параметр + name +. Теперь каждый раз, когда + name + используется во всей функции, она будет представлять значение " Sammy ". Вот весь код.

greetSammy.js

// Initialize custom greeting function
function greet(name) {
   console.log(`Hello, ${name}!`);
}

// Invoke greet function with "Sammy" as the argument
greet("Sammy");

Когда мы запустим программу выше, мы получим следующий вывод.

OutputHello, Sammy!

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

В дополнение к параметрам переменные могут быть объявлены внутри функций. Эти переменные известны как * локальные переменные * и будут существовать только внутри scope их собственного функционального блока. Область действия переменной определяет доступность переменных; Переменные, которые определены внутри функции, не доступны извне функции, но они могут использоваться столько раз, сколько их функция используется в программе.

Возвращаемые значения

В функции можно использовать более одного параметра. Мы можем передать несколько значений в функцию и вернуть значение. Мы создадим функцию, чтобы найти сумму двух значений, представленных + x + и + y +.

sum.js

// Initialize add function
function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
add(9, 7);

В приведенной выше программе мы определили функцию с параметрами + x + и + y +, а затем передали значения + 9 + и + 7 + в функцию. Когда мы запустим программу, мы получим сумму этих чисел в качестве выходных данных.

Output16

В этом случае, когда + 9 + и + 7 + переданы в функцию + sum () +, программа вернула + 16 +.

Когда используется ключевое слово + return +, функция перестает выполняться и возвращается значение выражения. Хотя в этом случае браузер будет отображать значение в консоли, это не то же самое, что использование + console.log () + для печати в консоли. Вызов функции выведет значение именно там, где была вызвана функция. Это значение может быть использовано немедленно или помещено в переменную.

Функциональные выражения

В последнем разделе мы использовали объявление функции, чтобы получить сумму двух чисел и вернуть это значение. Мы также можем создать * https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function [выражение функции] *, назначив функцию переменной.

Используя тот же пример функции + add +, мы можем напрямую применить возвращаемое значение к переменной, в этом случае + sum +.

functionExpression.js

// Assign add function to sum constant
const sum = function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(20, 5);

Output25

Теперь константа + sum + является функцией. Мы можем сделать это выражение более кратким, превратив его в * анонимную функцию *, которая является неназванной функцией. В настоящее время наша функция имеет имя + add +, но с помощью выражений функций нет необходимости называть функцию, и имя обычно опускается.

anonymousExpression.js

// Assign function to sum constant
const sum = function(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(100, 3);

Output103

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

Функции стрелок

До сих пор мы рассмотрели, как определять функции, используя ключевое слово + function. Однако есть более новый, более краткий метод определения функции, известный как * выражения функций стрелок * по состоянию на ECMAScript 6. Функции стрелок, как их обычно называют, представлены знаком равенства, за которым следует знак больше, чем: + ⇒ +.

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

arrow Function.js

// Define multiply function
const multiply = (x, y) => {
   return x * y;
}

// Invoke function to find product
multiply(30, 4);

Output120

Вместо того, чтобы писать ключевое слово + function, мы используем стрелку` + ⇒ + `для обозначения функции. В противном случае он работает аналогично регулярному выражению функции, с некоторыми дополнительными отличиями, о которых вы можете прочитать в https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions[Arrow. Функции на Сеть разработчиков Mozilla.

В случае только одного параметра круглые скобки могут быть исключены. В этом примере мы возводим в квадрат + x +, для которого в качестве аргумента необходимо передать только одно число. Скобки были опущены.

// Define square function
const square = x => {
   return x * x;
}

// Invoke function to find product
square(8);

Output64

С этими конкретными примерами, которые состоят только из оператора + return +, функции стрелок позволяют еще больше уменьшить синтаксис. Если функция представляет собой только одну строку + return +, обе фигурные скобки и оператор + return + могут быть опущены, как показано в примере ниже.

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);

Output100

Все три из этих типов синтаксиса приводят к одному и тому же выводу. Как правило, вопрос о том, как вы будете структурировать свои собственные функции, зависит от предпочтений или стандартов кодирования компании.

Заключение

В этом уроке мы рассмотрели объявления функций и выражения функций, возвращение значений из функций, присвоение значений функций переменным и функции стрелок ES6.

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

TOC