Функции

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

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

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

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

Объявление

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

function showMessage() {  
  alert('Привет всем присутствующим!');
}

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

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

function showMessage() {  
  alert('Привет всем присутствующим!');
}

*!*
showMessage();
showMessage();
*/!*

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

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

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

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

function showMessage() {
  var message = 'Привет, я - Вася!'; // локальная переменная

  alert(message);
}

showMessage(); // 'Привет, я - Вася!'

alert(message); // <-- будет ошибка, т.к. переменная видна только внутри

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

В примере ниже переменная k видна не только в том цикле, где она объявлена, а везде в функции:

function count() {
  for (var i=0; i<3; i++) {
    *!*var k*/!* = i * 2;
  }

*!*
  alert(k); // локальная переменная функции
*/!*
}

Параметры

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

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

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

function showMessage(*!*title, text*/!*) { // параметры title, text
  
  title = "** " + title + " **"; // мог бы быть сложный код оформления
  alert(title + '\n\n' + text);
}

*!*
showMessage('Вам письмо', 'Привет!');
showMessage('Вам еще письмо', 'Как дела?');
*/!*

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

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

function showMessage(title, text) { 
  title = "* " + title + " *";  // (1)
  alert(title + '\n\n' + text);
}

*!*
var title = 'От Маши'; // (2)
var msg = 'Привет';
*/!*
showMessage(*!*title, msg*/!*); // параметры возьмутся из переменных

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

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

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

function calcD(a, b, c) {
   *!*return*/!* b*b - 4*a*c;
}

var test = calcD(-4, 2, 1);
alert(test); // 20

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

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

function checkAge(age) {
  if (age > 18) { 
    return true;
  } else {
    return confirm('Родители разрешили?');
  }
}

var age = prompt('Ваш возраст?');

if (checkAge(age)) {
  alert('Доступ разрешен'); 
} else {
  alert('В доступе отказано');
}

function checkAge(age) {
  if (age > 18) {
    return true;
  } else {
    return confirm('Родители разрешили?');
  }
}

function checkAge(age) {
  return (age > 18) ? true : confirm('Родители разрешили?');
}

function checkAge(age) {
  return (age > 18) || confirm('Родители разрешили?');
}

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

function showCinema(age) {
  if (!checkAge(age)) {
*!*
    return;
*/!*
    alert(123); // (*)
  }
  
  // ...
}

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

function doNothing() { /* пусто */ }

alert( doNothing() ); // undefined

function doNothing() { 
  return;
}

alert( doNothing() === undefined ); // true

Выбор имени

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

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

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

showMessage(..)     // префикс show, "показать" сообщение

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

getAge(..)          // get, "получает" возраст
calcD(..)           // calc, "вычисляет" дискриминант
createForm(..)      // create, "создает" форму
checkPermission(..) // check, "проверяет" разрешение, возвращает true/false

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

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

min(2, 5) == 2
min(3, -1) == -1
min(1, 1) == 1

function min(a, b) {
  if (a < b) {
    return a;
  } else {
    return b;
  }
}

function min(a, b) {
  return a < b ? a : b;
}

pow(3, 2) = 3*3 = 9
pow(3, 3) = 3*3*3 = 27
pow(1, 100) = 1*1*...*1 = 1