Functies definiëren in JavaScript

Inleiding

een functie is een blok code dat een actie uitvoert of een waarde retourneert. Functies zijn aangepaste code gedefinieerd door programmeurs die herbruikbaar zijn, en kunnen daarom uw programma ‘ s modulair en efficiënter maken.

in deze tutorial zullen we verschillende manieren leren om een functie te definiëren, een functie aan te roepen en functieparameters te gebruiken in JavaScript.

een functie definiëren

functies worden gedefinieerd of gedeclareerd met het function sleutelwoord. Hieronder staat de syntaxis voor een functie in JavaScript.,

function nameOfFunction() { // Code to be executed}

de declaratie begint met het function sleutelwoord, gevolgd door de naam van de functie. Functienamen volgen dezelfde regels als variabelen – ze kunnen letters, cijfers, underscores en dollartekens bevatten, en worden vaak geschreven in camel geval. De naam wordt gevolgd door een reeks haakjes, die kunnen worden gebruikt voor optionele parameters. De code van de functie staat tussen accolades, net als een for statement of een if statement.,

in ons eerste voorbeeld maken we een functie-declaratie om een begroetingscommando naar de console af te drukken.

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}

Hier hebben we de code om Hello, World! af te drukken naar de console in de greet() functie. Er zal echter niets gebeuren en er zal geen code worden uitgevoerd totdat we de functie aanroepen of aanroepen. U kunt een functie aanroepen door de naam van de functie te schrijven, gevolgd door de haakjes.

// Invoke the functiongreet();

nu zullen we die samenvoegen, onze functie definiëren en aanroepen.

greet.,js

// Initialize greeting functionfunction greet() { console.log("Hello, World!");}// Invoke the functiongreet();

met de aanroep voor greet();, zal de functie draaien en zullen we de Hello, World! als uitvoer van het programma ontvangen.

Output
Hello, World!

nu hebben we onze greet() code in een functie, en kunnen deze zo vaak hergebruiken als we willen.

met behulp van parameters kunnen we de code dynamischer maken.

functieparameters

in ons greet.js bestand, hebben we een basisfunctie gemaakt die Hello, World naar de console afdrukt., Met behulp van parameters kunnen we extra functionaliteit toevoegen die de code flexibeler maakt. Parameters zijn invoer die worden doorgegeven aan functies als namen en zich gedragen als lokale variabelen.

wanneer een gebruiker inlogt bij een toepassing, willen we misschien dat het programma ze bij naam begroet, in plaats van alleen maar te zeggen: “Hallo, wereld!”.

we voegen een parameter toe aan onze functie, genaamd name, om de naam van de persoon die wordt begroet weer te geven.,

// Initialize custom greeting functionfunction greet(name) { console.log(`Hello, ${name}!`);}

de naam van de functie is greet, en nu hebben we een enkele parameter binnen de haakjes. De naam van de parameter volgt dezelfde regels als het benoemen van een variabele. Binnen de functie, in plaats van een statische tekenreeks bestaande uit Hello, World, hebben we een sjabloon letterlijke tekenreeks die onze parameter bevat, die zich nu gedraagt als een lokale variabele.

u zult merken dat we onze name parameter nergens hebben gedefinieerd. We kennen het een waarde toe wanneer we onze functie aanroepen., Ervan uitgaande dat onze gebruiker Sammy heet, roepen we de functie aan en plaatsen we de gebruikersnaam als argument. Het argument is de werkelijke waarde die in de functie wordt doorgegeven, in dit geval is het de string "Sammy".

// Invoke greet function with "Sammy" as the argumentgreet("Sammy");

de waarde van "Sammy" wordt doorgegeven aan de functie via de parameter name. Elke keer dat name door de hele functie wordt gebruikt, zal het de waarde "Sammy" vertegenwoordigen. Hier is de hele code.

greetSammy.,js

wanneer we het programma hierboven uitvoeren, zullen we de volgende uitvoer ontvangen.

Output
Hello, Sammy!

nu hebben we een voorbeeld van hoe een functie kan worden hergebruikt. In een echte wereld voorbeeld, zou de functie de gebruikersnaam uit een database halen in plaats van de naam direct als argument waarde te geven.

naast parameters kunnen variabelen binnen functies worden gedeclareerd. Deze variabelen staan bekend als lokale variabelen, en zullen alleen bestaan binnen het bereik van hun eigen functieblok., Variabele scope bepaalt de toegankelijkheid van variabelen; variabelen die binnen een functie zijn gedefinieerd, zijn niet toegankelijk van buiten de functie, maar ze kunnen net zo vaak worden gebruikt als hun functie in een programma wordt gebruikt.

terugkerende waarden

meer dan één parameter kan in een functie worden gebruikt. We kunnen meerdere waarden doorgeven aan een functie en een waarde retourneren. We zullen een functie aanmaken om de som van twee waarden te vinden, vertegenwoordigd door x en y.

Som.,js

// Initialize add functionfunction add(x, y) { return x + y;}// Invoke function to find the sumadd(9, 7);

in het programma hierboven hebben we een functie gedefinieerd met de parameters x en y, en gaven vervolgens de waarden van 9 en 7 naar de functie. Als we het programma uitvoeren, ontvangen we de som van die getallen als de output.

Output
16

in dit geval, met 9 en 7 doorgegeven aan de sum() functie, gaf het programma 16.,

wanneer het return sleutelwoord wordt gebruikt, stopt de functie Met uitvoeren en wordt de waarde van de expressie geretourneerd. Hoewel in dit geval de browser de waarde in de console zal tonen, is het niet hetzelfde als het gebruik van console.log() om naar de console af te drukken. Het aanroepen van de functie zal de waarde precies uitvoeren waar de functie werd aangeroepen. Deze waarde kan onmiddellijk worden gebruikt of in een variabele worden geplaatst.

functie-expressies

In de laatste sectie gebruikten we een functiedeclaratie om de som van twee getallen te krijgen en die waarde te retourneren., We kunnen ook een functieuitdrukking maken door een functie toe te wijzen aan een variabele.

gebruikmakend van ons zelfde add functievoorbeeld, kunnen we de geretourneerde waarde direct toepassen op een variabele, in dit geval sum.

functieexpressie.js

// Assign add function to sum constantconst sum = function add(x, y) { return x + y;}// Invoke function to find the sumsum(20, 5);

Output
25

nu is de sum constante een functie. We kunnen deze uitdrukking beknopter maken door er een anonieme functie van te maken, wat een naamloze functie is., Momenteel heeft onze functie de naam add, maar met functie-expressies is het niet nodig om de functie een naam te geven en de naam wordt meestal weggelaten.

anonieme expressie.js

// Assign function to sum constantconst sum = function(x, y) { return x + y;}// Invoke function to find the sumsum(100, 3);

Output
103

in dit voorbeeld hebben we de naam van de functie verwijderd, die add was, en het omgezet in een anonieme functie. Een benoemde functieuitdrukking kan worden gebruikt om te helpen bij het debuggen, maar het wordt meestal weggelaten.,

Arrow Functions

tot nu toe hebben we uitgelegd hoe je functies kunt definiëren met behulp van het sleutelwoord function. Er is echter een nieuwere, meer beknopte methode om een functie te definiëren die bekend staat als arrow function expressions vanaf ECMAScript 6. Pijlfuncties, zoals ze algemeen bekend zijn, worden weergegeven door een gelijk-teken gevolgd door een groter dan-teken: =>.

Pijlfuncties zijn altijd anonieme functies en een type functieuitdrukking. We kunnen een basisvoorbeeld maken om het product van twee getallen te vinden.

arrowfunctie.,js

// Define multiply functionconst multiply = (x, y) => { return x * y;}// Invoke function to find productmultiply(30, 4);

Output
120

in plaats van het sleutelwoord function uit te schrijven, gebruiken we de pijl => om een functie aan te geven. Anders, het werkt op dezelfde manier als een reguliere functie expressie, met een aantal geavanceerde verschillen die u kunt lezen over onder pijl functies op de Mozilla Developer Network.

bij slechts één parameter kunnen de haakjes worden uitgesloten. In dit voorbeeld squaring we x, wat slechts één getal als argument vereist., De haakjes zijn weggelaten.

// Define square functionconst square = x => { return x * x;}// Invoke function to find productsquare(8);

Output
64

Opmerking: Bij geen parameters is een lege verzameling haakjes () vereist in de pijlfuncties.

Met deze specifieke voorbeelden die alleen bestaan uit een return statement, kunnen pijlfuncties de syntaxis nog verder verminderen. Als de functie slechts een enkele regel return is, kunnen zowel de accolades als de verklaring return worden weggelaten, zoals te zien is in het voorbeeld hieronder.,

// Define square functionconst square = x => x * x;// Invoke function to find productsquare(10);

Output
100

alle drie deze typen syntaxis resulteren in dezelfde uitvoer. Het is over het algemeen een kwestie van voorkeur of bedrijf codering normen om te beslissen hoe u uw eigen functies zal structureren.

conclusie

In deze tutorial hebben we functiedeclaraties en functie-expressies behandeld, waarden van functies geretourneerd, functiewaarden toegewezen aan variabelen en ES6 arrow-functies.

functies zijn blokken code die een waarde retourneren of een actie uitvoeren, waardoor programma ‘ s schaalbaar en modulair zijn.