Статья в разработке!

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

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

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

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

Как организовать выполнение некоторой задачи в JavaScript с использованием функций? Чтобы это выполнить обычно поступают так:

  • разбивают задачу на составные части (подзадачи);
  • подзадачи оформляют через функции;
  • разрабатывают основной код с использованием вызова созданных функций.

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

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

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

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

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

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

Функции такого вида в JavaScript называются function declaration statement. Кроме этого вида в JavaScript ещё различают функции function definition expression и arrow function expression.

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

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

Набор инструкций, заключенный в фигурные скобки — это код функции, который будет выполнен при её вызове.

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

// вызов функции, приведённой в предыдущем примере
someName();
JavaScript - Синтаксис вызова функции
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 аргумента */
  var
    sum1 = num1 + num2,
    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() {
  var i = 0;
  console.log('Вывод всех аргументов с помощью цикла for');
  for (i; i < arguments.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 () {
  var i;  
  console.log('Количество переданных параметров = ' + arguments.length);
  // переберём все параметры с помощью цикла for
  for (i = 0; i < arguments.length; i++) {
        console.log(i + ' параметр = ' + arguments[i]);
  }
}

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

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

// объявление функции
var myCalc = function() {
  // переберём все параметры с помощью цикла for
  var i, sum = 0;
  for (i = 0; i lt; arguments.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 2015 (6) параметру функции можно задать значение, которое он будет иметь по умолчанию.

Например, установим параметру «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 - Функция с проверкой параметров

Функция в 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 - Получить значение у функции, которая ничего не возвращает
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
JavaScript - Вызов функции alert