Hvornår skal man bruge en funktionserklæring vs. et funktionsudtryk

Tech Jargon Series

Det er sandsynligt, at du allerede ved, hvordan du skriver funktioner på begge disse måder. function doStuff() {}og () =>{} er tegn, vi skriver hele dagen. Men hvordan er de forskellige, og hvorfor bruge den ene over den anden?

Bemærk: Eksempler er givet i JavaScript. Y vores M ileage M ay V ary med andre sprog.

Den første forskel: et navn

Når du opretter en funktion med et navn , er det en funktionserklæring . Navnet kan udelades i funktionsudtryk , hvilket gør denne funktion til "anonym".

Funktionserklæring:

function doStuff() {};

Funktionsudtryk:

const doStuff = function() {}

Vi ser ofte anonyme funktioner brugt med ES6-syntaks som sådan:

const doStuff = () => {}

Hejsning

Hejsning henviser til tilgængeligheden af ​​funktioner og variabler "øverst" i din kode, i modsætning til kun efter at de er oprettet. Objekterne initialiseres ved kompileringstidspunktet og er tilgængelige overalt i din fil.

Funktionserklæringer hejses, men funktionsudtryk ikke.

Det er let at forstå med et eksempel:

doStuff();
function doStuff() {};

Ovenstående kaster ikke en fejl, men dette ville:

doStuff();
const doStuff = () => {};

Sagen for funktionsudtryk

Det kan virke som om funktionserklæringer med deres kraftige hejseegenskaber vil udelukke funktionsudtryk for anvendelighed. Men at vælge den ene frem for den anden kræver at tænke over hvornår og hvor funktionen er nødvendig . Dybest set, hvem har brug for at vide om det?

Funktionsudtryk påberåbes for at undgå forurening af det globale omfang . I stedet for at dit program er opmærksom på mange forskellige funktioner, når du holder dem anonyme, bliver de brugt og glemt med det samme.

IIFE

Navnet - med det samme påkaldte funktionsudtryk - siger stort set alt her. Når en funktion oprettes på samme tid, som den kaldes, kan du bruge en IIFE, der ser sådan ud:

(function() => {})()

eller:

(() => {})()

Se denne omfattende artikel for at få et dybtgående kig på IIFE'er.

Tilbagekald

En funktion, der overføres til en anden funktion, kaldes ofte "tilbagekaldelse" i JavaScript. Her er et eksempel:

function mapAction(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Problemet her er, at det mapActionvil være tilgængeligt for hele din applikation - der er ikke behov for det. Hvis det tilbagekald er et funktionsudtryk, vil det ikke være tilgængeligt uden for den funktion, der bruger det:

array.map(item => { //do stuff to an item })

eller

const mapAction = function(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

selvom mapActionvil være tilgængelig for kode under sin initialisering.

Resumé

Kort sagt, brug funktionserklæringer, når du vil oprette en funktion i det globale omfang og gøre den tilgængelig i hele din kode. Brug funktionsudtryk for at begrænse, hvor funktionen er tilgængelig, holde dit globale omfang lys og opretholde ren syntaks.

Referencer

  • Funktionserklæring, MDN-dokumenter.
  • Funktionsudtryk, MDN-dokumenter.
  • Hejsning, MDN-ordliste.

Tech Jargon-serien

Der er så mange sætninger, der bliver kastet rundt på tekniske møder og konferencer, forudsat at alle allerede er nede med lingo. Jeg er ofte ikke nede med lingo. Det er almindeligt, at udviklere handler forbavset over, at jeg mangler et stykke viden.

Sandheden er, at jeg ofte bare ikke kender det rigtige ord for det. Som mennesker, men især udviklermennesker, elsker vi at afskedige dem, der ikke ”taler”, så denne serie handler om at få en solid forståelse af programmeringskoncepter, som man “skal kende”.

Dette er den anden artikel i serien. Den første var højere ordensfunktioner. Hold øje med mere, når jeg går til møder og konferencer og foregiver at vide, hvad mine medteknikere taler om, men så skal jeg hjem og Google det.