JavaScript - Функции

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

Дата обновления: 14.02.2016.

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

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

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

При разработке скриптов в JavaScript, обычно поступают следующим образом:

  1. разбивают задачу на более мелкие действия;
  2. каждое небольшое действие выполняют посредством функции;
  3. решают поставленную задачу посредством вызова созданных функций.

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

Классический вариант работы с функциями

Работа с функциями в JavaScript состоит из 2 этапов:

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

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

Создание функции в JavaScript осуществляется посредством написания заголовка и тела.

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

JavaScript - Классическое объявление функции
JavaScript - Классическое объявление функции

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

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

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

Вызов функции

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

JavaScript - Вызов функции
JavaScript - Вызов функции

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

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

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

Например, создадим js функцию sayWelcome с 2 параметрами.

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

//Вызов функции sayWelcome и передача ей значений Иван и Иванов
sayWelcome("Иван","Иванов");
//Вызов функции sayWelcome и передача ей значений Петр и Петров
sayWelcome("Петр","Петров");
JavaScript - Работа с функцией, содержащей 2 параметра
JavaScript - Работа с функцией, содержащей 2 параметра

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

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

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

//Вызов функции sayWelcome и передача ей значений Иван и Иванов
sayWelcome("Иван","Иванов");
//Вызов функции sayWelcome и передача ей значения Петр
sayWelcome("Петр");
//Вызов функции sayWelcome без передачи ей параметров
sayWelcome();
JavaScript - Вызов функции содержащей параметры без передачи ей их
JavaScript - Вызов функции содержащей параметры без передачи ей их

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

function sayWelcome (userFirstName, userLastName) {
  if ((!userFirstName) || (!userLastName))
    console.log("Добро пожаловать, анонимный пользователь");   
  else
    console.log("Добро пожаловать, " + userLastName + " " + userFirstName);
}

sayWelcome("Иван","Иванов");
sayWelcome("Петр");
sayWelcome();
JavaScript - Функция с проверкой параметров
JavaScript - Функция с проверкой параметров

Функция, возвращающая результат (return)

Функцию применяют не только для выполнения определённых действий, но и для возвращения некоторого результата. Для того чтобы функция вернула некоторый результат необходимо использовать оператор 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 - Функция с проверкой параметров

Примечание: Если Вы захотите получить у функции, которая ничего не возвращает, результат, то она вернёт значение undefined. Такой же результат Вы получите, если для оператора return не укажите возвращаемое значение.

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

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

Встроенные функции - набор функций на языке JavaScript, которые можно вызывать без объявления (описания).

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

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

Как использовать созданную функцию на нескольких страницах

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



   JavaScript и jQuery 0    2842 0

Комментарии (2)

  1. student # 0
    «Тело функции – это набор инструкций (операторов), заключенных в круглые скобки.» Может быть в фигурные? Спасибо за статью.
    1. Александр Мальцев # 0
      Спасибо, поправил.

    Вы должны авторизоваться, чтобы оставлять комментарии.