Защо функции

Проблем

Една промяна, три места

Пишеш програмата за касата на малък магазин. Всяка бележка започва с името на магазина и телефона му. Затова си копирал тези два реда навсякъде, където се печата бележка.

Магазинът сменя телефона си. Поправяш го на две места, а третото го пропускаш:

console.log("Квартален магазин");
console.log("тел. 02 123 4567");
console.log("Хляб      1,20 €");

console.log("Квартален магазин");
console.log("тел. 02 123 4567");
console.log("Мляко     2,10 €");

console.log("Квартален магазин");
console.log("тел. 02 765 4321");
console.log("Кафе      3,50 €");

Квартален магазин
тел. 02 123 4567
Хляб      1,20 €
Квартален магазин
тел. 02 123 4567
Мляко     2,10 €
Квартален магазин
тел. 02 765 4321
Кафе      3,50 €

Третият клиент получава бележка със стария номер. Колкото повече копия, толкова по-лесно е да пропуснеш едно.

Идеята

Пиши го веднъж, викай го по име

Сложи повтарящото се на едно място и му дай име. Това е функция: именуван блок код, който върши една работа.

Пишеш функцията веднъж. После, където ти трябва, пишеш само името ѝ със скоби: printHeader();. Това се казва извикване на функцията.

Ако магазинът пак смени телефона, поправяш един ред във функцията, и всички бележки се оправят.

Виж го

Какво става при извикване

Програмата върви ред по ред. Когато стигне до извикване, тя влиза в функцията, изпълнява тялото ѝ и се връща точно след извикването. Следи топчето: то е мястото, до което е стигнала програмата.

function printHeader() {
  console.log("Квартален магазин");
  console.log("тел. 02 123 4567");
}

printHeader();
console.log("Хляб      1,20 €");
printHeader();
console.log("Мляко     2,10 €");

Стъпка по стъпка, с думи

function само записва функцията. Първият ред, който прави нещо, е printHeader().
Извикване: изпълнението отива във функцията.
Функцията печата горната част на бележката.
Функцията свърши: изпълнението се връща точно след извикването.
Програмата продължава: печата хляба.
Второ извикване: същият код, без да го пишем отново.
Горната част се печата пак.
Обратно в програмата и следващият ред.

Вторият път не пишеш горната част наново. Викаш същата функция и тя печата същите два реда.

Идеята

Как се пише функция

Ето цялата програма, за да се види къде стои функцията:

function printHeader() {
  console.log("Квартален магазин");
  console.log("тел. 02 123 4567");
}

printHeader();
console.log("Хляб      1,20 €");

Квартален магазин
тел. 02 123 4567
Хляб      1,20 €

function„ето функция“printHeaderиме()не получава нищотялото

function казва, че следва функция. Тя само се записва под име, а не се изпълнява.
Името казва какво прави функцията. Затова е глагол: printHeader, printFooter. В JavaScript имената започват с малка буква, а всяка следваща дума е с главна.
Празните скоби значат, че функцията не получава нищо отвън. Ще ги напълним в следващия урок.
Тялото е между { и }.
Тук функцията е над редовете, които я извикват, защото така се чете по-лесно.

По-точно, за любопитните

Функция, написана с function, може да се извика и от ред над нея: преди да пусне файла, JavaScript събира всички такива функции. Това не важи за начините, които ще видиш по-късно (const printHeader = () => { … }), затова е добър навик функцията да стои над извикването.

Пробвай

В какъв ред?

Какво ще отпечата програмата?

function printThanks() {
  console.log("Благодарим ви!");
}

console.log("Поръчка №1024");
printThanks();
console.log("Поръчка №1025");
printThanks();

Отговор

Поръчка №1024
Благодарим ви!
Поръчка №1025
Благодарим ви!

Поръчка №1024
Поръчка №1025
Благодарим ви!

Благодарим ви!
Поръчка №1024
Поръчка №1025

Пробвай

Кое липсва?

Тази функция печата долната част на бележката. Какво трябва да пише на празното място?

 printFooter() {
  console.log("Ще се радваме да ви видим отново.");
}

function: така започва функцията.

Пробвай

Намери грешката

Програмата тръгва, но печата само „Поръчка №1024“, без „Благодарим ви!“. На кой ред е грешката?

Избери реда с грешката.

Извикването иска скоби: printThanks();. Без тях само споменаваш функцията и тя не се изпълнява. Грешка няма, затова такъв пропуск се хваща трудно: гледай изхода.

Упражнение

Бележката и триъгълникът

Реши задачите в редактора си. За всяка има примерен изход, с който да сравниш своя.

1. Бележка. Напиши три функции:

printLine() печата ред от 20 тирета с цикъл;
printHeader() печата името на магазина, телефона и линията;
printFooter() печата линията и „Благодарим ви!“.

Под тях отпечатай две бележки: горна част, един ред с покупка, долна част.

Квартален магазин
тел. 02 123 4567
--------------------
Хляб      1,20 €
--------------------
Благодарим ви!
Квартален магазин
тел. 02 123 4567
--------------------
Мляко     2,10 €
--------------------
Благодарим ви!

2. Триъгълник. Напиши функция printTriangle(), която с вложени цикли извежда триъгълник от звездички с височина 4:

   *
  ***
 *****
*******

В следващия урок височината ще стане параметър: една функция за триъгълник с каквато височина поискаш.

Тест

Провери се

1. Кога се изпълнява кодът в тялото на функция?Когато функцията бъде извиканВеднъж, при старта на програматаКогато програмата стигне до мястото, където функцията е написан

2. Какво прави function printThanks() { … }?Записва функцията под име, без да я изпълняваСъздава функцията и веднага я изпълняваИзпълнява функцията веднъж, при старта на програмата

3. Методът е извикан на три места. Колко пъти е написан кодът му?Три пътиВеднъжЗависи от метода

4. Какво прави printThanks; без скоби?Извиква функциятаПрограмата не тръгваНищо: само споменава името ѝ

Защо функции

Бисквитки