JavaScript-functies, bereik en closures

Een functie geeft een taak een naam en slaat de instructies op om die uit te voeren. Als je de functie definieert, worden die instructies niet uitgevoerd. Een aanroep voert ze uit en een volgende aanroep voert ze opnieuw uit met nieuwe invoer.

Schrijf de definitie

Een declaratie heeft het sleutelwoord function, een naam, ronde haakjes voor parameters en accolades voor het functielichaam:

function greet(name) {
  console.log("Hello, " + name + "!");
}

Hier is name een parameter: een lokale naam voor de invoer die elke aanroep levert. Het functielichaam voegt die invoer samen met de omringende tekst en toont het resultaat. De sluitaccolade geeft het einde van de definitie aan; de uitvoering gaat verder met de volgende instructie daarbuiten.

Een functie zonder invoer heeft nog steeds ronde haakjes nodig. Zo definieert function sayHi() { console.log("Hi"); } een taak met een lege parameterlijst. De accolades horen bij de definitie; de ronde haakjes na een naam horen zowel bij definities als bij aanroepen en hebben daar verschillende taken.

Voer de taak uit

greet("Amira");
greet("Li");

De eerste aanroep geeft name de waarde "Amira" en toont “Hello, Amira!”. De tweede begint een nieuwe aanroep met name gelijk aan "Li" en toont “Hello, Li!”. De definitie wordt gedeeld; de invoer hoort bij de afzonderlijke aanroep.

greet op zichzelf verwijst naar de functiewaarde. Het functielichaam wordt niet uitgevoerd. Dit verschil is van belang wanneer een regel niets lijkt te doen: sayHi; leest een functiewaarde en gooit die weg, terwijl sayHi(); “Hi” toont.

Vervang gekopieerde instructies

Stel dat meerdere rapporten een kop tussen lijnen nodig hebben:

function printHeading(title) {
  console.log("-----");
  console.log(title);
  console.log("-----");
}

printHeading("Report");
printHeading("Totals");

De eerste aanroep toont een lijn, “Report” en nog een lijn. De tweede toont hetzelfde kader rond “Totals”. Om de lijnstijl te wijzigen, pas je de twee instructies die lijnen tonen in deze ene definitie aan. Zonder de functie zou elke gekopieerde kop afzonderlijk moeten worden aangepast.

Kies een naam die aangeeft wat één aanroep doet. printHeading beschrijft een handeling; isValidEmail benoemt een ja-neecontrole. Gebruik camelCase, met een kleine letter aan het begin van het eerste woord en hoofdletters aan het begin van volgende woorden. Als een voorgestelde naam twee afzonderlijke taken met “en” verbindt, overweeg dan elke taak een eigen functie te geven.

Lees code die een declaratie vroeg aanroept

Declaraties worden klaargezet voordat de omringende code wordt uitgevoerd. Dit gedrag heet hoisting:

sayHi();
function sayHi() {
  console.log("Hi");
}

De aanroep werkt binnen het bereik van de declaratie, ook al staat de definitie verderop. Hoisting zorgt er niet voor dat het functielichaam vroeg wordt uitgevoerd; het maakt de functie beschikbaar voor een aanroep.

Controleer de spelling en het gebruik van hoofdletters als een aanroep mislukt. Greet() en greet() zijn verschillende namen. Als je een niet-gedeclareerde greeet() aanroept, krijg je een ReferenceError; het weglaten van de haakjes voor de aanroep kan ongemerkt misgaan, omdat het alleen lezen van een bestaande functie geldige code is.

Functies zijn waarden. Je kunt een functie in een variabele bewaren, de referentie kopiëren, de functie doorgeven aan een andere functie of haar teruggeven. Een functie-expressie maakt die waarde op een plaats waar een expressie wordt verwacht.

Sla een functie op

const square = function (n) {
  return n * n;
};

const answer = square(4);

De expressie na = maakt een functie. De toewijzing slaat die op in square; de latere aanroep geeft 16 terug. Volgens de opmaakconventie die hier wordt gebruikt, eindigt deze instructie met een puntkomma.

De positie van function onderscheidt de vormen. Een definitie die zelfstandig is geschreven als function square(n) { ... } is een declaratie. Een functie die na = of direct als argument van een aanroep is geschreven, is een expressie. Beide gewone functievormen kunnen parameters accepteren en waarden teruggeven.

Gebruik const voor een functievariabele als de waarde gelijk moet blijven. square(5) aanroepen is toegestaan; square = 5; toewijzen veroorzaakt een TypeError. De constante beschermt de variabele tegen vervanging. Die verhindert niet dat je de functie herhaaldelijk aanroept.

Bewaar een functie of het resultaat ervan

const sq = square;
const result = square(3);

sq verwijst naar dezelfde functie als square. De aanroep sq(3) geeft 9 terug. result bevat het getal 9 dat één aanroep heeft teruggegeven. Je kunt dit getal niet als functie aanroepen. typeof square en typeof sq zijn "function"; typeof result is "number".

Het helpt om een toewijzing van rechts naar links te lezen: bepaal eerst of de rechterkant een functie maakt, naar een bestaande functie verwijst of een functie aanroept. De variabele links ontvangt die waarde. De referentie kopiëren maakt geen tweede onafhankelijke implementatie.

Wacht tot de toewijzing wordt uitgevoerd

Een declaratie en een opgeslagen expressie kun je op verschillende momenten aanroepen:

Bij const of let kun je de naam niet gebruiken vóór initialisatie. Bij var bestaat de naam al vroeg, maar wordt de functiewaarde pas toegewezen wanneer de uitvoering de expressie bereikt. Hoisting van de variabele past geen hoisting toe op de toewijzing.

Geef een expressie een interne naam

const factorial = function fact(n) {
  return n <= 1 ? 1 : n * fact(n - 1);
};

De naam voor buiten de functie is factorial. De naam fact hoort binnen de functie en laat haar zichzelf aanroepen; code daarbuiten kan die interne naam niet direct gebruiken. De naam van de expressie kan ook aanroepsporen gemakkelijker leesbaar maken. Zo berekent factorial(3) 3 keer 2 keer 1 en geeft 6 terug.

Declaraties werken goed voor de belangrijkste benoemde taken in een script. Expressies passen op plaatsen waar code een functiewaarde nodig heeft, zoals bij een toewijzing aan een variabele of een argument. De keuze voor een expressie verandert hoe de waarde wordt gemaakt en opgeslagen, niet hoe je die met ronde haakjes aanroept.

Pijlfuncties zijn functie-expressies met een kortere schrijfwijze. Wat ze teruggeven hangt af van wat na de pijl volgt, dus bekijk het functielichaam voordat je bepaalt wat een aanroep oplevert.

Kies de parametervorm

const sayHi = () => "hi";
const double = n => n * 2;
const add = (a, b) => a + b;

Zonder parameters zijn lege ronde haakjes nodig. Bij één eenvoudige parameter mogen de haakjes weg. Bij twee of meer zijn ze verplicht. Ook een parameter met een standaardwaarde of een restparameter heeft haakjes nodig: (n = 1) => n * 2 en (...nums) => nums.length zijn geldig.

De pijl scheidt de invoer van het functielichaam. const double = n => n * 2; maakt de functie en slaat die op; double(6) roept haar later aan en geeft 12 terug. Net als bij een const die een andere functie-expressie bevat, kun je double niet lezen voordat de initialisatieregel is uitgevoerd.

Geef een expressie terug of schrijf een blok

Een expressie als functielichaam geeft de waarde van die expressie automatisch terug. Accolades beginnen een blok met instructies. In een blok geeft het evalueren van een expressie de waarde niet terug aan de aanroeper; schrijf return expliciet.

Gebruik een blok wanneer de taak tussenstappen nodig heeft:

const describe = (n) => {
  const kind = n % 2 === 0 ? "even" : "odd";
  return n + " is " + kind;
};

Bij describe(7) is de voorwaarde onwaar, dus wordt kind gelijk aan "odd". De return voegt vervolgens het getal en de woorden samen tot “7 is odd”. Als je die return verwijdert, blijft de lokale berekening staan, maar krijgt de aanroeper undefined.

Geef een objectliteral terug

Een objectliteral gebruikt ook accolades. Zet die tussen ronde haakjes zodat de parser die als expressie behandelt:

const makePoint = (x, y) => ({ x: x, y: y });

makePoint(2, 5) geeft een object terug met x gelijk aan 2 en y gelijk aan 5. Zonder de ronde haakjes begint de eerste accolade een blok. De vorm met één eigenschap () => { value: 1 } geeft undefined terug; de vergelijkbare vorm met twee eigenschappen en een komma veroorzaakt een syntaxisfout. De haakjes veranderen hoe het functielichaam wordt gelezen.

Ken de grenzen van de kortere vorm

Pijlfuncties hebben geen eigen this of arguments en je kunt ze niet met new aanroepen om objecten te maken. Voor een eenvoudige berekening die geen this en geen arguments gebruikt, gedragen een pijlfunctie en een gewone functie-expressie zich hetzelfde. Als je elke gewone functie door een pijlfunctie vervangt, kan dat code veranderen die van die eigenschappen afhankelijk is.

Korte pijlfuncties zijn vooral leesbaar als callbacks. [1, 2, 3].map(n => n * 10) geeft een functie door die een getransformeerd element teruggeeft en levert [10, 20, 30] op. Als je die verandert in n => { n * 10; }, gaat elke teruggegeven waarde ongemerkt verloren.

De parameters van een functie geven namen aan de waarden die een aanroep levert. Om een aanroep te volgen, koppel je eerst invoer op positie en volg je daarna de bewerkingen in het functielichaam.

Koppel posities en typen

function area(width, height) {
  return width * height;
}

area(4, 2.5);

width en height zijn parameters; 4 en 2,5 zijn argumenten. Tijdens deze aanroep bevat width de waarde 4 en height de waarde 2,5, dus is het resultaat 10. Parameternamen worden niet gekoppeld aan namen van variabelen van de aanroeper. Als je bij divide(a, b) de aanroep divide(10, 2) verandert in divide(2, 10), verandert het resultaat van 5 in 0,2.

JavaScript dwingt geen aantal argumenten af. Bij area(4) blijft height gelijk aan undefined; vermenigvuldigen daarmee levert NaN op. area(4, 2, 99) geeft 8 terug omdat dit functielichaam het derde argument niet gebruikt. Een functie kan ervoor kiezen extra argumenten te verzamelen, maar ongebruikte extra argumenten veroorzaken niet automatisch een fout.

Ook typen zijn van belang, zelfs wanneer de aanroep wordt geaccepteerd. area("4", 2) geeft 8 terug omdat de vermenigvuldiging de tekst converteert. Een optelfunctie gedraagt zich anders: add("4", 2) geeft “42” terug wanneer het functielichaam return a + b; is. Als tekst een getal voorstelt, geeft add(Number("4"), 2) de waarde 6 terug.

Wijs een lokale parameter opnieuw toe

Elke parameter is lokaal voor de aanroep. Als je er een nieuw getal aan toewijst, wijs je de variabele van de aanroeper niet opnieuw toe:

let score = 5;
function reset(s) {
  s = 0;
}
reset(score);

De aanroep kopieert de waarde 5 naar s. De toewijzing verandert s in 0 en score blijft 5. Getallen, strings en booleaanse waarden volgen deze regel voor het kopiëren van waarden. Code daarbuiten kan s niet direct lezen; een geneste functie kan er via een closure toegang toe houden.

Wijzig een array via een gekopieerde referentie

Een arraywaarde is een referentie naar een array. Als je die waarde doorgeeft, wordt de referentie gekopieerd, zodat de aanroeper en de parameter dezelfde array kunnen bereiken:

const list = [1, 2];
function addItem(arr) {
  arr.push(3);
}
addItem(list);

list is nu [1, 2, 3]. De functie heeft list niet opnieuw toegewezen; ze heeft de array gewijzigd die beide namen bereiken. Een const-declaratie voorkomt dat je de opgeslagen referentie vervangt, maar niet dat je de inhoud van de array wijzigt.

Vergelijk dit met een lokale hertoewijzing:

function clearLocal(arr) {
  arr = [];
}
clearLocal(list);

Hierdoor verwijst alleen arr naar een nieuwe lege array. list verwijst nog steeds naar [1, 2, 3]. Vraag je af of een bewerking een bestaande array wijzigt, zoals push doet, of een naam een andere waarde geeft, zoals = doet.

Geef een nieuwe array terug als de invoer intact moet blijven

function withItem(arr, item) {
  return arr.concat(item);
}

withItem([1, 2], 3) levert [1, 2, 3] op als nieuwe array. De invoerarray blijft [1, 2]. Dit maakt de functie nuttig wanneer de aanroeper zowel de oude als de uitgebreide lijst nodig heeft. Maak de beoogde wijzigingen aan de invoer van een functie duidelijk via haar naam en gedrag, zodat aanroepers haar voorspelbaar kunnen gebruiken.

Standaardwaarden maken invoer optioneel; met restparameters kan een aanroep veel invoerwaarden leveren. Spreadsyntaxis verbindt een bestaande array met een functie die afzonderlijke argumenten verwacht.

Pas alleen bij undefined een standaardwaarde toe

function greet(name = "friend") {
  return "Hello, " + name;
}

greet() en greet(undefined) geven allebei “Hello, friend” terug. greet(null) geeft “Hello, null” terug en greet("") geeft “Hello, ” terug. Een standaardwaarde controleert op undefined, niet op elke waarde die leeg lijkt.

Standaardwaarden worden geëvalueerd wanneer een aanroep ze nodig heeft. Ze mogen eerdere parameters gebruiken: function makeBox(width, height = width) { return width * height; } geeft 9 terug voor makeBox(3) en 12 voor makeBox(3, 4). Het expliciete tweede argument vervangt de standaardwaarde voor die aanroep.

Zet verplichte invoer eerst. Met function total(amount, rate = 0.25) { return amount + amount * rate; } geeft total(80) de waarde 100 terug en total(80, 0.5) de waarde 120. Als je de parameters omdraait, is voor de gebruikelijke aanroep met het standaardtarief total(undefined, 80) nodig.

Oudere code kan level = level || 50; gebruiken. Dit vervangt ook 0, false en een lege string omdat het falsy-waarden zijn. Een parameter met een standaardwaarde behoudt die waarden: function setVolume(level = 50) { return level; } geeft 0 terug voor setVolume(0) en 50 voor setVolume(undefined).

Verzamel argumenten met rest

function sum(...numbers) {
  let total = 0;
  for (const n of numbers) {
    total += n;
  }
  return total;
}

sum(1, 2, 3) plaatst [1, 2, 3] in numbers en geeft 6 terug. sum() geeft die parameter een lege array, zodat de lus niets toevoegt en 0 teruggeeft. Een restparameter is een echte array, klaar voor arraymethoden of iteratie.

Vóór rest kan vaste invoer komen: in function log(label, ...values) { console.log(label, values); } geeft log("scores", 7, 9) aan label de string “scores” en aan values de array [7, 9]. Er is maar één restparameter toegestaan en die moet als laatste komen; anders kan JavaScript de resterende argumenten met deze syntaxis niet eenduidig toewijzen.

Pak argumenten uit met spread

Math.max(...[3, 7, 2]) ontvangt drie getallen en geeft 7 terug. Math.max([3, 7, 2]) ontvangt één array en geeft NaN terug. De drie punten zijn op de pagina identiek, maar de omringende syntaxis vertelt je welke taak ze uitvoeren.

Gewone functies hebben ook een arguments-object met de argumenten die eraan zijn doorgegeven. Het lijkt op een array, met items die een index hebben en een lengte, maar is geen echte array en heeft geen eigen methoden map of filter. Pijlfuncties hebben geen eigen arguments. Geef in nieuwe code die een flexibele lijst invoerwaarden nodig heeft de voorkeur aan een restparameter.

Een teruggegeven waarde is de uitvoer die andere code van een aanroep ontvangt. Tonen kan dezelfde waarde op het scherm laten zien, maar geeft de aanroeper een ander resultaat tenzij de functie die waarde ook teruggeeft.

Gebruik de aanroep als waarde

function double(n) {
  return n * 2;
}
const x = double(5) + 1;

double(5) geeft 10 terug, dus wordt de toewijzing geëvalueerd als 10 plus 1 en wordt 11 opgeslagen. Een aanroep kan overal staan waar een geschikte waarde nodig is. double(double(3)) krijgt eerst 6 van de binnenste aanroep en geeft dan 12 terug van de buitenste. Math.round(double(2.3)) verdubbelt tot 4,6 en rondt af naar 5.

return beëindigt ook direct de huidige aanroep. Een bewakingsclausule handelt een speciaal geval af vóór het eigenlijke werk:

function safeDivide(a, b) {
  if (b === 0) {
    return null;
  }
  return a / b;
}

safeDivide(6, 0) geeft null terug en komt nooit bij de deling. safeDivide(6, 2) slaat de bewakingsclausule over en geeft 3 terug. Zet de voorwaarde vóór de bewerking die ze beschermt.

Onderscheid teruggeven van tonen

function addLog(a, b) {
  console.log(a + b);
}

addLog(2, 3) toont 5, maar de retourwaarde is undefined. Daardoor toont addLog(2, 3) * 2 de waarde 5 en wordt de expressie geëvalueerd tot NaN. Een functie die het einde bereikt zonder return of alleen return; uitvoert, geeft undefined terug. De weergave in de console is een neveneffect, niet de bruikbare numerieke uitvoer van de aanroep.

Als een aanroeper een som nodig heeft, schrijf je return a + b;. De aanroeper kan dan kiezen om die te tonen, op te slaan of in een andere berekening te gebruiken. Zo houd je beslissingen over de weergave buiten een herbruikbare berekening.

Houd de teruggegeven expressie op dezelfde regel

function brokenAdd(a, b) {
  return
  a + b;
}

JavaScript beëindigt de instructie return bij de regelafbreking. De functie geeft undefined terug; de latere expressie wordt nooit bereikt. Begin een lange expressie of open een rond haakje op de regel met return en ga eronder verder.

Verpak meerdere resultaten in één waarde

Een aanroep geeft één waarde terug, maar die waarde kan een array zijn:

function minMax(nums) {
  return [Math.min(...nums), Math.max(...nums)];
}
const [low, high] = minMax([4, 9, 1]);

De teruggegeven array is [1, 9]. Destructurering wijst het eerste item toe aan low en het tweede aan high. Er is nog steeds één teruggegeven waarde, met daarin twee bruikbare resultaten.

Een zuivere functie berekent haar uitvoer uit haar argumenten en verandert niets buiten zichzelf. double is zuiver. Tonen, een buitenste variabele bijwerken en een invoerarray wijzigen zijn neveneffecten. Zuivere berekeningen zijn gemakkelijk te controleren met voorbeelden van invoer en uitvoer; neveneffecten horen in duidelijk benoemde functies waar het programma zichtbare veranderingen nodig heeft.

Wanneer een functie een andere aanroept, pauzeert de aanroeper totdat die aanroep terugkeert. De aanroepstapel houdt het onvoltooide werk bij, zodat de uitvoering op de juiste plaats kan worden hervat.

Voeg aanroepframes toe en verwijder ze

Elke actieve aanroep heeft een frame met de parameters, lokale variabelen en de plaats waar de uitvoering moet worden hervat. Een nieuwe aanroep komt boven op de stapel; een terugkeer verwijdert dat bovenste frame.

function square(n) {
  return n * n;
}
function sumOfSquares(a, b) {
  return square(a) + square(b);
}
sumOfSquares(3, 4);

Eerst begint sumOfSquares met a gelijk aan 3 en b gelijk aan 4. Die functie roept square(3) aan, dat 9 teruggeeft en eindigt. Daarna wordt square(4) uitgevoerd en geeft 16 terug. De gepauzeerde optelling kan nu worden voltooid als 9 plus 16 en sumOfSquares geeft 25 terug. De twee aanroepen van square overlappen elkaar in deze uitvoering niet.

Elke aanroep krijgt nieuwe parameters en lokale variabelen. Als je dezelfde functie twee keer aanroept, wordt de lokale numerieke toestand van een eerdere aanroep niet hergebruikt. Zelfs wanneer een functie zichzelf aanroept, heeft de nieuwe aanroep een eigen frame.

Maak een probleem kleiner met recursie

Een recursieve functie roept zichzelf aan. Een basisgeval eindigt zonder nog een aanroep van zichzelf; een recursief geval zet een stap in de richting van dat basisgeval.

function factorial(n) {
  if (n <= 1) {
    return 1;
  }
  return n * factorial(n - 1);
}

Voor niet-negatieve gehele getallen als invoer vermenigvuldigt dit de gehele getallen tot en met 1. Volg factorial(4) in twee richtingen:

1. factorial(4) wacht op factorial(3).
2. Die aanroep wacht op factorial(2).
3. Die aanroep wacht op factorial(1).
4. Het basisgeval geeft 1 terug.
5. De wachtende aanroepen geven achtereenvolgens 2, 6 en 24 terug.

De vermenigvuldiging in de aanroep met n gelijk aan 4 gebeurt nadat de kleinere aanroep is teruggekeerd. De eigen n is tijdens het wachten 4 gebleven.

Een basisgeval moet bereikbaar zijn. Als je alleen n === 1 gebruikt, gaat het mis bij een begininvoer van 0 als elke recursieve aanroep 1 aftrekt: de waarden worden negatief en bereiken 1 nooit. n <= 1 vangt zowel 0 als 1 op. Zonder een pad dat de uitvoering stopt, putten herhaalde aanroepen de stapel uit. Chrome en Node.js melden “RangeError: Maximum call stack size exceeded”; Firefox gebruikt “InternalError: too much recursion”.

Herken een kleinere versie van dezelfde taak

function countItems(list) {
  let count = 0;
  for (const item of list) {
    if (Array.isArray(item)) {
      count += countItems(item);
    } else {
      count += 1;
    }
  }
  return count;
}

countItems([1, [2, 3], [4, [5]]]) geeft 5 terug. Elke geneste array stelt dezelfde telvraag over een kleinere lijst. Een lus is ook geschikt voor een eenvoudige faculteitsberekening; recursie is vooral nuttig wanneer de gegevens zelf genest zijn.

Als een aanroep mislukt, lees je het aanroepspoor vanaf de meest recente aanroep bovenaan. De volgende vermeldingen tonen welke onvoltooide aanroepen daartoe leidden. Herhaalde vermeldingen van één functie kunnen recursie onthullen die niet is gestopt.

Het bereik van een variabele is het deel waarin de naam kan worden gebruikt. Dankzij bereik kunnen functies hun werkgegevens gescheiden houden en toch invoer en waarden uit omringende code gebruiken.

Trek grenzen rond declaraties

let en const hebben blokbereik. Een blok is een gebied tussen accolades, zoals een if-blok, een luslichaam of een functielichaam:

if (true) {
  const msg = "hi";
  console.log(msg);
}

Het tonen werkt binnen het blok. Als je erna console.log(msg); toevoegt, krijg je een ReferenceError omdat die buitenste code deze declaratie niet kan bereiken. Een andere buitenste declaratie met dezelfde naam zou een andere variabele zijn.

Parameters en variabelen binnen een functie zijn lokaal voor die functie. In function f() { let temp = 1; } kan code daarbuiten temp niet lezen. Twee functies kunnen elk een lokale total hebben zonder die te delen. Elke aanroep begint met nieuwe lokale variabelen; een teruggegeven geneste functie kan later via een closure toegang behouden.

Lees oudere declaraties met var

function test() {
  if (true) {
    var x = 1;
  }
  return x;
}

test() geeft 1 terug omdat var de grens van if negeert. Als je dat vervangt door let x = 1;, mislukt het teruggeven: de x van het blok is daar niet beschikbaar. Zo houdt for (let i = 0; i < 3; i++) {} de variabele i ook binnen de lus, terwijl een var i na de lus beschikbaar blijft in de omvattende functie of het omvattende script en 3 bevat.

Kijk naar buiten vanaf de plaats waar de functie is geschreven

Bereiken zijn genest. Een binnenste functie kan namen in de omvattende bereiken gebruiken, maar buitenste code kan niet naar binnen zoeken in de lokale variabelen van een binnenste functie. Dit is lexicaal bereik: de plaats waar de code is geschreven, bepaalt welke namen beschikbaar zijn.

const level = "global";
function show() {
  return level;
}
function run() {
  const level = "local";
  return show();
}

run() geeft “global” terug. show is buiten run gedefinieerd, dus bevat het omvattende bereik de buitenste level. Als je de functie binnen run aanroept, krijgt die geen toegang tot de lokale level van die aanroeper.

Gebruik gedeelde toestand bewust

Een variabele op het hoogste niveau in een gewoon script is globaal en kan worden bereikt door functies binnen dat script. Gedeelde globale variabelen kunnen ervoor zorgen dat onafhankelijke taken elkaar beïnvloeden; scripts op dezelfde pagina kunnen ook botsen over namen. Door invoer door te geven en uitvoer terug te geven, houd je afhankelijkheden zichtbaar.

Declareer elke variabele. In strikte modus veroorzaakt count = 5; een ReferenceError als er geen bereikbare declaratie bestaat. Zonder strikte modus kan zo'n toewijzing per ongeluk een globale variabele maken. Een script kan strikte modus inschakelen met "use strict"; aan het begin; modules schakelen die automatisch in. Geef de voorkeur aan const voor waarden die niet opnieuw worden toegewezen en aan let wanneer hertoewijzing nodig is.

Dezelfde naam kan in meerdere bereiken voorkomen. JavaScript vindt de relevante declaratie door vanaf de huidige code naar buiten te zoeken en bij de eerste overeenkomst te stoppen.

Volg de bereikketen

let x = 1;
function f() {
  let x = 2;
  return x;
}

f() geeft 2 terug. De lokale declaratie overschaduwt de buitenste x, dus stopt het zoeken binnen f. De buitenste waarde blijft 1. Een parameter kan op dezelfde manier een naam overschaduwen. Als geen enkel bereik in de keten een naam declareert, veroorzaakt het lezen ervan een ReferenceError.

Een toewijzing declareert geen nieuwe variabele. Bij let count = 0; function add() { count = count + 1; } vindt add de buitenste declaratie en wijzigt de variabele. Als je let toevoegt, verandert de betekenis: je maakt een nieuwe lokale naam die juist de waarde kan verbergen die je wilde lezen.

Onderscheid registratie van initialisatie

Hoisting beschrijft hoe declaraties worden geregistreerd voordat hun bereik wordt uitgevoerd. Hun gedrag aan het begin verschilt:

Zo toont console.log(a); var a = 5; de waarde undefined. De toewijzing van 5 heeft nog niet plaatsgevonden. console.log(b); let b = 5; mislukt daarentegen. De periode waarin de lexicale naam bestaat maar niet toegankelijk is, heet de tijdelijke dode zone, vaak afgekort tot TDZ.

Volg overschaduwing vóór een declaratieregel

let n = 10;
function f() {
  console.log(n);
  let n = 20;
}
f();

De binnenste n overschaduwt de buitenste in het hele functielichaam, ook vóór de regel waar de declaratie is geschreven. Bij console.log(n) staat die binnenste naam nog in de TDZ, dus veroorzaakt de aanroep een ReferenceError. JavaScript slaat een niet-geïnitialiseerde lokale declaratie niet over om terug te vallen op de buitenste waarde 10.

Hetzelfde probleem doet zich voor bij let count = count + 1; binnen add. De rechterkant leest de nieuwe lokale count voordat die is geïnitialiseerd. Als het de bedoeling is een buitenste teller bij te werken, gebruik dan een toewijzing zonder nieuwe declaratie. Als het de bedoeling is een afzonderlijke waarde te berekenen, geef die dan een andere naam en lees de buitenste teller expliciet.

Onderscheid hertoewijzing van mutatie

Met let en const kun je dezelfde naam niet opnieuw declareren in één bereik; dat veroorzaakt een SyntaxError. Een binnenste bereik mag een eigen naam declareren: dat is overschaduwing. var staat herhaalde declaraties in hetzelfde bereik toe, waardoor onbedoeld hergebruik van een naam moeilijker opvalt.

const verhindert hertoewijzing van de variabele. Het bevriest een array niet:

const list = [];
list.push(1);

De referentie die in list is opgeslagen blijft dezelfde, terwijl de array verandert in [1]. Met list = []; zou je proberen de opgeslagen referentie te vervangen en dat zou mislukken.

Houd een declaratie in het kleinste bereik dat die nodig heeft. Verschillende namen voor verschillende taken verminderen de noodzaak om overschaduwing in gedachten bij te houden. Als je vóór gebruik initialiseert, voorkom je fouten door de TDZ.

Een functie houdt een koppeling met het bereik waarin die is gemaakt. De functie en de behouden toegang vormen een closure. Die koppeling is vooral nuttig wanneer een geneste functie wordt teruggegeven en aangeroepen nadat de buitenste aanroep is beëindigd.

Geef een teruggegeven functie geheugen

function makeCounter() {
  let count = 0;
  return function () {
    count = count + 1;
    return count;
  };
}
const counter = makeCounter();

De aanroep van makeCounter maakt count, maakt een binnenste functie en geeft die functie terug. Het binnenste functielichaam wordt nog niet uitgevoerd. counter bevat nu de functiewaarde. De eerste aanroep verandert de behouden count van 0 in 1 en geeft 1 terug. De volgende aanroep verandert dezelfde variabele in 2 en geeft 2 terug.

Het stapelframe van de buitenste aanroep is beëindigd, maar de vastgelegde variabele blijft toegankelijk. Een lokale variabele die nergens meer bereikbaar wordt gebruikt, kan worden vrijgegeven; hier heeft de aanroepbare binnenste functie die nog nodig. Toegang via een closure blijft na terugkeer bestaan zonder de variabele globaal te maken.

Maak onafhankelijk geheugen met afzonderlijke aanroepen

const a = makeCounter();
const b = makeCounter();
a();
a();
b();

De resultaten zijn 1, 2 en 1. Elke fabrieksaanroep heeft een andere count gemaakt. De twee functies die uit afzonderlijke aanroepen zijn teruggegeven, hebben dezelfde code maar verschillende behouden omgevingen.

Het kopiëren van een teruggegeven functiereferentie werkt anders. Bij const alias = a; gebruikt alias() de bestaande teller van a; de aanroep roept makeCounter niet aan en maakt geen nieuwe omgeving.

Bewaar variabelen, geen momentopnamen

let greeting = "Hi";
const say = () => greeting;
greeting = "Hello";

say() geeft “Hello” terug. De closure leest de variabele wanneer die wordt uitgevoerd, dus is een latere wijziging zichtbaar. De closure slaat geen vaststaande kopie van “Hi” op bij het maken.

Code daarbuiten kan de lokale count niet direct bereiken en counter.count is undefined. Alleen code met toegang tot die lexicale omgeving kan de variabele lezen of bijwerken. Als je de teller vanuit een andere functie aanroept, verandert dat niet welke tellerwaarde wordt gebruikt.

Deel toestand binnen één buitenste aanroep

function makeWallet() {
  let balance = 0;
  return [
    function deposit(n) { balance += n; return balance; },
    function getBalance() { return balance; }
  ];
}
const [deposit, getBalance] = makeWallet();
deposit(50);
deposit(20);

getBalance() geeft 70 terug omdat beide teruggegeven functies in dezelfde aanroep zijn gemaakt en naar dezelfde balance verwijzen. Een andere aanroep van makeWallet() maakt een afzonderlijk saldo.

Een functiefabriek gebruikt toegang via een closure om functies met eigen instellingen of toestand te maken. De aanroeper geeft de configuratie één keer door en gebruikt de teruggegeven functie daarna vaak.

Stel een functie in met een parameter

function makeMultiplier(factor) {
  return (n) => n * factor;
}
const double = makeMultiplier(2);
const triple = makeMultiplier(3);

double(5) geeft 10 terug en triple(5) geeft 15 terug. Elke teruggegeven pijlfunctie behoudt de factor van haar eigen fabrieksaanroep. De buitenste functie stelt het gedrag in; de binnenste voert het herhaalde werk uit.

De compacte vorm is const makeMultiplier = (factor) => (n) => n * factor;. Twee pijlen betekenen dat twee functies worden gemaakt, niet dat twee opeenvolgende berekeningen op één getal worden uitgevoerd. makeMultiplier(4)(5) geeft eerst een functie terug die met 4 is ingesteld en roept die daarna aan met 5 om 20 te krijgen.

Handhaaf een regel voor privétoestand

function makeLimiter(max) {
  let used = 0;
  return function () {
    if (used >= max) {
      return false;
    }
    used = used + 1;
    return true;
  };
}
const tryLogin = makeLimiter(3);

De eerste drie aanroepen geven true terug en verhogen used. De vierde geeft false terug vóór de verhoging. used is lokaal voor de fabrieksaanroep, dus code daarbuiten kan de variabele niet via die naam terugzetten. De teruggegeven functie bepaalt welke wijzigingen mogelijk zijn. Een andere begrenzer zou een eigen variabele used en een eigen maximum hebben.

Onderzoek functies die in lussen zijn gemaakt

const fns = [];
for (var i = 0; i < 3; i++) {
  fns.push(() => i);
}

De lus maakt drie functies maar slechts één var i. Na de lus bevat die variabele 3. Als je nu een van de opgeslagen functies aanroept, geeft die 3 terug omdat elke closure dezelfde huidige binding leest. Een functie maken evalueert haar functielichaam niet en legt de huidige i niet als momentopname vast.

Als je de kop verandert in let i = 0, krijgt de lus voor elke iteratie een afzonderlijke binding. De opgeslagen functies geven dan 0, 1 en 2 terug. Hetzelfde verschil verklaart uitgesteld tonen: een setTimeout-callback die na de lus var i leest, ziet de eindwaarde, terwijl de versie met let de waarde van elke iteratie behoudt.

Herken een direct aangeroepen expressie

Oudere code maakt vaak een privéfunctiebereik en voert de functie direct uit:

(function () {
  var hidden = 1;
  console.log(hidden);
})();

Dit is een direct aangeroepen functie-expressie, of IIFE. De buitenste ronde haakjes maken er een functie-expressie van; de laatste ronde haakjes roepen die aan. hidden hoort bij die functie en blijft daardoor buiten het omringende globale bereik. Het is een veelvoorkomend patroon in code van vóór declaraties met blokbereik en modules.

Behoud van toegang heeft ook invloed op het geheugen. Een aanroepbare closure die een grote array nodig heeft, houdt die gegevens bereikbaar. Wanneer de functie en de vastgelegde gegevens niet meer bereikbaar zijn, kunnen ze worden vrijgegeven. Sla lang bestaande closures bewust op wanneer hun geheugengebruik deel uitmaakt van de taak.

Een callback is een functie die als argument wordt meegegeven zodat een andere functie die kan aanroepen. Zo kan de ontvangende functie de volledige taak afhandelen terwijl de aanroeper een specifieke handeling of test levert.

Geef een handeling door aan een lus

function repeat(times, action) {
  for (let i = 0; i < times; i++) {
    action(i);
  }
}
repeat(3, (i) => console.log(i));

repeat beheert de lus en kiest de waarden 0, 1 en 2. De pijlfunctie bepaalt wat er met elke waarde gebeurt: die wordt getoond. Elke action(i) roept de meegegeven functie aan met het nummer van die iteratie.

Je kunt een bestaande functie doorgeven of er direct op die plek een schrijven. repeat(2, sayHi) geeft de benoemde functie door. repeat(2, (i) => console.log("Round " + (i + 1))) toont “Round 1” en “Round 2”. Een callback mag argumenten negeren die niet nodig zijn.

Geef de waarde door, roep de functie niet te vroeg aan

repeat(3, sayHi()) evalueert sayHi() tijdens het voorbereiden van de argumenten. Als sayHi alleen iets toont, is de retourwaarde undefined, dus ontvangt repeat die waarde als action. De latere action(i) mislukt met een TypeError omdat undefined niet aanroepbaar is.

Gebruik repeat(3, sayHi) om de functie door te geven. Als de uiteindelijke aanroep gekozen argumenten nodig heeft, geef dan een omhullende functie door zoals () => sayHi(), zodat de aanroep binnen het functielichaam van de callback plaatsvindt. Een functie maken en een functie aanroepen zijn afzonderlijke stappen.

Controleer welke argumenten de ontvanger levert

Arraycallbacks ontvangen vaak meer dan één argument: het element, de index en de hele array. Een bestaande functie doorgeven is alleen veilig wanneer die invoer past bij de betekenis van haar parameters.

["1", "2", "3"].map(parseInt);

Dit geeft [1, NaN, NaN] terug. parseInt accepteert een tweede argument voor het grondtal, dus verandert de array-index het gedrag. Gebruik ["1", "2", "3"].map((s) => parseInt(s, 10)) om grondtal 10 expliciet te kiezen, of .map(Number) om deze strings te converteren.

Geef een antwoord terug aan de ontvanger

function countIf(arr, test) {
  let n = 0;
  for (const x of arr) {
    if (test(x)) {
      n++;
    }
  }
  return n;
}

countIf([3, 8, 12, 5], (x) => x > 4) geeft 3 terug. De callback beantwoordt voor elk item een vraag; countIf gebruikt elk antwoord om te bepalen of de teller wordt verhoogd. Vergelijk dit met repeat, waarvan de lus de retourwaarde van de callback negeert. De code of documentatie van de ontvangende functie vertelt je zowel welke argumenten worden doorgegeven als wat de rol van het resultaat is.

Callbacks kunnen direct of later worden uitgevoerd. repeat en arraymethoden roepen ze synchroon aan voordat ze terugkeren. setTimeout(sayHi, 2000) plant er een voor later, terwijl de daaropvolgende code direct doorgaat. De term callback beschrijft hoe een functie wordt meegegeven, niet wanneer die moet worden uitgevoerd.

Een hogere-ordefunctie accepteert een functie, geeft een functie terug of doet beide. De functiewaarde levert gedrag, terwijl de hogere-ordefunctie een herbruikbaar patroon beheert.

Schrijf het patroon één keer

function myMap(arr, transform) {
  const result = [];
  for (const item of arr) {
    result.push(transform(item));
  }
  return result;
}

myMap([1, 2, 3], (n) => n * n) geeft [1, 4, 9] terug. De lus en de opbouw van de uitvoerarray blijven hetzelfde; de callback bepaalt hoe elk item verandert. Een bijpassend filter voegt een item alleen toe wanneer test(item) truthy is. Met [4, 7, 10, 3] en (n) => n % 2 === 0 behoudt dat patroon [4, 10].

Kies de afspraken voor de callback die je nodig hebt

map, filter en find wijzigen zelf de invoerarray niet, maar callbacks kunnen die nog steeds veranderen. Als een methode een nieuwe array teruggeeft, maakt dat niet elke meegegeven callback zuiver.

Geef een resultaat door tijdens een reductie

[5, 10, 15].reduce((total, n) => total + n, 0);

De beginwaarde van de accumulator is 0. De callback geeft 5 terug voor het eerste item, 15 voor het tweede en 30 voor het derde. Elke retourwaarde wordt de total van de volgende aanroep. De methode geeft na het laatste item 30 terug. Bij een lege array zonder beginwaarde voor de accumulator veroorzaakt reduce een TypeError; een expliciete beginwaarde bepaalt ook het bruikbare resultaat voor lege invoer.

Omdat methoden arrays teruggeven, kun je ze aaneenschakelen. [3, 8, 12, 5].filter((n) => n > 4).map((n) => n * 2) behoudt eerst [8, 12, 5] en transformeert dat daarna in [16, 24, 10]. Lees de keten van links naar rechts in de uitvoeringsvolgorde.

Geef een numerieke sorteerregel op

Zonder vergelijkingsfunctie vergelijkt sort items als strings. [10, 9, 1].sort() levert daarom [1, 10, 9] op. Gebruik voor oplopende numerieke volgorde .sort((a, b) => a - b). Een negatieve retourwaarde zet a eerst, een positieve zet b eerst en nul maakt het paar gelijkwaardig voor de ordening. Anders dan map en filter verandert sort de volgorde in de invoerarray.

Controleer de retourwaarden

[1, 2, 3].map((n) => { n * 2; }) levert [undefined, undefined, undefined] op omdat het blok geen return heeft. Als je forEach gebruikt om via een toewijzing een nieuw resultaat op te bouwen, gaat dat ook mis wanneer je verwacht dat de methode zelf een array teruggeeft. Kies map voor transformatie en forEach voor handelingen waarvan de verzamelde uitvoer niet nodig is.

Een hogere-ordemethode maakt een bekend patroon duidelijk. Een gewone lus blijft nuttig wanneer het werk break nodig heeft of niet past bij de afspraken van de methode.

Een functie kan een nieuwe functie teruggeven die een bestaande functie onthoudt. Omhullende functies, functiecompositie en partiële toepassing gebruiken dit patroon om gedrag aan te passen zonder het functielichaam van de oorspronkelijke functie te kopiëren.

Omhul een aanroep en behoud het resultaat

function logged(fn) {
  return (...args) => {
    console.log("Calling with", args);
    const result = fn(...args);
    console.log("Result", result);
    return result;
  };
}
const add = (a, b) => a + b;

logged(add) maakt een functie die add als fn behoudt. De aanroep logged(add)(2, 3) verzamelt de argumenten, geeft ze door aan add, toont de teruggegeven waarde en geeft 5 terug. Rest verzamelt de invoer van de omhullende functie; spread geeft die door. De laatste return houdt de uitvoer beschikbaar voor latere berekeningen.

logged(add(2, 3)) geeft daarentegen het getal 5 door. Als je die omhullende functie later aanroept, probeert die 5 aan te roepen en krijg je een TypeError. Er zijn twee stappen: stel de omhullende functie in met een functie en roep daarna de teruggegeven functie aan met invoer.

Behoud toestand rond een bewerking

function once(fn) {
  let done = false;
  let result;
  return (...args) => {
    if (!done) {
      done = true;
      result = fn(...args);
    }
    return result;
  };
}

Voor een bewerking die normaal terugkeert, voert de eerste aanroep fn uit en slaat het resultaat op. Latere aanroepen geven die opgeslagen waarde terug zonder fn opnieuw uit te voeren, zelfs als hun argumenten verschillen. De booleaanse waarde houdt bij of de bewerking is uitgevoerd; controleren of het resultaat truthy is, zou verkeerd zijn wanneer een geldig resultaat 0 of false is. Elke aanroep van once maakt een eigen vlag en opgeslagen resultaat.

Geef een resultaat door aan een andere functie

const compose = (f, g) => (x) => f(g(x));
const addOne = (n) => n + 1;
const square = (n) => n * n;

compose(square, addOne)(3) voert eerst addOne(3) uit en kwadrateert daarna 4 om 16 terug te geven. compose(addOne, square)(3) kwadrateert eerst 3 en telt er daarna 1 bij op, wat 10 teruggeeft. De functie die het dichtst bij de invoer staat, wordt eerst uitgevoerd, dus is de volgorde van de argumenten voor compose van belang.

Leg enkele argumenten vooraf vast

function partial(fn, ...fixed) {
  return (...rest) => fn(...fixed, ...rest);
}
const greetWith = (greeting, name) => greeting + ", " + name;
const hello = partial(greetWith, "Hello");

hello("Ana") roept greetWith("Hello", "Ana") aan en geeft “Hello, Ana” terug. Deze hulpfunctie voor partiële toepassing zet vaste argumenten eerst en latere argumenten daarna; als je die volgorde verandert, verandert de onderliggende aanroep.