Функции

Хао! Все ближе и ближе мы подбираемся к самым интересным моментам в JS.

Сегодня на повестке дня – функции.

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

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

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

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

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



  
  Функции — Teletype
  
  


);

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

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

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



  
  Функции — Teletype
  
  


);
}

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

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

callPayment();

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

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

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

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

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

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



  
  Функции — Teletype
  
  


);
}

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

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

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



  
  Функции — Teletype
  
  


);

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

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

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

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

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


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

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

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

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

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

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

callPayment();

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

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

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

callPayment();

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

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

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

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

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