JavaScript - Funkcije


Šta su funkcije?

Funkcija je grupa izjava koja izvodi određene zadatke i može se odvojeno čuvati i održavati u glavnom programu. Funkcije pružaju način stvaranja kodova za višekratnu upotrebu koji su prenosivi i lakše ih je ispraviti. Evo nekih prednosti upotrebe funkcija:

  • Funkcije smanjuju ponavljanje koda unutar programa - Funkcija vam omogućuje da izdvojite najčešće korišteni blok koda u jednu komponentu. Sada možete obavljati isti zadatak pozivanjem ove funkcije gdje god želite unutar svoje skripte, bez potrebe za kopiranjem i lijepljenjem istog bloka koda iznova i iznova.

  • Funkcije kod znatno olakšavaju u održavanju - Budući da se jednom stvorena funkcija može koristiti više puta, tako da se bilo kakve promjene izvršene unutar funkcije automatski implementiraju na svim mjestima.

  • Funkcije olakšavaju otklanjanje grešaka - Kada je program podijeljen na funkcije, ako dođe do bilo kakve greške tačno znate koja funkcija je uzrokovala grešku i gdje je trebate pronaći. Zbog toga popravljanje grešaka postaje mnogo lakše.

Sljedeći dio će vam pokazati kako definisati i pozivati funkcije u svojim skriptama.



Definisanja i pozivanje funkcija

Definisanje funkcije započinje s ključnom riječi function, nakon čega slijedi naziv funkcije koju želite stvoriti, zatim zagrade tj. () i na kraju kod funkcije postavite između vitičastih zagrade {}. Evo osnovne sintakse za definisanje funkcije:

function functionName() {
    // Kod koji se treba izvršiti
}

Evo jednostavnog primjera funkcije koja će pokazati pozdravnu poruku:

// Definisanje funkcije
function sayHello() {
    alert("Pozdrav, dobrodošao na sajt IT TUTORIJALI!");
}
 
// Pozivanje funkcije
sayHello(); // Ispisuje: Pozdrav, dobrodošao na sajt IT TUTORIJALI!
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Definisanje i pozivanje funkcija</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function sayHello() {
        document.write("Pozdrav, dobrodošao na sajt IT TUTORIJALI!!");
    }
     
    // Pozivanje funkcije
    sayHello(); // Ispisuje: Pozdrav, dobrodošao na sajt IT TUTORIJALI!!
    </script>
</body>
</html>  

Jednom kada je definisana funkcija, ona se može nazvati (pozvati) s bilo kog mjesta u dokumentu, upisivanjem njezinog imena, a slijedi niz zagrada, poput sayHello() u gornjem primjeru.



Dodavanje parametara funkcijama

Možete odrediti parametre kada definišete svoju funkciju za prihvatanje ulaznih vrijednosti u vrijeme izvođenja. Parametri funkcioniraju su kao varijable rezervisane unutar funkcije. Zamjenjuju ih u vremenu pokretanja vrijednosti (poznati kao argument) koje su funkciji dobile u trenutku poziva. Parametri se postavljaju u prvom redu funkcije unutar skupa zagrade (), kao što je prikazano u primjeru:

function functionName(parameter1, parameter2, parameter3) {
    // Kod koji se treba izvršiti
}

Funkcija displaySum() u sljedećem primjeru uzima dva broja kao argumente, jednostavno ih dodajte zajedno, a zatim rezultat prikazuje u pretraživaču.

// Definisanje funkcije
function displaySum(num1, num2) {
    var total = num1 + num2;
    alert(total);
}
 
// Pozivanje funkcije
displaySum(6, 20); // Ispisuje: 26
displaySum(-5, 17); // Ispisuje: 12
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodavanje parametara u funkciju</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function displaySum(num1, num2) {
        var total = num1 + num2;
        document.write(total);
    }
     
    // Pozivanje funkcije
    displaySum(6, 20); // Ispisuje: 26
    document.write("<br>");
    displaySum(-5, 17); // Ispisuje: 12
    </script>
</body>
</html>  

Možete definisati onoliko parametara koliko želite. Međutim, za svaki parametar koji navedete odgovarajući argument treba proslijediti funkciji kad se poziva, u suprotnom njegova vrijednost postaje nedefinirana (undefined). Pogledajmo slijedeći primjer:

// Definisanje funkcije
function showFullname(firstName, lastName) {
    alert(firstName + " " + lastName);
}
 
// Pozivanje funkcije
showFullname("Miloš", "Mihaljica"); // ispisuje: Miloš Mihaljica
showFullname("Stefan"); // ispisuje: Stefan undefined
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Prosljeđivanje argumenata funkciji</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function showFullname(firstName, lastName) {
        document.write(firstName + " " + lastName);
    }
     
    // Pozivanje funkcije
    showFullname("Miloš", "Mihaljica"); // Ispisuje: Miloš Mihaljica
    document.write("<br>");
    showFullname("Stefan"); // Ispisuje: Stefan undefined
    </script>
</body>
</html>  


Zadane vrijednosti za funkcijske parametara ES6

Pomoću ES6 sada možete odrediti zadane vrijednosti parametrima funkcije. To znači da će se, ako se ne daju argumenti za funkcionisanje kada se on zove, koristiti ove zadane vrijednosti. Ovo je jedna od najizčekivanijih funkcija u JavaScript-u. Evo primjera:

function sayHello(name = 'Guest') {
    alert('Pozdrav, ' + name);
}

sayHello(); // Ispisuje: Pozdrav, Guest
sayHello('Milos'); // Ispisuje: Pozdrav, Milos
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Funkcije sa difoltnim vrijednostima</title>
</head>
<body>
    <script>
    function sayHello(name='World'){
        return `Hello ${name}!`;
    }
    
    document.write(sayHello()); // Hello World!
    document.write("<br>");
    document.write(sayHello('Miloš')); // Hello Miloš!
    </script>
</body>
</html>

Dok smo prije ES6 da bismo postigli isto, morali napisati ovako nešto:

function sayHello(name) {
    var name = name || 'Guest'; 
    alert('Pozdrav, ' + name);
}

sayHello(); // 0utputs: Pozdrav, Guest
sayHello('Miloš'); // 0utputs: Pozdrav, Miloš

Da biste saznali o ostalim elementima ES6, pogledajte lekcije o elementima JavaScripta ES6.



Vraćanje vrijednosti iz funkcije

Funkcija može vratiti vrijednost nazad u skriptu koja je pozvala funkciju kao rezultat koristeći izjavu return. Vrijednost može biti bilo koje vrste, uključujući nizove i objekte. Izjava o vraćanju obično se postavlja kao posljednji red funkcije prije vitičastih zagrade i završava je tačkom sa zarezom, kao što je prikazano u sljedećem primjeru:

// Definisanje funkcije
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Prikazivanje vraćene vrijednosti
alert(getSum(6, 20)); // Ispisuje: 26
alert(getSum(-5, 17)); // Ispisuje: 12
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Vraćanje vrijednosti iz funkcije</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function getSum(num1, num2) {
        var total = num1 + num2;
        return total;
    }
     
    // Prikazivanje vračenih vrijednosti
    document.write(getSum(6, 20) + "<br>"); // Ispisuje: 26
    document.write(getSum(-5, 17)); // Ispisuje: 12
    </script>
</body>
</html>  

Funkcija ne može vratiti više vrijednosti. Međutim, slične rezultate možete dobiti vraćanjem niza vrijednosti, kao što je pokazano u sljedećem primjeru:

// Definisanje funkcije
function divideNumbers(dividend, divisor){
    var quotient = dividend / divisor;
    var arr = [dividend, divisor, quotient];
    return arr;
}
 
// Spremiti vraćenu vrijednost u varijablu
var all = divideNumbers(10, 2);
 
// Prikazivanje pojedinačnih vrijednosti
alert(all[0]); // Ispisuje: 10
alert(all[1]); // Ispisuje: 2
alert(all[2]); // Ispisuje: 5
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Vraćanje više vrijednosti iz funkcije</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function divideNumbers(dividend, divisor){
        var quotient = dividend / divisor;
        var arr = [dividend, divisor, quotient];
        return arr;
    }
     
    // Pohranjivanje vraćene vrijednosti u varijablu
    var all = divideNumbers(10, 2);
     
    // Prikazivanje pojedinačnih vrijednosti
    document.write(all[0] + "<br>"); // Ispisuje: 10
    document.write(all[1] + "<br>"); // Ispisuje: 2
    document.write(all[2]); // Ispisuje: 5
    </script>
</body>
</html>  


Rad sa funkcijskim izrazima

Sintaksa koju smo prije koristili za stvaranje funkcija naziva se deklaracija funkcije. Postoji još jedna sintaksa za stvaranje funkcije koja se naziva izraz funkcije.

// Deklarisanje funkcije
function getSum(num1, num2) {
    var total = num1 + num2;
    return total;
}
 
// Izraz funkcije
var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Izraz funkcije</title>
</head>
<body>
    <script>
    // Deklarisanje funkcije
    function getSum(num1, num2) {
        var total = num1 + num2;
        return total;
    }
    document.write(getSum(2, 3) + "<br>"); // Ispisuje: 5
    
    // Izraz funkcije
    var getSum = function(num1, num2) {
        var total = num1 + num2;
        return total;
    }
    
    document.write(getSum(4, 6)); // Ispisuje: 10
    </script>
</body>
</html>  

Nakon što se izraz funkcije pohrani u varijablu, varijabla se može koristiti kao funkcija:

var getSum = function(num1, num2) {
    var total = num1 + num2;
    return total;
};
 
alert(getSum(5, 10)); // Ispisuje: 15
 
var sum = getSum(7, 25);
alert(sum); // Ispisuje: 32
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Dodijeljivanje funkcije varijabli</title>
</head>
<body>
    <script>
    var getSum = function(num1, num2) {
        var total = num1 + num2;
        return total;
    }
     
    document.write(getSum(5, 10) + "<br>"); // Ispisuje: 15
     
    var sum = getSum(7, 25);
    document.write(sum); // Ispisuje: 32
    </script>
</body>
</html>  

Sintaksa deklaracije funkcije i izraza funkcije izgleda vrlo slično, ali se razlikuju u načinu njihove procjene, pogledajte slijedeći primjer:

declaration(); // Ispisuje: Ćao, ja sam deklaracija funkcije!
function declaration() {
    alert("Ćao, ja sam deklaracija funkcije!");
}
 
expression(); // Uncaught TypeError: undefined is not a function
var expression = function() {
    alert("Ćao, ja sam funkcijski izraz!");
};
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Deklaracija funkcije vs. Izraz funkcije</title>
</head>
<body>
    <script>
    declaration(); // Ispisuje: Ćao, ja sam deklaracija funkcije!
    function declaration() {
        document.write("Ćao, ja sam deklaracija funkcije!");
    }
     
    expression(); // Uncaught TypeError: undefined is not a function
    var expression = function() {
        document.write("Ćao, ja sam funkcijski izraz!");
    }
    </script>
</body>
</html>  

Kao što možete vidjeti u gornjem primjeru, izraz funkcije izbacio je izuzetak kada je bio pozvan prije nego što je definisan, ali deklaracija funkcije uspješno se izvršila. Deklaracije funkcija JavaScript raščlanjivanju prije pokretanja programa. Dakle, nije važno hoće li program pozvati funkciju prije nego što je definisana, jer je JavaScript tu funkciju postavila na vrh trenutnog opsega iza scene. Izraz funkcije se ne ocjenjuje sve dok nije dodijeljen varijabli, zbog toga je još uvijek neodređeno kada se poziva. ES6 je uveo još kraću sintaksu za izražavanje funkcije pisanja koja se naziva funkcija strelice, molimo pogledajte lekcije o oznakam JavaScripta ES6 da biste saznali više o tome.



Razumjevanje promjeljnivog opsega

Međutim, možete proglasiti varijable bilo gdje u JavaScript. No, lokacija deklaracije određuje opseg dostupnosti varijable unutar JavaScript programa, tj. gdje se varijabla može koristiti ili pristupiti. Ova pristupačnost poznata je kao varijabilni opseg (eng. variable scope). Po difoltu, varijable deklarisane unutar funkcije imaju lokalni opseg što znači da se ne mogu gledati ili manipulisati izvan te funkcije, kao što je prikazano u sljedećem primjeru:

// Definisanje funkcije
function greetWorld() {
    var greet = "Hello World!";
    alert(greet);
}
 
greetWorld(); // Ispisuje: Hello World!
 
alert(greet); // Uncaught ReferenceError: greet is not defined
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Lokalne varijable</title>
</head>
<body>
    <script>
    // Definisanje funkcije
    function greetWorld() {
        var greet = "Hello World!";
        document.write(greet);
    }
     
    greetWorld(); // Ispisuje: Hello World!
     
    document.write(greet); // Uncaught ReferenceError: greet is not defined
    </script>
</body>
</html>  

Međutim, sve varijable koje su deklarisane u programu izvan funkcije imaju globalni opseg, tj. bit će dostupne svim skriptama, bilo da je ta skripta unutar funkcije ili izvan nje. Evo primjera:

var greet = "Hello World!";
 
// Definisanje funkcije
function greetWorld() {
    alert(greet);
}
 
greetWorld();  // Ispisuje: Hello World!
 
alert(greet); // Ispisuje: Hello World!
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript Globalne varijable</title>
</head>
<body>
    <script>
    var greet = "Hello World!";
 
    // Definisanje funkcije
    function greetWorld() {
        document.write(greet);
    }
     
    greetWorld();  // Ispisuje: Hello World!
    document.write("<br>");
    document.write(greet); // Ispisuje: Hello World!
    </script>
</body>
</html>