21 KiB

Raw Blame History Unescape Escape

Основе JavaScript-a: Методи и функције

Скетч од Tomomi Imura

Квиз пре предавања

Понављање истог кода изнова и изнова једна је од најчешћих фрустрација у програмирању. Функције решавају овај проблем омогућавајући вам да упакујете код у блокове који се могу поново користити. Замислите функције као стандардизоване делове који су учинили револуционарном производну линију Хенрија Форда – када направите поуздану компоненту, можете је користити где год је потребно без поновног прављења од нуле.

Функције вам омогућавају да групишете делове кода како бисте их могли поново користити у целом програму. Уместо да копирате и лепите исту логику свуда, можете једном направити функцију и позвати је кад год је потребно. Овај приступ чини ваш код организованим и олакшава ажурирања.

У овом лекцији ћете научити како да креирате сопствене функције, проследите им информације и добијете корисне резултате назад. Открићете разлику између функција и метода, научити савремене синтаксне приступе и видети како функције могу радити са другим функцијама. Ове концепте ћемо градити корак по корак.

🎥 Кликните на слику изнад за видео о методама и функцијама.

Ову лекцију можете проћи на Microsoft Learn!

Функције

Функција је самостални блок кода који обавља одређени задатак. Она обухвата логику коју можете извршити кад год је потребно.

Уместо да пишете исти код више пута у целом програму, можете га упаковати у функцију и позвати ту функцију кад год вам затреба. Овај приступ чини ваш код чистим и олакшава ажурирања. Замислите изазов одржавања ако бисте морали да промените логику која је расута на 20 различитих места у вашем коду.

Давање описних имена вашим функцијама је од суштинског значаја. Добро именована функција јасно комуницира своју сврху – када видите cancelTimer(), одмах разумете шта она ради, баш као што јасно означено дугме говори шта ће се догодити када га кликнете.

Креирање и позивање функције

Хајде да испитамо како да креирамо функцију. Синтакса следи конзистентан образац:

function nameOfFunction() { // function definition
 // function definition/body
}

Хајде да ово разложимо:

Кључна реч function говори JavaScript-у "Хеј, креирам функцију!"
nameOfFunction је место где дајете вашој функцији описно име
Заграде () су место где можете додати параметре (до тога ћемо ускоро доћи)
Криве заграде {} садрже стварни код који се извршава када позовете функцију

Хајде да креирамо једноставну функцију за поздрав да видимо како то функционише:

function displayGreeting() {
  console.log('Hello, world!');
}

Ова функција штампа "Здраво, свет!" у конзоли. Када је дефинишете, можете је користити онолико пута колико је потребно.

Да бисте извршили (или "позвали") вашу функцију, напишите њено име праћено заградама. JavaScript вам омогућава да дефинишете вашу функцију пре или после њеног позивања – JavaScript engine ће се побринути за редослед извршења.

// calling our function
displayGreeting();

Када покренете овај ред, он извршава сав код унутар ваше функције displayGreeting, приказујући "Здраво, свет!" у конзоли вашег прегледача. Ову функцију можете позвати више пута.

Напомена: Кроз ове лекције сте користили методе. console.log() је метода – у суштини функција која припада објекту console. Кључна разлика је у томе што су методе повезане са објектима, док функције стоје независно. Многи програмери користе ове термине наизменично у неформалном разговору.

Најбоље праксе за функције

Ево неколико савета који ће вам помоћи да пишете одличне функције:

Дајте вашим функцијама јасна, описна имена – ваша будућа верзија ће вам бити захвална!
Користите camelCasing за имена са више речи (као calculateTotal уместо calculate_total)
Нека свака функција буде фокусирана на добро обављање једне ствари

Прослеђивање информација функцији

Наша функција displayGreeting је ограничена – може приказати само "Здраво, свет!" за све. Параметри нам омогућавају да функције учинимо флексибилнијим и кориснијим.

Параметри делују као резервна места где можете убацити различите вредности сваки пут када користите функцију. На овај начин, иста функција може радити са различитим информацијама при сваком позиву.

Параметре наводите унутар заграда када дефинишете функцију, раздвајајући више параметара зарезима:

function name(param, param2, param3) {

}

Сваки параметар делује као резервно место – када неко позове вашу функцију, пружиће стварне вредности које ће бити уметнуте на та места.

Хајде да ажурирамо нашу функцију за поздрав да прихвати нечије име:

function displayGreeting(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
}

Приметите како користимо обрнуте наводнике (`) и ${} да бисмо директно убацили име у нашу поруку – ово се зове шаблонски литерал и веома је користан начин за креирање стрингова са мешаним променљивима.

Сада када позовемо нашу функцију, можемо проследити било које име:

displayGreeting('Christopher');
// displays "Hello, Christopher!" when run

JavaScript узима стринг 'Christopher', додељује га параметру name и креира персонализовану поруку "Здраво, Кристофере!"

Подразумеване вредности

Шта ако желимо да неки параметри буду опциони? Ту су подразумеване вредности веома корисне!

Рецимо да желимо да људи могу да прилагоде реч за поздрав, али ако је не наведу, користићемо "Здраво" као резервну опцију. Можете подесити подразумеване вредности користећи знак једнакости, баш као што постављате променљиву:

function displayGreeting(name, salutation='Hello') {
  console.log(`${salutation}, ${name}`);
}

Овде је name и даље обавезан, али salutation има резервну вредност 'Hello' ако нико не пружи другачији поздрав.

Сада можемо позвати ову функцију на два различита начина:

displayGreeting('Christopher');
// displays "Hello, Christopher"

displayGreeting('Christopher', 'Hi');
// displays "Hi, Christopher"

У првом позиву, JavaScript користи подразумевано "Hello" јер нисмо навели поздрав. У другом позиву, користи наш прилагођени "Hi". Ова флексибилност чини функције прилагодљивим различитим сценаријима.

Вредности које функција враћа

Наше функције до сада су само штампале поруке у конзоли, али шта ако желите да функција нешто израчуна и врати вам резултат?

Ту долазе вредности које функција враћа. Уместо да само нешто приказује, функција вам може вратити вредност коју можете сачувати у променљивој или користити у другим деловима вашег кода.

Да бисте вратили вредност, користите кључну реч return праћену оним што желите да вратите:

return myVariable;

Ево нечега важног: када функција наиђе на изјаву return, она одмах престаје да ради и враћа ту вредност ономе ко је позвао.

Хајде да изменимо нашу функцију за поздрав да врати поруку уместо да је штампа:

function createGreetingMessage(name) {
  const message = `Hello, ${name}`;
  return message;
}

Сада, уместо да штампа поздрав, ова функција креира поруку и враћа је нама.

Да бисмо користили враћену вредност, можемо је сачувати у променљивој као и било коју другу вредност:

const greetingMessage = createGreetingMessage('Christopher');

Сада greetingMessage садржи "Hello, Christopher" и можемо га користити било где у нашем коду – да га прикажемо на веб страници, укључимо у е-пошту или проследимо другој функцији.

Функције као параметри за функције

Функције се могу проследити као параметри другим функцијама. Иако овај концепт може изгледати сложен у почетку, то је моћна карактеристика која омогућава флексибилне програмске обрасце.

Овај образац је веома уобичајен када желите да кажете "када се нешто догоди, уради ову другу ствар." На пример, "када тајмер истекне, покрени овај код" или "када корисник кликне на дугме, позови ову функцију."

Хајде да погледамо setTimeout, која је уграђена функција која чека одређено време и затим покреће неки код. Морамо јој рећи који код да покрене – савршен случај за прослеђивање функције!

Пробајте овај код – након 3 секунде, видећете поруку:

function displayDone() {
  console.log('3 seconds has elapsed');
}
// timer value is in milliseconds
setTimeout(displayDone, 3000);

Приметите како прослеђујемо displayDone (без заграда) функцији setTimeout. Не позивамо функцију сами – предајемо је setTimeout и кажемо "позови ово за 3 секунде."

Анонимне функције

Понекад вам је потребна функција само за једну ствар и не желите да јој дате име. Размислите – ако користите функцију само једном, зашто бисте оптерећивали код додатним именом?

JavaScript вам омогућава да креирате анонимне функције – функције без имена које можете дефинисати тамо где су вам потребне.

Ево како можемо преписати наш пример са тајмером користећи анонимну функцију:

setTimeout(function() {
  console.log('3 seconds has elapsed');
}, 3000);

Ово постиже исти резултат, али је функција дефинисана директно унутар позива setTimeout, елиминишући потребу за посебном декларацијом функције.

Стреличасте функције

Модерни JavaScript има још краћи начин за писање функција, назван стреличасте функције. Оне користе => (који изгледа као стрелица – зар не?) и веома су популарне међу програмерима.

Стреличасте функције вам омогућавају да прескочите кључну реч function и напишете концизнији код.

Ево нашег примера са тајмером користећи стреличасту функцију:

setTimeout(() => {
  console.log('3 seconds has elapsed');
}, 3000);

() је место где би ишли параметри (празно у овом случају), затим долази стрелица =>, и на крају тело функције у кривим заградама. Ово пружа исту функционалност са концизнијом синтаксом.

Када користити који приступ

Када треба користити који приступ? Практична смерница: ако ћете функцију користити више пута, дајте јој име и дефинишите је одвојено. Ако је за једну специфичну употребу, размислите о анонимној функцији. И стреличасте функције и традиционална синтакса су ваљани избори, иако су стреличасте функције распрострањене у модерним JavaScript кодним базама.

🚀 Изазов

Можете ли у једној реченици објаснити разлику између функција и метода? Покушајте!

Изазов GitHub Copilot Agent 🚀

Користите Agent мод да завршите следећи изазов:

Опис: Направите библиотеку корисних математичких функција која демонстрира различите концепте функција обрађене у овој лекцији, укључујући параметре, подразумеване вредности, вредности које функција враћа и стреличасте функције.

Задатак: Направите JavaScript датотеку названу mathUtils.js која садржи следеће функције:

Функцију add која узима два параметра и враћа њихов збир
Функцију multiply са подразумеваним вредностима параметара (други параметар подразумевано је 1)
Стреличасту функцију square која узима број и враћа његов квадрат
Функцију calculate која прихвата другу функцију као параметар и два броја, а затим примењује ту функцију на те бројеве
Демонстрирајте позивање сваке функције са одговарајућим тест случајевима

Сазнајте више о agent mode овде.

Квиз после предавања

Преглед и самостално учење

Вреди прочитати мало више о стреличастим функцијама, јер се све више користе у кодним базама. Вежбајте писање функције, а затим је препишите користећи ову синтаксу.

Задатак

Забава са функцијама

Одрицање од одговорности:
Овај документ је преведен помоћу услуге за превођење уз помоћ вештачке интелигенције Co-op Translator. Иако настојимо да обезбедимо тачност, молимо вас да имате у виду да аутоматски преводи могу садржати грешке или нетачности. Оригинални документ на изворном језику треба сматрати меродавним извором. За критичне информације препоручује се професионални превод од стране људи. Не преузимамо одговорност за било каква погрешна тумачења или неспоразуме који могу настати услед коришћења овог превода.

21 KiB Raw Blame History Unescape Escape