Funkcje i wyrażenia funkcyjne JavaScript (z przykładami)

W tym samouczku nauczysz się funkcji JavaScript i wyrażeń funkcyjnych przy pomocy przykładów.

Funkcja JavaScript

Funkcja to blok kodu, który wykonuje określone zadanie.

Załóżmy, że musisz utworzyć program do tworzenia okręgu i pokolorowania go. Możesz utworzyć dwie funkcje, aby rozwiązać ten problem:

  • funkcja rysowania koła
  • funkcja do pokolorowania koła

Dzielenie złożonego problemu na mniejsze części sprawia, że ​​program jest łatwy do zrozumienia i można go ponownie wykorzystać.

JavaScript ma również ogromną liczbę wbudowanych funkcji. Na przykład Math.sqrt()to funkcja obliczająca pierwiastek kwadratowy z liczby.

W tym samouczku nauczysz się funkcji zdefiniowanych przez użytkownika.

Deklarowanie funkcji

Składnia deklarowania funkcji jest następująca:

 function nameOfFunction () ( // function body )
  • Funkcja jest deklarowana przy użyciu functionsłowa kluczowego.
  • Podstawowe zasady nazewnictwa funkcji są podobne do nazewnictwa zmiennej. Lepiej jest napisać opisową nazwę swojej funkcji. Na przykład, jeśli funkcja jest używana do dodawania dwóch liczb, możesz nazwać funkcję addlub addNumbers.
  • Ciało funkcji jest zapisane wewnątrz ().

Na przykład,

 // declaring a function named greet() function greet() ( console.log("Hello there"); )

Wywołanie funkcji

W powyższym programie zadeklarowaliśmy funkcję o nazwie greet(). Aby użyć tej funkcji, musimy ją wywołać.

Oto jak możesz wywołać powyższą greet()funkcję.

 // function call greet();
Działanie funkcji w JavaScript

Przykład 1: Wyświetl tekst

 // program to print a text // declaring a function function greet() ( console.log("Hello there!"); ) // calling the function greet();

Wynik

 Witam!

Parametry funkcji

Funkcję można również zadeklarować za pomocą parametrów. Parametr to wartość, która jest przekazywana podczas deklarowania funkcji.

Działanie funkcji JavaScript z parametrem

Przykład 2: Funkcja z parametrami

 // program to print the text // declaring a function function greet(name) ( console.log("Hello " + name + ":)"); ) // variable name can be different let name = prompt("Enter a name: "); // calling function greet(name);

Wynik

 Wpisz imię: Simon Hello Simon :)

W powyższym programie greetfunkcja jest deklarowana za pomocą nameparametru. Użytkownik jest proszony o wprowadzenie nazwy. Następnie, gdy funkcja jest wywoływana, argument jest przekazywany do funkcji.

Uwaga : Kiedy wartość jest przekazywana podczas deklarowania funkcji, nazywana jest parametrem . A kiedy funkcja jest wywoływana, przekazana wartość jest nazywana argumentem .

Przykład 3: Dodaj dwie liczby

 // program to add two numbers using a function // declaring a function function add(a, b) ( console.log(a + b); ) // calling functions add(3,4); add(2,9);

Wynik

 7 11

W powyższym programie addfunkcja służy do znalezienia sumy dwóch liczb.

  • Funkcja jest deklarowana za pomocą dwóch parametrów ai b.
  • Funkcja jest wywoływana przy użyciu jej nazwy i przekazywania dwóch argumentów 3 i 4 w jednym oraz 2 i 9 w drugim.

Zauważ, że możesz wywoływać funkcję tyle razy, ile chcesz. Możesz napisać jedną funkcję, a następnie wywołać ją wiele razy z różnymi argumentami.

Funkcja Return

returnOświadczenie może być wykorzystane do zwrotu wartości do wywołania funkcji.

returnStwierdzenie oznacza, że funkcja została zakończona. Żaden kod po returnnie jest wykonywany.

Jeśli nic nie zostanie zwrócone, funkcja zwraca undefinedwartość.

Działanie funkcji JavaScript z instrukcją return

Przykład 4: Suma dwóch liczb

 // program to add two numbers // declaring a function function add(a, b) ( return a + b; ) // take input from the user let number1 = parseFloat(prompt("Enter first number: ")); let number2 = parseFloat(prompt("Enter second number: ")); // calling function let result = add(number1,number2); // display the result console.log("The sum is " + result);

Wynik

 Wpisz pierwszą liczbę: 3.4 Wpisz drugą liczbę: 4 Suma wynosi 7,4

W powyższym programie suma liczb jest zwracana przez funkcję używającą returninstrukcji. Ta wartość jest przechowywana w zmiennej wynikowej.

Korzyści z używania funkcji

  • Funkcja umożliwia wielokrotne użycie kodu. Możesz to zadeklarować raz i używać wielokrotnie.
  • Funkcja ułatwia program, ponieważ każde małe zadanie jest podzielone na funkcję.
  • Funkcja zwiększa czytelność.

Wyrażenia funkcyjne

W Javascript funkcje można również zdefiniować jako wyrażenia. Na przykład,

 // program to find the square of a number // function is declared inside the variable let x = function (num) ( return num * num ); console.log(x(4)); // can be used as variable value for other variables let y = x(3); console.log(y);

Wynik

 16 9

W powyższym programie zmienna x służy do przechowywania funkcji. Tutaj funkcja jest traktowana jako wyrażenie. Funkcja jest wywoływana przy użyciu nazwy zmiennej.

Powyższa funkcja jest nazywana funkcją anonimową.

Uwaga: W ES2015 wyrażenia JavaScript są zapisywane jako funkcje strzałkowe. Dowiesz się o nich w późniejszych tutorialach.

Interesujące artykuły...