W języku JavaScript pętle można przerwać na trzy główne sposoby: break natychmiast kończy działanie bieżącej pętli, continue tylko przerywa aktualną iterację i przechodzi do następnej, a return wychodzi z całej funkcji, pośrednio przerywając również pętlę znajdującą się w jej wnętrzu.
Dlaczego kontrola pętli jest tak ważna?
Pętle są podstawowym narzędziem do przetwarzania list danych, operacji na DOM, zapytań do API czy walidacji formularzy.
Bez możliwości ich przerywania lub pomijania części iteracji szybko natknęlibyśmy się na:
- niekończące się pętle,
- zbędne obliczenia (np. gdy szukany element już znaleziono),
- zablokowany interfejs użytkownika.
Instrukcje break, continue i return są więc kluczowe dla:
- ergonomii kodu,
- wydajności aplikacji,
- pośrednio także dla dostępności – długotrwale blokujący się JavaScript może unieruchomić czytniki ekranu czy nawigację klawiaturą.
Szybkie przypomnienie – jakie pętle mamy w JavaScript?
W kontekście break i continue warto pamiętać, że w JavaScript mamy m.in.:
- klasyczne
for, whileido...while,for...ofdo iteracji po kolekcjach,for...indo iteracji po kluczach obiektu,- metody wyższego rzędu, np.
forEach, które zachowują się inaczej niż „klasyczne” pętle.
Instrukcja break może kończyć dowolne pętle – for, for-of, for-in, while.
break i continue można stosować w pętlach for, while oraz do-while.
break – natychmiastowe zakończenie pętli
Instrukcja break służy do natychmiastowego zakończenia działania bieżącej pętli, niezależnie od tego, czy warunek kontynuacji pętli jest nadal spełniony.
Po napotkaniu break wykonywanie pętli jest kończone, a sterowanie przechodzi do pierwszej instrukcji za pętlą.
Podstawowy przykład z pętlą for
Oto prosty przykład działania break w pętli for:
const liczby = [1, 3, 5, 8, 10, 12];
for (let i = 0; i < liczby.length; i++) {
if (liczby[i] % 2 === 0) {
console.log('Znalazłem pierwszą liczbę parzystą:', liczby[i]);
break; // przerywamy pętlę po znalezieniu pierwszej liczby parzystej
}
}
console.log('Kod po pętli');
Instrukcja break jest tu użyta do wcześniejszego zakończenia pętli, gdy spełniony zostanie określony warunek.
break i nieskończone pętle
Częsty wzorzec to wykorzystywanie break do kontrolowanego wyjścia z pętli, która z definicji jest nieskończona:
let i = 0;
while (true) { // pętla "nieskończona"
if (i > 1000) {
break; // zabezpieczenie przed nieskończoną pętlą
}
// ... operacje
i++;
}
Jeżeli użyjesz pętli potencjalnie nieskończonej (np. while (true)), break jest jedynym sposobem jej zakończenia.
break w zagnieżdżonych pętlach
W pętlach zagnieżdżonych break bez etykiety przerywa tylko najgłębiej wykonywaną pętlę:
for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (j === 1) {
break; // przerywa TYLKO wewnętrzną pętlę po j === 1
}
console.log(`i=${i}, j=${j}`);
}
}
Zgodnie z opisem, instrukcja break wewnątrz zagnieżdżonej pętli kończy działanie jedynie tej pętli, w której się znajduje.
continue – pominięcie bieżącej iteracji
Instrukcja continue nie kończy całej pętli, lecz:
- przerywa tylko bieżącą iterację,
- pomija pozostały kod w ciele pętli,
- przechodzi do kolejnego obiegu pętli.
Działanie continue jest więc podobne do break, ale dotyczy tylko jednego obiegu, a nie całej pętli.
Podstawowy przykład
Załóżmy, że chcemy wypisać tylko liczby parzyste:
for (let i = 0; i <= 10; i++) {
if (i % 2 !== 0) {
continue; // pomijamy liczby nieparzyste
}
console.log('Liczba parzysta:', i);
}
Typowy przypadek użycia to pomijanie niepoprawnych danych (np. błędne rekordy) lub elementów, które nie spełniają warunku filtrującego.
Przykład walidacji listy emaili:
const maile = ['[email protected]', '', 'błędny_mail', '[email protected]'];
for (const email of maile) {
if (!email.includes('@')) {
continue; // pomijamy niepoprawne adresy
}
console.log('Wysyłam wiadomość na:', email);
}
break vs continue – najważniejsze różnice
Oto krótkie porównanie obu instrukcji:
| Instrukcja | Co robi? | Gdzie działa? |
|---|---|---|
break |
Kończy całą bieżącą pętlę i przechodzi za nią. | Pętle for, while, do...while, for-of, for-in; dodatkowo switch. |
continue |
Kończy tylko bieżącą iterację i przechodzi do następnej. | Tylko pętle (nie działa w switch). |
continue stosuje się wyłącznie w pętlach, podczas gdy break można używać zarówno w pętlach, jak i w instrukcji switch.
return – wyjście z funkcji (i pośrednio z pętli)
Instrukcja return kończy wykonywanie funkcji, w której się znajduje.
Jeśli w tej funkcji jest pętla, return natychmiast przerywa jej wykonywanie i, co ważniejsze, kończy działanie całej funkcji.
Aby wyjść z pętli i funkcji, możesz użyć break (zakończenie samej pętli) oraz return (zakończenie funkcji); w przypadku pętli tworzonych przez setInterval zakończ je za pomocą clearInterval.
Przykład – wyszukiwanie elementu w funkcji
Tak można zwrócić pierwszy znaleziony element parzysty i jednocześnie zakończyć funkcję:
function znajdzPierwszyParzysty(liczby) {
for (const liczba of liczby) {
if (liczba % 2 === 0) {
return liczba; // przerywa pętlę i KOŃCZY funkcję
}
}
return null; // jeśli nic nie znaleziono
}
const wynik = znajdzPierwszyParzysty([1, 3, 5, 8, 10]);
console.log(wynik); // 8
W tym przykładzie return liczba przerywa pętlę, a jednocześnie zwraca wynik i kończy działanie funkcji.
break czy return?
Użyj break, gdy chcesz zakończyć pętlę, ale kontynuować wykonywanie kodu w tej samej funkcji. Użyj return, gdy cel funkcji został osiągnięty i chcesz od razu zwrócić wynik.
Jak to działa w różnych typach pętli?
for, while, do...while
We wszystkich klasycznych pętlach break natychmiast kończy pętlę, a continue kończy aktualny obieg i przechodzi do kolejnego.
for...of i for...in
Instrukcja break może kończyć pętle for-of i for-in tak samo jak klasyczne for:
const tablica = [10, 20, 30, 40];
for (const wartość of tablica) {
if (wartość === 30) {
break; // kończy pętlę for...of
}
console.log(wartość);
}
forEach – ważny wyjątek
Metoda forEach na tablicy nie pozwala przerwać iteracji za pomocą break, continue ani return. Użyte w callbacku zakończą co najwyżej ten pojedynczy callback, ale nie zatrzymają całego forEach.
Przykład:
[1, 2, 3, 4].forEach((liczba) => {
if (liczba === 3) {
return; // NIE przerywa całego forEach – tylko kończy ten callback
}
console.log(liczba);
});
Jeżeli potrzebujesz możliwości przerwania iteracji, użyj for lub for...of.
Etykiety (labels) – przerywanie zewnętrznej pętli
JavaScript oferuje rzadko używaną, ale czasem przydatną funkcję: etykiety (labels). Etykieta to nazwa zakończona dwukropkiem przed pętlą (np. outer:), z której można skorzystać w instrukcji break (i continue), aby przerwać konkretną pętlę.
Gdy używamy samego break (bez etykiety), przerywamy najgłębszą, aktualnie wykonywaną pętlę lub instrukcję switch. Gdy używamy break z etykietą, przerywamy konkretną instrukcję for, while lub do-while o nazwie tej etykiety.
Przykład z dwoma zagnieżdżonymi pętlami
Oto przykład użycia etykiety do przerwania pętli zewnętrznej:
outer: for (let i = 0; i < 3; i++) {
for (let j = 0; j < 3; j++) {
if (i === 1 && j === 1) {
break outer; // przerywamy ZEWNĘTRZNĄ pętlę
}
console.log(`i=${i}, j=${j}`);
}
}
console.log('Po etykietowanej pętli');
Uwaga projektowa – etykiety są zgodne ze specyfikacją, ale zbyt częste ich używanie utrudnia czytanie kodu; często lepszym rozwiązaniem jest wydzielenie fragmentu logiki do osobnej funkcji i użycie return.
Typowe błędy i pułapki (praktyka)
Nieskończone pętle z continue: jeśli wewnątrz pętli while wykonasz continue przed zmianą zmiennej sterującej, możesz przypadkowo stworzyć nieskończoną pętlę. Przykład:
let i = 0;
while (i < 10) {
if (i % 2 === 0) {
continue; // i nigdy nie zostanie zwiększone → pętla nieskończona
}
i++;
}
Poprawnie: zwiększ i przed continue lub na początku pętli.
Mylenie break i return: break kończy tylko pętlę, return – całą funkcję, więc dalszy kod w funkcji nie wykona się wcale, jeśli użyjesz return odruchowo zamiast break.
Brak możliwości przerwania forEach: próba użycia break w forEach nie zadziała – iteracja dobiegnie końca bez względu na warunki.
Kiedy który mechanizm jest najlepszy?
Wybierz odpowiedni mechanizm w zależności od celu:
- użyj
break, gdy spełnił się warunek i chcesz natychmiast zakończyć pętlę, ale dalej wykonywać kod funkcji, albo gdy zabezpieczasz się przed nieskończoną pętlą, - użyj
continue, gdy chcesz pominąć część obliczeń dla konkretnych elementów (np. błędne dane), a iteracja ma trwać dalej dla kolejnych elementów, - użyj
return, gdy pętla znajduje się w funkcji i znaleziono wynik, więc chcesz natychmiast zakończyć całą funkcję, nie tylko pętlę.
Wydajność i dostępność – dlaczego to ma znaczenie dla użytkowników?
JavaScript w przeglądarce wykonuje się na głównym wątku, który odpowiada m.in. za:
- renderowanie interfejsu użytkownika,
- reagowanie na kliknięcia i naciśnięcia klawiszy,
- obsługę czytników ekranu (np. aktualizacje DOM, nawigację fokusów).
Jeżeli pętla:
- trwa bardzo długo,
- nie ma warunku kończącego się w rozsądnym czasie,
- lub wykonuje nadmiarową liczbę iteracji,
to interfejs może się „zamrozić”:
- przyciski przestają reagować,
- fokus klawiatury nie przeskakuje,
- czytnik ekranu nie otrzymuje aktualnych informacji o stanie strony.
Dlatego:
- przemyślane użycie
breakicontinuepomaga skrócić czas pracy pętli (np. przerwać po znalezieniu wyniku), returnpozwala szybko zakończyć funkcję, jeśli dalsze operacje są zbędne,- konstrukcje potencjalnie nieskończone (
while (true)) powinny zawsze mieć dobrze zaprojektowany warunek wyjścia (np. zbreak).
Dobrze zaprojektowane pętle utrzymują interfejs responsywny dla wszystkich użytkowników, w tym korzystających z technologii asystujących.
