Наша новая функция generateRandomInsult представляет
собой все тот же код, помещенный в тело функции без аргументов.
Мы добавили лишь одну строку, помеченную , где мы возвращаем
сгенерированную строку randomString. Трижды вызвав функцию
generateRandomInsult, мы каждый раз получали новую дразнилку.
Теперь весь код находится в функции, и это означает, что для гене-
рации дразнилки мы можем просто вызывать эту функцию, а не копи-
ровать в консоль один и тот же код каждый раз, когда понадобится кого-
нибудь подразнить.
Ранний выход из функции по return
Как только JavaScript, выполняя код
функции, встречает оператор return,
он завершает функцию, даже если после
return еще остался какой-нибудь код.
Оператор return часто используют,
чтобы выйти из функции в самом начале,
если какие-нибудь из переданных аргу-
ментов имеют некорректные значения —
то есть если с такими аргументами
функция не сможет правильно работать.
Например, следующая функция воз-
вращает строку с информацией о пятой
букве вашего имени. Если в имени, пере-
данном в аргументе name, меньше пяти
букв, будет выполнен return, чтобы сразу же выйти из функции. При
этом оператор return в конце функции (тот, что возвращает сообщение
о пятой букве) так и не будет выполнен.
136 Часть I. Основы
var fifthLetter = function (name) {
if (name.length < 5) {
return;
}
return "Пятая буква вашего имени: " + name[4] + ".";
};
В строке мы проверяем длину переданного имени — уж не короче
ли оно пяти символов? Если это так, в строке мы выполняем return,
чтобы незамедлительно выйти из функции.
Давайте попробуем эту функцию в деле.
Fifth letter —
fifthLetter("Николай");
пятая буква
"Пятая буква вашего имени: л."
В имени Николай больше пяти букв, так что функция fi fthLetter
благополучно завершается, вернув пятую букву имени Николай, то
есть л. Попробуем вызвать ее еще раз с именем покороче:
fifthLetter("Ник");
undefined
Когда мы вызвали fi fthLetter для имени Ник, функция распознала,
что имя недостаточно длинное, и сразу завершилась, выполнив опера-
тор return в строке . Поскольку никакого значения после
этого return не указано, функция вернула undefi ned.
Многократное использование return
вместо конструкции if... else
Можно многократно использовать return внутри разных
конструкций if, чтобы возвращать из функции разные зна-
чения в зависимости от входных данных. Предположим, вы
пишете игру, в которой игроки награждаются медалями
согласно набранным очкам. Счету меньше трех очков соот-
ветствует бронзовая медаль, счету от трех до шести — серебряная,
а счету от семи и выше — золотая.
8. Функции 137
Medal
var medalForScore = function (score) {
for score —
if (score < 3) {
медаль за очки
return "Бронзовая";
}
Score — счет,
очко (очки)
if (score < 7) {
return "Серебряная";
}
return "Золотая";
};
В строке мы возвращаем значение "Бронзовая" и выходим
из функции, если счет меньше трех очков. Если мы достигли строки ,
значит, счет как минимум равен трем очкам, поскольку, будь он меньше
трех, мы бы уже вышли из функции (выполнив return в первом опера-
торе if). И наконец, если мы достигли строки , значит, на счету как
минимум семь очков, проверять больше нечего и можно спокойно вер-
нуть значение "Золотая".
Хотя мы проверяем здесь несколько условий, необходимости исполь-
зовать цепочку конструкций if... else нет. Мы используем if... else,
когда хотим убедиться, что будет выбран лишь один из вариантов.
Однако если в каждом варианте выполняется return, это также гаран-
тирует однозначный выбор (поскольку выйти из функции можно лишь
один раз).
СОКРАЩЕННА Я ЗА ПИСЬ ПРИ СОЗ Д АНИИ ФУ НКЦИЙ
Есть длинный и короткий способы записи функций. Я использую длинную
запись, поскольку она наглядно демонстрирует, что функция хранится
в переменной. Тем не менее вам стоит знать и о короткой записи, поскольку
ее используют многие JavaScript-разработчики. Возможно, и вы сами,
достаточно поработав с функциями, предпочтете короткую запись.
Вот пример длинной записи:
var double = function (number) {
return number * 2;
};
Короткая запись той же функции выглядит так:
function double(number) {
return number * 2;
}
138 Часть I. Основы
Как видите, при длинной записи мы явно создаем переменную и сохра-
няем в ней функцию, так что имя double записывается прежде ключевого
слова function. Напротив, при короткой записи сначала идет ключевое
слово function, а затем название функции. В этом случае JavaScript соз-
дает переменную double неявным образом.
На техническом сленге длинная запись называется функциональным
выражением, а короткая — объявлением функции.
Что мы узнали
Функции позволяют повторно использовать фрагменты кода. Они могут
работать по-разному в зависимости от переданных аргументов и могут
возвращать значение в то место кода, откуда они были вызваны. Также
функции дают возможность называть фрагменты кода понятными име-
нами, чтобы, глядя на название, мы могли сразу понять, что функция
делает.
В следующей главе мы узнаем, как писать JavaScript-код для работы
с HTML-элементами.
8. Функции 139
УПРА ЖНЕНИЯ
Выполните эти упражнения, чтобы попрактиковаться в исполь-
зовании функций.
#1. Математические расчеты и функции
Add —
Создайте две функции, add и multiply; пусть каждая принимает
прибавить
по два аргумента. Функция add должна складывать аргументы
Multiply —
и возвращать результат, а функция multiply — перемножать
умножить
аргументы.
С помощью только этих двух функций вычислите следующее
несложное выражение:
36325 * 9824 + 777
#2. Совпадают ли массивы?
Are arrays
Напишите функцию areArraysSame, которая принимает два
same —
массива с числами в качестве аргументов. Она должна возвра-
одинаковы ли
щать true, если эти массивы одинаковые (то есть содержат одни
массивы
и те же числа в одном и том же порядке), или false, если мас-
сивы различаются. Убедитесь, что ваша функция работает пра-
вильно, запустив такой код:
areArraysSame([1, 2, 3], [4, 5, 6]);
false
areArraysSame([1, 2, 3], [1, 2, 3]);
true
areArraysSame([1, 2, 3], [1, 2, 3, 4]);
false
Подсказка 1: вам понадобится перебрать все значения из пер-
вого массива в цикле for и убедиться, что они совпадают со зна-
чениями из второго массива. Вы можете вернуть false прямо
из тела for, если обнаружите несовпадающие значения.
Подсказка 2: вы можете сразу выйти из функции, пропустив
цикл for, если у массивов разная длина.
#3. «Виселица» и функции
Давайте вернемся к игре «Виселица» из седьмой главы и перепи-
шем ее с помощью функций.
Я уже переписал основной код игры. Некоторые его части
заменены вызовами функций. Вам осталось лишь запрограмми-
ровать эти функции!
140 Часть I. Основы
// Создайте здесь свои функции
// word: загаданное слово
var word = pickWord();
// answerArray: итоговый массив
var answerArray = setupAnswerArray(word);
// remainingLetters: сколько букв осталось угадать
var remainingLetters = word.length;
while (remainingLetters > 0) {
showPlayerProgress(answerArray);
Show player
// guess: ответ игрока
progress —
var guess = getGuess();
показать
if (guess === null) {
прогресс
игрока
break;
} else if (guess.length !== 1) {
alert("Пожалуйста, введите одиночную букву.");
} else {
// correctGuesses: количество открытых букв
var correctGuesses = updateGameState(guess, word,
answerArray);
remainingLetters -= correctGuesses;
}
}
showAnswerAndCongratulatePlayer(answerArray);
Show answer
and congratulate
player —
Этот вариант с использованием функций почти так же прозра-
показать ответ
чен, как псевдокод из седьмой главы. Обратите внимание, как
и поздравить
функции помогают сделать код более понятным.
игрока
Вот объявления функций, код которых вам нужно написать:
var pickWord = function () {
// Возвращает случайно выбранное слово
};
var setupAnswerArray = function (word) {
// Возвращает итоговый массив для заданного слова word
};
var showPlayerProgress = function (answerArray) {
// С помощью alert отображает текущее состояние игры
};
var getGuess = function () {
// Запрашивает ответ игрока с помощью prompt
};
var updateGameState = function (guess, word, answerArray) {
// Обновляет answerArray согласно ответу игрока (guess)
// возвращает число, обозначающее, сколько раз буква guess
// встречается в слове, чтобы можно было обновить значение
// remainingLetters
};
var showAnswerAndCongratulatePlayer = function (answerArray) {
// С помощью alert показывает игроку отгаданное слово
// и поздравляет его с победой
};
Ч АС Т Ь I I
Продвинутый
JavaScript
Ч АС Т Ь I I
Про
Пр д
о ви
в н
и у
н ты
т й
ы
й
Jav
Ja a
v S