Функции в JavaScript

Зачастую нам надо повторять одно и то же действие во многих частях программы.

Например, красиво вывести сообщение необходимо при приветствии посетителя, при выходе посетителя с сайта, еще где-нибудь.

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

Примеры встроенных функций вы уже видели — это alert(message), prompt(message, default) иconfirm(question). Но можно создавать и свои.

Объявление

Пример объявления функции:

Вначале идет ключевое слово function, после него имя функции, затем список параметров в скобках (в примере выше он пустой) и тело функции — код, который выполняется при ее вызове.

Объявленная функция доступна по имени, например:

Этот код выведет сообщение два раза. Уже здесь видна главная цель создания функций: избавление от дублирования кода.

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

Локальные переменные

Функция может содержать локальные переменные, объявленные через var. Такие переменные видны только внутри функции:

Блоки if/else, switch, for, while, do..while не влияют на область видимости переменных.

При объявлении переменной в таких блоках, она все равно будет видна во всей функции.

Например:

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

Объявления переменных в примере выше можно передвинуть вверх, это ни на что не повлияет:

Внешние переменные

Функция может обратиться ко внешней переменной, например:

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

Конечно, если бы внутри функции, в строке (1), была бы объявлена своя локальная переменнаяvar userName, то все обращения использовали бы ее, и внешняя переменная осталась бы неизменной.

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

Параметры

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

Например, этот код выводит два сообщения:

Параметры копируются в локальные переменные функции.

В примере ниже изменение from в строке (1) не отразится на значении внешней переменной from (2), т.к. изменена была копия значения:

Аргументы по умолчанию

Функцию можно вызвать с любым количеством аргументов.

Например, функцию показа сообщения showMessage(from, text) можно вызвать с одним аргументом:

Если параметр не передан при вызове — он считается равным undefined.

Такую ситуацию можно отловить и назначить значение «по умолчанию»:

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

Для указания значения «по умолчанию», то есть, такого, которое используется, если аргумент не указан, используется два способа:

1. Можно проверить, равен ли аргумент undefined, и если да — то записать в него значение по умолчанию. Этот способ продемонстрирован в примере выше.
2. Использовать оператор ||:

    

      

   1	function showMessage(from, text) {

   2	text = text || 'текст не передан';

   3

   4

   ...

   5

   }

    

   Второй способ считает, что аргумент отсутствует, если передана пустая строка, 0, или вообще любое значение, которое в булевом виде является false.

Если аргументов передано больше, чем надо, например showMessage("Маша", "привет", 1, 2, 3), то ошибки не будет. Но так как для «лишних» аргументов не предусмотрены параметры, то доступ к ним можно будет получить только через специальный объект arguments, который мы рассмотрим в главе Псевдо-массив arguments.

Стиль объявления функций

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

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

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

Функция может возвратить результат, который будет передан в вызвавший ее код.

Например, создадим функцию calcD, которая будет возвращать дискриминант квадратного уравнения по формуле b2 - 4ac:

Для возврата значения используется директива return.

Она может находиться в любом месте функции. Как только до нее доходит управление — функция завершается и значение передается обратно.

Вызовов return может быть и несколько, например:

Директива return может также использоваться без значения, чтобы прекратить выполнение и выйти из функции.

Например:

В коде выше, если сработал if, то строка (*) и весь код под ней никогда не выполнится, так как return завершает выполнение функции.

Выбор имени

Имя функции следует тем же правилам, что и имя переменной. Основное отличие — оно должно быть глаголом, т.к. функция — это действие.

Как правило, используются глагольные префиксы, обозначающие общий характер действия, после которых следует уточнение.

Функции, которые начинаются с "show" — что-то показывают:

Функции, начинающиеся с "get" — получают, и т.п.:

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

Итого

Объявление функции:

• Передаваемые значения копируются в параметры функции и становятся локальными переменными.
• Параметры функции являются ее локальными переменными.
• Можно объявить новые локальные переменые при помощи var.
• Значение возвращается оператором return ....
• Вызов return тут же прекращает функцию.
• Если return; вызван без значения, или функция завершилась без return, то ее результат равенundefined.

При обращении к необъявленной переменной функция будет искать внешнюю переменную с таким именем.

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

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

Именование функций:

• Имя функции должно понятно и четко отражать, что она делает. Увидев ее вызов в коде, вы должны тут же понимать, что она делает.
• Функция — это действие, поэтому для имен функций, как правило, используются глаголы.

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