JavaScript & ES6- Funkcija Arrow


Funkcija strelice (Arrow Functions)

Funkcije strelica (Arrow Functions) su još jedna zanimljiva karakteristika u ES6. Pruža sažetiju sintaksu za pisanje izraza funkcije isključivanjem funkcije i povratom ključnih riječi. Funkcije strelica definisane su novom sintaksom, oznakom strelice (=>). Pogledajmo kako to izgleda:

// Izraz funkcije
var sum = function(a, b) {
    return a + b;
}
console.log(sum(2, 3)); // 5

// Arrow funkcija
var sum = (a, b) => a + b;
console.log(sum(2, 3)); // 5
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Arrow Funkcije</title>
</head>
<body>
    <script>
    // Izraz funkcije
    var sum = function(a, b) {
        return a + b;
    }
    document.write(sum(2, 3)); // 5
    document.write("<br>");
    
    // Arrow funkcija
    var sum = (a, b) => a + b;
    document.write(sum(2, 3)); // 5
    </script>
</body>
</html>

Kao što vidite nema treće funkcije i vraća ključnu riječ u deklaraciji funkcije strelice. Takođe možete preskočiti zagrade tj. () u slučaju da postoji tačno jedan parametar, ali uvijek ćete ga trebati koristiti kada imate nula ili više parametara. Uz to, ako u tijelu funkcije postoji više izraza, trebate ga ubaciti u vitičaste zagrade ({}). U ovom slučaju takođe trebate koristiti naredbu return za vraćanje vrijednosti. Postoji nekoliko varijacija kako možete pisati funkcije strelica. Evo najčešće korištenih:

// Jedan parametar, jedan iskaz
var greet = name => alert("Ćao" + name + "!");
greet("Miloš"); // Ćao Miloš!

// Više argumenata, jedna izjava
var multiply = (x, y) => x * y;
alert(multiply(2, 3)); // 6


// Jedan parametar, više izjava
var test = age => {
    if(age > 18) {
        alert("Odrasli");
    } else {
        alert("Tinejdžer");
    }
}
test(21); // Odrasli

// Više parametara, više izjava
var divide = (x, y) => {
    if(y != 0) {
        return x / y;
    }
}
alert(divide(10, 2)); // 5

// Nema parametra, jedan iskaz
var hello = () => alert('Hello World!');
hello(); // Hello World!
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript ES6 Varijacije Arrow Funkcije</title>
</head>
<body>
    <script>
    // Jedan parametar, jedan iskaz
    var greet = name => document.write("Ćao" + name + "!");
    greet("Miloš"); // Ćao Milos!
    document.write("<br>");
        
    // Više argumenata, jedna izjava
    var multiply = (x, y) => x * y;
    document.write(multiply(2, 3)); // 6
    document.write("<br>");
    
    // Jedan parametar, više izjava
    var test = age => {
        if(age > 18) {
            document.write("Odrasli");
        } else {
            document.write("Tinejdžer");
        }
    }
    test(21); // Odrasli
    document.write("<br>");
    
    // Više parametara, više izjava
    var divide = (x, y) => {
        if(y != 0) {
            return x / y;
        }
    }
    document.write(divide(10, 2)); // 5
    document.write("<br>");
    
    // Nema parametra, jedan iskaz
    var hello = () => document.write('Hello World!');
    hello(); // Hello World!
    </script>
</body>
</html>

Važna je razlika između redovnih funkcija i funkcija strelica (arrow). Za razliku od normalne funkcije, funkcija strelice (arrow) nema vlastiti this, ona uzima ovo iz vanjske funkcije gdje je definisana. U JavaScript-u, ovo je trenutni kontekst izvršenja funkcije. Da bismo ovo jasno razumjeli, pogledajmo sljedeće primjere:

function Person(nickname, country) {
    this.nickname = nickname;
    this.country = country;
    
    this.getInfo = function() {
        // Kontekst vanjske funkcije (Person object)
        return function() {
            // Kontekst unutrašnje funkcije (Globalni objekt 'Window')
            alert(this.constructor.name); // Window
            alert("Ćao, ja " + this.nickname + " iz " + this.country);
        };
    }
}

var p = new Person('Miloš', 'Bosne i Hercegovine');
var printInfo = p.getInfo();
printInfo();
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript this vrijednost ključne riječi unutar jednostavne funkcije</title>
</head>
<body>
    <script>
    function Person(nickname, country) {
        this.nickname = nickname;
        this.country = country;
        
        this.getInfo = function() {
            // Kontekst vanjske funkcije (Person object)
            return function() {
                // Kontekst unutrašnje funkcije (Globalni objekt 'Window')
                document.write(this.constructor.name); // Window
                document.write("<p>Ćao, ja sam " + this.nickname + " iz " + this.country + "</p>");
            };
        }
    }
    
    var p = new Person('Miloš', 'Bosne i Hercegovine');
    var printInfo = p.getInfo();
    printInfo(); // Ćao, ja sam undefined iz undefined
    </script>
</body>
</html>

Prepisivanje istog primjera korištenjem ES6 prijedloga literala i funkcije strelice:

function Person(nickname, country) {
    this.nickname = nickname;
    this.country = country;
    
    this.getInfo = function() {
        // Kontekst vanjske funkcije (Person object)
        return () => {
            // Kontekst unutrašnje funkcije (Person object)
            alert(this.constructor.name); // Person
            alert(`Ćao, ja sam ${this.nickname} iz ${this.country}`);
        };
    }
}

let p = new Person('Miloš', 'Bosne i Hercegovine');
let printInfo = p.getInfo();
printInfo(); // Ćao, ja sam iz Bosne i Hercegovine
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JavaScript this vrijednost ključne riječi unutar funkcije strelice</title>
</head>
<body>
    <script>
    function Person(nickname, country) {
        this.nickname = nickname;
        this.country = country;
        
        this.getInfo = function() {
            // Kontekst vanjske funkcije (Person object)
            return () => {
                // Kontekst unutrašnje funkcije (Person object)
                document.write(this.constructor.name); // Person
                document.write(`<p>Ćao, ja sam ${this.nickname} iz ${this.country}</p>`);
            };
        }
    }
    
    let p = new Person('Miloš', 'Bosne i Hercegovine');
    let printInfo = p.getInfo();
    printInfo(); // Ćao, ja sam Miloš iz Bosne i Hercegovine
    </script>
</body>
</html>

Kao što jasno možete vidjeti, this ključna riječ u gornjem primjeru odnosi se na kontekst funkcije koja obuhvata funkciju strelice koja je Person object, za razliku od prethodnog primjera gdje se odnosila na globalni objekt Window.