ОСНОВНОЕ

WORDPRESS

Операционные системы

Базы данных

Фреймворк Bootstrap

Мало суметь уйти — сумей, уйдя, не вернуться (Овидий).

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

FavoriteLoadingДобавить в избранное
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 5,00 из 5)
Загрузка...

Статья опубликована: 18 октября 2017

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

Введение

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

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

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

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

 

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

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

 

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

 

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

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

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

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

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

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

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

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

 

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

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

 

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

greetAndreyEx.js
 

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

Вывод
 

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

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

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

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

sum.js
 

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

Вывод
 

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

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

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

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

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

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

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

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

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

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

arrowFunction.js
Вывод
 

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

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

Вывод

 

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

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

Вывод

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

Вывод

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

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

 


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

Добавить комментарий

Войти с помощью: 

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Заполните форму и наш менеджер перезвонит Вам в самое ближайшее время!

badge
Обратный звонок 1
Отправить
galka

Спасибо! Ваша заявка принята

close
galka

Спасибо! Ваша заявка принята

close