Programowanie po stronie klienta (JavaScript)

Question 1

Co wypisze kod: let suma = 0; for (let i = 1; i <= 6; i++) { if (i % 2 === 0) continue; suma += i; } console.log(suma);

Accepted Answer

Instrukcja continue nie przerywa pętli, a jedynie pomija resztę bieżącego obiegu, więc do sumy trafiają wyłącznie liczby nieparzyste 1, 3 i 5. Wynik 21 kusi tych, którzy zignorują warunek reszty z dzielenia, a 12 to suma pominiętych liczb parzystych.

Question 2

Co wypisze kod: const liczby = [10, 20, 30, 40]; liczby.splice(1, 2); console.log(liczby);

Accepted Answer

Drugi argument metody splice to liczba elementów do usunięcia, a nie indeks końcowy, więc od pozycji 1 znikają dwa elementy, a zmiana zachodzi w oryginalnej tablicy. Odpowiedź [20, 30] kusi, bo taki fragment splice zwraca, ale pytanie dotyczy zawartości tablicy po operacji.

Question 3

Co wypisze kod: const liczby = [1, 2, 3]; liczby.push(4); const cz = liczby.slice(1, 3); console.log(cz);

Accepted Answer

Słowo const blokuje ponowne przypisanie do zmiennej, ale nie zamraża zawartości tablicy, dlatego push działa i tablica ma cztery elementy. Metoda slice kopiuje zakres od indeksu 1 do 3 z wyłączeniem elementu o indeksie 3, więc czwórka nie wchodzi do wyniku.

Question 4

Co wypisze kod: const liczby = [1, 2, 3]; const wynik = liczby.forEach((x) => x * 2); console.log(wynik);

Accepted Answer

Metoda forEach służy wyłącznie do przejścia po elementach i zawsze zwraca undefined, niezależnie od tego, co robi przekazana funkcja. Tablicę [2, 4, 6] zwróciłaby metoda map i to najczęstsza pomyłka, bo obie metody zapisuje się w kodzie niemal identycznie.

Question 5

Które z poniższych wyrażeń ma wartość true?

Accepted Answer

Porównanie luźne traktuje null i undefined jako równe sobie i jest to wyjątek zapisany wprost w standardzie języka. Porównanie ścisłe wymaga zgodności typu, więc tekst nigdy nie będzie równy liczbie ani wartości logicznej, a NaN nie równa się nawet samemu sobie.

Question 6

Co wypisze kod: var a = 10; let b = 20; if (true) { var a = 99; let b = 88; } console.log(a + ' ' + b);

Accepted Answer

Deklaracja var ma zasięg funkcyjny, więc ta z wnętrza bloku if odnosi się do tej samej zmiennej i nadpisuje ją wartością 99. Deklaracja let ma zasięg blokowy, więc b spod klamer to osobna zmienna, która ginie po zamknięciu bloku i na zewnątrz pozostaje 20.

Question 7

Na stronie jest kilka elementów z atrybutem class o wartości produkt. Która instrukcja zwróci pierwszy z nich jako pojedynczy element?

Accepted Answer

Metoda querySelector przyjmuje pełny selektor CSS, czyli klasę zapisaną z kropką, i zwraca pierwszy pasujący element albo null. Wersja z końcówką All oraz getElementsByClassName oddają kolekcje wymagające indeksowania, a getElementById szuka identyfikatora, nie klasy.

Question 8

Formularz o identyfikatorze rejestracja ma być sprawdzony skryptem bez przeładowania strony. Który zapis jest poprawny?

Accepted Answer

Nazwę zdarzenia podaje się bez przedrostka on, a funkcję przekazuje się bez nawiasów wywołania, bo nawiasy uruchomiłyby ją natychmiast i podpięły jej wynik zamiast samej funkcji. Bez wywołania preventDefault przeglądarka wysyła formularz i strona się przeładowuje.

Question 9

Sklep ma zapamiętać koszyk tak, aby przetrwał zamknięcie przeglądarki, a dane nie były dołączane do każdego żądania HTTP. Który mechanizm wybrać?

Accepted Answer

Local Storage nie ma daty ważności i nigdy nie opuszcza przeglądarki, więc spełnia oba warunki naraz. Session Storage ginie po zamknięciu karty, a każde ciasteczko, nawet z długim czasem życia, jest automatycznie dołączane do żądań HTTP i mieści około 4 KB danych.

Question 10

Co wypiszą dwie ostatnie instrukcje: const t = [1, 2]; localStorage.setItem('motyw', 'ciemny'); console.log(t[5]); console.log(localStorage.getItem('kolor'));

Accepted Answer

Odwołanie do nieistniejącego indeksu tablicy nie kończy się błędem, tylko daje undefined, czyli brak wartości, którego nikt nie ustawiał. Metoda getItem dla nieznanego klucza oddaje null, czyli celowo oznaczony brak danych, i na tym warunku opiera się typowa inicjalizacja pamięci.

To nie koniec powtórki