Ник Морган - JavaScript для детей. Самоучитель по программированию

раз требуется что-то сделать. Например, функция drawCats выводит

Draw cats —

в консоль смайлы — кошачьи мордочки (вот такие: =^.^=). Задавая

рисовать

аргумент howManyTimes, мы сообщаем ей, сколько таких смайлов

котов

нужно напечатать:

How many

times —

сколько раз

var drawCats = function (howManyTimes) {

for (var i = 0; i < howManyTimes; i++) {

console.log(i + " =^.^=");

}

};

Тело функции представляет собой цикл for, который повторяется

столько раз, сколько указано в аргументе howManyTimes (поскольку

переменная i сначала равна 0, а затем возрастает до значения

howManyTimes - 1). На каждом повторе цикла функция выводит в кон-

соль строку i + « =^.^=».

Вот что мы увидим, вызвав эту функцию со значением 5

в качестве аргумента howManyTimes:

drawCats(5);

0 =^.^=

1 =^.^=

2 =^.^=

3 =^.^=

4 =^.^=

8. Функции 129

Попробуйте задать howManyTimes значение 100, чтобы напечатать

100 кошачьих мордочек!

Передача в функцию нескольких аргументов

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

аргументов. Для этого перечислите аргументы в скобках после имени

функции, разделив их запятыми. На рис. 8.4 показан синтаксис созда-

ния функции, принимающей два аргумента.

Имена аргументов пишутся

через запятую

function (argument1, argument2) {

console.log("Первый аргумент: " + argument1);

console.log("Второй аргумент: " + argument2);

}

В теле функции можно использовать

оба аргумента

Рис. 8.4. Синтаксис создания функции с двумя аргументами

Print mul-

Фунция printMultipleTimes похожа на drawCats, однако она

tiple times —

принимает еще один аргумент с именем whatToDraw.

напечатать

многократно

var printMultipleTimes = function (howManyTimes, whatToDraw) {

What

to

for (var i = 0; i < howManyTimes; i++) {

draw — что

console.log(i + " " + whatToDraw);

рисовать

}

};

Функция printMultipleTimes печатает строку, переданную

в аргументе whatToDraw столько раз, сколько указано в аргументе

howManyTimes. Второй аргумент сообщает функции, что печатать,

а первый — сколько раз это нужно печатать.

Вызывая функцию с несколькими аргументами, перечислите

нужные вам значения через запятую в скобках после имени функ-

ции. Например, чтобы напечатать кошачьи мордочки с помощью

функции printMultipleTimes, вызывайте ее так:

printMultipleTimes(5, "=^.^=");

0 =^.^=

1 =^.^=

130 Часть I. Основы

2 =^.^=

3 =^.^=

4 =^.^=

А чтобы четыре раза напечатать смайлик «^_^», вызывайте

printMultipleTimes так:

printMultipleTimes(4, "^_^");

0 ^_^

1 ^_^

2 ^_^

3 ^_^

Здесь при вызове printMultipleTimes мы указали значение 4 для

аргумента howManyTimes и строку «^_^» для аргумента whatToDraw.

В результате цикл выполнил четыре повтора (переменная i менялась

от 0 до 3), каждый раз печатая i + " " + "^ _ ^".

Чтобы дважды напечатать (>_<), введите:

printMultipleTimes(2, "(>_<)");

0 (>_<)

1 (>_<)

На этот раз мы передали число 2 для аргумента howManyTimes

и строку «(>_<)» для whatToDraw.

Возврат значения из функции

До сих пор все наши функции выводили текст в консоль с помощью

console.log. Это простой и удобный способ отображения данных,

однако мы не сможем потом взять это значение из консоли и использо-

вать его в коде. Вот если бы наша функция выдавала значение так, чтобы

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

Как я уже говорил, функции могут возвращать значение. Вызвав

функцию, которая возвращает значение, мы можем затем использовать

это значение в своей программе (сохранив его в переменной, передав

в другую функцию или объединив с другими данными). Например,

следующий код прибавляет 5 к значению, которое возвращает вызов

Math.fl oor(1.2345):

5 + Math.floor(1.2345);

6

8. Функции 131

Math.fl oor — функция, которая берет передан-

ное ей число, округляет его вниз до ближайшего

целого значения и возвращает результат. Глядя

на вызов функции Math.fl oor(1.2345), представьте,

что вместо него в коде стоит значение, возвращае-

мое этой функцией, — в данном случае это число 1.

Теперь давайте создадим функцию, которая

Double — здесь

возвращает значение. Вот функция double, кото-

«удвоить»

рая принимает аргумент number и возвращает

произведение number * 2. Иными словами, зна-

чение, которое возвращает эта функция, вдвое

больше переданного ей аргумента.

Return —

var double = function (number) {

здесь «выход

 return number * 2;

из функции»,

};

возвращение

Чтобы вернуть из функции значение, используйте оператор return,

после которого укажите само это значение. В строке  мы воспользова-

лись return, вернув из функции double число number * 2.

Теперь можно вызывать нашу функцию double и удваивать числа:

double(3);

6

Возвращаемое значение (6) показано здесь второй строкой. Хоть

функции и способны принимать несколько аргументов, вернуть они

могут лишь одно значение. А если вы не укажете в теле функции, что

именно надо возвращать, она вернет undefi ned.

Вызов функции в качестве значения

Когда функция вызывается из кода программы, значение, возвращаемое этой

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

функцией double, чтобы удвоить пару чисел и затем сложить результаты:

double(5) + double(6);

22

Здесь мы дважды вызвали функцию double и сложили значения,

которые вернули эти два вызова. То же самое было бы, если бы вместо

вызова double(5) стояло число 10, а вместо double(6) — число 12.

132 Часть I. Основы

Также вызов функции можно указать в качестве аргумента другой

функции, при вызове которой в аргумент попадет значение, возвращен-

ное первой функцией. В следующем примере мы вызываем функцию

double, передавая ей в качестве аргумента вызов double с аргумен-

том 3. Вызов double(3) даст 6, так что double(double(3)) упрощается

до double(6), что, в свою очередь, упрощается до 12.

double(double(3));

12

Вот как JavaScript вычисляет это выражение:

double( double(3) );

double( 3 * 2 )

double(6)

6 * 2

12

Тело функции double возвращает number * 2, поэтому в точке 

мы заменяем double(3) на 3 * 2. В точке  мы заменяем 3 * 2 на 6.

Затем в точке  мы делаем то же, заменяя double(6) на 6 * 2. И нако-

нец, в точке  мы можем заменить 6 * 2 числом 12.

Упрощаем код с помощью функций

В третьей главе мы использовали методы Math.random и Math.fl oor,

чтобы выбирать случайные слова из массивов и генерировать драз-

нилки. В этом разделе мы перепишем генератор дразнилок, упростив его

с помощью функций.

Функция для выбора случайного слова

Вот как мы выбирали случайное слово из массива в третьей главе:

randomWords[Math.floor(Math.random() * randomWords.length)];

8. Функции 133

Если поместить этот код в функцию, можно многократно вызывать

его для получения случайного слова из массива — вместо того чтобы

вводить тот же код снова и снова. Например, давайте определим такую

Pick random

функцию pickRandomWord:

word —

выбрать

случайное

var pickRandomWord = function (words) {