ZAWODNIK

JavaScript: funkcje, parametry i zasięg

INF.03 · teoria
autor: redakcja · 09.09.2026
Deklaracja i wywołanie funkcji w JavaScript, parametry i argumenty, wartości domyślne, instrukcja return, funkcja w zmiennej i funkcje strzałkowe, zasięg lokalny i globalny oraz wywołanie funkcji przyciskiem. Lekcja 11.4 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: javascriptĆwicz dział: javascript
Funk­cja to na­zwa­ny blok kodu, który leży w skryp­cie bez­czyn­nie i wy­ko­nu­je się do­pie­ro wtedy, gdy ktoś wywoła go po nazwie. Dzięki temu ten sam ra­chu­nek da się uru­cho­mić w wielu miej­scach strony i za każdym razem na innych danych. W części pi­sem­nej wra­ca­ją py­ta­nia z ramką kodu („która de­fi­ni­cja funk­cji jest po­praw­na", „jakie będzie pra­wi­dło­we wy­wo­ła­nie wraz z po­bra­niem wyniku", „co ma za za­da­nie przed­sta­wio­na funk­cja", „jaką war­tość zwróci"). W za­da­niu prak­tycz­nym cały skrypt z ar­ku­sza to zwykle jedna funk­cja wy­wo­ły­wa­na klik­nię­ciem przy­ci­sku: po­bie­ra war­tość z pola, liczy i po­ka­zu­je wynik.

De­kla­ra­cja i wy­wo­ła­nie

De­kla­ra­cja funk­cji to zapis za­czy­na­ją­cy się słowem function (FUNKCJA), po którym stoi nazwa, nawias okrą­gły z pa­ra­me­tra­mi i blok in­struk­cji w na­wia­sach klam­ro­wych. Nazwa rządzi się tymi samymi re­gu­ła­mi co nazwa zmien­nej: litery, cyfry i pod­kre­śle­nie, bez spacji, bez cyfry na po­cząt­ku i bez pol­skich znaków. Wiel­kość liter ma zna­cze­nie, więc Suma i suma to dwie różne nazwy.
Wy­wo­ła­nie to nazwa funk­cji z na­wia­sem okrą­głym. Nawias jest obo­wiąz­ko­wy nawet wtedy, gdy funk­cja ni­cze­go nie przyj­mu­je: sama nazwa bez na­wia­su jest tylko od­wo­ła­niem do funk­cji, nie po­le­ce­niem jej wy­ko­na­nia.
1
2
3
4
5
function przywitaj() {
console.log("Witaj w sklepie komputerowym");
}
przywitaj();
przywitaj();
Wynik: napis wy­pi­sa­ny dwa razy, bo wy­wo­ła­nia są dwa, a de­kla­ra­cja sama z siebie nie wy­pi­su­je ni­cze­go.
De­kla­ra­cję wolno po­sta­wić NIŻEJ niż jej wy­wo­ła­nie. Prze­glą­dar­ka naj­pierw czyta cały skrypt i za­pa­mię­tu­je wszyst­kie de­kla­ra­cje function, a do­pie­ro potem wy­ko­nu­je in­struk­cje po kolei. Nazywa się to pod­no­sze­niem de­kla­ra­cji (ang. ho­isting).
1
2
3
4
console.log(pole(3, 4));
function pole(a, b) {
return a * b;
}
Wynik: 12, mimo że w chwili wy­wo­ła­nia funk­cja jest jesz­cze o dwa wier­sze niżej.
Część funk­cji jest gotowa i nie trzeba ich pisać. Math.pow(2, 10) pod­no­si do potęgi i daje 1024, Math.floor(2.8) obcina część ułam­ko­wą w dół do 2, a parseInt("12 sztuk") wy­cią­ga z napisu liczbę cał­ko­wi­tą 12. Wy­wo­łu­je się je tak samo, po nazwie z na­wia­sem, tylko de­fi­ni­cja leży już w prze­glą­dar­ce.

Pa­ra­me­try, ar­gu­men­ty i war­to­ści do­myśl­ne

Pa­ra­metr to nazwa wpi­sa­na w nawias przy de­kla­ra­cji, a ar­gu­ment to kon­kret­na war­tość podana przy wy­wo­ła­niu. Pa­ra­metr za­cho­wu­je się jak zmien­na utwo­rzo­na na czas jed­ne­go wy­wo­ła­nia: do­sta­je war­tość ar­gu­men­tu i po za­koń­cze­niu funk­cji znika. Ko­lej­ność jest wią­żą­ca, bo do­pa­so­wa­nie idzie po po­zy­cji, nie po nazwie.
1
2
3
4
function rabat(cena, procent) {
return cena - cena * procent / 100;
}
console.log(rabat(200, 10));
Wynik: 180. Wy­wo­ła­nie rabat(10, 200) po­li­czy­ło­by coś zu­peł­nie innego, bo dzie­siąt­ka tra­fi­ła­by do pa­ra­me­tru cena.
Ar­gu­men­tów wolno podać mniej, niż jest pa­ra­me­trów, i wtedy bra­ku­ją­cy pa­ra­metr ma war­tość undefined (nie­zde­fi­nio­wa­na). Aryt­me­ty­ka na takiej war­to­ści daje NaN, czyli wynik, który nie jest liczbą.
1
2
3
4
function rabat(cena, procent) {
return cena - cena * procent / 100;
}
console.log(rabat(200));
Wynik: NaN. Ra­tun­kiem jest war­tość do­myśl­na: znak rów­no­ści przy pa­ra­me­trze pod­sta­wia war­tość wtedy i tylko wtedy, gdy ar­gu­men­tu za­bra­kło.
1
2
3
4
5
function rabat(cena, procent = 10) {
return cena - cena * procent / 100;
}
console.log(rabat(200));
console.log(rabat(200, 25));
Wynik: 180, potem 150. Taka funk­cja ma dwa pa­ra­me­try, a mimo to wolno wy­wo­łać ją z jednym ar­gu­men­tem, i do­kład­nie o to pyta jedno z częst­szych zadań z ramką.

return, czyli co funk­cja oddaje

return (ZWRÓĆ) to in­struk­cja, która na­tych­miast kończy funk­cję i oddaje war­tość w miej­sce wy­wo­ła­nia. Wynik trzeba czymś ode­brać: przy­pi­sać do zmien­nej, wsta­wić w więk­sze wy­ra­że­nie albo prze­ka­zać dalej. Zapis licz(a, b) = wynik; od­wra­ca przy­pi­sa­nie i jest błędem skła­dnio­wym, a samo licz(a, b); wy­wo­łu­je funk­cję i gubi to, co ona zwró­ci­ła.
Funk­cja bez return też coś oddaje: war­tość undefined. To naj­czę­ściej mylona para pojęć w całym dziale, bo „wy­pi­sać" i „zwró­cić" znaczą co innego.
1
2
3
4
5
function suma(a, b) {
console.log(a + b);
}
let wynik = suma(2, 3);
console.log(wynik);
Wynik: 5, potem undefined. Funk­cja po­ka­za­ła sumę, ale nie oddała jej nikomu, więc zmien­na wynik zo­sta­ła pusta. Wersja z return a + b; w środku wy­pi­sa­ła­by na końcu 5.
Pu­łap­ka: funk­cja, która ma ZWRÓCIĆ war­tość, kończy się in­struk­cją return. Funk­cja, która ma WYPISAĆ war­tość, używa console.log, alert albo document.write, a zwraca undefined.
Samo document.write wy­wo­ła­ne po wczy­ta­niu strony kasuje jej do­tych­cza­so­wą treść, więc na praw­dzi­wej stro­nie wynik wsta­wia się do wska­za­ne­go ele­men­tu, a nie wy­pi­su­je wprost.
In­struk­cje sto­ją­ce za return nie wy­ko­na­ją się nigdy, bo funk­cja kończy się w tym miej­scu. Wy­ko­rzy­stu­je to wa­ru­nek za­trzy­ma­nia w funk­cji, która wy­wo­łu­je samą siebie, czyli w re­ku­ren­cji. Silnia liczby 5 to ilo­czyn liczb od 1 do 5, a każde wy­wo­ła­nie zdej­mu­je z za­da­nia jedną liczbę i pyta o resztę.
[ JS ]
krok po kroku
skrypt
wierszy: 7
1
2
3
4
5
6
7
od nowa
❮ wstecz
dalej ❯
do końca
krok 0 z 16
start skryptu
ZMIENNE
jeszcze żadnej zmiennej
WYJŚCIE
skrypt jeszcze nic nie wypisał
Otwórz w interpreterze ›
Wynik: 120. Wy­wo­ła­nie silnia(5) czeka na silnia(4), to na silnia(3) i tak do je­dyn­ki, która zwraca 1 bez ko­lej­ne­go wy­wo­ła­nia. Bez tego wa­run­ku wy­wo­ła­nia nie skoń­czy­ły­by się nigdy i prze­glą­dar­ka prze­rwa­ła­by skrypt.

Funk­cja w zmien­nej i funk­cje strzał­ko­we

Funk­cja jako wy­ra­że­nie to ta sama funk­cja za­pi­sa­na po prawej stro­nie przy­pi­sa­nia: słowo function zo­sta­je, nazwa znika, a wy­wo­łu­je się ją przez nazwę zmien­nej. Po klam­rze za­my­ka­ją­cej stoi śred­nik, bo cały zapis jest przy­pi­sa­niem.
1
2
3
4
const pole = function (a, b) {
return a * b;
};
console.log(pole(3, 4));
Wynik: 12. Zmien­na const (STAŁA) trzyma tu funk­cję tak samo, jak trzy­ma­ła­by liczbę: funk­cja jest w JavaScripcie zwykłą war­to­ścią, którą wolno przy­pi­sać i prze­ka­zać dalej.
Funk­cja strzał­ko­wa to krót­szy zapis tego samego: za­miast słowa function stoi strzał­ka => między listą pa­ra­me­trów a ciałem. Ma dwie po­sta­cie. Z klam­ra­mi działa jak zwykła funk­cja i po­trze­bu­je return. Bez klamer, gdy ciało to jedno wy­ra­że­nie, wynik tego wy­ra­że­nia jest zwra­ca­ny sam i słowa return się nie pisze.
[ JS ]
krok po kroku
skrypt
wierszy: 6
1
2
3
4
5
6
od nowa
❮ wstecz
dalej ❯
do końca
krok 0 z 7
start skryptu
ZMIENNE
jeszcze żadnej zmiennej
WYJŚCIE
skrypt jeszcze nic nie wypisał
Otwórz w interpreterze ›
Wynik: 12, potem 10.
Róż­ni­ca wobec de­kla­ra­cji jest jedna, ale bo­le­sna: funk­cji przy­pi­sa­nej do zmien­nej pod­no­sze­nie nie do­ty­czy. Wy­wo­ła­nie po­sta­wio­ne nad przy­pi­sa­niem kończy się błędem, bo w tym mo­men­cie zmien­na jesz­cze nie ma war­to­ści.

Zasięg zmien­nych: lo­kal­ny i glo­bal­ny

Zasięg zmien­nej to obszar kodu, w którym wolno użyć jej nazwy. Zmien­na za­de­kla­ro­wa­na we­wnątrz funk­cji jest lo­kal­na: po­wsta­je przy wej­ściu do funk­cji i znika przy wyj­ściu, więc dwie funk­cje mogą trzy­mać własne suma bez żadnej ko­li­zji. Zmien­na za­de­kla­ro­wa­na poza wszyst­ki­mi funk­cja­mi jest glo­bal­na i widzą ją wszyst­kie funk­cje na stro­nie.
1
2
3
4
5
6
let waluta = "zł";
function podsumuj(cena, ilosc) {
let suma = cena * ilosc;
return suma + " " + waluta;
}
console.log(podsumuj(25, 4));
Wynik: 100 zł. Funk­cja się­gnę­ła po glo­bal­ną waluta, na­to­miast suma ist­nie­je tylko w jej środku: console.log(suma) do­pi­sa­ne pod funk­cją za­trzy­ma­ło­by skrypt błędem „suma is not de­fi­ned".
let (NIECH) i const ogra­ni­cza­ją zmien­ną do naj­bliż­sze­go bloku klam­ro­we­go, więc zmien­na z wnę­trza if albo pętli for nie wy­cho­dzi poza tę klamrę. Star­sze var (ZMIENNA) bloku nie widzi i zna wy­łącz­nie gra­ni­cę funk­cji.
1
2
3
4
5
6
7
8
9
function policz() {
if (true) {
var stara = 1;
let nowa = 2;
console.log(nowa);
}
console.log(stara);
}
policz();
Wynik: 2, potem 1. Zmien­na nowa żyje tylko w bloku if, a stara po var wy­cho­dzi z bloku i jest wi­docz­na w całej funk­cji. Prze­nie­sie­nie console.log(nowa) pod klamrę za­trzy­ma­ło­by skrypt błędem. W kodzie pi­sa­nym dziś używa się let i const, ale var trzeba roz­po­znać, bo w ar­ku­szach i w ban­kach pytań stoi wszę­dzie.
Przy­pi­sa­nie do nazwy, której ni­g­dzie nie za­de­kla­ro­wa­no, tworzy zmien­ną glo­bal­ną. Stąd biorą się zmien­ne psu­ją­ce inny skrypt na tej samej stro­nie, więc każda zmien­na do­sta­je let albo const w tym miej­scu, w którym jest na­praw­dę po­trzeb­na. Same typy i ope­ra­to­ry opi­su­je lekcja o zmien­nych w JavaScripcie, a wa­run­ki i pętle uży­wa­ne w środku funk­cji lekcja o in­struk­cjach ste­ru­ją­cych. Prze­śle­dzić ko­lej­ne wy­wo­ła­nia można w prze­glą­dar­ce w in­ter­pre­te­rze JavaScriptu.

Wy­wo­ła­nie funk­cji z przy­ci­sku

Zda­rze­nie to sygnał od prze­glą­dar­ki, że coś się stało: użyt­kow­nik klik­nął, wci­snął kla­wisz albo skoń­czy­ło się wczy­ty­wa­nie strony. Atry­but onclick (PRZY KLIKNIĘCIU) wpi­sa­ny w znacz­nik przy­ci­sku niesie kod do wy­ko­na­nia w chwili klik­nię­cia, a tym kodem jest zwykle jedno wy­wo­ła­nie funk­cji, z na­wia­sem i z ar­gu­men­ta­mi.
1
2
3
<button onclick="policzKoszt()">Policz koszt</button>
<button onclick="ustawRabat(10)">Rabat 10 procent</button>
<script src="skrypt.js"></script>
Nawias jest tu tak samo obo­wiąz­ko­wy jak w zwy­kłym wy­wo­ła­niu: zapis onclick="policzKoszt" nie zrobi po klik­nię­ciu nic. Napisy podane jako ar­gu­men­ty biorą się w apo­stro­fy, bo cu­dzy­słów za­mknął­by war­tość atry­bu­tu. Plik ze skryp­tem do­łą­cza się znacz­ni­kiem script z atry­bu­tem src tuż przed za­mknię­ciem sekcji body, żeby przy­cisk ist­niał wcze­śniej niż kod.
Funk­cja wy­wo­ły­wa­na zda­rze­niem często musi pa­mię­tać coś między klik­nię­cia­mi. Licz­nik klik­nięć stoi wtedy na ze­wnątrz, bo zmien­na lo­kal­na za­czy­na­ła­by od zera przy każdym wy­wo­ła­niu.
1
2
3
4
5
6
7
let licznik = 0;
function klikniecie() {
licznik = licznik + 1;
return "Kliknięć: " + licznik;
}
console.log(klikniecie());
console.log(klikniecie());
Wynik: Kliknięć: 1, potem Kliknięć: 2. Po­zo­sta­łe zda­rze­nia, jak onload, onkeydown i onsubmit, oraz sposób wsta­wie­nia wyniku na stronę opi­su­ją lekcje o modelu DOM i o zda­rze­niach i for­mu­la­rzach.

Na eg­za­mi­nie

Py­ta­nia pi­sem­ne o funk­cje mają kilka sta­łych kształ­tów. Wybór po­praw­nej de­fi­ni­cji: pra­wi­dło­wy jest wy­łącz­nie zapis function nazwa(argumenty) { instrukcje; }, bez słowa new i bez typu przed nazwą, bo w JavaScripcie typu funk­cji się nie de­kla­ru­je. Wybór pra­wi­dło­we­go wy­wo­ła­nia wraz z po­bra­niem wyniku: to let wynik = licz(a, b); z przy­pi­sa­niem po lewej stro­nie, a nie licz(a, b) = wynik; ani wy­wo­ła­nie z do­dat­ko­wym ar­gu­men­tem wynik. Ramka z funk­cją i py­ta­nie, co ona ma za za­da­nie: sprawdź, czy w środku stoi return, czy wy­pi­sa­nie na stronę, bo od­po­wie­dzi różnią się wła­śnie słowem „zwró­cić" albo „wy­pi­sać". Ramka z wy­wo­ła­niem i py­ta­nie o zwró­co­ną war­tość: prze­śledź pa­ra­me­try po kolei, pa­mię­ta­jąc, że pierw­szy ar­gu­ment trafia do pierw­sze­go pa­ra­me­tru. Py­ta­nie o funk­cję z dwoma pa­ra­me­tra­mi, o której wia­do­mo, że może być wy­wo­ła­na z jednym: taki zapis ma war­tość do­myśl­ną przy drugim pa­ra­me­trze.
Kilka od­po­wie­dzi myli się re­gu­lar­nie. Funk­cja bez return zwraca undefined, a nie zero ani pusty napis. Kod za return nie wykona się nigdy. Pa­ra­metr jest zmien­ną lo­kal­ną, więc zmiana jego war­to­ści w środku funk­cji nie zmie­nia zmien­nej po­da­nej przy wy­wo­ła­niu. De­kla­ra­cję function wolno po­sta­wić pod jej wy­wo­ła­niem, ale funk­cji przy­pi­sa­nej do zmien­nej już nie. Nazwa z pol­skim zna­kiem albo po­my­lo­na wiel­kość liter to typowa przy­czy­na błędu w oknie kon­so­li, o który pyta osobne za­da­nie.
W za­da­niu prak­tycz­nym po­le­ce­nie brzmi zwykle: „po na­ci­śnię­ciu przy­ci­sku skrypt po­bie­ra war­tość z pola, spraw­dza ją i wy­świe­tla wynik". Tłu­ma­czy się je punkt po punk­cie. „Po na­ci­śnię­ciu przy­ci­sku" to onclick z wy­wo­ła­niem funk­cji, „po­bie­ra war­tość" i „wy­świe­tla wynik" to praca na ele­men­tach strony, a „spraw­dza" to if w środku funk­cji. Cała reszta za­da­nia mieści się w jednej funk­cji: dane wcho­dzą pa­ra­me­tra­mi albo z pola for­mu­la­rza, a wynik wy­cho­dzi przez return i do­pie­ro potem trafia na stronę. Sam for­mu­larz opi­su­je lekcja o for­mu­la­rzach HTML.

Ściąga

Zapis
Znaczy
function suma(a, b) { }
de­kla­ra­cja funk­cji o dwóch pa­ra­me­trach
suma(2, 3);
wy­wo­ła­nie, nawias obo­wiąz­ko­wy także bez ar­gu­men­tów
let x = suma(2, 3);
wy­wo­ła­nie z po­bra­niem zwró­co­nej war­to­ści
return a + b;
kończy funk­cję i oddaje war­tość w miej­sce wy­wo­ła­nia
brak return
funk­cja zwraca undefined
function rabat(c, p = 10) { }
pa­ra­metr z war­to­ścią do­myśl­ną, wolno po­mi­nąć ar­gu­ment
const f = function (a) { };
funk­cja jako wy­ra­że­nie przy­pi­sa­ne do zmien­nej
const f = (a) => { return a * 2; };
funk­cja strzał­ko­wa z klam­ra­mi i z return
const f = (a) => a * 2;
postać skró­co­na, zwraca wynik wy­ra­że­nia bez return
let x w funk­cji
zmien­na lo­kal­na, znika po za­koń­cze­niu funk­cji
let x poza funk­cja­mi
zmien­na glo­bal­na, wi­docz­na we wszyst­kich funk­cjach
let i const w bloku
zasięg do naj­bliż­szej klamry, var tylko do funk­cji
<button onclick="licz()">
wy­wo­ła­nie funk­cji po klik­nię­ciu przy­ci­sku
Math.pow(2, 10)
gotowa funk­cja wbu­do­wa­na, tutaj po­tę­go­wa­nie
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: JavaScript: instrukcje warunkowe i pętlenastępna: JavaScript: tablice, obiekty i biblioteki wbudowanespis działu: JavaScript

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (47)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.