Поиск по сайту:
Жить достойно не возбраняется никому (Эразм Роттердамский).

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

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

Введение

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

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

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

Определяются функции, или объявляются с ключевым словом function. Ниже приведен синтаксис функции в JavaScript.

function nameOfFunction() {
    // Код, который будет выполнен
}

 

Объявление начинается с ключевого слова function, за которым следует имя функции. Имена функций подчиняются тем же правилам, что и переменные – они могут содержать буквы, цифры, символы подчеркивания и знаки доллара, и часто написаны как ВерблюжийРегистр. После имени следует набор скобок, которые могут быть использованы для дополнительных параметров. Код функции содержится в фигурных скобках, так же, как для заявления for или заявления if.

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

// Инициализация функции приветствия
function greet() {
    console.log("Привет, Мир!");
}

 

Здесь мы имеем код для печати «Привет, Мир!» на консоли, находящейся внутри функции greet(). Однако, ничего не произойдет, и код не будет выполняться, пока мы вызовем функцию. Вы можете вызвать функцию, написав имя функции, за которым следуют скобки.

// Вызов функции
greet();

 

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

greet.js
// Инициализация функции приветствия
function greet() {
    console.log("Привет, Мир!");
}

// Вызов функции
greet();

При вызове greet(); функция будет работать, и мы получим «Привет, Мир!» в качестве вывода программы.

Вывод
Привет, Мир!

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

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

Функциональные параметры

В нашем файле greet.js мы создали основную функцию, которая выводит «Привет, Мир!» на консоль. Используя параметры, мы можем добавить дополнительную функциональность, которая позволит сделать код более гибким. Параметры вводятся, которые передаются в функцию как имена и ведут себя как локальные переменные.

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

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

// Инициализация пользовательской функции приветствия
function greet(name) {
    console.log(`Привет, ${name}!`);
}

 

В функции greet теперь мы имеем один параметр внутри скобок. Имя параметра следует тем же правилам, что и имя переменной. Внутри функции, вместо статической строки, состоящей из «Привет, Мир!», у нас есть шаблон буквальной строки, содержащую наш параметр, который теперь ведет себя как локальная переменная.

Вы заметите, что мы не определили наш параметр name в любом месте. Мы присваиваем ему значение, когда мы вызываем нашу функцию. Предполагая, что наш пользователь называется AndreyEx, мы будем вызывать функцию и поместим имя пользователя в качестве аргумента. Аргумент является фактическим значением, которое передается в функцию, в данном случае это строка “AndreyEx”.

// Вызов функции приветствия с "AndreyEx" в качестве аргумента
greet("AndreyEx");

 

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

greetAndreyEx.js
// Инициализация пользовательской функции приветствия
function greet(name) {
    console.log(`Привет, ${name}!`);
}

// Вызов функции приветствия с "AndreyEx" в качестве аргумента
greet("AndreyEx");

 

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

Вывод
Привет, AndreyEx!

 

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

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

Возврат значений

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

sum.js
// Инициализация функции добавления
function add(x, y) {
    return x + y;
}

// Вызов функции для поиска суммы
add(9, 7);

 

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

Вывод
16

 

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

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

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

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

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

functionExpression.js
// Назначить функцию добавления константе summ
const sum = function add(x, y) {
    return x + y;
}

// Вызов функции для поиска summ
sum(20, 5);
Вывод
25

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

anonymousExpression.js
// Назначить функцию константе summ
const sum = function(x, y) {
    return x + y;
}

// Вызов функции для поиска summ
sum(100, 3);
Вывод
103

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

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

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

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

arrowFunction.js
// Определение функции умножения
const multiply = (x, y) => {
    return x * y;
}

// Вызов функции для поиска продукта
multiply(30, 4);
Вывод
120

 

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

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

// Определение функции квадрата
const square = x => {
    return x * x;
}

// Вызов функции
square(8);
Вывод
64

 

Примечание:
В случае отсутствия параметров в функциях стрелки требуется пустой набор скобок ()..

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

// Определение функции возведения в квадрат
const square = x => x * x;

// Вызов функции
square(10);
Вывод
100

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

Вывод

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

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

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...
Поделиться в соц. сетях:
0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest

**ссылки nofollow

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии

Читайте также

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: