JavaScript Definiëren & Functies Aanroepen met Voorbeeld

Door: James Hartman James Hartman
Hours Bijgewerkt

⚡ Slimme samenvatting

JavaScriptfuncties groeperen herbruikbare codeblokken die alleen worden uitgevoerd wanneer ze worden aangeroepen. Deze handleiding laat zien hoe je een scriptfunctie declareert, argumenten eraan doorgeeft en een waarde teruggeeft aan de aanroeper.

  • 🔘 Syntax: Elke klassieke functie wordt gedefinieerd door het trefwoord `function`, een naam, haakjes en accolades.
  • ☑️ Roeping: Code Een codefragment binnen een functie wordt alleen uitgevoerd wanneer de functienaam tussen haakjes wordt aangeroepen.
  • ✅ Argumenten: Waarden tussen haakjes geven gegevens van de aanroeper door aan de functie.
  • 🧪 Keer terug: Het sleutelwoord `return` stuurt een waarde terug naar de aanroeper en stopt de uitvoering op dat punt.
  • ️ varianten: Declaraties, expressies, pijlfuncties, IIFE's en callbacks zijn elk geschikt voor een andere situatie.
  • 📊 Domein: Functiedeclaraties worden gehoist, terwijl functie-expressies en pijlfuncties dat niet worden.
Meer informatie

JavaScript definiëren en functies aanroepen

Wat is functie in JavaScript?

Functies zijn erg belangrijk en nuttig in elke programmeertaal, omdat ze code herbruikbaar maken. Een functie is een blok code dat alleen wordt uitgevoerd als het wordt aangeroepen. Als je een paar regels code hebt die je meerdere keren moet gebruiken, kun je een functie maken die de herhalende regels code bevat en die functie vervolgens aanroepen waar je maar wilt.

Niets binnen de accolades wordt zelfstandig uitgevoerd. De browser slaat het codeblok op onder de naam die je eraan hebt gegeven, en de code wordt alleen uitgevoerd wanneer die naam tussen haakjes staat, zoals: myFunction()Functies staan ​​daarom centraal in alles. JavaScript programma, ongeacht of het script bestaat binnen de pagina of in een extern bestand.

Hoe u een functie kunt maken in JavaScript

  1. Gebruik het trefwoord functie gevolgd door de naam van de functie.
  2. Open en sluit haakjes na de functienaam.
  3. Open en sluit accolades na haakjes.
  4. Schrijf tussen accolades uw coderegels.

Syntax:

function functionname()
{

  lines of code to be executed

}

Het onderstaande voorbeeld definieert myFunction() en roept het vervolgens op de volgende regel aan, zodat het bericht verschijnt zodra de pagina geladen is. Probeer het zelf:

<html>
<head>
	<title>Functions!!!</title>
	<script type="text/javascript">
      function myFunction()
      {
      	document.write("This is a simple function.<br />");
      }
		myFunction();
	</script>
</head>
<body>
</body>
</html>

Functie met argumenten

Je kunt ook functies met argumenten maken. Argumenten moeten tussen haakjes worden geplaatst.

Syntax:

function functionname(arg1, arg2)

{

  lines of code to be executed

}

Hier countVowels() De functie ontvangt de naam die de bezoeker in het invoerveld typt, doorloopt elk teken en rapporteert hoeveel klinkers de naam bevat. Probeer het zelf:

<html>
<head>
	<script type="text/javascript">
		var count = 0;
		function countVowels(name)
		{
			for (var i=0;i<name.length;i++)
			{
              if(name[i] == "a" || name[i] == "e" || name[i] == "i" || name[i] == "o" || name[i] == "u")
              count = count + 1;
			}
		document.write("Hello " + name + "!!! Your name has " + count + " vowels.");
		}
   	 	var myName = prompt("Please enter your name");
    	countVowels(myName);
	</script>
</head>
<body>
</body>
</html>

JavaScript retourwaarde

U kunt ook JS-functies maken die waarden retourneren. Binnen de functie moet u het trefwoord gebruiken terugkeer gevolgd door de waarde die moet worden geretourneerd.

Syntax:

function functionname(arg1, arg2)

{

  lines of code to be executed

  return val1;

}

In dit laatste voorbeeld returnSum() Geeft het totaal terug aan de regel die de functie heeft aangeroepen, zodat het resultaat in een zin kan worden opgenomen in plaats van binnen de functie te worden afgedrukt. Probeer het zelf:

<html>
<head>
	<script type="text/javascript">
		function returnSum(first, second)
        {
          var sum = first + second;
          return sum;
        }
      var firstNo = 78;
      var secondNo = 22;
      document.write(firstNo + " + " + secondNo + " = " + returnSum(firstNo,secondNo));
	</script>
</head>
<body>
</body>
</html>

GERELATEERDE ARTIKELEN

Soorten functies in JavaScript

De drie bovenstaande voorbeelden gebruiken allemaal de klassieke functiedeclaratie, maar dan modern. JavaScript biedt verschillende andere vormen aan. Deze verschillen voornamelijk in de vraag of de motor ze hijst en in de manier waarop elke vorm ermee omgaat. this trefwoord.

Functietype Typische syntaxis Wanneer het gebruikt wordt
Functiedeclaratie functie begroeten() { } Benoemde, herbruikbare logica; naar de top van het bereik gebracht.
Functie-uitdrukking const greet = function () { }; Een functie opslaan in een variabele; niet gehoist.
Pijlfunctie (ES6) const greet = () => { }; Korte callbacks; erft dit over van de omringende scope.
Anonieme functie setTimeout(function () { }, 100); Eenmalige logica wordt direct doorgegeven aan een andere functie.
IIFE (functie () { })(); Wordt direct uitgevoerd en houdt zijn variabelen privé.
Terugbellen items.forEach(showItem); Een functie die aan een andere functie wordt doorgegeven en later wordt aangeroepen.

Opmerking bij de bovenstaande voorbeelden: de historische voorbeelden gebruiken var en document.write(), en beide werken nog steeds in elke browser. De huidige praktijk declareert variabelen met let or const en print de uitvoer via console.log() of door in te stellen textContent op een element, omdat document.write() Verwijdert een pagina die al volledig geladen is. type="text/javascript" Het attribuut is ook optioneel in HTML5.

Functieparameters, argumenten en standaardwaarden

Parameters zijn de plaatsaanduidingen die in de definitie worden vermeld, terwijl argumenten de werkelijke waarden zijn die worden doorgegeven wanneer de functie wordt aangeroepen. countVowels(name) bovenstaande, name is de parameter en de tekst die in de prompt wordt getypt, is het argument.

function greet(user, greeting = "Hello")
{
  return greeting + ", " + user;
}

greet("Ann");
greet("Ann", "Welcome");
  • Een parameter zonder overeenkomend argument wordt undefined tenzij een standaardwaarde is opgegeven, zoals greeting is hier.
  • Extra argumenten worden genegeerd door de parameterlijst, maar blijven bereikbaar via de arguments object binnen een functie die geen pijlfunctie is.
  • Een restparameter geschreven als ...values bundelt alle resterende argumenten tot een echt geheel reeks.

Functiebereik en hoisting in JavaScript

De plaats waar een functie wordt geschreven, bepaalt wat de functie kan zien en wanneer deze kan worden aangeroepen. Twee regels verklaren bijna elke verrassing waar beginners tegenaan lopen.

  • Hijsen: Functiedeclaraties worden naar de bovenkant van hun bereik verplaatst voordat het script wordt uitgevoerd, zodat ze mogelijk op een regel boven hun definitie worden aangeroepen. Functie-uitdrukkingen en pijlfuncties worden niet naar boven verplaatst en genereren een foutmelding als ze te vroeg worden aangeroepen.
  • Domein: variabelen die zijn gedeclareerd met var Binnen een functie zijn zichtbaar gedurende de hele functie, terwijl let en const zijn beperkt tot het blok waarin ze zich bevinden. Alles wat buiten een functie wordt gedeclareerd, is globaal.

De klinkerteller laat dit in de praktijk zien. count De variabele wordt buiten de functie gedeclareerd, dus het aanroepen ervan... countVowels() Als de teller een tweede keer op dezelfde pagina wordt gezet, wordt het totaalbedrag bij het vorige opgeteld in plaats van opnieuw bij nul te beginnen. Door de declaratie binnen de functie te plaatsen, zou deze bij elke aanroep gereset worden.

Deze scoresping Deze regels gelden ook voor servercode, vandaar dat dezelfde redenering van toepassing is bij het schrijven van functies voor Node.jsen waarom functioneel gedrag zo vaak voorkomt in JavaStel interviewvragen op..

Veelgestelde vragen

De functie wordt nog steeds uitgevoerd, maar geeft een resultaat terug. undefinedDoor die oproep aan een variabele toe te wijzen, wordt deze opgeslagen. undefinedDaarom gebruikt het somvoorbeeld een return-statement in plaats van het totaal direct in de functiebody af te drukken.

AI-assistenten kunnen een functiebody suggereren op basis van een opmerking, een onbekende callback regel voor regel uitleggen en testinvoer voorstellen. Voer de suggestie altijd uit, want gegenereerde code kan stilzwijgend een variabele of browser-API aannemen die de pagina niet biedt.

Meestal wel. GitHub-copiloot Voltooit de pijlsyntaxis en veelvoorkomende callbackpatronen vanuit de context. Controleer de waarde van this Dit komt doordat een pijlfunctie deze eigenschap overneemt, terwijl een klassieke functie-expressie dat niet doet.

Een closure is een functie die is gebundeld met de externe variabelen waarnaar deze verwees toen deze werd aangemaakt. De interne functie blijft deze variabelen lezen, zelfs nadat de externe functie klaar is. Zo worden private tellers en factory-functies geconstrueerd.

Ja, en dat noemen we recursie. De functie moet een basisgeval bevatten dat de keten beëindigt, anders geeft de browser een bereikfout zodra de aanroepstack is uitgeput. Recursie is geschikt voor boomstructuren en problemen in de stijl van faculteitsberekeningen.

Een asynchrone functie retourneert altijd een promise. Binnen de functie zorgt `await` ervoor dat de functie gepauzeerd wordt totdat de gewachte promise is afgehandeld, waardoor asynchrone code van boven naar beneden kan worden gelezen. De rest van de pagina blijft reageren terwijl de functie wacht.

Koppel er een gebeurtenislistener aan: selecteer de knop en roep vervolgens `addEventListener` aan met de gebeurtenisnaam en de functiereferentie. Het oudere inline `onclick`-attribuut werkt ook, hoewel het scheiden van de markup en het gedrag nu de voorkeur heeft.

Haakjes roepen de functie direct aan en produceren het resultaat. Het schrijven van alleen de naam geeft de functie zelf door, wat nodig is voor callbacks. Het per ongeluk toevoegen van haakjes binnen `setTimeout` zorgt ervoor dat de code direct wordt uitgevoerd in plaats van later.

Vat dit bericht samen met: