Lezers zoals jij steunen MUO. Wanneer u een aankoop doet via links op onze site, kunnen we een aangesloten commissie verdienen. Lees verder.

Een functie is een herbruikbaar stuk code dat wordt uitgevoerd wanneer u het aanroept. Met functies kunt u code hergebruiken, waardoor deze meer modulair en eenvoudiger te onderhouden wordt.

Er zijn verschillende manieren om functies in JavaScript te maken. Hier leert u de verschillende manieren om functies te creëren en hoe u deze kunt gebruiken.

Functieverklaringen: de ongecompliceerde manier

Een manier waarop u functies in JavaScript kunt maken, is door middel van functiedeclaraties. Een functiedeclaratie is een functie in JavaScript die de onderstaande syntaxis volgt.

functiefunctieNaam(parameters) {
// code komt hier...
opbrengst"Dit is een functiedeclaratie";
}

De componenten van het bovenstaande codeblok omvatten:

  • De functie trefwoord: Dit trefwoord declareert een functie.
  • functieNaam: Dit is de naam van de functie. In de praktijk moet het zo beschrijvend en zinvol mogelijk zijn en aangeven wat de functie doet.
  • parameters: Dit vertegenwoordigt de functieparameters. Parameters zijn een optionele lijst met variabelen die u kunt doorgeven aan een functie wanneer u deze aanroept.
  • De hoofdtekst van de functie: deze bevat de code die de functie uitvoert wanneer u deze aanroept. Het is omgeven door accolades {} en kan elke geldige JavaScript-code bevatten.
  • De opbrengst instructie: Deze instructie stopt de uitvoering van een functie en retourneert de opgegeven waarde. In het bovenstaande geval zou het aanroepen van de functie de tekenreeks "Dit is een functiedeclaratie" retourneren.

De onderstaande functiedeclaratie neemt bijvoorbeeld drie getallen als parameters en retourneert hun som.

functieaddThreeNumbers(een, b, c) {
opbrengst een + b + c;
}

Om een ​​functiedeclaratie in JavaScript aan te roepen, schrijft u de functienaam gevolgd door een aantal haakjes (). Als de functie parameters heeft, geef deze dan door als argumenten tussen haakjes.

Bijvoorbeeld:

voegDrieCijfers toe(1, 2, 3) // 6

Het bovenstaande codeblok roept de addThreeNumber functies en geeft 1, 2 en 3 door als argumenten aan de functie. Als u deze code uitvoert, wordt de waarde 6 geretourneerd.

JavaScript-takels functiedeclaraties, wat betekent dat u ze kunt aanroepen voordat u ze definieert.

Bijvoorbeeld:

isGehesen(); // Functie is gehesen
functieis gehesen() {
troosten.log("Functie is gehesen");
opbrengstWAAR;
}

Zoals weergegeven in het codeblok hierboven, bellen is gehesen voordat het werd gedefinieerd, zou er geen fout optreden.

Functie-uitdrukkingen: functies als waarden

In JavaScript kunt u een functie definiëren als een uitdrukking. Vervolgens kunt u de functiewaarde toewijzen aan een variabele of deze gebruiken als argument voor een andere functie.

Ze staan ​​ook bekend als anonieme functies omdat ze geen naam hebben en je ze alleen kunt aanroepen vanuit de variabele waaraan je ze hebt toegewezen.

Hieronder staat de syntaxis voor een functie-uitdrukking:

const functieNaam = functie () {
opbrengst"Functie-uitdrukking";
};

Om een ​​functie-uitdrukking in JavaScript aan te roepen, schrijft u de naam van de variabele die u aan de functie hebt toegewezen, gevolgd door een aantal haakjes (). Als de functie parameters heeft, geef deze dan door als argumenten tussen haakjes.

Bijvoorbeeld:

functieNaam(); // Functie-expressie

Functie-expressies zijn handig bij het maken van functies die in andere functies worden uitgevoerd. Typische voorbeelden zijn event handlers en hun callbacks.

Bijvoorbeeld:

knop.addEventListener("Klik", functie (evenement) {
troosten.log("Je hebt op een knop geklikt!");
});

In het bovenstaande voorbeeld werd een functie-uitdrukking gebruikt waaraan an moet doorgegeven worden evenement argument als een callback naar de addEventListener functie. U hoeft de functie niet expliciet aan te roepen wanneer u een functie-expressie als callback gebruikt. Het wordt automatisch aangeroepen door de bovenliggende functie.

In het bovenstaande geval, wanneer de gebeurtenislistener een Klik event, roept het de callback-functie aan en geeft het de evenement bezwaar als argument.

In tegenstelling tot functiedeclaraties worden functie-uitdrukkingen niet gehesen, dus u kunt ze niet aanroepen voordat u ze definieert. Als u probeert toegang te krijgen tot een functie-uitdrukking voordat u deze definieert, resulteert dit in een Referentiefout.

Bijvoorbeeld:

isGehesen(); // ReferenceError: Geen toegang tot 'isHoisted' vóór initialisatie
const isGehesen = functie () {
troosten.log("Functie is gehesen");
};

Pijlfuncties: compact en beperkt

ES6 introduceerde een afkorting voor het schrijven van anonieme functies in JavaScript, genaamd pijlfuncties. Ze hebben een beknopte syntaxis die uw code leesbaarder kan maken, vooral als het gaat om korte functies van één regel.

In tegenstelling tot andere methoden voor het maken van functies, hebben pijlfuncties de functie trefwoord. Een pijlfunctie-uitdrukking bestaat uit drie delen:

  • Een paar haakjes (()) met daarin de parameters. U kunt de haakjes weglaten als de functie slechts één parameter heeft.
  • Een pijl (=>), dat bestaat uit een gelijkteken (=) en een groter dan-teken (>).
  • Een paar accolades die de functie body bevatten. U kunt de accolades weglaten als de functie uit één uitdrukking bestaat.

Bijvoorbeeld:

// Enkele parameter, impliciet rendement
const functieNaam = parameter =>troosten.log("Enkele parameterpijlfunctie")
// Meerdere parameters, expliciete terugkeer
const functieNaam = (parameter_1, parameter_2) => {
opbrengst"Pijlfunctie met meerdere parameters"
};

Wanneer u de accolades weglaat, retourneert de pijlfunctie impliciet de enkele uitdrukking, dus de opbrengst trefwoord. Aan de andere kant, als u de accolades niet weglaat, moet u expliciet een waarde retourneren met behulp van de opbrengst trefwoord.

Pijlfuncties hebben ook een andere dit bindend in vergelijking met reguliere functies. In reguliere functies is de waarde van dit ligt eraan hoe je de functie aanroept. In een pijlfunctie, dit is altijd gebonden aan de dit waarde van de omgeving.

Bijvoorbeeld:

const foe = {
 naam: "Dave",
 begroeten: functie () {
 setTimeout(() => {
troosten.log('Hallo, mijn naam is ${dit.naam}`);
 }, 1000);
 },
};
foo.greet(); // Logt "Hallo, mijn naam is Dave" na 1 seconde

In het bovenstaande voorbeeld is de pijlfunctie binnen de begroeten methode toegang heeft tot deze naam, hoewel de setTimeout functie noemt het. Een normale functie zou zijn dit gebonden aan het globale object.

Zoals de naam al aangeeft, is een functie die onmiddellijk wordt aangeroepen (IIFE) een functie die wordt uitgevoerd zodra deze is gedefinieerd.

Dit is de structuur van een IIFE:

(functie () {
// hier coderen
})();
(() => {
// hier coderen
})();
(functie (param_1, param_2) {
troosten.log (param_1 * param_2);
})(2, 3);

Een IIFE bestaat uit een functie-uitdrukking die tussen haakjes staat. Volg het met een paar haakjes buiten de behuizing om de functie aan te roepen.

U kunt IIFE's gebruiken om scopes te maken, implementatiedetails te verbergen en gegevens tussen meerdere scripts te delen. Ze werden ooit gebruikt als een modulesysteem in JavaScript.

Een functie op veel verschillende manieren maken

Het is cruciaal om te begrijpen hoe u functies in JavaScript kunt maken. Dit geldt voor een basisfunctie die een eenvoudige berekening uitvoert of een geavanceerde functie die interageert met andere delen van uw code.

U kunt de hierboven besproken technieken gebruiken om functies in JavaScript te bouwen en uw code te structureren en te organiseren. Selecteer de aanpak die het beste bij uw eisen past, want elk heeft verschillende voordelen en toepassingen.