Статья, в которой рассмотрим, что такое функция, а также традиционный (классический) вариант работы с ней. Кроме этого, разберем, что такое аргументы (параметры) функции и оператор return.

Что такое функция?

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

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

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

В результате такая программа становится более структурированной. В неё более просто вносить различные изменения и добавлять новые возможности.

В JavaScript создать функцию можно различными способами. Это:

  • function declaration statement;
  • function definition expression;
  • arrow function expression;

Для начала мы рассмотрим способ создания функции с помощью function declaration statement. Function declaration statement - это «классический» вариант объявления функции.

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

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

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

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

function имя (параметры) {
  // код функции
}

Например:

// объявление функции someName
function someName() {
  alert('Вы вызвали функцию someName!');
}

// function - ключевое слово, которое означает что мы хотим создать функцию
// someName - имя функции
// () - круглые скобки внутри которых при необходимости мы можем поместить параметры через запятую
// { ... } - код или тело функции
JavaScript - Синтаксис объявления функции

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

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

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

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

// выполнение функции, приведённой в предыдущем примере (без передачи ей аргументов)
someName();
JavaScript - Синтаксис вызова функции

Является ли функция в JavaScript объектом?

Функции в JavaScript являются объектами. В JavaScript вообще всё является объектами, кроме шести примитивных типов данных. А если функция является объектом, то ссылку на неё можно сохранить в переменную.

// объявление функции someName
function someName() {
  alert('Вы вызвали функцию someName!');
}
var reference = someName;

После этого вызвать функцию можно будет так:

reference();

Параметры и аргументы функции

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

// вызов функции sayWelcome с передачей ей двух аргументов
sayWelcome('Иван', 'Иванов');
// ещё один вызов функции sayWelcome с двумя аргументами
sayWelcome('Петр', 'Петров');

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

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

// объявление функции sayWelcome, которая имеет два параметра
function sayWelcome (userFirstName, userLastName) {
  // инструкция, выводящая в консоль значения параметров «userFirstName» и «userLastName»
  console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}

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

Например, вызовем функцию из примера, приведённого выше, без указания одного и двух параметров:

// вызов функции sayWelcome и передача ей одного аргумента
sayWelcome('Петр'); // Добро пожаловать, undefined Петр
// вызов функции sayWelcome без передачи ей аргументов
sayWelcome(); // Добро пожаловать, undefined undefined

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

// объявление функции
function outputParam(param1, param2, param3) {
  console.log(param1 + '; ' + param2 + '; ' + param3);
}
// вызовы функции outputParam с передачей ей разного количества параметров
outputParam('Дождь','Снег','Туман'); // Дождь; Снег; Туман
outputParam(17); // 17; undefined; undefined
outputParam(24,33); // 24; 33; undefined
outputParam(); // undefined; undefined; undefined

Ещё один способ обратиться к аргументам внутри функции – это использовать специальный объект arguments. Доступ к аргументам через arguments выполняется точно также как к элементам обычного массива, т.е. по их порядковым номерам. Таким образом, argument[0] - позволит получить первый аргумент, arguments[1] – второй аргумент и т.д.

// объявление функции sum
function sum(num1, num2) {
  /* num1 или arguments[0] – получить значение 1 аргумента
     num2 или arguments[1] – получить значение 2 аргумента */
  let sum1 = num1 + num2;
  let sum2 = arguments[0] + arguments[1];
  return 'Сумма, полученная 1 способом равна ' + sum1 + '; сумма, полученная 2 способом равна ' + sum2;
}
/* выведем результат функции sum в консоль
7 - первый аргумент (к нему можно обратиться как по имени num1, так и с помощью arguments[0])
4 - второй аргумент (к нему можно обратиться как по имени num2, так и с помощью arguments[1]) */
console.log(sum(7,4));

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

Кроме получения аргументов, объект arguments позволяет также узнать их количество. Выполняется это через свойство length.

Перебрать аргументы, переданные функции, можно, например, с помощью цикла for или for...of.

// объявление функции sum
function sum() {
  console.log('Вывод всех аргументов с помощью цикла for');
  for (let i = 0, length = arguments.length; i < length; i++) {
    console.log(i + 1 + ' аргумент равен ' + arguments[i]);
  }
  console.log('Вывод всех аргументов с помощью цикла for...of');
  for (arg of arguments) {
    console.log(arg);
  }
}
// вызов функции sum
sum(7, 4, 3, 1);

Функция, выводящая в консоль все переданные ей аргументы и их количество:

// объявление функции
function myFunction() {
  console.log('Количество переданных параметров = ' + arguments.length);
  // переберём все параметры с помощью цикла for
  for (let i = 0, length = arguments.length; i < length; i++) {
    console.log(i + ' аргумент = ' + arguments[i]);
  }
}

// вызовы функции myFunction
myFunction(3, 7, 27, 'JavaScript');
myFunction();
myFunction('Яблоки', 'Груши', 'Апельсины');

Функция, выполняющая сложение все переданных ей аргументов (их количество заранее неизвестно):

// объявление функции
let myCalc = function() {
  // переберём все параметры с помощью цикла for
  let sum = 0;
  for (let i = 0, length = arguments.length; i lt; length; i++) {
    sum += arguments[i];
  }
  // возвратим в качестве результата сумму
  return sum;
}

//вызов функции (вывод в консоль)
console.log(myCalc(4, 20, 17, -6));

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

  • проверку количества переданных аргументов;
  • обработку какого угодного количества параметров.

Кроме самой функции, доступ к аргументам, которые передаются ей на этапе вызова, имеют также другие функции, находящиеся в ней.

function mainF(p1, p2) {
  function childF() {
    console.log('p1 = ' + p1 + '; p2 = ' + p2);
  }
  childF();
}
mainF(3, 5); // p1 = 3; p2 = 5
mainF(4, 7); // p1 = 4; p2 = 7

Значение параметров по умолчанию

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

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

function setBGColor(color = '#009688') {
  document.body.style.backgroundColor = color;
}
setBGColor(); // цвет фона будет равен #009688
setBGColor('red'); // цвет фона будет равен red

До ECMAScript 2015 задание параметру значение по умолчанию осуществлялось так:

function setBGColor(color) {
  color = color !== undefined ? color : '#009688'; // устанавливаем color значение по умолчанию, равное '#009688'
  document.body.style.backgroundColor = color;
}

Оставшиеся параметры (rest parameters)

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

// ...nums - оставшиеся параметры, к которым можно обратиться в данном случае по имени nums
function doMath(mathAction, ...nums) {
  var result = 0;
  nums.forEach(function(value) {
    switch (mathAction) {
      case 'sum':
        result += value;
        break;
      case 'sumCube':
        result += value**3;
        break;
      case 'sumSquare':
        result += value**2;
        break;
      deafult:
        result = 0;
    }
  })
  return result;
}

console.log(doMath('sum', 3, 4, 21, -4)); // 24 (3 + 4 + 21 + (-4))
console.log(doMath('sumSquare', 1, 4)); // 17 (1^2 + 4^2)
console.log(doMath('sumCube', 3, 2, 4)); // 99 (3^3 + 2^3 + 4^3)

Оператор return

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

Функция в JavaScript всегда возвращает результат в вне зависимости от того, используется ли оператор return или нет.

// функция, возвращающая результат
function sayWelcome (userFirstName, userLastName) {
  if ((!userFirstName) || (!userLastName))
    return "Добро пожаловать, анонимный пользователь";
  else
    return "Добро пожаловать, " + userLastName + " " + userFirstName;
}
// объявление переменной person
var person;
// присвоить переменной person результат функции sayWelcome
person = sayWelcome("Иван","Иванов");
// вывести значение переменной в консоль
console.log(person);
// выведем в консоль результат вызова функции sayWelcome('Петр','Петров')
console.log(sayWelcome("Петр","Петров"));
// выведем в консоль результат вызова функции sayWelcome('Сидоров')
console.log(sayWelcome("Сидоров"));
JavaScript - Функция с проверкой параметров

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

// 1. функция, не возвращающая никакого результата
function sayWelcome (userFirstName, userLastName) {
  console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}
// попробуем получить результат у функции, которая ничего не возвращает
console.log(sayWelcome ("Иван", "Иванов"));
// 2. функция, содержащая оператор return без значения
function sayDay (day) {
  day = "Сегодня, " + day;
  return;
  //эта инструкция не выполнится, т.к. она идёт после оператора return
  console.log(day);
}
// попробуем получить результат у функции, которая содержит оператор return без значения
console.log(sayDay("21 февраля 2016г."));
JavaScript - Получить значение у функции, которая ничего не возвращает

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

Перегрузка функций в JavaScript

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

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

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

  • Для того чтобы проверить передан аргумент или нет, используйте условие с проверкой его значения на undefined.
  • Для проверки количества переданных аргументов функции используйте свойство объекта arguments length.
  • Чтобы узнать тип переданного значения аргумента используйте операторы typeof или instanceof.
  • Для работы с переменным числом аргументов, используйте объект arguments.
  • Начиная с версии ECMAScript6, Вы можете указывать значения по умолчанию для аргументов.

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

//объявление функции, которая изменяет цвет заднего фона элементов
function setBgColor(bgColor,elements) {
  //если параметр elements при вызове не указан
  if (elements=== undefined) {
    //то приравнять его значение 'div'
    elements = 'div';
  }
  //получить все элементы
  elements = $(elements);
  //перебрать все элементы и установить им указанный цвет заднего фона
  elements.each(function(){
    $(this).css('background-color',bgColor);
  });
}
/*Вызвать функцию setBgColor, указав один параметр.
  Т.к. 2 параметр не указан, то данная фукция изменит цвет заднего фона у всех элементов div.*/
setBgColor('green');
/*Вызвать функцию setBgColor, указав 2 параметра.
  Т.к. 2 параметр задан, то данная функция изменит цвет заднего фона только элементов button.*/
setBgColor('#ff0000','button');

Произведём некоторые изменения в коде, представленном выше. А именно, укажем для второго параметра значение по умолчанию:

//объявление функции, которая изменяет цвет заднего фона элементов
//параметр elements имеет значение 'div' по умолчанию
function setBgColor(bgColor,elements = 'div') {
  //получить все элементы
  elements = $(elements);
  //перебрать все элементы и установить им указанный цвет заднего фона
  elements.each(function(){
    $(this).css('background-color',bgColor);
  });
}
//вызвать функцию setBgColor, указав один параметр
setBgColor('green');
//вызвать функцию setBgColor, указав 2 параметра
setBgColor('#ff0000','button');

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

// описание функции
function countCal(sex, height) { // параметры: sex (пол) и height (рост)
  var result;
  if ((sex === 0) || (sex === 'man')) {
    result = (height - 100) * 20;
  } else if ((sex === 1) || (sex === 'woman')) {
    result = (height - 105) * 19;
  }
  if (result) {
    // arguments[2] - уровень активности
    if (arguments[2]) {
      result *= arguments[2];
    }
    console.log('Количество ккал для нормальной жизнедеятельности: ' + result);
  } else {
   console.log('Неверно указаны параметры');
  }
}

/* вызов функции и передаче ей 2 аргументов (1 - "man", к нему можно обратиться с помощью имени sex и arguments[0]; 2 - значение 185, к нему можно обратиться с помощью имени sex и arguments[1]) */
countCal("man", 185);
/* вызов функции и передаче ей 3 параметров, хотя в описании функции присутствуют только 2 (получить значение 3 параметра в данном случае можно только как arguments[2]) */
countCal(0, 185, 2);

Рекурсия

Рекурсия – это вызов внутри тела некоторой функции самой себя.

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

function fact(n) {
  if (n === 1) {
    return 1;
  }
  return fact(n-1) * n;
}
console.log(fact(5)); // 120

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

Что такое встроенные (стандартные) функции?

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

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

// вызов функции alert
alert("Некоторый текст");
JavaScript - Вызов функции alert