Składnia ES6+ na co dzień

const produkt = { nazwa: 'Słuchawki', cena: 149.9, promocja: true };

// 1. wyrażenia w ${…}: działanie, operator ?:
const etykieta = `${produkt.nazwa} – ${produkt.cena.toFixed(2)} zł${produkt.promocja ? ' (PROMOCJA)' : ''}`;
console.log(etykieta);

// 2. wiele linii – nowe linie zostają w napisie
const karta = `
<article class="produkt">
  <h3>${produkt.nazwa}</h3>
  <p>${produkt.cena} zł</p>
</article>`;
console.log(karta.trim());

// 3. zagnieżdżenie: lista <li> z tablicy
const oceny = [5, 4, 3];
console.log(`<ul>${oceny.map((o) => `<li>${o}</li>`).join('')}</ul>`);

function obliczBrutto(netto, vat = 23) {
  return netto * (1 + vat / 100);
}

console.log(obliczBrutto(100));      // vat pominięty → 23
console.log(obliczBrutto(100, 8));   // vat podany → 8
console.log(obliczBrutto(100, 0));   // 0 to konkretna wartość, nie „brak”
console.log(obliczBrutto(100, undefined)); // undefined → wraca domyślne 23

// wartość domyślna może być wyrażeniem i korzystać z wcześniejszych parametrów
function powitaj(imie = 'Gościu', tekst = `Cześć, ${imie}!`) {
  return tekst;
}
console.log(powitaj());
console.log(powitaj('Ola'));
console.log(powitaj('Ola', 'Dzień dobry'));

const data = '2026-10-20'.split('-');
const [rok, miesiac, dzien] = data;
console.log(rok, miesiac, dzien);

// pomijanie elementów – zostaw puste miejsce
const [, , tylkoDzien] = data;
console.log(tylkoDzien);

// wartości domyślne, gdy elementu brakuje
const [pierwszy, drugi = 'brak'] = ['jeden'];
console.log(pierwszy, drugi);

// reszta elementów do nowej tablicy
const [zwyciezca, ...pozostali] = ['Ala', 'Bartek', 'Celina', 'Darek'];
console.log(zwyciezca, pozostali);

// zamiana wartości dwu zmiennych bez zmiennej pomocniczej
let a = 1;
let b = 2;
[a, b] = [b, a];
console.log(a, b);

const uczen = {
  imie: 'Kasia',
  klasa: '3TP',
  oceny: { informatyka: 5, matematyka: 4 },
};

// podstawowo: nazwy zmiennych = nazwy właściwości
const { imie, klasa } = uczen;
console.log(imie, klasa);

// zmiana nazwy: wlasciwosc: nowaNazwa
const { imie: pierwszeImie } = uczen;
console.log(pierwszeImie);

// wartość domyślna i zmiana nazwy razem
const { srednia: sredniaOcen = 0 } = uczen;
console.log(sredniaOcen);

// zagnieżdżenie
const { oceny: { informatyka } } = uczen;
console.log(informatyka);

// reszta właściwości do nowego obiektu
const { klasa: k, ...bezKlasy } = uczen;
console.log(k, bezKlasy);

function zamowBilet({ film, miejsce, ulga = false, godzina = '18:00' }) {
  const cena = ulga ? 18 : 26;
  return `${film}, ${godzina}, miejsce ${miejsce}: ${cena} zł`;
}

console.log(zamowBilet({ film: 'Diuna', miejsce: 'C12' }));
console.log(zamowBilet({ miejsce: 'A1', ulga: true, film: 'Shrek', godzina: '16:30' }));

// to samo dla tablic: funkcja dostaje parę [klucz, wartość]
const pokazWpis = ([klucz, wartosc]) => `${klucz} = ${wartosc}`;
console.log(pokazWpis(['motyw', 'ciemny']));

const podstawowe = ['HTML', 'CSS'];
const zaawansowane = ['JS', 'PHP'];

// łączenie i kopiowanie tablic
const wszystkie = [...podstawowe, ...zaawansowane, 'SQL'];
console.log(wszystkie);

const kopia = [...podstawowe];
kopia.push('Sass');
console.log(podstawowe, kopia); // oryginał nietknięty

// tablica → lista argumentów
const punkty = [12, 45, 7, 31];
console.log(Math.max(...punkty)); // zamiast Math.max(12, 45, 7, 31)

// obiekty: kopia z nadpisaniem – późniejsze wygrywa
const domyslne = { motyw: 'jasny', jezyk: 'pl', dzwiek: true };
const uzytkownika = { motyw: 'ciemny' };
const ustawienia = { ...domyslne, ...uzytkownika };
console.log(ustawienia);

// „zmień jedno pole, nie dotykając oryginału” – wzorzec z React
const produkt = { nazwa: 'Mysz', cena: 89 };
const przeceniony = { ...produkt, cena: 69 };
console.log(produkt.cena, przeceniony.cena);

function suma(...liczby) {
  let wynik = 0;
  for (const n of liczby) wynik += n;
  return wynik;
}
console.log(suma());
console.log(suma(5));
console.log(suma(1, 2, 3, 4));

// parametry zwykłe + reszta
function zapiszOcene(przedmiot, ...oceny) {
  return `${przedmiot}: ${oceny.length} ocen, ostatnia ${oceny.at(-1)}`;
}
console.log(zapiszOcene('fizyka', 3, 4, 5));

// spread i rest razem: tablica → argumenty → tablica
const wyniki = [88, 92, 79];
console.log(suma(...wyniki));

const zamowienie = {
  nr: 1042,
  klient: { imie: 'Marek' },
  // brak: dostawa, rabat, anuluj()
};

console.log(zamowienie.klient?.imie);      // Marek
console.log(zamowienie.dostawa?.miasto);   // undefined, bez błędu
console.log(zamowienie.dostawa?.miasto?.toUpperCase()); // też undefined

// wywołanie metody, która może nie istnieć
console.log(zamowienie.anuluj?.());        // undefined – nic się nie wywołało

// dostęp nawiasowy
const pole = 'klient';
console.log(zamowienie[pole]?.imie);

// typowy przypadek w DOM: element może nie istnieć
const element = null; // np. wynik document.querySelector('#brak')
console.log(element?.textContent);         // undefined zamiast TypeError

const koszyk = { sztuk: 0, uwagi: '', rabat: null };

console.log(koszyk.sztuk || 1);   // 1 – ZŁE: użytkownik wpisał 0, a my zmieniliśmy na 1
console.log(koszyk.sztuk ?? 1);   // 0 – dobrze: 0 to prawdziwa wartość

console.log(koszyk.uwagi || '(brak uwag)'); // tu || ma sens: pusty napis = brak uwag
console.log(koszyk.rabat ?? 0);   // 0 – null oznacza „nie ustawiono”

// ?. i ?? razem – klasyczna para
const ustawienia = {};
const motyw = ustawienia.wyglad?.motyw ?? 'jasny';
console.log(motyw);

// przypisanie tylko, gdy brak wartości: ??= (ES2021)
const konfiguracja = { port: 0 };
konfiguracja.port ??= 8080;   // 0 nie jest null → zostaje 0
konfiguracja.host ??= 'localhost'; // brak → ustawia
console.log(konfiguracja);

const oceny = [5, 3, 4, 2, 5];

let suma = 0;
for (const ocena of oceny) suma += ocena;
console.log(`Średnia: ${(suma / oceny.length).toFixed(2)}`);

// break działa (w forEach by nie zadziałał)
for (const ocena of oceny) {
  if (ocena < 3) {
    console.log('Jest ocena niedostateczna – przerywam');
    break;
  }
}

// indeks potrzebny? entries() tablicy daje pary [indeks, wartość]
for (const [i, ocena] of oceny.entries()) {
  if (i < 2) console.log(`#${i + 1}: ${ocena}`);
}

// obiekt → wpisy
const cennik = { laminowane: 12, winylowe: 14, deska: 18 };
for (const [rodzaj, cena] of Object.entries(cennik)) {
  console.log(`${rodzaj}: ${cena} zł/m²`);
}
console.log(Object.keys(cennik), Object.values(cennik));

const imie = 'Tomek';
const wiek = 18;
const pole = 'klasa';

const uczen = {
  imie,                    // zamiast imie: imie
  wiek,
  [pole]: '4TP',           // klucz obliczany: właściwość klasa
  [`ocena_${2026}`]: 5,    // klucz z template stringa
  przedstaw() {            // skrócona metoda
    return `${this.imie}, ${this.wiek} lat, ${this.klasa}`;
  },
};

console.log(uczen.przedstaw());
console.log(Object.keys(uczen));

// funkcja strzałkowa zwracająca obiekt – klamry trzeba otoczyć nawiasami
const zrobPunkt = (x, y) => ({ x, y });
console.log(zrobPunkt(3, 4));