JavaScript с нуля

Глава 3. Функции

До сих пор весь написанный нами код не имел никакой структуры и был простым до безобразия:

alert("hello, world!");

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

Предположим, что нужно отобразить расстояние, пройденное объектом (рис. 3.1).

Рис. 3.1. Пройденное расстояние

Как вы помните еще со школы, чтобы вычислить расстояние, нужно скорость объекта умножить на время его движения (рис. 3.2).

расстояние = скорость × время

Рис. 3.2. Вычисление расстояния

Версия этого выражения на JavaScript будет выглядеть примерно так:

let speed = 10;

let time = 5;

alert(speed * time);

У нас есть две переменные, обозначенные как скорость (speed) и время (time), каждая из которых содержит число. Функция alert отображает результат умножения значений, содержащихся в переменных speed и time. Это весьма буквальная интерпретация уравнения для вычисления расстояния, которое мы только что рассмотрели.

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

let speed = 10;

let time = 5;

alert(speed * time);

let speed1 = 85;

let time1 = 1.5;

alert(speed1 * time1);

let speed2 = 12;

let time2 = 9;

alert(speed2 * time2);

let speed3 = 42;

let time3 = 21;

alert(speed3 * time3);

Не знаю, как вам, но по мне — это полная печалька. Наш код слишком многословный и повторяющийся. Мы уже видели ранее при изучении темы переменных, что повторение не позволяет создавать легкий в сопровождении код и отнимает время.

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

function showDistance(speed, time) {

alert(speed * time);

}

showDistance(10, 5);

showDistance(85, 1.5);

showDistance(12, 9);

showDistance(42, 21);

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

Поехали!