History

localizeflow[bot] 9f4fafece3 chore(i18n): sync translations with latest source changes (chunk 11/20, 100 files)		1 month ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 11/20, 100 files)	1 month ago
assignment.md	🌐 Update translations via Co-op Translator	4 months ago

README.md

Unescape Escape

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

Скетчнот аутора Tomomi Imura

journey
    title Ваша авантура са JavaScript функцијама
    section Основа
      Function Syntax: 5: You
      Calling Functions: 4: You
      Parameters & Arguments: 5: You
    section Напредни концепти
      Return Values: 4: You
      Default Parameters: 5: You
      Function Composition: 4: You
    section Модерни JavaScript
      Arrow Functions: 5: You
      Anonymous Functions: 4: You
      Higher-Order Functions: 5: You

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

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

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

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

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

Можете узети ову лекцију на Microsoft Learn!

mindmap
  root((JavaScript Functions))
    Основни појмови
      Декларација
        Традиционална синтакса
        Једнорачна функција синтакса
      Позивање
        Коришћење заграда
        Заграде обавезне
    Параметри
      Улазне вредности
        Више параметара
        Подразумеване вредности
      Аргументи
        Прослеђене вредности
        Могу бити било ког типа
    Вредности повратка
      Излазни подаци
        изјава return
        Излазак из функције
      Користење резултата
        Чување у променљиве
        Повезивање функција
    Напредни обрасци
      Већи ред
        Функције као параметри
        Колбекови
      Анонимне
        Не треба име
        Унутрашња дефиниција

Функције

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

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

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

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

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

function nameOfFunction() { // дефиниција функције
 // дефиниција/тело функције
}

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

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

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

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

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

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

// позивање наше функције
displayGreeting();

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

🧠 Провера основа функција: Правите своје прве функције

Погледајмо како вам иде с основним функцијама:

Можете ли објаснити зашто користимо коврџаве заграде {} у дефиницијама функција?
Шта се дешава ако напишете displayGreeting без заграда?
Зашто бисте желели да позивате исту функцију више пута?

flowchart TD
    A["✏️ Дефиниши Функцију"] --> B["📦 Пакуј Код"]
    B --> C["🏷️ Дај Име"]
    C --> D["📞 Позови Када Треба"]
    D --> E["🔄 Поновно Користи Све Где"]
    
    F["💡 Предности"] --> F1["Нема понављања кода"]
    F --> F2["Лако одржавање"]
    F --> F3["Јасна организација"]
    F --> F4["Једноставније тестирање"]
    
    style A fill:#e3f2fd
    style E fill:#e8f5e8
    style F fill:#fff3e0

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

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

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

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

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

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

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

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

function name(param, param2, param3) {

}

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

Ажурирајмо нашу функцију поздрављања да прихвата име особе:

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

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

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

displayGreeting('Christopher');
// приказује „Здраво, Кристофере!“ када се покрене

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

flowchart LR
    A["🎯 Позив функције"] --> B["📥 Параметри"]
    B --> C["⚙️ Тело функције"]
    C --> D["📤 Резултат"]
    
    A1["displayGreeting('Alice')"] --> A
    B1["име = 'Alice'"] --> B
    C1["Шаблонски литерал\n\`Здраво, \${name}!\`"] --> C
    D1["'Здраво, Алиса!'"] --> D
    
    E["🔄 Типови параметара"] --> E1["Низови"]
    E --> E2["Бројеви"]
    E --> E3["Булови"]
    E --> E4["Објекти"]
    E --> E5["Функције"]
    
    style A fill:#e3f2fd
    style C fill:#e8f5e8
    style D fill:#fff3e0
    style E fill:#f3e5f5

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

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

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

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

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

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

displayGreeting('Christopher');
// приказује "Здраво, Кристофере"

displayGreeting('Christopher', 'Hi');
// приказује "Здраво, Кристофере"

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

🎛️ Провера знања параметара: Чинећи функције флексибилним

Тестирајте своје разумевање параметара:

Која је разлика између параметра и аргумента?
Зашто су подразумеване вредности корисне у стварном програмирању?
Можете ли предвидети шта се дешава ако проследите више аргумената него параметара?

stateDiagram-v2
    [*] --> NoParams: function greet() {}
    [*] --> WithParams: function greet(name) {}
    [*] --> WithDefaults: function greet(name, greeting='Hi') {}
    
    NoParams --> Static: Исти излаз увек
    WithParams --> Dynamic: Мења се са улазом
    WithDefaults --> Flexible: Опционо прилагођавање
    
    Static --> [*]
    Dynamic --> [*]
    Flexible --> [*]
    
    note right of WithDefaults
        Најфлексибилнији приступ
        Компатибилно уназад
    end note

Испробани савет: Подразумевани параметри чине ваше функције пријатнијим за кориснике. Корисници могу брзо почети са смисленим подразумеваним вредностима, али и прилагодити када је потребно!

Враћање вредности

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

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

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

return myVariable;

Ово је важно: када функција достигне return израз, одмах престаје да се извршава и шаље ту вредност ономе ко ју је позвао.

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

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

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

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

const greetingMessage = createGreetingMessage('Christopher');

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

flowchart TD
    A["🔧 Обрада функције"] --> B{"повратна изјава?"}
    B -->|Да| C["📤 Повратна вредност"]
    B -->|Не| D["📭 Враћа се undefined"]
    
    C --> E["💾 Сачувати у променљиву"]
    C --> F["🔗 Користити у изразу"]
    C --> G["📞 Проследити функцији"]
    
    D --> H["⚠️ Обично није корисно"]
    
    I["📋 Коришћење повратне вредности"] --> I1["Израчунати резултате"]
    I --> I2["Валидирати улаз"]
    I --> I3["Трансформисати податке"]
    I --> I4["Креирати објекте"]
    
    style C fill:#e8f5e8
    style D fill:#ffebee
    style I fill:#e3f2fd

🔄 Провера враћених вредности: Добивање резултата

Оцени своје разумевање враћених вредности:

Шта се дешава са кодом након return у функцији?
Зашто је враћање вредности често боље од само исписивања у конзолу?
Може ли функција вратити различите типове вредности (стринг, број, бул)?

pie title "Чести типови повратних вредности"
    "Стринг" : 30
    "Бројеви" : 25
    "Објекти" : 20
    "Булови" : 15
    "Низови" : 10

Кључно откриће: Функције које враћају вредности су флексибилније јер позивач одлучује шта ће урадити са резултатом. Ово чини ваш код модуларнијим и поновно употребљивим!

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

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

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

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

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

function displayDone() {
  console.log('3 seconds has elapsed');
}
// вредност тајмера је у милисекундама
setTimeout(displayDone, 3000);

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

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

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

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

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

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

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

Функције стрелице (arrow functions)

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

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

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

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

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

flowchart LR
    A["📝 Стилови функција"] --> B["Традиционални"]
    A --> C["Стрелични"]
    A --> D["Анонимни"]
    
    B --> B1["function name() {}"]
    B --> B2["Подигнути"]
    B --> B3["Именовани"]
    
    C --> C1["const name = () => {}"]
    C --> C2["Кратка синтакса"]
    C --> C3["Модеран стил"]
    
    D --> D1["function() {}"]
    D --> D2["Без имена"]
    D --> D3["Једнократна употреба"]
    
    E["⏰ Када користити"] --> E1["Традиционални: Поновно употребљиве функције"]
    E --> E2["Стрелични: Кратки повратни позиви"]
    E --> E3["Анонимни: Руковаоци догађајима"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1

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

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

🎨 Провера стила функција: Изаберите праву синтаксу

Тестирајте разумевање синтаксе:

Када бисте радије користили стрелице уместо традиционалне синтаксе функције?
Која је главна предност анонимних функција?
Можете ли смислити ситуацију у којој је именована функција боља од анонимне?

quadrantChart
    title Матрица одлука избора функције
    x-axis Једноставно --> Комплексно
    y-axis Једнократна употреба --> Поновљива употреба
    quadrant-1 Стрелице функција
    quadrant-2 Именоване функције
    quadrant-3 Анонимне функције
    quadrant-4 Традиционалне функције
    
    Event Handlers: [0.3, 0.2]
    Utility Functions: [0.7, 0.8]
    Callbacks: [0.2, 0.3]
    Class Methods: [0.8, 0.7]
    Mathematical Operations: [0.4, 0.6]

Модеран тренд: Функције стрелице постају подразумевани избор за многе програмере због своје концизне синтаксе, али традиционалне функције и даље имају своје место!

🚀 Изазов

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

GitHub Copilot Agent изазов 🚀

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

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

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

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

Сазнајте више о agent режиму овде.

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

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

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

Задатак

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

🧰 Резиме вашег скупа алата за JavaScript функције

graph TD
    A["🎯 ЈаваСкрипт функције"] --> B["📋 Декларација функције"]
    A --> C["📥 Параметри"]
    A --> D["📤 Вредности повратка"]
    A --> E["🎨 Модерна синтакса"]
    
    B --> B1["function name() {}"]
    B --> B2["Описно именовање"]
    B --> B3["Поновљиви блокови кода"]
    
    C --> C1["Улазни подаци"]
    C --> C2["Подразумеване вредности"]
    C --> C3["Више параметара"]
    
    D --> D1["return израз"]
    D --> D2["Излаз из функције"]
    D --> D3["Проследити податке назад"]
    
    E --> E1["Arrow функције: () =>"]
    E --> E2["Анонимне функције"]
    E --> E3["Функције вишег реда"]
    
    F["⚡ Кључне предности"] --> F1["Поновна употреба кода"]
    F --> F2["Боља организација"]
    F --> F3["Једноставније тестирање"]
    F --> F4["Модуларни дизајн"]
    
    style A fill:#e3f2fd
    style B fill:#e8f5e8
    style C fill:#fff3e0
    style D fill:#f3e5f5
    style E fill:#e0f2f1
    style F fill:#fce4ec

🚀 Ваш временски план за савладавање JavaScript функција

⚡ Шта можете урадити у наредних 5 минута

Напишите једну једноставну функцију која враћа ваш омиљени број
Направите функцију са два параметра која их сабира заједно
Покушајте да конвертујете традиционалну функцију у стреличну синтаксу
Вежбајте изазов: објасните разлику између функција и метода

🎯 Шта можете постићи у овом сату

Завршите квиз након лекције и прегледајте све нејасне појмове
Направите библиотеку математичких алата из изазова GitHub Copilot
Креирајте функцију која користи другу функцију као параметар
Вежбајте писање функција са подразумеваним параметрима
Експериментишите са шаблонским литералима у повратним вредностима функција

📅 Ваше дужонедељно савладавање функција

Завршите задатак "Забава са функцијама" креативно
Рефакторирате неки понављајући код који сте написали у поновно употребљиве функције
Направите мали калкулатор користећи само функције (без глобалних променљивих)
Вежбајте стреличне функције са методама низова као што су map() и filter()
Направите колекцију корисних функција за честе задатке
Проучите функције вишег реда и концепте функционалног програмирања

🌟 Ваш месечни трансформациони план

Савладајте напредне концепте функција као што су клаужуре и опсег
Направите пројекат који интензивно користи композицију функција
Допринесите отвореном коду побољшавајући документацију функција
Подучите неког другог о функцијама и различитим стиловима синтаксе
Истражите парадигме функционалног програмирања у JavaScript-у
Креирајте личну библиотеку поновно употребљивих функција за будуће пројекте

🏆 Завршна провера шампиона функција

Прославите своје савладавање функција:

Која је најкориснија функција коју сте до сада креирали?
Како вам је учење о функцијама променило начин размишљања о организацији кода?
Који стил синтаксе функција више волите и зашто?
Који стварни проблем бисте решили писањем функције?

journey
    title Еволуција Вере у Вашу Функцију
    section Данас
      Збуњен Синтаксом: 3: You
      Разумевање Основa: 4: You
      Писање Једноставних Функција: 5: You
    section Ове Недеље
      Коришћење Параметара: 4: You
      Враћање Вредности: 5: You
      Модеран Синтаксa: 5: You
    section Следећег Месеца
      Састављање Функција: 5: You
      Напредни Обрасци: 5: You
      Подучавање Других: 5: You

🎉 Савладали сте један од најмоћнијих концепата у програмирању! Функције су градивни блокови сложенијих програма. Сваку апликацију коју направите користиће функције за организовање, поновну употребу и структуру кода. Сада разумете како да логике упакујете у поновно употребљиве компоненте, чинећи вас ефикаснијим и успешнијим програмером. Добро дошли у свет модуларног програмирања! 🚀

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

README.md Unescape Escape