Функции JavaScript: определение, вызов и возврат значений

Введение

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

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

Определение функции с помощью ключевого слова function

На этом шаге вы определите свою первую функцию. Функция определяется с помощью ключевого слова function, за которым следует имя, набор скобок () и блок кода (тело функции), заключенный в фигурные скобки {}.

Сначала найдите файл script.js в проводнике файлов слева от WebIDE и откройте его. Весь наш JavaScript код будет написан в этом файле.

Теперь добавьте следующий код в script.js, чтобы определить функцию с именем addNumbers.

function addNumbers() {
  // Code will go here
}

Этот код создает пустую функцию. Пока она ничего не делает, но это корректное определение функции. Имя addNumbers — это то, как мы будем ссылаться на эту функцию позже.

Добавление параметров в определение функции

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

Давайте изменим функцию addNumbers, чтобы она принимала два числа, которые мы хотим сложить. Мы назовем эти параметры num1 и num2.

Обновите файл script.js следующим кодом.

function addNumbers(num1, num2) {
  // Code will go here
}

Теперь функция addNumbers настроена на получение двух значений. Внутри функции вы можете использовать num1 и num2 как переменные, которые хранят значения, переданные в функцию.

Возврат значения из функции с помощью return

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

Давайте добавим логику в нашу функцию для суммирования двух параметров и возврата результата.

Обновите файл script.js. Добавьте оператор return внутрь фигурных скобок функции.

function addNumbers(num1, num2) {
  return num1 + num2;
}

Теперь, когда функция addNumbers будет выполнена, она вычислит сумму num1 и num2 и вернет это значение.

Вызов функции с аргументами

На этом шаге вы вызовете функцию для ее выполнения. Определение функции не запускает ее. Чтобы запустить функцию и получить результат, вы должны ее "вызвать" или "инвоцировать". При вызове функции вы передаете фактические значения, называемые аргументами, для определенных вами параметров.

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

Добавьте следующие строки в ваш файл script.js под определением функции, чтобы вызвать функцию addNumbers с аргументами 5 и 10.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

В этом коде addNumbers(5, 10) вызывает функцию. Значение 5 передается параметру num1, а значение 10 передается параметру num2. Функция возвращает 15, которое затем сохраняется в переменной sum.

Вывод результата функции в консоль

На этом заключительном шаге вы отобразите результат вызова вашей функции. Распространенный способ увидеть значение переменных или вывод кода в веб-разработке — это использование console.log(). Эта функция выводит сообщения в консоль разработчика веб-браузера.

Добавьте следующую строку в конец вашего файла script.js, чтобы вывести значение переменной sum.

function addNumbers(num1, num2) {
  return num1 + num2;
}

let sum = addNumbers(5, 10);

console.log(sum);

Чтобы увидеть вывод:

Убедитесь, что ваш файл script.js сохранен.
Переключитесь на вкладку Web 8080 в верхней части интерфейса LabEx.
Откройте инструменты разработчика браузера. Обычно это можно сделать, щелкнув правой кнопкой мыши на странице и выбрав "Inspect" (Проверить), или нажав F12.
На панели инструментов разработчика нажмите на вкладку Console (Консоль).

В консоли вы должны увидеть число 15. Это результат, возвращенный вашей функцией addNumbers.

Вывод в консоли, показывающий число 15

Резюме

Поздравляем с завершением этой лабораторной работы! Вы освоили основные концепции функций JavaScript.

Вы успешно:

Определили функцию с использованием ключевого слова function.
Добавили параметры в функцию для приема входных данных.
Использовали оператор return для вывода значения из функции.
Вызвали функцию с аргументами для выполнения ее кода и сохранили результат в переменной.
Использовали console.log() для просмотра вывода в консоли разработчика браузера.

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