Learn web development

Возвращаемое значение функции

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

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

Необходимые навыки:

Базовая компьютерная грамотность, знание основ HTML и CSS, JavaScript first steps, Functions — reusable blocks of code.

Цели: Понять что такое возвращаямое значение функции и как его использовать.

Что из себя предстваляют возвращаемые значения?

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

var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
// функция replace() принимает строку,
// заменяет одну подстроку другой и возвращает
// новую строку со сделанными заменами

Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию replace() по отношению к строке myText и передаем ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернет значение, которым является новая строка с сделанными в ней заменами.  В коде выше мы сахраняем это возвращаемое значение как значение переменной newString.

Если Вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием Return value.  Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде где это возможно.

Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как void или undefined в таких случаях). Например, в displayMessage() function которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значенияn. Функция всего лишь отображает что-то где-то на экране.

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

Использование возвращаемых значений в ваших собственных функциях

Чтобы вернуть значение кастомной функции, вы должны использовать ... подождите, подождите ...  ключевое слово return. Мы видели это в действии недавно,- в нашем примере random-canvas-circles.html. Наша draw() функция отрисовывает  где-то на экране 100 случайных кружков. 

<canvas>:

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}

Внутри каждой итерации 3 вызова функции. Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция random() принимает 1 параметр - челое число - и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так: 

function random(number) {
  return Math.floor(Math.random()*number);
}

Тоже самое может быть написано вот так:

function random(number) {
  var result = Math.floor(Math.random()*number);
  return result;
}

Но первую версию можно написать быстрее и она более компактна.

Мы возвращаем результат вычисления Math.floor(Math.random()*number) каждый раз когда функция вызывается. Это возвращаемое значение появляется в точке когда функция была вызвана и код продолжается. Так, например, если мы выполним слудующую строчку:

ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);

и 3 вызова random() вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:

ctx.arc(500, 200, 35, 0, 2 * Math.PI);

The function calls on the line are run first and their return values substituted for the function calls, before the line itself is then executed.

Активное обучение: наша собственная возвращающая значение функция

Теперь напишем нашу собственную возвращающую значения функцию.

  1. Первым делом, сделайте локальную копию файла function-library.html из GitHub. Это простая HTML страничка, содержащая текстовое поле <input> и параграф Также там есть элемент <script> в котором мы храним в 2ух переменных ссылки на оба HTML элемента. Это маленькая страничка позволит Вам ввести число в text box и отобразит различные, относящиеся к нему числа в параграфе ниже.
  2. Теперь добавим несколько полезных функций в элемент <script> . Ниже 2ух существующих строчек JavaScript, добавьте следующие описания функций:
    function squared(num) {
      return num * num;
    }
    
    function cubed(num) {
      return num * num * num;
    }
    
    function factorial(num) {
      var x = num;
      while (x > 1) {
        num *= x-1;
        x--;
      }
      return num;
    }
    Функции squared() и cubed() довольно очевидны— они возвразают квадрат или куб переданного как параметр числа. Функция factorial() возвращает factorial переданного числа.
  3. Далее мы добавим способ выводить нашу информацию введенным в  text input числе. Добавьте обработчик событий ниже существующих функций:
    input.onchange = function() {
      var num = input.value;
      if (isNaN(num)) {
        para.textContent = 'You need to enter a number!';
      } else {
        para.textContent = num + ' squared is ' + squared(num) + '. ' +
                           num + ' cubed is ' + cubed(num) + '. ' +
                           num + ' factorial is ' + factorial(num) + '.';
      }
    }

    Здесь мы создаем обработчик событий onchange  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введенное в input значение сохраняется в переменной num .

  4. Далее мы делаем условный тест — если введенное значение не является чилом, мы выаодим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение isNaN(num)  true. Мы используем функцию isNaN() чтобы проверить что значение переменной num не число — если так то функция возвращаетtrue, если нет- false.

  5. Если тест возвращает false, значение переменной numчисло ,и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает  функции squared(), cubed() иfactorial() чтобы получить нужные значения. Сохраните Ваш код, загрузите его в браузере и посмотрите на то что получилось.

Замечание:  Если у Вас проблемы с работой данного примера, не стесняйтесь сверить Ваш код с работающей версией finished version on GitHub (see it running live также), или спросите нас.

К этому моменту мы хотели бы чтобы Вы написали парочку собственных функций и добавили их в библиотеку. Как на счет квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу num?

Это упражнение привнесло парочку важных понятий в изучении того как использовать ключевое слово return . В дополнение:

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

Заключение

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

Если в статье есть что-то что Вы не поняли, не стесняйтесь перечитать статью еще раз или  contact us попросите нас о помощи.

See also

  • Functions in-depth — a detailed guide covering more advanced functions-related information.
  • Callback functions in JavaScript — a common JavaScript pattern is to pass a function into another function as an argument, which is then called inside the first function. This is a little beyond the scope of this course, but worth studying before too long.

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: Rodionoff
Обновлялась последний раз: Rodionoff,