MySQL Java JavaScript PHP Python HTML-CSS C-sharp

Funcții IIFE

Funcții autoapelative

De obicei, definiția unei funcții este separată de apelul său: mai întâi definim funcția, apoi o apelăm. Totuși, acest lucru nu este obligatoriu. Putem de asemenea să creăm funcții care să fie apelate imediat la definirea lor. Aceste funcții sunt cunoscute și sub numele de Immediately Invoked Function Expression sau IIFE. Asemenea funcții sunt închise în paranteze, iar după definiția funcției urmează în paranteze transmiterea parametrilor:

// funcție autoapelativă
(function(){
   console.log("Salut lume");
}());

Aici, acest mic program poate fi împărțit în câteva părți. În paranteze este definită o funcție anonimă:

function(){
   console.log("Salut lume");
}

Aceasta este o funcție obișnuită care afișează un anumit șir de caractere. Dar, de asemenea, în paranteze după definiția funcției urmează niște paranteze goale:

function(){
   console.log("Salut lume");
}()

Aceste paranteze reprezintă aceleași paranteze care sunt folosite la apelul funcției și în care sunt plasate valorile pentru parametrii funcției. Totuși, funcția noastră anonimă nu are parametri, așadar parantezele sunt goale. Adică aici, de fapt, are loc apelul funcției imediat după definirea ei. Și întreaga această construcție este învelită în paranteze.

În cele din urmă, definim o funcție anonimă și imediat o apelăm.

Într-un mod similar, putem crea și apela funcții care acceptă parametri:

(function (a, b){
   const result = a + b;
   console.log(`${a} + ${b} = ${result}`);
}(4, 5));

Aici, funcția acceptă doi parametri, a căror valori sunt adunate, iar rezultatul este afișat la consolă. Și imediat după definirea funcției transmitem parametrilor săi două numere - 4 și 5. Așadar, în timpul executării programului, funcția va fi definită și imediat executată, calculând suma numerelor 4 și 5.

Stil funcțional

Închiderile și funcțiile IIFE simplifică scrierea programelor în stil funcțional. Să considerăm următorul exemplu:

console.log(
   ((x,y) => (
       ((proc2) =>(
           ((proc1)=>proc1(5,30))((x,y) => [x, proc2(), y])
       ))(()=>x + y)
   ))(10, 15)
);      // [5, 25, 30]

Să examinăm ce se întâmplă aici. În primul rând, în funcția console.log() se afișează rezultatul unei funcții autoapelative:

((x,y) => (
   ((proc2) =>(
           ((proc1)=>proc1(5,30))((x,y) => [x, proc2(), y])
   ))(()=>x + y)
))(10, 15)

Această primă funcție IIFE primește parametrii x și y, cărora li se transmit numerele 10 și 15.

Această funcție, la rândul său, utilizează o funcție încorporată și returnează rezultatul acesteia:

((proc2) =>(
   ((proc1) => proc1(5,30))((x,y) => [x, proc2(), y])
))(()=>x + y)

Aceasta este a doua funcție IIFE. Funcția își ia ca parametru proc2, care este o altă funcție. În acest caz, este funcția ()=>x + y, care returnează suma valorilor. Deoarece pentru funcția încorporată mediul lexical este reprezentat de parametrii x și y ai funcției exterioare, funcția-parametru proc2 primește aceste valori și returnează suma lor - 10 + 15 = 25.

Totuși, funcția încorporată returnează rezultatul funcției sale încorporate:

((proc1) => proc1(5,30))((x,y) => [x, proc2(), y])

Această a treia funcție este, de asemenea, o funcție IIFE. Ca parametru proc1, ea primește de asemenea o anumită funcție de tip callback. În această funcție proc1 sunt transmise numerele 5, 30. Și aici intervine momentul cel mai complex - mai departe, în paranteze, este transmisă chiar funcția proc1:

(x,y) => [x, proc2(), y]

Aceasta definește parametrii x și y și returnează ca rezultat un array cu trei numere. Mai întâi primul și al treilea număr - x și y. Acești parametri nu trebuie confundați cu parametrii x și y ai primei funcții IIFE de la cel mai înalt nivel:

((x,y) => (.....))(10, 15)

Astfel, cea de-a treia funcție returnează array-ul [x, proc2(), y]. x și y reprezintă parametrii acestei funcții. A doua valoare din array reprezintă rezultatul apelului funcției proc2. Să ne amintim ce funcție este aceasta, și pentru asta să urcăm la nivelul celei de-a doua funcții:

((proc2) =>(
   .................
))(()=>x + y)

proc2 returnează suma valorilor x și y. Pentru această a doua funcție, mediul lexical este definit de prima funcție IIFE, care primește parametrii x și y, astfel încât proc2 primește numerele 10 și 15, deci funcția returnează 25. Prin urmare, rezultatul va fi array-ul [5, 25, 30].

← Lecția anterioară Lecția următoare →