JavaScript функції. Частина 1

33

Від автора: вітаю вас, друзі. У цій статті ми з вами почнемо розбір такої важливої теми, як користувальницькі функції JavaScript. Саме завдяки можливості створювати власні функції, ми можемо писати більш гнучкий і красивий код.

З функціями ми з вами вже насправді зустрічалися. Згадайте методи alert, prompt і confirm — це і є функції мови JavaScript. Вони вже готові до використання і ми можемо викликати в нашому коді. Крім того, JavaScript пропонує нам сотні інших функцій, з багатьма з яких ви познайомитеся при подальшому вивченні JavaScript.

Крім того, JavaScript надає нам можливість писати власні функції. Для чого це потрібно? Уявімо, що у нас є якийсь блок коду, який ми можемо використовувати в нашій програмі більше одного разу. Якщо забути про функції, тоді нам просто-напросто, доведеться дублювати код, тобто скопіювати його і використовувати повторно в іншому ділянці програми.

Погодьтеся, це не зручно. Набагато зручніше і приємніше було б, якщо б була можливість якось запам’ятати код, який ми хочемо використовувати багаторазово, дати ім’я цьому коду, а в подальшому викликати і запускати цей код на його імені. В цьому як раз і полягає функціонал функцій. Ми оголошуємо функцію, називаємо її і описуємо потрібний блок коду всередині функції. Ну а в подальшому достатньо буде просто звернутися по імені функції, щоб виконався весь її код.

Давайте подивимося, як це відбувається на практиці. Поки що просто навчальний приклад — функція, яка буде виводити модальне вікно з повідомленням:

function hello(){
alert(‘Hello, world!’);
}

Отже, ми бачимо, що функції визначаються з допомогою ключового слова function, після якого іде ім’я функції. Що стосується імені функції, то тут працюють ті ж правила, що і для імен перемінних, тобто ім’я функції може включати в себе букви, цифри, символи _$. Також рекомендується імена функцій робити дієсловами, що логічно, оскільки функція виконує якісь дії, що робить. Наприклад, функцію, яка отримує якесь ім’я, можна назвати getName(), функцію, що встановлює ціну, можна назвати setPrice(). Думаю, ідея зрозуміла.

Після імені функції йдуть круглі дужки, в яких можна перерахувати параметри функції. Що таке параметри функції ми дізнаємося в наступній статті. Ну і, нарешті, в фігурних дужках йде тіло функції або, іншими словами, виконуваний код функції.

Якщо зараз оновити сторінку, то нічого не станеться, ніякого модального вікна ми не побачимо, адже функція поки лише оголошена, але не викликана. Для того, щоб викликати функцію, достатньо звернутися до неї по імені, при цьому ми можемо викликати функцію як завгодно багато разів:

hello();
function hello(){
alert(‘Hello, world!’);
}
hello();

В результаті виконання даного коду ми побачимо два послідовних виклику модального вікна з привітанням. До речі, зверніть увагу, ми викликали функцію і до її оголошення, і після. Обидва виклику коректно відпрацювали. Це говорить про те, що даний варіант оголошення функції ми можемо використати як до виклику функції, так і після. JavaScript перед виконанням проаналізує наш скрипт і створить необхідні функції, щоб їх можна було без проблем викликати в будь-якій ділянці коду.

Поки що наш приклад мало корисний, але вже тут можна побачити певну користь від застосування функцій. Уявіть, що в нашому коді необхідно вивести в різних місцях 10 однакових привітань. Ми можемо легко зробити це, викликавши 10 разів функцію alert, а можемо помістити alert всередину нашої функції і викликати нашу функцію. А тепер уявіть, що нам необхідно змінити текст привітання. У першому випадку ми змушені будемо шукати всі 10 функцій alert і в кожній змінювати текст. У другому випадку ми робимо це тільки один раз — всередині нашої функції та зроблені зміни торкнуться всіх місць, де наша функція викликається. Думаю, користь очевидна вже на даному етапі.

На цьому ми завершимо цю статтю. Якщо ви хочете більше дізнатися про JavaScript, тоді рекомендую звернути свою увагу на уроки по JavaScript і окремий курс по мові JavaScript. Удачі!