JS cz.2

Operatory arytmetyczne i konwersja typów

OPERATORY ARYTMETYCZNE

Operator	Nazwa	Działanie	Przykład	Wynik
+	Dodawanie	Dodaje liczby lub łączy stringi	5 + 3	8
-	Odejmowanie	Odejmuje drugą liczbę	5 - 3	2
*	Mnożenie	Mnoży liczby	5 * 3	15
/	Dzielenie	Dzieli liczby	6 / 3	2
%	Modulo	Reszta z dzielenia	7 % 3	1
**	Potęgowanie	Podnosi do potęgi	2 ** 3	8
++	Inkrementacja	Zwiększa wartość o 1	let x=5; x++	6
--	Dekrementacja	Zmniejsza wartość o 1	let x=5; x--	4
+=	Dodaj i przypisz	Skrót dla x = x + y	x += 3	x = x + 3
-=	Odejmij i przypisz	Skrót dla x = x - y	x -= 2	x = x - 2

OPERATORY PORÓWNANIA

Operator	Nazwa	Działanie	Przykład	Wynik
==	Równość (luźna)	Porównuje wartości po konwersji	5 == "5"	true
!=	Nierówność (luźna)	Porównuje wartości po konwersji	5 != "5"	false
===	Równość ścisła	Porównuje wartość + typ	5 === "5"	false
!==	Nierówność ścisła	Wartość lub typ różne	5 !== "5"	true
>	Większe	Porównanie wartości	10 > 5	true
<	Mniejsze	Porównanie wartości	3 < 6	true
>=	Większe lub równe	—	5 >= 5	true
<=	Mniejsze lub równe	—	4 <= 3	false

OPERATORY LOGICZNE

Operator	Nazwa	Działanie	Przykład	Wynik
&&	AND (i)	Prawda tylko gdy oba wartości są true	true && false	false
||	OR (lub)	Prawda gdy przynajmniej jedna wartość jest true	true || false	true
!	NOT (nie)	Neguje wartość logiczną	!true	false

Zasada działania &&:

• && = „przejdź, dopóki truthy; zatrzymaj się na falsy”

true && "hello"       // "hello"  → oba truthy, zwraca ostatni
0 && "hello"          // 0        → pierwszy falsy, zwraca go
"hi" && 123 && null   // null     → null to falsy, zwraca go
"hi" && 123 && "ok"   // "ok"     → wszystkie truthy, zwraca ostatni

1. Sprawdza pierwszy operand:
   • Jeśli jest falsy → zwraca go od razu
   • Jeśli jest truthy → przechodzi do następnego operand
2. Powtarza dla kolejnych operandów
3. Jeśli wszystkie operandy są truthy → zwraca ostatni operand

Zasada działania ||

false || "hello"       // "hello" → pierwszy truthy
0 || null || "ok"      // "ok"     → pierwsza truthy wartość
"" || 0 || null        // null     → wszystkie falsy, zwraca ostatni
"hi" || 123             // "hi"     → pierwszy truthy, zwraca go

1. Sprawdza operand od lewej do prawej:
   • Jeśli operand jest truthy → zwraca go od razu
   • Jeśli operand jest falsy → przechodzi do następnego
2. Jeśli wszystkie operandy są falsy → zwraca ostatni operand

UWAGA - zwracane wartości można:

• przypisać do zmiennej
• użyć w innym wyrażeniu
• wyświetlić w konsoli (console.log)

Jak działa: !

!true        // false
!false       // true
!0           // true   (0 jest falsy)

1. Zamienia operand na wartość logiczną (true lub false)
2. Odwraca ją

• Jeśli operand jest truthy → ! zwraca false
• Jeśli operand jest falsy → ! zwraca true

---

Najważniejsze przykłady JAWNEJ konwersji (explicit conversion) w JavaScript:

Jawna konwersja na liczbę (Number)
1.Number()
Number("123"); // 123
Number("12.5"); // 12.5
Number("abc"); // NaN
Number(true); // 1
Number(false); // 0

2.parseInt() – liczby całkowite
parseInt("123"); // 123
parseInt("10px"); // 10
parseInt("12.9"); // 12

3.parseFloat() – wyciąga ze stringa liczby zmiennoprzecinkowe
parseFloat("12.5"); // 12.5
parseFloat("12.5px"); // 12.5

4.operator jednoargumentowy +
+"42"; // 42
+"3.14"; // 3.14
+true; // 1
+false; // 0
+"abc"; // NaN

Jawna konwersja na string
1.String()
String(123); // "123"
String(true); // "true"
String(null); // "null"
String(undefined);// "undefined"

2. .toString() (uwaga: nie działa na null i undefined!)
   (123).toString(); // "123"
   true.toString(); // "true"
3. Łączenie ze stringiem
   123 + "" // "123"
   false + "" // "false"

Wartości, które dają False:

Wartości Falsy = false, 0, 0n (to jest wartość z BigInt – bo to osobny typ danych, inny niż Number), ””, Null, Undefined, NaN

Wartości, które dają Truth:

Wartości Truthy = true, 1, -1, „0” (nie pusty String), ”false”, ” ”(ze spacją), ”tekst”

=dzięki temu możemy sprawdzić, czy użytkownik wpisał właściwą, identyfikowalną wartość lub nie

= dzięki temu sprawdzamy wartości bez jawnego porównania

---

Konwersja niejawna (implicit conversion) to taka sytuacja, kiedy JavaScript sam automatycznie zmienia typ danych, bo wymaga tego kontekst — np. operacja, porównanie, połączenie stringów itd.
Nie używasz żadnej funkcji typu Number() czy String() — JS robi to „za ciebie”.

Gdzie JavaScript wykonuje konwersję niejawną?
Najczęściej w:

1. Operacjach arytmetycznych
2. Porównaniach luźnych (==, != dlatego np. '2'==2/ JS zamieni stringa na liczbę)
3. Łączeniu stringów (+)
4. Instrukcjach logicznych (if, ||, &&)
5. Użyciu booleanów w warunkach

W przypadku + priorytet ma łączenie tekstów nad dodawaniem liczb.

Dlatego: 5 + "3" = "53"

W JavaScript operator + jest specjalny, bo robi dwie różne rzeczy w zależności od typów operandów:

1. Jeśli oba operandy są liczbami → wykonuje dodawanie
2. Jeśli przynajmniej jeden operand jest stringiem → wykonuje konkatenację (łączenie tekstów)

czyli:

'5' - 2 = 3 / JS zamieni string na liczbę, ale już:

'5' + 3 = '53' / JS zamieni trzy na string i połączy je

'5'- '2' = 3 /JS ze względu na - zamieni stringi na liczby, wymusi działanie matematyczne

Ważne by używać operatory ścisłe! – nowa zasada, porównujemy wartości i typy wartości czyli używać === lub !==

Oraz by używać jasną konwersję typów

---

short-circuit evaluation (po polsku czasem mówi się „krótkie ocenianie warunków”).
To mechanizm automatyczny w JavaScript (i wielu innych językach), który sprawia, że operatory logiczne && i || nie sprawdzają drugiego argumentu, jeśli wynik da się ustalić już po pierwszym.

Operatory możemy łączyć (te arytmetycne i logiczne) wzgodzie z zasadami matematycznymi

---

Operator nullish coalescing nazywamy po polsku:
-operator łączenia z wartością null
-operator łączenia z “null”
- lub krótko operator ??.

A ?? B

Zwraca:

✔ A, jeśli A nie jest null ani undefined
✔ B, jeśli A jest null lub undefined

Czyli działa tylko na braki wartości, a nie na inne wartości falsy (!!).

To znaczy: „Jeśli nie ma wartości, to weź zapasową.”

let name = null;
let username = name ?? "Anonim";

console.log(username); 
// "Anonim"

?? działa tylko na null i undefined, całą resztę traktuje jako wartości poprawne

Najważniejsza różnica między ?? a ||

|| traktuje jako fałsz: 0, "", false, null, undefined

?? patrzy TYLKO na: null i undefined

Łączenie ?? z or lub…….wymaga użycia nawiasu, żeby było wiadomo co najpierw ma się wykonywać

const wynik4 = (undifined ?? ”Domyślna”) II ”Domyślna dla OR”; - nawias wymusza pierwszeństwo, tak jak w arytmetyce

---

Optional chaining to operator ?. w JavaScript, który pozwala bezpiecznie odwoływać się do zagnieżdżonych właściwości obiectów, nawet jeśli któraś część łańcucha jest null lub undefined.

Znaczy: „Wejdź do kolejnej właściwości, ale tylko jeśli poprzednia istnieje.”

let user = null;

console.log(user?.name); 
// undefined (nie ma błędu!)

---

Kwestia pierwszeństwa operatorów – operator precedence:

Operatory arytmetyczne mają pierwszeństwo przed operatorami porównania niżej są operatory logiczne ; dodatkowo zawsze nawiasy wymuszają pierwszeństwo wykonywania

Kolejność wykonywania operacji logicznych: not – end – or – nullish – inne

Kolejność wykonywania operacji: mnożenie – dodawanie

Niedawno dodano nowe operatory: &&=Przypisz nową wartość tylko wtedy, gdy zmienna po lewej jest „prawdziwa”., II=Przypisz nową wartość tylko wtedy, gdy obecna wartość jest „falsy”, ??= Przypisz nową wartość tylko wtedy, gdy obecna wartość to null lub undefined

---

INSTRUKCJE WARUNKOWE

Instrukcje warunkowe

Jeśli chcemy żeby program nie tylko nadawał wartości i zwracał je

A chcemy by program coś robił

Instrukcja if – czyli „jeżeli”. Warunek to coś, co zwraca true lub false.

if (warunek) {
  // kod wykona się tylko jeśli warunek jest prawdziwy (true)
}

Instrucje if mogą być zagnieżdżone – może być if w if

 Zmienne mogą istnieć tylko w środku if

Jeśli zmienna ma istnieć poza blokiem if, wtedy musi być zdefiniowana powyżej

if else

if (warunek) {
  // jeśli warunek jest true
} else {
  // jeśli warunek jest false
}

if else może istnieć tylko po bloku if, nie samodzielnie – możemy założyć, że to co w if jest falsy

Bardziej specyficzne, ściślejsze warunki powinny być sprawdzane wcześniej niż inne, dobrą praktyką jest zastanowienie się czy else jest potrzebne Drzewo decyzyjne if przestanie działać jeśli pierwszy warunek zostanie spełniony, a kolejne w nim umieszczone nie; jeśli więcej warunków ma się procesować to potrzebujemy osobnych, równoważnych warunków if

if ... else if ... else /jeśli ... jeśli nie.... pozostałe

if (warunek1) {
  // jeśli warunek1 jest true
} else if (warunek2) {
  // jeśli warunek1 było false, ale warunek2 jest true
} else {
  // jeśli żaden warunek nie jest true
}

WAŻNE

Teoretycznie można pomijać nawiasy klamrowe/wąsy – ale zaleca się by je w JS, nawet w jednoliniowych kodach, ich nie pomijać – jasno definiują zakres bloku

Ważne – nazwy zmiennych muszą nieść informacje, bo potem trudno je zinterpretować

Unikać zbyt głębokiego zagnieżdżania – więcej niż 3 poziomy zagnieżdżania -kod robi się trudny, lepiej wydzielić coś na osobne funkcje

Ważna jest spójna kolejność warunków – budowa logicznego sprawdzania wg własnego klucza

Ważne w komentarzach wyjaśnianie dlaczego/po co coś tak jest zapisane

Rozważyć czy zaprzeczenia są konieczne – bo komplikują (czasem lepiej if else)

---

UWAGA

W JavaScript (i w programowaniu ogólnie) guard clause to sposób pisania instrukcji 'if' w funkcji, który szybko „odcina” przypadki wyjątkowe lub błędne i wychodzi z funkcji zamiast robić zagnieżdżone if/else.

Guard clause zwykle wykorzystuje return (lub czasem throw w przypadku błędów), żeby od razu zakończyć działanie funkcji, jeśli spełniony jest pewien „warunek ochronny”. RETURN zwraca wartość lub undefined, jeśli jej nie było. return działa tu jako strażnik: jeśli warunek jest spełniony, funkcja kończy się natychmiast.

function checkAge(age) {
  if (age < 18) return "Dostęp zabroniony"; // jeśli warunek spełniony → zakończ funkcję

  // reszta funkcji wykona się tylko, jeśli age >= 18
  return "Dostęp przyznany";
}

console.log(checkAge(15)); // "Dostęp zabroniony"
console.log(checkAge(20)); // "Dostęp przyznany"
Tutaj return w środku if działa jak „strażnik” – przerywa funkcję, jeśli warunek jest prawdziwy.

Kod po return w tej rundzie nie wykona się, ale funkcja sama dalej istnieje i można ją wywołać ponownie.

---

Skrócona forma: operator trójargumentowy (ternary)

warunek ? wartość_gdy_true : wartość_gdy_false;

Przykład:

const access = age >= 18 ? "OK" : "NIE";

---

Instrukcja switch w JavaScript służy do wykonywania różnych fragmentów kodu w zależności od wartości zmiennej — podobnie jak wiele if...else if, ale czytelniej i wygodniej, gdy porównujesz konkretną wartość.

Używamy go, gdy:

• chcemy sprawdzić konkretną wartość zmiennej (np. liczby, stringa)
• mamy wiele możliwych przypadków → 5, 10, 20 warunków
• if...else if...else if... byłoby za długie i mniej czytelne

switch (wyrażenie) {
  case wartość1:
    // kod wykonany, jeśli wyrażenie === wartość1
    break;

  case wartość2:
    // kod wykonany, jeśli wyrażenie === wartość2
    break;

  default:
    // kod, jeśli nic nie pasuje
}

-przyjmuje wartość wyrażenia i porównuje z wieloma cases / typ danych musi się zgadzać – musi być ścisłe porównanie (na przekonwertowanych wartościach); jeśli case się będzie zgadzał to kod się wykona, po case jest zawsze break – żeby nie były analizowane kolejne warunki case

 break = tu zakończ switch; na końcu można dać default – które zadziała jeśli żaden case się nie sprawdzi

Kluczowe elementy
✔ switch (coś) - to „coś” jest porównywane z wartościami w case.

✔ case - jeden możliwy przypadek.

✔ break - zatrzymuje dalsze sprawdzanie przypadków.
Jeśli go nie damy → nastąpi FALLTHROUGH, czyli JS wejdzie do kolejnego case.

✔ default - wykona się, jeśli żaden case nie pasuje.
Odpowiednik else w instrukcji if.

const day = 6;

switch (day) {
  case 6:
  case 7:
    console.log("Weekend!");
    break;

  default:
    console.log("Dzień roboczy");
}

liczba % 2 === 0 to sprawdza czy liczba jest parzysta

---

PĘTLE

pętle – powtarzanie kawałka kodu bez przepisywania, określoną liczbę razy lub w jakiejś sekwencji

budowa:

warunek początkowy

warunek, który ma być spełniony

implementacja – jak zwiększać licznik i o ile, żeby pętla się „kręciła”

CZYLI:

👉 powtarzają blok kodu tak długo, jak spełniony jest warunek
albo
👉 powtarzają blok kodu określoną liczbę razy

Pętla to konstrukcja, która:

• zaczyna od jakiejś wartości
• sprawdza warunek
• jeśli warunek jest prawdziwy → wykonuje kod
• po wykonaniu kodu zmienia wartość (np. zwiększa licznik)
• wraca na początek i znowu sprawdza warune

Najważniejsze typy pętli w JS:
✔ for
✔ while
✔ do...while
✔ pętle tablicowe (np. forEach, map, filter)

1.Pętla for

for (start; warunek; krok) {
  // kod do powtarzania
}

• start: ustawiamy licznik (może być rozumiany jako index tablicy)
• warunek: dopóki jest true → pętla działa
• krok: zmieniamy licznik po każdym przebiegu (licznik zmieniamy i tu uwaga - nie poprzez np. operator dodawania, który potrzebuje dwóch danych-wartości, potrzebujemy:

i += 2 (instrukcja dodania i przypisania wyniku do zmiennej w skrócie) oznacza:

i = i + 2;

i– i i++ to specjalne skróty w JavaScript i innych językach programowania, które zmieniają wartość zmiennej bez potrzeby używania =.

i++ → zwiększa i o 1 (to samo co i = i + 1)

i– → zmniejsza i o 1 (to samo co i = i - 1)

SPOSÓB ZAPISU:

for (let i = 0; i < 5; i++) {
  console.log("i =", i);
}

• i = 0
• sprawdza 0 < 5 → true
• wykonuje console.log
• i++ → i = 1
• sprawdza 1 < 5 → true
  ...
  aż do i = 4
• i = 5 → warunek false → pętla kończy się

const owoce = ["jabłko", "banan", "gruszka"];

for (let i = 0; i < owoce.length; i++) {
  console.log(i, owoce[i]);

tu wyświetlenie w konsoli to (i - numer indexu, owoce[i] - to pojedynczy element tablicy z określoną w zmiennej wartością)

Ważne: i++ jest w nawiasie pętli, więc JS automatycznie wykona go po każdym console.log

Iteracja w pętli oznacza jedno wykonanie całego ciała pętli. Innymi słowy, każdorazowe "przejście" pętli przez jej blok kodu nazywamy iteracją.

PĘTLA WHILE

Pętla while – wykonauje  działanie dopóki warunek jest prawdziwy, while – wymaga ręcznego zarządzania, trzeba samemu przypilnować inicjalizację i iterację

while (warunek) {
  // kod do powtarzania
}

w while sam musisz:

1. Zainicjalizować zmienną przed pętlą
2. Aktualizować ją w pętli (krok)
3. Pilnować, żeby warunek w pewnym momencie stał się fałszywy, inaczej powstanie nieskończona pętla

let i = 0;
while (i < 5) {
  console.log(i);
  i++;   // musimy zrobić krok sami
}

Można użyć i++ w console.log, ale zwykle oddziela się logikę zwiększania zmiennej od wypisywania, żeby było czytelnie

---

PĘTLA DO WHILE {} DO ()

do…while w JavaScript działa trochę inaczej niż zwykła while — jest „odwrotnie” pod względem kolejności sprawdzania warunku

do {
  // kod do wykonania
} while (warunek);

• do → blok kodu, który zostanie wykonany przynajmniej raz
• while (warunek) → sprawdzenie warunku po wykonaniu bloku kodu

RÓŻNICE

Pętla	Sprawdzenie warunku	Czy blok wykona się co najmniej raz?

while

przed wejściem do pętli

nie, może się nie wykonać jeśli warunek fałszywy

do…while

po wykonaniu bloku

tak, zawsze wykona się przynajmniej raz

CONTINUE

Jak to działa:

• Kiedy interpreter napotka continue, reszta kodu w bloku pętli dla tej iteracji jest pomijana.
• Pętla nie kończy się całkowicie – przechodzi do kolejnej iteracji (sprawdza warunek i ewentualnie wykonuje blok ponownie).

let i = 0;

do {
  i++;
  if (i % 2 === 0) {
    continue; // pomijamy parzyste liczby
  }
  console.log(i);
} while (i < 5);

Tu pętla liczy wszystkie liczby, ale continue sprawia, że niektóre liczby nie wykonują akcji w bloku (tutaj: console.log). Czyli continue mówi: "jeśli zmienna spełnia ten warunek (tu jest parzysta) nie rób dla niej kolejnego kroku z bloku do - nie wyświetlaj jej, tylko licz dalej; jak nie jest parzysta to wykonaj to co jeszcze mamy w bloku - wyświetl; while - rób to aż do 5"

BREAK

• Po napotkaniu break program opuszcza pętlę natychmiast, nawet jeśli warunek pętli nie został jeszcze spełniony
• używamy: w pętlach: for, while, do…while, w instrukcji switch

tu w konsoli wyświetli się: Środa:

let day = 3;

switch(day) {
  case 1:
    console.log("Poniedziałek");
    break;
  case 3:
    console.log("Środa");
    break;
  default:
    console.log("Inny dzień");
}

tu w konsoli wyświetli się: Środa, Piątek (tu uwaga: SWITCH NAPOTKAŁ WYŻEJ WARUNEK TRUE, WIĘC KOLEJNY WYŚWIETLI ALE GO JUŻ NIE SPRAWDZA), Inny dzień

let day = 3;

switch(day) {
  case 1:
    console.log("Poniedziałek");
  case 3:
    console.log("Środa");
  case 5:
    console.log("Piątek");
  default:
    console.log("Inny dzień");
}

👉 Z break — wykonuje się tylko dopasowany case.
👉 Bez break — wykonują się WSZYSTKIE następne case’y aż do końca switch.

---

FLAGA PĘTLI

Flaga pętli to zmienna logiczna (true/false), którą używamy, aby kontrolować działanie pętli.

Jest to alternatywa do standardowego warunku w pętli while lub do…while, i pozwala dynamicznie zakończyć pętlę w dowolnym momencie.

let running = true;

while (running) {
  let answer = prompt("Wpisz 'stop', żeby zakończyć:");

  if (answer === "stop") {
    running = false; // zmieniamy flagę → pętla się zatrzymuje
  } else {
    console.log("Pętla działa dalej!");
  }
}

console.log("Koniec pętli");

1. running = true → pętla startuje
2. Pytamy użytkownika o input
3. Jeśli wpisze "stop" → running = false → pętla zakończona
4. W przeciwnym razie → pętla kontynuuje

CZYLI

Flaga pętli = zmienna, która decyduje, czy pętla dalej działa. Zmieniamy jej wartość w trakcie działania pętli → pętla kończy się, gdy flaga = false

W praktyce flaga pętli to po prostu zmienna, która kontroluje, czy pętla ma działać.
Nie musi być ustawiana „świadomie” na false — jeśli w wyniku jakichś operacji zmienna zmieni się na false (albo na wartość traktowaną jako false), pętla też się zatrzyma, bo warunek stanie się fałszywy. ✅