Вы уже знаете многие стандартные функции JavaScript, например substr(), reverse(), split(). Их использование очень удобно - чтобы написать свои аналоги на JavaScript, потребовалось бы много времени и сил.
Однако, с помощью стандартных функций невозможно сделать все, что нам требуется. На помощь приходит такой механизм JavaScript, как функции пользователя. С их помощью мы можем создавать свои функции, принцип работы которых аналогичен стандартным функциям JavaScript.
Зачем нужны пользовательские функции?
Очень часто при программировании возникает такая ситуация: некоторые участки кода повторяются несколько раз в разных местах. Пользовательские Функции нужны для того, чтобы убрать дублирование кода.
Дублирование плохо тем, что если вам потребуется что-то поменять в коде - это придется сделать во многих местах При этом обязательно в каком-нибудь месте вы это сделать забудете. Практика копирования участков кода и вставки в другое место - очень плохая практика (очень часто ей грешат новички).
Кроме того, функции скрывают внутри себя какой-то код, о котором нам не приходится задумываться. Например, у нас есть функция saveUser(), которая сохраняет пользователя в базу данных. Мы можем просто вызывать ее, не задумываясь о том, какой код выполняется внутри функции. Это очень удобно. В программировании это называется инкапсуляцией.
Синтаксис функций пользователя
Функция создается с помощью команды function. Далее через пробел следует имя функции и круглые скобки. Круглые скобки могут быть пустыми, либо в них могут быть указаны параметры, которые принимает функция.Параметры - это обычные переменные JavaScript.
Сколько может быть параметров: один, несколько (в этом случае они указываются через запятую), ни одного (в этом случае круглые скобки все равно нужны, хоть они и будут пустыми).
//'func' - это имя функции, ей передается один параметр param:
function func(param) {
}
//Передаем функции два параметра - param1 и param2:
function func(param1, param2) {
}
//Вообще не передаем никаких параметров:
function func() {
}
Обратите внимание на фигурные скобки в примерах: в них мы пишем код, который выполняет функция. Общий синтаксис функции выглядит так:
function имя_функции(здесь перечисляются параметры через запятую) {
Здесь написаны команды, которые выполняет функция.
}
Как вызвать функцию в коде?
Саму функцию мы можем вызвать в любом месте нашего JavaScript документа (даже до ее определения). Функция вызывается по ее имени. При этом круглые скобки после ее имени обязательны, даже если они пустые. Смотрите пример:
/*
Мы написали функцию,
которая выводит на экран 'Привет, мир!'.
Назовем ее 'hello':
*/
function hello() {
/*
В этом месте ничего не выведется само по себе,
а выведется только при вызове функции.
*/
alert('Привет, мир!');
}
/*
Теперь мы хотим вызвать нашу функцию,
чтобы она вывела на экран свою фразу.
Обратимся к ней по имени:
*/
hello(); //Вот и все! Функция выведет на экран фразу 'Привет, мир!'.
/*
Мы можем вывести нашу фразу несколько раз -
для этого достаточно написать функцию
не один раз, а несколько:
*/
hello();
hello();
hello();
Подробнее о параметрах
В наших примерах мы вызывали функцию 'hello()' без параметров.
Давайте теперь попробуем ввести параметр, который будет задавать текст, выводимый нашей функцией:
//Зададим нашу функцию:
function hello(text) { //укажем здесь параметр text
//Выведем на экран значение переменной text:
alert(text);
}
//Теперь вызовем нашу функцию:
hello('Привет, Земляне!'); //она выведет именно ту фразу, которую мы ей передали
Обратите внимание на переменную text в нашей функции: в ней появляется то, что мы передали в круглых скобках при вызове функции.
Как JavaScript знает, что текст 'Привет, Земляне!' нужно положить в переменную text? Мы сказали ему об этом, когда создавали нашу функцию, вот тут: 'function hello(text)'.
Если мы зададим несколько параметров - то каждый из них будет лежать в своей переменной внутри функции.
Инструкция return
Чаще всего функция должна не выводить что-то через alert на экран, а возвращать.
Сделаем теперь так, чтобы функция не выводила что-то на экран, а возвращала текст скрипту, чтобы он смог записать этот текст в переменную и как-то обработать его дальше:
//Зададим функцию:
function hello(text) {
/*
Укажем функции с помощью инструкции 'return',
что мы хотим, чтобы она ВЕРНУЛА текст, а не вывела на экран:
*/
return text;
}
//Теперь вызовем нашу функцию и запишем значение в переменную message:
var message = hello('Привет, Земляне!'); //пока вывода на экран нет
//И теперь в переменной message лежит 'Привет, Земляне!':
alert(message); //убедимся в этом
//Можно не вводить промежуточную переменную message, а сделать так:
alert(hello('Привет, Земляне!'));
В принципе, практической пользы от того, что мы сделали - никакой, так как функция вернула нам то, что мы ей передали. Модернизируем наш пример так, чтобы функция принимала имя человека, а выводила строку 'Привет, %имя_человека_переданное_функции%!':
//Зададим функцию:
function hello(name) { //укажем здесь параметр name, в котором будет лежать имя человека
//Введем переменную text, в которую запишем всю фразу:
var text = 'Привет, '.name.'!';
/*
Укажем функции с помощью инструкции 'return',
что мы хотим, чтобы она ВЕРНУЛА содержимое переменной text:
*/
return text;
}
//Теперь вызовем нашу функцию и запишем значение в переменную message:
var message = hello('Дима');
//И теперь в переменной text лежит 'Привет, Дима!':
alert(message); //убедимся в этом
//Поздороваемся сразу с группой людей из трех человек:
alert(hello('Вася').' '.hello('Петя').' '.hello('Коля'));
Частая ошибка с return
После того, как выполнится инструкция return – функция закончит свою работу. То есть: после выполнения return больше никакой код не выполнится.
Это не значит, что в функции должен быть один return. Но выполнится только один из них. Такое поведение функций является причиной многочисленных трудноуловимых ошибок.
Смотрите пример:
function func(param){
/*
Если переменная param имеет значение true, то вернем 'Верно!'.
Напоминаю о том, что конструкция if(param) эквивалентна if(param === true)!
*/
if (param) return 'Верно!';
/*
Далее новичок в JavaScript хочет проделать еще какие-то операции,
но если переменная param имеет значение true – сработает инструкция return,
и код ниже работать не будет!
Напротив, если param === false – инструкция return не выполнится
и код дальше будет работать!
*/
alert('Привет, мир!');
}
//Осознайте это и не совершайте ошибок
Приемы работы с return
Существуют некоторые приемы работы с return, упрощающие код. Как сделать проще всего:
function func(param) {
/*
Что делает код:
если param имеет значение true – то в переменную result запишем 'Верно!',
иначе 'Неверно!':
*/
if (param) {
var result = 'Верно!'
} else {
var result = 'Неверно!';
}
//Вернем содержимое переменной result:
return result;
}
Теперь упростим нашу функцию, используя прием работы с return:
function func(param) {
/*
Что делает код:
если param имеет значение true – вернет 'Верно!',
иначе вернет 'Неверно!'.
*/
if (param) {
return 'Верно!'
} else {
return = 'Неверно!';
}
}
Обратите внимание на то, насколько упростился код. Плюсом также является то, что мы убрали лишнюю переменную result.