Funkcje w JavaScript

Kolejnym ważnym tematem, który musisz poznać aby opanować podstawy w języku JavaScript są funkcje. Można powiedzieć, że funkcję w językach programowania występują na każdym kroku. Pamiętasz jak w poprzednich artykułach prezentowałem Ci jak wyświetlić np. wartość jakiejś zmiennej w konsoli. Używałem do tego funkcji log() obiektu console. Tak, dobrze przeczytałeś jest to funkcja. W poprzednim artykule na temat tablic, używałeś również innych funkcji takich jak push(), pop(), unshift(), shift() i innych. Także jak widzisz w świecie programowania funkcje bardzo ułatwiają programiście pisanie kodu.

Czym są zatem funkcje? Funkcja (z angielskiego function) to blok kodu, który może zostać ponownie wykorzystywany w dowolnym innym miejscu w kodzie. Przejdźmy do konkretów. Funkcje w JavaScript rozpoczynamy od słowa kluczowego function, następnie nazwa funkcji wraz z nawiasami, w tych nawiasach mogą zostać przyjęte argumenty, ale nawet gdy funkcja nie ma żadnych parametrów to nawiasy muszą być. Następnie dodajemy nawiasy klamrowe, a w nich całe ciało funkcji, czyli kod który ma robić dana funkcja. Dla prostoty pierwszego przykładu nie użyjemy parametrów wejściowych.

function hello() {
     console.log('Hello World');
}

Aby wywołać taką funkcję wystarczy wpisać:

hello();

Zostanie wówczas wypisany w konsoli napis: "Hello World".

Takie funkcje mogą również zostać użyte przed deklaracją. Czyli:

hello();
function hello() {
    console.log('Hello World');
}

Ok poznałeś już podstawową składnie funkcji, przejdźmy więc o krok dalej. Jak wspomniałem wyżej, funkcję mogą również przyjmować parametry. Powiedzmy, że chcielibyśmy aby nasza funkcja przyjmowała w parametrze imię i wypisała napis "Hello" plus imię podane w parametrze.

function hello(name) {
    console.log('Hello ' + name);
}

Wywołanie funkcji z argumentem "Kazimierz" wygląda następująco:

hello('Kazimierz'); //"Hello Kazimierz"
hello('Robert'); //"Hello Robert"

Nic nie stoi na przeszkodzie, aby użyć większej ilości parametrów.

function hello(firstName, lastName) {
    console.log('Hello ' + firstName + ' ' + lastName);
}
hello('Kazimierz', 'Szpin'); //"Hello Kazimierz Szpin"

Uwaga. Jeśli funkcja wymaga podania dwóch argumentów, a Ty podasz tylko jeden, to wtedy drugi argument przyjmie domyślną wartość undefined.

Przedstawiłem Ci funkcję, które wykonują po wywołaniu dany blok kodu z instrukcjami nic zwracając żadnych wartości. Oprócz wyżej poznanych funkcji istnieją jeszcze funkcję które zwracają jakąś wartość. Funkcję takie różnią się tylko tym, że w ich ciele występuje słowo kluczowe return, dzięki któremu zwracasz wartość. Zobaczmy to na przykładzie.

function addTwoNumber(firstNumber, secondNumber) {
    return firstNumber + secondNumber;
}
let sumOfTwoNumber = addTwoNumber(21,33);
console.log(sumOfTwoNumber); //54

Jeżeli masz jakieś instrukcje, które będziesz używał więcej niż jeden raz, to zawsze powinieneś zapisać je jako funkcja. Na pewno taki zapis jest wygodniejszy i bardziej czytelny, a także jeśli w przyszłości coś będziesz musiał zmienić w tym kodzie, to wystarczy jak zrobisz to tylko w jednym miejscu, zamiast w wielu. Zamiast pisać:

console.log('-----------------');
console.log('UWAGA');
console.log('-----------------');
let randomNumber = 12;
console.log(randomNumber);
console.log('-----------------');
console.log('UWAGA');
console.log('-----------------');
let randomString = 'Random';
console.log(randomString);

Lepiej zrobić to za pomocą funkcji:

function warning() {
    console.log('-----------------');
    console.log('UWAGA');
    console.log('-----------------');
}

warning();
let randomNumber = 12;
console.log(randomNumber);
warning();
let randomNumber = 12;
console.log(randomNumber);

Myślę, że na tym przykładzie zakończymy dzisiejszy artykuł na temat podstaw tworzenia funkcji w języku JavaScript. Temat funkcji zostanie jeszcze na pewno rozwinięty w kolejnych artykułach, gdzie przedstawię Ci m.in. wyrażenia funkcyjne oraz funkcje anonimowe.

To wszystko co chciałem Ci przekazać w tym artykule. Zapraszam do kolejnego artykułu z serii podstawy programowania w języku JavaScript.

Kolejny artykuł - Wyrażenia funkcyjne oraz funkcje anonimowe w JavaScript.

Blog Dla Programistów C#/.NET

Dodaj komentarz

Wyszukiwarka

Tagi

Najnowsze artykuły

Losowe artykuły