Функции

JavaScript простым языком

За все предыдущие уроки, ты уже не раз пользовался различными функциями, такими как: alert(), prompt().

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

Функции придумали для того, чтобы не плодить одинаковый код в разных частях проекта. При разработке существует огромное множество мест, где это может произойти. Но, повторять код – большая ошибка и проблема. Не делай так.

Представь, у тебя есть форум. У каждого пользователя есть свой профиль, где он имеет возможность пополнить свой внутренний счет. На форуме очень много разделов и кнопка «Пополнить счет» встречается в нескольких местах сайта. Как обрабатывать множество кнопок? Что ж, мы можем для каждой кнопки написать один и тот же код обработки, но тогда это будет копированием одного и того же кода через весь проект. Т.е, мы можем делать примерно так:

let amount = +prompt('На какую сумму Вы хотите пополнить \
счет?');
alert(`Счет пополнен на сумму ${amount} $`);

И мы можем копировать этот код по всему проекту, где нужно будет обработать нажатие кнопки. Но представь, что потом тебе нужно будет поменять валюту пополнения, т.е. сменить значок $ на значок рубля (₽). Тебе придется искать по всему проекту, куда ты копировал эти обработчики и в каждом куске заменять этот знак.

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

function callPayment() {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} $`);
}

Немного разберем синтаксис (живой пример). Для того чтобы написать свою функцию, сначала нужно написать ключевое слово function, после него написать имя будущей функции, после имени, обязательно, открыть и закрыть скобочки (), затем открыть тело функции открывающей фигурной скобкой {написать весь требуемый код и закрыть тело функции закрывающей фигурной скобкой }. Весь этот процесс называется определением функции.

Теперь, когда тебе потребуется выполнить код, который находится внутри этой функции ты просто должен вызвать эту функцию. Вызов функции выглядит так:

callPayment();

Вот и все. В этом и есть прелесть функций. Если вызвать функцию 3-5-10 раз, то весь код выполнится ровно столько же раз (живой пример) :

callPayment();
callPayment();
callPayment();

И, теперь, если нужно будет что-то поменять в процессе пополнения счета, то все что тебе будет нужно – это изменить саму функцию в одном месте.

Аргументы функции

Возьмем ту же самую функцию:

function callPayment() {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} $`);
}

После имени функции есть скобки – (). Они не просто для красоты, а еще и для того, чтобы засунуть в функцию какие-либо данные. Сейчас все поймешь.

Представь, у пользователя где-то в настройках профиля указана валюта, в которой он хочет пополнять счет. Следственно, значок валюты в этой строке должен измениться на ту, которую выбрал пользователь в настройках своего профиля.

alert(`Счет пополнен на сумму ${amount} $`);

И еще встает один вопрос: для каждой валюты писать свою функцию? Ответ: нет.

Все, что нужно, это передать внутрь функции валюту указанную в профиле пользователя. Сделать это очень просто. Изменим нашу функцию:

function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

Как видишь, в скобках появилась переменная с именем currency. Эту переменную можно использовать внутри функции. Для полноты картины (живой пример):

function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

let userCurrencyRub = '₽'; // валюта: рубль
let userCurrencyUSD = '$'; // валюта: доллар

callPayment(userCurrencyRub); // вызываем функцию с \
// валютой: рубль
callPayment(userCurrencyUSD); // вызываем функцию с \
// валютой: доллар

Если не понял, поясняю: мы берем нужную нам валюту и засовываем (передаем) ее внутрь функции. Переданное нами значение userCurrency записывается в переменную currency, которую мы написали при определении функции внутри (). Затем, полученную переменную currency, можно использовать внутри функции и в ней будет лежать именно то значение, которое мы передали.

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

Значение аргументов по умолчанию

function callPayment(currency) {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

callPayment();

Если вызвать функцию без передачи в нее аргумента currency, то значение этого аргумента (переменной) внутри функции будет равно undefined.

Чтобы не допустить этого, можно установить значение аргумента по умолчанию. Для этого внесем небольшие изменения в определении функции (живой пример):

function callPayment(currency =  '$') {
   let amount = +prompt('На какую сумму Вы хотите пополнить\
   счет?');
   alert(`Счет пополнен на сумму ${amount} ${currency}`);
}

callPayment();

Все что мы изменили, это приравняли аргумент currency к значению $. В таком случае, если вызвать функцию и не передать в нее значение аргумента – по умолчанию будет равен уже не undefined, а $.

При этом, если мы все-таки передадим какое-то значение, то JavaScript как бы забудет про то, что мы назначали значение по умолчанию и возьмет именно то значение, которое мы передали.

Думаю, на этом знакомство с функциями закончим. Пока вам необходимо будет разобраться с определением функции и ее аргументами.

Домашнее задание

1. Определить функцию, которая будет запрашивать число (с помощью prompt), умножать его на 327 и делить на 10. И с помощью alertвыдавать полученное значение;

2. Определить функцию с аргументом, которая будет запрашивать число (с помощью prompt), умножать его на то значение, указанное в качестве аргумента. И с помощью alert выдавать полученное значение.