Функции в JavaScript. Классический способ создания

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

Довольно часто случается, что какие-то строчки кода повторяются. Чтобы уйти от этого можно написать функцию, а затем просто вызывать её в разных местах. Это один из классических сценариев использования функций, который позволяет упростить написание программ на JavaScript.

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

Например, если перед вами стоит какая-то задача, то чтобы проще её решить, можно разбить её на подзадачи, которые решают какие-то определённые функции. А затем уже используя их написать финальный код, который в данном случае сделать будет очень просто. Вдобавок к этому в такой код будет более просто вносить различные изменения и добавлять новые возможности.

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

• Function Declaration ;
• Function Expression ;
• Arrow Function .

В этой статье разберём первый классический способ, т.е. Function Declaration .

Объявление и вызов функции

Операции с функцией в JavaScript можно разделить на 2 этапа:

• объявление (создание) функции;
• вызов (выполнение) этой функции.

1. Объявление функции. Написание функции посредством Function Declaration начинается с ключевого слова function . После этого указывается имя функции , круглые скобки , внутри которых при необходимости описываются параметры, и тело функции , заключённое в фигурные скобки.

При составлении имени функции необходимо руководствоваться такими же правилами, что для переменной. Т.е. можно использовать буквы, цифры (0 – 9), знаки «$» и «_». В качестве букв рекомендуется использовать английский алфавит (a-z, A-Z). Имя функции, также как и имя переменной не может начинаться с цифры.

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

Пример функции с двумя параметрами:

Если параметры не нужны, то круглые скобки в любом случае указываются.

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

2. Вызов функции. Объявленная функция сама по себе не выполняется. Для того чтобы функцию запустить, её необходимо вызвать. Вызов функции осуществляется посредством указания её имени и двух круглых скобок. Внутрь скобок при необходимости можно передать значения (аргументы) разделяя их между собой с помощью запятой.

Параметры и аргументы

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

Аргументы – это значения, которые передаём функции в момент её вызова.

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

Но если значение является ссылкой, то его изменения будет видно за пределами функции:

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

Переменные, объявленные внутри функции, называются локальными. Они не доступны вне функции.

При этом, когда мы обращаемся к переменной и её нет внутри функции, она берётся снаружи. Такие переменные называются внешними .

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

Параметры – это не единственный способ, с помощью которого в JavaScript можно получить аргументы функции.

Внутри функции доступен специальный массивоподобный объект arguments . С помощью него можно получить все переданные аргументы, а также их количество.

Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по порядковому номеру.

• arguments[0] – позволяет получить первый аргумент;
• arguments[1] – второй аргумент и т.д.

Получение аргументов через arguments в основном используется, когда мы заранее не знаем их точное количество.

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

Через цикл for. of этот пример можно записать так:

При необходимости arguments можно преобразовать в обычный массив.

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

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

При этом внешняя переменная или функция будет доступна внутри неё.

Передаче одной функции в другую в основном используется для создания колбэков. Колбэк (callback) - это функция, которая должна быть выполнена после завершения работы другой функции. Её ещё называют функцией обратного вызова. Колбэки в основном применяются в асинхронном коде.

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

Узнать является ли некоторый идентификатор функцией можно с помощью typeof :

Например, проверим является ли колбэк функцией перед тем как его вызвать:

Возвращаемое значение (return)

Оператор return предназначен для возвращения значения выражения в качестве результата выполнения функции. Значение выражения должно быть указано после ключевого слова return .

Если оно не указано, то вместо этого значения будет возвращено undefined .

Без использования return :

С использованием return :

Инструкции, расположенные после return никогда не выполняются:

В качестве результата функции мы можем также возвращать функцию.

Вызовы функции outer(3) и outer(4) возвращают одну и туже функцию, но первая запомнила, что a = 3 , а вторая - что a = 4 . Это происходит из-за того, что функции в JavaScript «запоминают» окружение, в котором они были созданы. Этот приём довольно часто применяется на практике. Так как с помощью него мы можем, например, на основе одной функции создать другие, которые нужны.

В примере, приведённом выше, мы могли также не создавать дополнительные константы one и two . А вызвать сразу после вызова первой функции вторую.

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

Функцию, приведённую в коде мы можем также создать и так:

Кроме этого в качестве результата мы можем также возвратить внешнюю функцию:

Функцию можно также вызвать внутри самой себя. Это действие в программировании называется рекурсией.

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

Например, использование рекурсии для вычисления факториала числа:

Пример, в котором используя рекурсию выведем числа от указанного до 10:

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

В JavaScript не реализована перегрузка функций в том виде, как это реализовано в Си или других языках. Но подобную функциональность можно имитировать в JavaScript. Для этого у нас есть всё, что для этого необходимо.

Например, того чтобы проверить имеет параметр значение или нет, мы можем проверить его значения на undefined . Узнать количества переданных аргументов функции можно через arguments.length . Определить значения параметра можно используя typeof или instanceof .

Например, создадим функцию bodyBgColor , которая будет иметь 2 режима работы. Если её вызвать без аргументов, то она будет возвращать цвет фона body . А если с текстовым аргументом, то она будет устанавливать цвет фона body .

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

Новые возможности, которые появились в ES6+ для функций

В языке, начиная с версии ECMAScript 6+ (2015+) параметру функции можно задать значение по умолчанию.

Например, установим параметру color значение по умолчанию '#009688' :

До появление такой возможности в языке, задание параметру значения по умолчанию выполнялось так:

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

В JavaScript имеется огромный набор встроенных (стандартных) функций. Данные функции уже описаны в самом движке браузера. Практически все они являются методами того или иного объекта.

Например, для того чтобы вызвать встроенную функцию (метод) alert, её не надо предварительно объявлять. Она уже описана в браузере. Вызов метода alert осуществляется посредством указания имени, круглых скобок и аргумента внутри них. Данный метод предназначен для вывода сообщения на экран в форме диалогового окна. Текстовое сообщение берётся из значения параметра данной функции.

Функция в JavaScript в результате своего выполнения всегда возвращает результат, даже если он явно не определён с помощью оператора return . Этот результат значение undefined .

Такой же результат будет получен, если для оператора return не указать возвращаемое значение.