TYPY DANYCH, KONWERSJE, PĘTLE, MODYFIKACJA DANYCH

TYPY DANYCH  

Prymitywne:  

Number let nr = 20 

String let text = "To jest tekst" 

Boolean let bol = true 

BigInt 

Undefined 

Null 

Symbol 

Typy złożone: 

Object (w tym Array, Map i Set) 

KONWERSJE 

Niejawna (automatyczna)  implicit

• przy dodawaniu sprowadza liczby do stringa  

const wynik = 42 + “10” -> 4210  

• przy odejmowaniu konwertuje tekst do liczby 

const wynik = “20” - 5 -> 15 

• pusty string definiuje jako false 
• opetaror == konwentuje luźno np. 5==”5” -> true 

Jawna (kontrolowana)  Explicit

• Number(tekstLiczba) 
• String(liczba) 
• Boolean(wartość) -> true 

Konwersja do String 

• funkcja String() 
• metoda toString() //uwaga null.toString i undefined.toString wyrzucą błąd 
• dodanie pustego stringa “” 
• template literals `${liczba4}` 

Konwersja do Liczby 

• funkcja Number()  
• Number(undefined)  = NaN (NaN) 
• Number("") = 0 (pusty string = 0!) 
• Number(" 123 ") = 123 (białe znaki ignorowane) 
• Number("42abc") = NaN (NaN - nie może być tekst 

• metoda parseInt() - parsuje string i zwraca liczbę CAŁKOWITĄ 
• parseInt("42.9") = 42 (obcina część dziesiętną!) 
• parseInt("42abc") = 42 (parsuje do pierwszego nie-cyfry) 
• parseInt("abc42") = NaN (NaN - musi zaczynać się od cyfry) 
• parseInt("FF", 16) = 255 (hex do decimal) 
• parseInt("1010", 2) = 10 (binary do decimal) 

• funkcja parseFloat() -parsuje string i zwraca liczbę ZMIENNOPRZECINKOWĄ 
• Operator unary + (niejawna) np.    +true = 1 

Konwersja boolean 

• Boolean() 
• !! (podwójna negacja) 

TYPY DANYCH  

Prymitywne:  

Number let nr = 20 

String let text = "To jest tekst" 

Boolean let bol = true 

BigInt 

Undefined 

Null 

Symbol 

Typy złożone: 

Object (w tym Array, Map i Set) 

KONWERSJE 

Niejawna (automatyczna)  

• przy dodawaniu sprowadza liczby do stringa  

const wynik = 42 + “10” -> 4210  

• przy odejmowaniu konwertuje tekst do liczby 

const wynik = “20” - 5 -> 15 

• pusty string definiuje jako false 
• opetaror == konwentuje luźno np. 5==”5” -> true 

Jawna (kontrolowana)  

• Number(tekstLiczba) 
• String(liczba) 
• Boolean(wartość) -> true 

Konwersja do String 

• funkcja String() 
• metoda toString() //uwaga null.toString i undefined.toString wyrzucą błąd 
• dodanie pustego stringa “” 
• template literals `${liczba4}` 

Konwersja do Liczby 

• funkcja Number()  
• Number(undefined)  = NaN (NaN) 
• Number("") = 0 (pusty string = 0!) 
• Number(" 123 ") = 123 (białe znaki ignorowane) 
• Number("42abc") = NaN (NaN - nie może być tekst 

• metoda parseInt() - parsuje string i zwraca liczbę CAŁKOWITĄ 
• parseInt("42.9") = 42 (obcina część dziesiętną!) 
• parseInt("42abc") = 42 (parsuje do pierwszego nie-cyfry) 
• parseInt("abc42") = NaN (NaN - musi zaczynać się od cyfry) 
• parseInt("FF", 16) = 255 (hex do decimal) 
• parseInt("1010", 2) = 10 (binary do decimal) 

• funkcja parseFloat() -parsuje string i zwraca liczbę ZMIENNOPRZECINKOWĄ 
• Operator unary + (niejawna) np.    +true = 1 

Konwersja boolean 

• Boolean() 
• !! (podwójna negacja) 

PĘTLE 

For - stosujemy kiedy znamy punkt odcięcia. 

for (let i = 0; i < 5; i++) { 

  console.log("Iteracja numer: " + i); 

} 

Pętla zawiera: 

• inicjalizacjie let i = 0 -wykonuje się zawsze raz, umieszczamy zmienną, która jest licznikiem. 

• warunek i < 5  - jest sprawdzany przed każdą iteracją w pętli for. Jeżeli warunek true pętla się wykona, jeżeli false pętla się kończy. 

• iteracje(jak postępować) i++ – określa jak postępować, wykonuje się po każdej iteracji dopóki warunek jest spełniony  

• Blok kodu - w nawiasach klamrowych {} znajduje się blok kodu (ciało pętli). 

Zmienna i nazwana od iterator jest odgórnie ustalona.  

Jeżeli potrzeba innych zmiennych w zagnieżdżeniu pętli zastosujemy “j”, kolejna “k”. 

Każda pętla w kodzie może mieć jedno “i” jako iterator.  

Praktyczne zastosowanie pętli For:  

• sumowanie koszyka  
• przetwarzanie elementów tablicy 
• generowanie powtarzających się elementów 
• obliczenia na znanej liczbie elementów 

While – stosujemy, kiedy nie znamy punktu odcięcia (zdarzenia losowe).  

While to pętla warunkowa (dopóki zmienna nie spełnia warunku, pętla się wykonuje)(nieskończona).  

let licznik = 0; 

while (licznik < 5) { 

  console.log("Licznik: " + licznik); 

  licznik++;  

} 

Zasada działania: 1. Sprawdź warunek 2. Jeżeli true wykonaj blok kodu, 3. Powtarzaj, aż warunek będzie false. 

• while zanim wykona kod sprawdza warunek, jeżeli od początku jest false blok się nie wykona  
• nie ma automatycznej iteracji i inicjalizacji 
• używamy jej do zdarzeń losowych  

Specjalny przypadek while  

DO... WHILE 

• Wykonuje kod przynajmniej raz, a dopiero potem sprawdza warunek 
• Warunek sprawdzany jest po wykonaniu bloku kodu 

let i = 0;  

do {  

console.log(i);  

i++;  

} while (i < 5); 

BREAK Powoduje natychmiastowe wyjście z pętli. 

• Może być stosowany jako optymalizacja 
• Przerywa tylko najbliższą pętle 

IF = i=szukana liczba wtedy break 

const szukanaLiczba = 42; 

let znalezionoNa = -1; 

for (let i = 0; i < 100; i++) { 

  console.log("Sprawdzam pozycję: " + i); 

  if (i === szukanaLiczba) { 

    console.log("Znaleziono liczbę " + szukanaLiczba + "!"); 

    znalezionoNa = i; 

    break; // Zakończ pętlę, dalsze sprawdzanie niepotrzebne 

  } 

} 

if (znalezionoNa >= 0) { 

  console.log("Liczba znaleziona na pozycji: " + znalezionoNa); 

} 

Continue – pomija resztę kodu w danej iteracji (to bardzo ważne), ale nie przerywa całej pętli. 

Przykład pętli, która przetwarza tylko liczby dodatnie: 

const liczby = [5, -2, 8, -7, 12, 0, -3, 15, 3]; 

let sumaDodat = 0; 

for (let i = 0; i < liczby.length; i++) { 

  const liczba = liczby[i]; 

  if (liczba <= 0) { 

    console.log("Pomijam: " + liczba + " (nie jest dodatnia)"); 

    continue; // W tym miejscu pomijana jest reszta iteracji 

  } 

  // Ten kod wykonuje się tylko dla dodatnich 

  sumaDodat = sumaDodat + liczba; 

  console.log("Dodaję: " + liczba + ", suma: " + sumaDodat); 

} 

Label Statements  -  pozwalają na definiowanie pętli, które za pomocą break chcemy przerwać, jeżeli szukamy jednego elementu dla wielu pętli. 

outerLoop: for (let i = 0; i < 3; i++) { 

  for (let j = 0; j < 3; j++) { 

    if (i === 1 && j === 1) { 

      break outerLoop;  // przerywa zewnętrzną pętlę 

    } 

    console.log(`i = ${i}, j = ${j}`); 

  } 

} 

For in - przechodzi po kluczach obiektu – nie iteruje tablic. 

const osoba = { 

  imie: "Jan", 

  nazwisko: "Kowalski", 

  wiek: 30 

}; 

osoba.miasto= "Warszawa";  

for (let klucz in osoba) { 

  console.log(klucz + ": " + osoba[klucz]); 

} 

// Wynik: 

// imie: Jan 

// nazwisko: Kowalski 

// wiek: 30 

For off - przechodzi po tablicach, bezpośrednio po wartościach  

String też jest tablicą (poszczególne litery) 

Automatycznie używa iteratora 

const liczby = [10, 20, 30]; 

for (let indeks in liczby) { 

  console.log(typeof indeks); // "string" - indeks jest stringiem! 

  console.log(indeks + 1); // "01" zamiast 1 - konkatenacja stringów 

} 

TRY, CATCH - sprawdza czy coś się da wykonać. 

Pusty catch nie powinien istnieć  

Iterowanie ręczne 

Można ręcznie kontrolować proces iteracji używając iteratorów i generatorów. Przykład ręcznego iterowania za pomocą next.  

console.log(iterator.next()); // { value: "jabłko", done: false } 

console.log(iterator.next()); // { value: "banan", done: false } 

console.log(iterator.next()); // { value: "gruszka", done: false } 

console.log(iterator.next()); // { value: undefined, done: true } 

Hoisting 

Dla zmiennych, jak dla funkcji, działa hoisting – wynoszenie deklaracji na górę zakresu. 

Funkcje i return 

W funkcji musi występować return, jeśli chcemy zwrócić wartość z funkcji. 

Można wywoływać return kilkukrotnie.  

function obliczPoleOkregu(promien){ 

    let pole = Math.PI*promien*promien; 

    if(pole> 50){ 

        return "duże koło"; 

    } 

    return pole 

} 

prefix 

"HTML5 template": { 

    "prefix": "html5", 

    "body": [ 

        "<!DOCTYPE html>", 

        "<html lang=\"pl\">", 

        "<head>", 

        "    <meta charset=\"UTF-8\">", 

        "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">", 

        "    <title>${1:Document}</title>", 

        "</head>", 

        "<body>", 

        "    $0", 

        "<script>", 

        "</script>", 

        "</body>", 

        "</html>" 

    ], 

    "description": "A minimal HTML5 boilerplate" 

    } 

Funkcje strzałkowe 

Parametry w nawiasach, strzałki, ciało funkcji 

Jeżeli arrow function ma tylko jeden parametr to nawiasy są optymalne. 

Jeżeli ciało funkcji zawera tylko jedno wyrażenie to można pominąć klamry i słowo return.  

Zwracanie obiektu – musimy go otoczyć nawiasem i klamr. W iinym wypadku może pomyśleć że jest to ciało funkcji.  

Arrow functions z blokiem kodu wymagają słowa return.   

Parametry domyślne  

Funkcje strzałkowe posiadają parametry domyślne. Używa się tego gdy potrzebujemy takich parametrów zawsze.  

Wartość domyślna jest używana tylko wtedy gdy  (coś) jest undefined.  

Wartości domyślne nie muszą być tego samego typu - może być number string boolean. Mogą być wyrażeniami,  

0 jako wartość nie jest falsy.  

Używać przy funkcjach użytkowych 

PARAMETRY RESTOWE  

Obiekt arguments  

Można się przez tablice iterować i wprowadzac własne warunki 

i%2===0 

Funkcje są obiektami pierwszej klasy tzn. Że można z nimi robić to co z innymi wartościami.  (co to znaczy)  

Możemy umieścić funkcję (obiekt) w tablicy.  

Pierwszy element tablicy ‘0’ 

Funkcję w funkcji (obiekt w obiekcie). 

W obiekcie mamy klucz wartość.  

Funkcje można przekazywać jako argumenty do innych funkcji.  

Np. Jedna funkcja iterująca się przez tablicę, używając odpowiedniego narzedzia wpłyniemy na jej zachowanie.  

Funkcje mogą zwracać inne funkcje. 

Java script dostarcza tablice wyższego rzędu.  

Można tworzyć własne funkcje wysokiego rzędu, one pomagają nam w organizacji kodu.  

Call back funkcja która coś zrobi i oddzwoni z operacją. Call back może być synchroniczny i asynchroniczny. Callback jest nieblokujący. Wynik z działania będzie taki sam jak przy zwykłej funkcji, ale przy dłuższych działaniach callback zapewni że nie będzie martwego ekranu. Dzięki temu program jest responsywny.  

Przy ustawianiu timerów można użyć callbacku  

Lexical scope  - zasięg zmiennych określony przez strukturę kodu w momencie pisania.  

Zasięg funkcji – wszystkie rzeczy, które są wewnątrz ciała.  

Hierarchia - jeżeli nie ma zdefiniowanej zmiennej wewnętrznej szuka wyżej i globalnej.  

Jeżeli zmienna globalna jest let możemy ją zmienić wewnątrz funkcji  

Closure zapamiętuje zmienn 

Immediately Invoked Function Expression  - nie zaleca sstosowania tej funkcji   

Podsumowanie (first class function – funkcje jako obiekty można uzywać, higher class function zwracają jako argumenty inne funkcjie, call back to funkcja która jest przekazywana jako argument do funkcji wyższego rzędu, closure funkcje ktore potrafia zapamietac swoj zasieg, historyczny koncept IIFE wyrazenia funkcyjne ktore sie wykonuja natychmiast.  

Do zapamiętania: funkcje w java script są obiektami pierwszej klasy, higher - bawią się innymi funkcjami;  

Call back – przekazywane;  

THIS -  

“use stict” nie zabiera z kontekstu globalnego, blokuje 

W zaleznosci od tego jak wywołujemy this tak będzie działać  

Bingowanie obiektw 

TABLICE  

Porządkuje elementy indexowane  

Ma długość  

Tablica może być pusta, może przechowywać cyfry, może przechowywać stringi, w tablicy możemy przechowywać obiekty, tablice w tablicy (macierz).  

Co robi push  

Nie zmienia się tablica, ale jej wartości dlatego działa przy const 

W tablicy może być wrtość, nawet wartość prymitywna. 

Typy wartości które wprowadzamy mają zanczenie  

Array.of - powoduje konwersję  

15.10.2025  

INDEksy 

DOSTAWAnie się do ostatniego elementu tablicy  

Wartość indeks może być zmienną - może być to zmienna z pętli for 

Java Script nie ma ujemnych indeksów 

Tablica jest specjalnym obiekem który ma specjalną wartość - długość.  

Lenght zwraca liczbę elementów w tablicy.  

Długość tablicy wynosimy przed pętle, żeby tablica nie była iterowana za każdhym razem  

Długość pustej tablicy to 0  

Można określić długość tablicy i robi się to na zawsze. Nie moża sie cofnąć.  

Można stworzyć kopię tablicy i na niej przycinać.  

Możemy wydłużać tablicę. Dodany nienazwany element będzie undefined. Kod się wykona, nie ma błędu, brakuje tylko wartości.  

Tablice można filtrować, dzięki temu sprawdzamy rzeczywistą długość tablicy – bez undefined.  

Liczba elementów = warzywa filter 

Warzywa.forEach((element) => { 

)} pozwala na sprawdzenie tylko zdefiniowanych elementów  

METODY MODYFIKACJI ELEMENTÓW W TABLICY 

Metoda push – elemement dodaje się na końcu tablicy  

Push jest metodą która tablice bezpośrednio modyfikuje.  

Pozwala na dodawanie wszystkiego.  

Pozwala na budowanie programistyczne tablic  

Push modyfikuje oryginalną tablicę jezeli chcemy zachować oryginalna musimy zrobić kopie.  

Metoda pop usunie ostatni element.  

Możemy usubąć prawie tyle elementów ile chcemy.  

Tak długo jak elementy są w tablicy tak długo będzie działał.

Po na pustej tablicy zrobi undefined.  

W sposób progamistyczny można opróżniać np. W pętli.  

Stos fifo – first in first out 

Lifo – last in first out  - wzięcie ostatniego elementu ze stosu 

Metoda shift usuwa pierwszy element tablicy, a jezeli przypisujemy do elementu to go zwraca. Wszystkie elementy przesuwają sie o jeden w dół - porządkuje indeks.  

Na pustej tablicy dostaniemy undefined.  

Shifta możemy używać w pętli.  

UNSHIFT DODAJE JEDEN ALBO WIĘCEJ ELEMENTÓW NA POCZĄTKU TABLICY I ZWRACA NOWY LENGHT 

TYPE OF NIE ROZRÓŻNI TABLICY OD OBIEKTU JEDNO I DRUGIE TO OBJECT 

METODA  

Array.isArray() - tylko dla faktycznych tablic ma wartości.  

If(Array.isArray(dane) 

Metoda map  

Konkretne wartosci zwraca 

Można miec wiele return 

Metoda filter 

Tworzy nową talblice. Funkcja call back jest warunkiem, zwraca true/false. Boolean, wartosc truthy lub falsy.  

Filtrowanie liczb parzystych  
|||  

Find zwraca pierwszą napotkaną wartość w tablicy kktóra jest prawdą.  

W takiej tablicy wyszukujemy takie elementy  

Metoda findIndex 

Last Indecof i indexof 

Method chaining: 

1. Redukcja zbioru 
2. Transformacja danych przez mapy  

Reduce/reduceright 

Wtedy kiedy z tablicy chcemy wziac tylko jedna wartosc, np. Maxymalna  

\ 

Metoda splice 

Slice  

Kółko i krzyżyk  

Tablice wielowymiarowe mogą być nieregularne  

Metody modyfikacji tablic. 

Które metody mutujące a które nie.  

Tablica nie musi być jednowymiarowa  

OBIEKTY 

Notacja kropkowa (jak się dostać do elementu obiektu) l 

et tytuł=ksiazka.tytul😉 

Notacja nawiasowa  

Naming convention camelCase  

INDEKSY 

Podstawy indeksowania 

• Indeksy w JavaScript zaczynają się od 0 
• Pierwszy element: tablica[0] 
• Dostęp do ostatniego elementu: tablica[tablica.length - 1] 
• JavaScript nie obsługuje ujemnych indeksów (w przeciwieństwie do Pythona) 
• Indeks może być zmienną: tablica[i] w pętli for 

Właściwość length 

• Tablica to specjalny obiekt ze specjalną właściwością length 
• length zwraca liczbę elementów w tablicy 
• Długość pustej tablicy: 0 
• Best practice: wynosić length przed pętlą, aby nie iterować za każdym razem const len = tablica.length;for(let i = 0; i < len; i++) { } 
   

Modyfikacja długości tablicy 

• Można ręcznie ustawić długość tablicy: tablica.length = 5 
• Uwaga: Skrócenie tablicy jest nieodwracalne - utracone elementy znikają na zawsze 
• Możliwe rozwiązanie: stworzyć kopię przed modyfikacją 
• Wydłużenie tablicy: nowe elementy będą undefined 
• Kod z undefined nie rzuci błędu, po prostu brakuje wartości 

Filtrowanie undefined 

// Sprawdzenie rzeczywistej długości tablicy (bez undefined) 
const rzeczywistaLiczba = warzywa.filter(element => element !== undefined).length; 
 
// forEach pomija undefined 
warzywa.forEach((element) => { 
  // wykona się tylko dla zdefiniowanych elementów 
}); 
  

Metody MUTUJĄCE (modyfikują oryginalną tablicę) 

1. push() - dodaje na końcu 

tablica.push(element1, element2, ...); 
// Zwraca nową długość tablicy 
// Można dodawać dowolne typy danych 
// Pozwala na programistyczne budowanie tablic 
  

⚠️ Modyfikuje oryginalną tablicę - zrób kopię jeśli chcesz zachować oryginał 

2. pop() - usuwa ostatni element 

const usuniety = tablica.pop(); 
// Zwraca usunięty element 
// Na pustej tablicy zwraca undefined 
// Można używać w pętli do opróżniania tablicy 
  

3. shift() - usuwa pierwszy element 

const pierwszy = tablica.shift(); 
// Usuwa pierwszy element i zwraca go 
// Wszystkie elementy przesuwają się o 1 w dół (reindeksacja) 
// Na pustej tablicy zwraca undefined 
// Można używać w pętli 
  

4. unshift() - dodaje na początku 

tablica.unshift(element1, element2, ...); 
// Dodaje elementy na początku tablicy 
// Zwraca nową długość tablicy 
// Przesuwa wszystkie elementy w górę 
  

5. splice() - uniwersalna metoda 

tablica.splice(start, deleteCount, item1, item2, ...); 
// Usuwa i/lub dodaje elementy w dowolnym miejscu 
// Zwraca tablicę usuniętych elementów 
// MUTUJE oryginalną tablicę 
  

Metody NIE-MUTUJĄCE (tworzą nową tablicę) 

6. slice() - wycina fragment 

const nowaTabica = tablica.slice(start, end); 
// Kopiuje fragment tablicy 
// Nie modyfikuje oryginału 
// end jest wyłączony (nie wchodzi do wyniku) 
  

7. map() - transformacja 

const nowa = tablica.map((element, index, array) => { 
  return nowWartosc; 
}); 
// Tworzy NOWĄ tablicę z przetworzonymi wartościami 
// Może mieć wiele return (warunkowo) 
// Zwraca konkretne wartości 
  

8. filter() - filtrowanie 

const przefiltrowana = tablica.filter((element) => { 
  return warunek; // true/false 
}); 
// Tworzy NOWĄ tablicę 
// Callback zwraca boolean (lub truthy/falsy) 
// Przykład: liczby.filter(x => x % 2 === 0) // parzyste 
  

9. find() - znajdź pierwszy 

const znaleziony = tablica.find(element => warunek); 
// Zwraca PIERWSZĄ wartość spełniającą warunek 
// Zwraca undefined jeśli nic nie znajdzie 
  

10. findIndex() - znajdź indeks 

const indeks = tablica.findIndex(element => warunek); 
// Zwraca indeks pierwszego elementu spełniającego warunek 
// Zwraca -1 jeśli nie znajdzie 
  

11. indexOf() / lastIndexOf() 

const indeks = tablica.indexOf(szukanyElement); 
const ostatni = tablica.lastIndexOf(szukanyElement); 
// indexOf - szuka od początku 
// lastIndexOf - szuka od końca 
// Zwraca -1 jeśli nie znajdzie 
  

12. reduce() / reduceRight() 

const wynik = tablica.reduce((accumulator, currentValue) => { 
  return accumulator + currentValue; 
}, wartoscPoczatkowa); 
// Redukuje tablicę do JEDNEJ WARTOŚCI 
// Przydatne do sum, maksimum, minimum, łączenia obiektów 
// reduceRight - iteruje od końca 
  

STRUKTURY DANYCH 

Kolejki (Queue) - FIFO 

First In, First Out - pierwszy wchodzi, pierwszy wychodzi 

const kolejka = []; 
kolejka.push(1); // dodaj na końcu 
kolejka.shift(); // zabierz z początku 
  

Stosy - LIFO 

Last In, First Out - ostatni wchodzi, pierwszy wychodzi 

const stos = []; 
stos.push(1); // dodaj na końcu 
stos.pop(); // zabierz z końca 
  

SPRAWDZANIE TYPU 

typeof - nie wystarczy! 

typeof [] // "object" ❌ 
typeof {} // "object" ❌ 
// typeof NIE ROZRÓŻNIA tablicy od obiektu! 
  

Array.isArray() - poprawna metoda 

Array.isArray([]) // true ✓ 
Array.isArray({}) // false ✓ 
 
if(Array.isArray(dane)) { 
  // to jest tablica 
} 
  

METHOD CHAINING (łańcuchowanie metod) 

const wynik = tablica 
  .filter(x => x > 10)      // 1. Redukcja zbioru 
  .map(x => x * 2)          // 2. Transformacja danych 
  .reduce((sum, x) => sum + x, 0); // 3. Agregacja 
  

TABLICE WIELOWYMIAROWE 

const macierz = [ 
  [1, 2, 3], 
  [4, 5, 6], 
  [7, 8, 9] 
]; 
 
// Dostęp do elementu 
macierz[0][1] // 2 
 
// Tablice nieregularne (jagged arrays) 
const nieregularna = [ 
  [1, 2], 
  [3, 4, 5, 6], 
  [7] 
]; 
  

Przykład: Kółko i krzyżyk 

const plansza = [ 
  ['X', 'O', 'X'], 
  ['O', 'X', 'O'], 
  ['', '', 'X'] 
]; 
  

OBIEKTY 

Tworzenie obiektów 

const ksiazka = { 
  tytul: "JavaScript", 
  autor: "Jan Kowalski", 
  rok: 2024, 
  strony: 300 
}; 
  

Notacja kropkowa (Dot notation) 

let tytul = ksiazka.tytul; 
ksiazka.rok = 2025; 
  

✓ Prostsza i bardziej czytelna 

 ✓ Używana gdy znamy nazwę właściwości 

Notacja nawiasowa (Bracket notation) 

let tytul = ksiazka["tytul"]; 
ksiazka["rok"] = 2025; 
 
// Przydatne gdy: 
const klucz = "autor"; 
console.log(ksiazka[klucz]); // dynamiczny dostęp 
 
// Klucze ze spacjami lub znakami specjalnymi 
const obj = { 
  "imie i nazwisko": "Jan Kowalski" 
}; 
console.log(obj["imie i nazwisko"]); 

Optional chaining 
  

Naming Convention 

camelCase - konwencja dla JavaScript 

const mojObiekt = { 
  imie: "Jan", 
  nazwisko: "Kowalski", 
  dataUrodzenia: "1990-01-01", 
  czyAktywny: true 
}; 
  

Dodawanie i usuwanie właściwości 

// Dodawanie 
ksiazka.isbn = "978-83-123456-7"; 
ksiazka["wydawnictwo"] = "PWN"; 
 
// Usuwanie 
delete ksiazka.rok; 
 
// Sprawdzanie istnienia 
"tytul" in ksiazka // true 
ksiazka.hasOwnProperty("autor") // true 
  

Iteracja po obiekcie 

// Object.keys() - klucze 
Object.keys(ksiazka).forEach(klucz => { 
  console.log(klucz, ksiazka[klucz]); 
}); 
 
// Object.values() - wartości 
Object.values(ksiazka); 
 
// Object.entries() - pary [klucz, wartość] 
Object.entries(ksiazka).forEach(([klucz, wartosc]) => { 
  console.log(`${klucz}: ${wartosc}`); 
}); 
 
// for...in 
for(let klucz in ksiazka) { 
  console.log(klucz, ksiazka[klucz]); 
} 
  

Kopiowanie obiektów 

// Płytka kopia (shallow copy) 
const kopia1 = Object.assign({}, ksiazka); 
const kopia2 = {...ksiazka}; // spread operator 
 
// Głęboka kopia (deep copy) 
const gleboka = JSON.parse(JSON.stringify(ksiazka)); 

DODAWANIE I USUWANIE OBIEKTÓW NOTACJĄ KROPKOWĄ 

CONDITIONAL CHAINING 

Konstruktory obiektów i metody:  

W obiekcie jesteśmy w stanie umieszczać funkcje  

Wywoływanie funkcji z this ( będą miały kontekst rodzica) .  

 
Funkcja może być elementem obiektu.  

Metoda short hand – bez klucza 

Getter, setter – dobra praktyka 

Get total pozwala sie na i 

Js1 przykład 7  - system do zarządzania treściami.  

Jezeli tworzymy obiekt z metodami za kazdym razem kiedy tworze obiekt tworza sie metody  

Metody na  

JAK TWORZYĆ OBIEKTY NA MASOWĄ SKALĘ?  

CONSTRUCTOR FUNCTION   

NAMING  CONVENTIONS– PASCAL CASE – WTEDY WIDAĆ ZE TO KONSTRUKTOR 

Jak badać czy instancje pochodza od konstruktora: instance of –jezeli jest konstruktorem true, jezeli nie false 

Wszędzie gdzie potrzebujemy wielu podobnych obiektów  

JS2  przykład z currentr balance  

Kiedy używać prototypów  

DOM 

Element nodes  

Text nodes  

Tekst jest osobnym węzłem  

Node list  

Html collection – zawsze żywa tablica 

Przy debugowaniu istotne jest że jezli cos nie dziala to w consoli zakładka elements pozwoli zoabczyc co sie dzieje, jak kod sie zachowuje. 

Elememnt and styles  

SELEKTORY  

getElementById 

Id w danej stronie sa unikalne. Kazdy elememt powinien miec jedno id i id moze wystapic tylko raz w danym elemencie  

Null jest obiektem to historyczna pomyłka  

2. C 

GetElementbyClassName 

3. . 

Query selector  

Get element jest najszybszy i najbardziej efektywny  

document.getElementById(“id”); <-----szybsze  

document.querySelector(“#id”); 

Node list jest obrazem, elementy w nim są stałe  

InnerHTML może 

InnerHTML - zagrożenie:  

TextContent –odczytywanie textu, albo ze względu na bezpieczeństwo  

Jak podmieniac i modfikowac elementy 

JS10 – create element