0Pricing
Frontend Academy · Lekcja

Sterowanie przepływem: if, else, switch, for, while

Rozgałęziaj kod za pomocą if/else i switch, twórz pętle for i while oraz używaj break i continue do sterowania iteracją.

Sterowanie przepływem: if, else, switch, for, while to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Czym jest sterowanie przepływem?

Sterowanie przepływem określa, który kod zostanie wykonany i ile razy. JavaScript udostępnia instrukcje warunkowe (if/else, switch) oraz pętle (for, while, do/while), aby kierować ścieżką wykonywania na podstawie warunków i danych.

if / else if / else

Najbardziej podstawowa instrukcja warunkowa. Warunek w nawiasach jest oceniany jako truthy/falsy. Wiele warunków można łączyć za pomocą else if. Końcowe else stanowi domyślną ścieżkę dla wszystkich pozostałych przypadków.

const score = 75;

if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else if (score >= 70) {
  console.log('C');
} else {
  console.log('F');
}

Operator trójargumentowy

Operator trójargumentowy to zwięzła, jednoliniowa wersja if/else: condition ? trueValue : falseValue. Należy używać go w prostych przypisaniach i wyrażeniach JSX. Należy unikać zagnieżdżania operatorów trójargumentowych — szybko stają się nieczytelne.

const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';

// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>

Instrukcja switch

switch porównuje wartość z wieloma przypadkami za pomocą ścisłej równości. Po każdym przypadku należy użyć break, aby zapobiec przejściu do kolejnego przypadku. default obsługuje wartości, które nie pasują do żadnego przypadku.

const day = 'Monday';
switch (day) {
  case 'Saturday':
  case 'Sunday':
    console.log('Weekend');
    break;
  case 'Monday':
    console.log('Start of work week');
    break;
  default:
    console.log('Weekday');
}

Pętla for

Klasyczna pętla for w stylu C: inicjalizator; warunek; inkrementacja. Najlepiej sprawdza się przy znanej liczbie powtórzeń lub iterowaniu po tablicach za pomocą indeksu.

for (let i = 0; i < 5; i++) {
  console.log(i); // 0 1 2 3 4
}

// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
  console.log(names[i]);
}

Pętla for...of

for...of iteruje po wartościach dowolnego obiektu iterowalnego (tablic, napisów, obiektów Map i Set). Jest czytelniejsza niż pętla for oparta na indeksie, gdy indeks nie jest potrzebny.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const char of 'hello') {
  console.log(char); // h e l l o
}

Pętla for...in

for...in iteruje po wyliczalnych kluczach właściwości obiektu. Nie należy używać jej dla tablic — zamiast tego należy użyć for...of lub metod tablic.

const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
  console.log(`${key}: ${user[key]}`);
}

Pętla while

Pętla while wykonuje się tak długo, jak długo jej warunek jest truthy. Należy używać jej, gdy liczba iteracji nie jest znana z góry — na przykład podczas odczytywania danych wejściowych aż do momentu wprowadzenia przez użytkownika prawidłowej wartości.

let attempts = 0;
let success = false;
while (!success && attempts < 3) {
  // try something
  attempts++;
  success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);

Pętla do...while

do...while wykonuje ciało pętli co najmniej raz, zanim sprawdzi warunek. Jest przydatna, gdy ciało pętli musi zostać wykonane, zanim będzie można ocenić warunek zakończenia.

let input;
do {
  input = prompt('Enter a number:');
} while (isNaN(Number(input)));

break i continue

break natychmiast kończy bieżącą pętlę. continue pomija resztę bieżącej iteracji i przechodzi do następnej. Obie instrukcje działają w pętlach for, while i do/while.

for (let i = 0; i < 10; i++) {
  if (i === 3) continue;  // skip 3
  if (i === 7) break;     // stop at 7
  console.log(i);         // 0 1 2 4 5 6
}

Ewaluacja z krótkim spięciem

&& zwraca pierwszą wartość falsy albo ostatnią wartość. || zwraca pierwszą wartość truthy albo ostatnią wartość. ?? (operator nullish coalescing) zwraca prawą stronę tylko wtedy, gdy lewa strona ma wartość null lub undefined.

const name = user && user.name;    // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000;  // 3000 only if port is null/undefined

Szybkie sprawdzenie

W przypadku której pętli gwarantowane jest wykonanie jej ciała co najmniej raz?

Podsumowanie: sterowanie przepływem w JavaScript

if/else służy do rozgałęziania. switch służy do obsługi wielu odrębnych wartości. Pętla for służy do znanej liczby iteracji. for...of służy do obiektów iterowalnych. while służy do nieznanej liczby iteracji. do...while gwarantuje co najmniej jedno wykonanie. break kończy pętle. continue pomija iteracje. Operatory short-circuit umożliwiają zwięzłe warunki.

Często zadawane pytania

Czy lekcja „Sterowanie przepływem: if, else, switch, for, while” jest bezpłatna?

Tak — pełny tekst „Sterowanie przepływem: if, else, switch, for, while” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Sterowanie przepływem: if, else, switch, for, while”?

Rozgałęziaj kod za pomocą if/else i switch, twórz pętle for i while oraz używaj break i continue do sterowania iteracją. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Sterowanie przepływem: if, else, switch, for, while”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Zmienne: let, const, var i zakres
  2. Typy danych: string, number, boolean, null, undefined
  3. Funkcje: deklaracje, wyrażenia i funkcje strzałkowe
  4. Sterowanie przepływem: if, else, switch, for, while
← Powrót do Frontend Academy