Вы уже знаете многие стандартные функции 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.

Что вам делать дальше:

Приступайте к решению задач по следующей ссылке: задачи к уроку.

Когда все решите - переходите к изучению новой темы.