JS: Anonüümsed funktsioonid

JavaScriptis saab funktsioone luua mitmel erineval viisil. Klassikaliste funktsioonide kõrval on olemas anonüümsed funktsioonid, IIFE-d (Immediately Invoked Function Expressions), noolefunktsioonid ning callback-funktsioonid.
Alljärgnevalt vaatame neid ükshaaval koos koodinäidete ja selgitustega.
(tutvusta neid peatükke koos fotodega koodist, et oleks selge visuaalne õppematerjal)


1. Anonüümsed funktsioonid

Anonüümne funktsioon on funktsioon ilma nimeta, mida kasutatakse tavaliselt seal, kus funktsioon on vaja ainult korra.

Näide 1: Anonüümse funktsiooni loomine ja väljakutsumine

var tervita = function() {
  console.log("Tere maailm!");
};

tervita();



Näide 2: Anonüümne funktsioon argumentidega

var summa = function(a, b) {
  return a + b;
};

var tulemus = summa(3, 5);
console.log(tulemus); // Väljund: 8


Näide 3: Anonüümne funktsioon forEach() meetodis

var array = [1, 2, 3, 4, 5];

array.forEach(function(element) {
  console.log(element);
});

Anonüümseid funktsioone saab kasutada argumentidena teistele funktsioonidele, näiteks sündmuste käitlemiseks või ajaliste viivituste loomiseks.

forEach meetod võib vastu võtta ka teisi parameetreid, näiteks indeksi või massiivi ennast:

Kood:

const array = [1, 2, 3, 4, 5];
 
array.forEach(function(element, index, array) {
  console.log("Element:", element);
  console.log("Index:", index);
  console.log("Array:", array);
});Code language: PHP (php)

2. IIFE (Immediately Invoked Function Expression)

IIFE on anonüümne funktsioon, mis kutsutakse välja kohe pärast loomist.
See on kasulik, kui tahad luua eraldi „isoleeritud“ koodi ploki.

Näide:

(function() {
  var x = 10;
  console.log(x); // Output: 10
})();


3. Noolefunktsioonid (Arrow Functions)

ES6 (ECMAScript 2015) tutvustas noolefunktsioone, mis on anonüümsete funktsioonide lühendatud vorm.
Need on lühemad ja säilitavad ümbritseva this väärtuse.

Näide 1: Lihtne noolefunktsioon

const noolFunktsioon = () => {
  console.log("Tere noolfunktsioon!");
};
noolFunktsioon();


Näide 2: Ühe argumendiga noolefunktsioon

let tervita = nimi => console.log(`Tere ${nimi}`);
tervita("Mari");


Näide 3: Lihtsustatud noolefunktsioon, mis tagastab väärtuse

let liitmine = (a, b) => a + b;
console.log(liitmine(3,5));


Näide 4: Noolefunktsioon massiiviga

const array = [1, 2, 3, 4, 5];
array.forEach(element => console.log(element));

Näide 5: Noolefunktsioon massiiviga

let nimed = ["Kati", "Marta", "Andres", "Jüri", "Liisa"];
 
//pikalt
const kasutaja = nimi => console.log(`<li>${nimi}</li>`);
nimed.forEach(kasutaja);
 
//lühidalt
nimed.forEach(nimi => console.log(`<li>${nimi}</li>`));Code language: JavaScript (javascript)

Ja veel parem, me saame selle panne kirja noolefunktsioonina


4. Tagasikutsumisfunktsioonid (Callbacks)

Callback-funktsioon on funktsioon, mida antakse teisele funktsioonile argumendina, ja see kutsutakse välja hiljem, näiteks pärast mingi sündmuse toimumist.

Näide 1: Callback forEach() meetodis

let nimed = ["Kati", "Marta", "Andres", "Jüri", "Liisa"];

nimed.forEach(nimi => console.log(`&lt;li>${nimi}&lt;/li>`));


Näide 2: AJAX-päring koos callback-funktsiooniga

const teostaAJAXPäring = (url, callback) => {
  setTimeout(() => {
    const vastus = "Vastus andmebaasist";
    callback(vastus);
  }, 2000);
};

const callbackFunktsioon = vastus => {
  console.log("Vastus saadud:", vastus);
};

teostaAJAXPäring("https://api.example.com/data", callbackFunktsioon);


5. Ülesanded

Alljärgnevad ülesanded ühendavad kõiki eelnevaid teemasid.


Ülesanne 1: Erinevad funktsioonid

Klassikaline funktsioon

// 1. Erinevad funktsioonid

// klassikaline funktsioon
function nastja() {
    console.log("Minu nimi on Nastja");
}
minuNimi();

// noolefunktsioon
const nastja2 = () => {
     console.log("Minu nimi on Nastja")
}


Ülesanne 2: Kuupäev eesti keeles

// 2. Argumendiga funktsioon
function kuupaevEesti(kuupaev) {
    let kuud = [
        "jaanuar", "veebruar", "märts", "aprill", "mai", "juuni",
        "juuli", "august", "september", "oktoober", "november", "detsember"
    ];

    let d = new Date(kuupaev);

    let paev = d.getDate();
    let kuu = d.getMonth(); // месяцы с 0
    let aasta = d.getFullYear();

    console.log(${paev}. ${kuud[kuu]} ${aasta});
}
kuupaevEesti("2025/07/19");


Ülesanne 3: Teadmata hulk numbreid

// 3. Teadmata hulk
function arvutused(a, b, c, d) {
    let kogusumma = a + b + c + d;
    let keskmine = kogusumma / 4;
    console.log(Koguarv: ${kogusumma}, Keskmine: ${keskmine});
}

arvutused(3, 5, 7, 9);

Ülesanne 4: Salajane sõnum (vokaalid → *)

const salajaneSonum = (string) => {
    let tulemus = "";
    const vokaalid = ["a","e","i","o","u","ü","õ","ö","ä",
        "A","E","I","O","U","Ü","Õ","Ö","Ä"];
    for (let sumb of string) {
        let proverk = false;
        for (let v of vokaalid) {
            if (sumb === v) {
                proverk = true;
                break;
            }
        }
        if (proverk) {
            tulemus += "*";
        } else {
            tulemus += sumb;
        }
    }
    return tulemus;
};

console.log(salajaneSonum("Tere tulemast salajasse klubi!"));

Ülesanne 5: Unikaalsed nimed

//5
const leiaUnikaalsedNimed = (nimed) => {
    const tulemus = [];
    for (let nimi of nimed) {
        let olemas = false;
        for (let n of tulemus) {
            if (nimi == n) {
                olemas = true;
                break;
            }
        }
        if (!olemas) {
            tulemus.push(nimi);
        }
    }
    return tulemus;
};
const nimid = ["Kati", "Mati", "Kati", "Mari", "Mati", "Jüri"]
console.log (leiaUnikaalsedNimed(nimid))


Kokkuvõte

Funktsiooni tüüpOmadusedNäide
Klassikaline funktsioonNimetatud, taaskasutatavfunction tervita() {}
Anonüümne funktsioonNimetu, kasutatakse otsevar f = function() {}
IIFEKäivitatakse kohe(function(){})();
NoolefunktsioonLühike süntaks, säilitab thisconst f = () => {}
CallbackAntakse teisele funktsioonile edasiforEach(callback)