So definieren Sie Funktionen in JavaScript

Einführung

Eine * Funktion * ist ein Codeblock, der eine Aktion ausführt oder einen Wert zurückgibt. Funktionen sind benutzerdefinierte Codes, die von Programmierern definiert werden und wiederverwendbar sind. Dadurch können Sie Ihre Programme modularer und effizienter gestalten.

In diesem Lernprogramm erfahren Sie, wie Sie eine Funktion definieren, eine Funktion aufrufen und Funktionsparameter in JavaScript verwenden.

Eine Funktion definieren

Funktionen werden mit dem Schlüsselwort + function + definiert oder deklariert. Nachfolgend finden Sie die Syntax für eine Funktion in JavaScript.

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

Die Deklaration beginnt mit dem Schlüsselwort "+ function +", gefolgt vom Namen der Funktion. Funktionsnamen folgen denselben Regeln wie Variablen - sie können Buchstaben, Zahlen, Unterstriche und Dollarzeichen enthalten und werden häufig in https://www.digitalocean.com/community/tutorials/understanding-syntax-and-code-structure- geschrieben. in-javascript # identifikatoren [camel case]. Auf den Namen folgt eine Reihe von Klammern, die für optionale Parameter verwendet werden können. Der Code der Funktion ist in geschweiften Klammern enthalten, genau wie eine for statement oder eine https: / /www.digitalocean.com/community/tutorials/how-to-write-conditional-statements-in-javascript[if statement].

In unserem ersten Beispiel erstellen wir eine * Funktionsdeklaration *, um eine Begrüßungsanweisung auf der Konsole auszudrucken.

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

Hier haben wir den Code, um "+ Hello, World! " Auf die Konsole zu drucken, die in der Funktion " greet () +" enthalten ist. Es wird jedoch nichts passieren und kein Code wird ausgeführt, bis wir * aufrufen * oder die Funktion aufrufen. Sie können eine Funktion aufrufen, indem Sie den Namen der Funktion gefolgt von den Klammern eingeben.

// Invoke the function
greet();

Jetzt werden wir diese zusammenfügen, unsere Funktion definieren und sie aufrufen.

greet.js

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

// Invoke the function
greet();

Mit dem Aufruf von "+ greet (); " wird die Funktion ausgeführt und wir erhalten das " Hello, World! +" Als Programmausgabe.

OutputHello, World!

Jetzt haben wir unseren "+ greet () +" - Code in einer Funktion enthalten und können ihn so oft wir wollen wiederverwenden.

Mit Hilfe von Parametern können wir den Code dynamischer gestalten.

Funktionsparameter

In unserer Datei "+ greet.js" haben wir eine Basisfunktion erstellt, die "+ Hello, World" auf der Konsole ausgibt. Mithilfe von Parametern können wir zusätzliche Funktionen hinzufügen, die den Code flexibler machen. * Parameter * sind Eingaben, die als Namen an Funktionen übergeben werden und sich wie lokale Variablen verhalten.

Wenn sich ein Benutzer bei einer Anwendung anmeldet, möchte das Programm ihn möglicherweise mit seinem Namen begrüßen, anstatt nur "Hallo, Welt!" Zu sagen.

Wir fügen unserer Funktion einen Parameter mit dem Namen "+ name +" hinzu, der den Namen der zu begrüßenden Person darstellt.

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

Der Name der Funktion ist "+ greet ", und jetzt haben wir einen einzelnen Parameter in den Klammern. Der Name des Parameters folgt den gleichen Regeln wie die Benennung einer Variablen. Innerhalb der Funktion haben wir anstelle einer statischen Zeichenfolge, die aus " Hello, World +" besteht, eine https://www.digitalocean.com/community/tutorials/how-to-work-with-strings-in-javascript# Variablen-in-Zeichenfolgen-mit-Vorlagen-Literalen [Vorlagen-Literal] Zeichenfolge, die unseren Parameter enthält, der sich jetzt als lokale Variable verhält.

Sie werden feststellen, dass wir unseren Parameter "+ name " nirgendwo definiert haben. Wir weisen ihm einen Wert zu, wenn wir unsere Funktion aufrufen. Angenommen, unser Benutzer heißt Sammy, rufen wir die Funktion auf und geben den Benutzernamen als * Argument * ein. Das Argument ist der tatsächliche Wert, der an die Funktion übergeben wird. In diesem Fall ist es die Zeichenfolge "" Sammy "+".

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

Der Wert von "" Sammy "" wird über den Parameter "+ name " an die Funktion übergeben. Jedes Mal, wenn " name " in der Funktion verwendet wird, wird der Wert "" Sammy "+" angezeigt. Hier ist der ganze Code.

greetSammy.js

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

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

Wenn wir das obige Programm ausführen, erhalten wir die folgende Ausgabe.

OutputHello, Sammy!

Jetzt haben wir ein Beispiel, wie eine Funktion wiederverwendet werden kann. In einem realen Beispiel würde die Funktion den Benutzernamen aus einer Datenbank abrufen, anstatt den Namen direkt als Argumentwert anzugeben.

Zusätzlich zu Parametern können Variablen innerhalb von Funktionen deklariert werden. Diese Variablen sind als * lokale Variablen * bekannt und existieren nur innerhalb des Bereichs ihres eigenen Funktionsblocks. Der Gültigkeitsbereich der Variablen bestimmt die Zugänglichkeit der Variablen. Variablen, die innerhalb einer Funktion definiert sind, sind von außerhalb der Funktion nicht zugänglich, können jedoch so oft verwendet werden, wie ihre Funktion in einem Programm verwendet wird.

Rückgabe von Werten

In einer Funktion kann mehr als ein Parameter verwendet werden. Wir können einer Funktion mehrere Werte übergeben und einen Wert zurückgeben. Wir werden eine Funktion erstellen, um die Summe zweier Werte zu finden, die durch "+ x " und " y +" dargestellt werden.

sum.js

// Initialize add function
function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
add(9, 7);

Im obigen Programm haben wir eine Funktion mit den Parametern "+ x " und " y " definiert und dann die Werte von " 9 " und " 7 +" an die Funktion übergeben. Wenn wir das Programm ausführen, erhalten wir die Summe dieser Zahlen als Ausgabe.

Output16

In diesem Fall gab das Programm mit + 9 + und + 7 +, die an die Funktion + sum () + übergeben wurden, + 16 + zurück.

Wenn das Schlüsselwort "+ return " verwendet wird, wird die Funktion nicht mehr ausgeführt und der Wert des Ausdrucks wird zurückgegeben. Obwohl in diesem Fall der Browser den Wert in der Konsole anzeigt, entspricht dies nicht der Verwendung von " console.log () +", um auf der Konsole zu drucken. Durch Aufrufen der Funktion wird der Wert genau dort ausgegeben, wo die Funktion aufgerufen wurde. Dieser Wert kann sofort verwendet oder in eine Variable eingefügt werden.

Funktionsausdrücke

Im letzten Abschnitt haben wir eine Funktionsdeklaration verwendet, um die Summe von zwei Zahlen zu erhalten und diesen Wert zurückzugeben. Sie können auch eine * https: //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function [Funktionsausdruck] * erstellen, indem Sie einer Variablen eine Funktion zuweisen.

Mit dem gleichen Funktionsbeispiel "+ add " können wir den zurückgegebenen Wert direkt auf eine Variable anwenden, in diesem Fall " sum +".

functionExpression.js

// Assign add function to sum constant
const sum = function add(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(20, 5);

Output25

Nun ist die + sum + Konstante eine Funktion. Wir können diesen Ausdruck prägnanter gestalten, indem wir ihn in eine * anonyme * Funktion umwandeln, bei der es sich um eine unbenannte Funktion handelt. Gegenwärtig hat unsere Funktion den Namen "+ add +", aber bei Funktionsausdrücken ist es nicht erforderlich, die Funktion zu benennen, und der Name wird normalerweise weggelassen.

anonymousExpression.js

// Assign function to sum constant
const sum = function(x, y) {
   return x + y;
}

// Invoke function to find the sum
sum(100, 3);

Output103

In diesem Beispiel haben wir den Namen der Funktion "+ add +" entfernt und in eine anonyme Funktion umgewandelt. Ein benannter Funktionsausdruck kann zum Debuggen verwendet werden, wird jedoch normalerweise weggelassen.

Pfeil-Funktionen

Bisher wurde beschrieben, wie Funktionen mit dem Schlüsselwort "+ function" definiert werden. Ab ECMAScript 6 gibt es jedoch eine neuere, präzisere Methode zum Definieren einer Funktion, die als * arrow function expressions * bezeichnet wird. Pfeilfunktionen, wie sie allgemein bekannt sind, werden durch ein Gleichheitszeichen gefolgt von einem Größer-als-Zeichen dargestellt: + ⇒ +.

Pfeilfunktionen sind immer anonyme Funktionen und eine Art Funktionsausdruck. Wir können ein einfaches Beispiel erstellen, um das Produkt aus zwei Zahlen zu finden.

arrow Funktion.js

// Define multiply function
const multiply = (x, y) => {
   return x * y;
}

// Invoke function to find product
multiply(30, 4);

Output120

Anstatt das Schlüsselwort "+ function" auszuschreiben, verwenden wir den Pfeil "+ ⇒ +", um eine Funktion anzugeben. Ansonsten funktioniert es ähnlich wie ein regulärer Funktionsausdruck, mit einigen erweiterten Unterschieden, die Sie unter Arrow Functions on nachlesen können das Mozilla Developer Network.

Bei nur einem Parameter können die Klammern ausgeschlossen werden. In diesem Beispiel wird "+ x +" quadriert, wobei nur eine Zahl als Argument übergeben werden muss. Die Klammern wurden weggelassen.

// Define square function
const square = x => {
   return x * x;
}

// Invoke function to find product
square(8);

Output64

Mit diesen speziellen Beispielen, die nur aus einer "+ return " - Anweisung bestehen, können Pfeilfunktionen die Syntax noch weiter reduzieren. Wenn die Funktion nur aus einer einzigen Zeile besteht, können sowohl die geschweiften Klammern als auch die Anweisung " return +" weggelassen werden, wie im folgenden Beispiel gezeigt.

// Define square function
const square = x => x * x;

// Invoke function to find product
square(10);

Output100

Alle drei dieser Syntaxtypen führen zu derselben Ausgabe. In der Regel ist es eine Frage der Präferenz oder der Kodierungsstandards des Unternehmens, wie Sie Ihre eigenen Funktionen strukturieren.

Fazit

In diesem Lernprogramm wurden Funktionsdeklarationen und Funktionsausdrücke behandelt, Werte von Funktionen zurückgegeben, Variablen Funktionswerte zugewiesen und ES6-Pfeilfunktionen.

Funktionen sind Codeblöcke, die einen Wert zurückgeben oder eine Aktion ausführen, wodurch Programme skalierbar und modular werden.

TOC