Modest Programmer logo
29 sierpnia 2018
Tagi: 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.
Autor artykułu:
Kazimierz Szpin
Kazimierz Szpin
Programista. Specjalizuje się w C#, głównie WPF, Windows Forms oraz ASP.NET MVC.
Autor bloga ModestProgrammer.pl
Dodaj komentarz
© Copyright 2018 modestprogrammer.pl. Wszelkie prawa zastrzeżone Design by Kazimierz Szpin