JavaScript

Co to jest hoisting w JavaScript?

Hoisting to mechanizm, w którym deklaracje zmiennych (var) i funkcji są przenoszone na początek ich zakresu przed wykonaniem kodu.

Różnica między var, let i const?

• var: funkcjonuje w zakresie funkcji, można redeklarować

• let: blokowy zakres (od klamry do klamry), nie można redeklarować

• const: blokowy zakres (od klamry do klamry), stała wartość, nie można zmieniać po zadeklarowaniu, nie jest hoistowany

let i const hoistowane, ale nie można ich używać przed inicjalizacją (tzw. temporal dead zone)

Co to jest closure?

Closure to mechanizm w JavaScript, który pozwala funkcji wewnętrznej zachować dostęp do zmiennych funkcji zewnętrznej, nawet po tym, jak ta zewnętrzna funkcja została wywołana i zakończona.

const makeCounter = () => {
let count = 0;
return () => {
return count++;
}
}
const counter1 makeCounter();
const counter2 = makeCounter();
console.log(counter1()) // 0
console.log(counter2()) // 0
console.log(counter2()) // 1

Czym różni się różnie === od ==?

=== porównuje wartość i typ bez konwersji typów, == porównuje wartości z konwersją

// Przyklad z ==
console.log(5 == '5');   // true, bo '5' (string) zostaje zamienione na 5 (number)

console.log(false == 0); // true, bo false zamienia się na 0

// Przyklad z ===
console.log(5 === '5');  // false, bo typy są różne (number vs string)

console.log(false === 0); // false, bo typy są różne (boolean vs number)

Co to jest event loop?

Event loop w JavaScript to mechanizm, który pozwala językowi obsługiwać operacje asynchroniczne mimo tego, że sam jest jednowątkowy. JavaScript wykonuje kod synchronicznie w jednym wątku, ale event loop umożliwia delegowanie zadań asynchronicznych (np. opóźnienia setTimeout, obietnice Promise, zdarzenia z interfejsu użytkownika) do tzw. Web APIs lub zadań w tle, a następnie ich obsługę bez blokowania głównego wątku.

Event loop działa w ten sposób, że ciągle sprawdza, czy stos wywołań (call stack) jest pusty. Jeśli tak, pobiera kolejne zadanie z kolejki zadań (callback queue) lub z kolejki mikro-zadań (microtask queue) i przenosi je na stos do wykonania. Mikro-zadania (np. callbacki Promise) mają wyższy priorytet i są wykonywane przed zadaniami z ogólnej kolejki.

W uproszczeniu:

• Główna pętla wykonuje synchroniczny kod linijka po linijce.

• Zadania asynchroniczne są delegowane i po zakończeniu trafiają do odpowiednich kolejek.

• Event loop monitoruje, czy główny stos jest wolny, i wtedy wykonuje kolejne asynchroniczne callbacki.

Dzięki event loop JavaScript może pozostawać responsywny i wykonywać wiele zadań "asynchronicznie" bez rzeczywistego wielowątkowego wykonywania kodu.

Jakie są typy danych w JavaScript?

Primitive: string, number, boolean, null, undefined, symbol, bigint
Reference: objects, arrays, functions

Czym są Promisy?

Co to jest Promise w JavaScript?

Promise można porównać do obietnicy — ktoś obiecuje Ci, że coś dostaniesz, ale nie wiesz dokładnie kiedy. W programowaniu Promise to specjalny obiekt, który reprezentuje wynik operacji asynchronicznej, który może pojawić się w przyszłości albo zakończyć się błędem.

Promise ma 3 stany:

• pending (oczekujący) – czekasz na wynik,

• fulfilled (spełniony) – operacja zakończyła się sukcesem i jest wynik,

• rejected (odrzucony) – coś poszło nie tak, jest błąd.

// Funkcja, która symuluje pobieranie danych przez 2 sekundy
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5; // losowy sukces
      if (success) {
        resolve('Dane pobrane pomyślnie');
      } else {
        reject('Błąd pobierania danych');
      }
    }, 2000);
  });
}

fetchData()
  .then(data => console.log(data))    // jeśli Promise spełniony
  .catch(error => console.log(error)); // jeśli Promise odrzucony

Różnica między funkcją regularną a arrow function?

1. Składnia i zwracanie wartości

• Strzałkowe funkcje mają krótszą składnię, a jeśli ciało funkcji zawiera tylko jedno wyrażenie, wynik jest zwracany automatycznie (bez return).

• Regularne funkcje wymagają jawnego return dla zwracania wartości.

// Regularna funkcja
function suma(a, b) {
  return a + b;
}

// Funkcja strzałkowa
const suma = (a, b) => a + b;

2. Kontekst this

• Regularna funkcja ma własny kontekst this, który jest tworzony w momencie jej wywołania (przez co może się różnić od sposobu w jaki jest wywołana funkcja)

• Funkcja strzałkowa dziedziczy this z otaczającego kontekstu (lekstykalny this), co jest przydatne np. w metodach, gdy chcemy zachować kontekst obiektu. Sam kontekst jest tworzony w momencie deklaracji (leksykalnie)

const osoba = {
  imie: 'Ala',
  pokazImie: function() {
    console.log(this.imie);
  },
  pokazImieStrzalka: () => {
    console.log(this.imie);
  }
};

osoba.pokazImie();        // "Ala" — kontekst to osoba
osoba.pokazImieStrzalka(); // undefined — strzałkowa dziedziczy `this` z otoczenia (np. globalny)
const pokazImie2 = osoba.pokazImie;
pokazImie2();//undefined

3. Brak własnego arguments

• Regularne funkcje mają dostęp do specjalnego obiektu arguments, który zawiera wszystkie przekazane argumenty.

• Funkcje strzałkowe nie mają własnego arguments. Zamiast tego używa się składni rest (...args).

function pokazArguments() {
  console.log(arguments);
}

const pokazArgumentsStrzalka = (...args) => {
  console.log(args);
};

pokazArguments(1, 2, 3);         // [1,2,3]
pokazArgumentsStrzalka(1, 2, 3); // [1,2,3]

4. Nie można użyć jako konstruktorów

   • Regularne funkcje można wywołać z new i tworzą nowe obiekty.

   • Strzałkowe funkcje nie mogą być wywoływane jako konstruktory — wywołanie new zakończy się błędem.

function OsobaImie(name) {
  this.name = name;
}

const OsobaImieStrzalka = (name) => {
  this.name = name;
};

const osoba1 = new OsobaImie('Jan'); // działa
const osoba2 = new OsobaImieStrzalka('Jan'); // Błąd: OsobaImieStrzalka is not a constructor

5. Metody .call(), .apply(), .bind()

• W regularnych funkcjach można zmieniać kontekst this za pomocą tych metod.

• W funkcjach strzałkowych metody te nie zmieniają this, bo jest ono ustalone lekstykalnie.

Co oznacza słowo kluczowe this w JavaScript?

this odwołuje się do kontekstu wywołania funkcji, np. obiektu, w którym funkcja jest wywołana.

Jak działa destructuring assignment?

Pozwala na rozpakowanie wartości z tablic lub właściwości obiektów do odrębnych zmiennych.

Co to jest prototyp w JavaScript?

Mechanizm dziedziczenia, w którym obiekty mogą dziedziczyć właściwości i metody z innych obiektów.

Czym są funkcje wyższego rzędu (higher-order functions)?

Funkcje, które przyjmują inne funkcje jako argument lub zwracają je.

const double = x => x * 2;
const result = [1, 2, 3].map(double);
console.log(result); // [2, 4, 6]

Jakie są metody manipulacji tablicami w JavaScript? (przykłady)

map, filter, reduce, forEach, find, some, every.

Co to jest event delegation?

Event delegation to technika, w której zamiast przypinać osobne nasłuchiwanie zdarzeń do wielu podobnych elementów, podpinamy jeden wspólny listener do elementu nadrzędnego. Dzięki temu, kiedy klikniemy na którykolwiek z elementów potomnych, to zdarzenie "bąbelkuje" (propaguje się) do rodzica, a ten obsługuje je za pomocą jednego wspólnego kodu.

<div id="menu">
  <button data-page="home">Home</button>
  <button data-page="about">About</button>
  <button data-page="contact">Contact</button>
</div>

document.getElementById('menu').addEventListener('click', (event) => {
  const page = event.target.dataset.page;      
  if (page) {
    console.log(`Chcemy przejść do strony: ${page}`);
  }
});

Jak działa async/await?

Umożliwia pisanie kodu asynchronicznego w sposób synchroniczny, na bazie Promisów.

Co to jest DOM?

Document Object Model — struktura reprezentująca HTML w formie obiektów, pozwalająca na manipulację dokumentem.

Czym się różni var od let w kontekście hoistingu?

var jest hoistowane i inicjalizowane undefined, let jest hoistowane, ale nie inicjalizowane (TDZ – temporal dead zone).

Co to jest temporal dead zone (TDZ)?

Okres od początku bloku do deklaracji zmiennej let/const, kiedy zmienna jest niedostępna.

// ReferenceError: Cannot access 'x' before initialization

Czym różni się synchronous od asynchronous code?

Synchronous wykonuje się kolejno, blokując dalsze wykonanie. Asynchronous pozwala na dalsze działania podczas oczekiwania na rezultat.

Co to jest JSON?

JavaScript Object Notation — format wymiany danych oparty na strukturze obiektów JavaScript.

Jak utworzyć i usunąć event listener?

addEventListener(event, handler) oraz removeEventListener(event, handler)

Co to jest IIFE?

Immediately Invoked Function Expression — funkcja wywoływana natychmiast po zdefiniowaniu

const suma = (function(a, b) {
  return a + b;
})(5, 7);

console.log(suma); // wypisze: 12

Jakie są metody konwersji typów w JavaScript?

parseInt, parseFloat, String(), Number(), Boolean().

Różnica między null a undefined?

null oznacza celową nieobecność wartości, undefined — wartość nieprzypisaną lub brak.

Jak działa operator spread ...?

Rozwija elementy tablic lub właściwości obiektu.

Co to jest memoizacja?

Technika optymalizacji, polegająca na zapamiętywaniu wyników funkcji zapobiegając wielokrotnym obliczeniom.

Co to jest event bubbling?

Proces propagacji eventu od elementu docelowego do rodziców w górę drzewa DOM.

Oznacza to, że np. kliknięcie na przycisk wywoła obsługę zdarzenia najpierw na tym przycisku, a następnie na jego rodzicu, dziadku i kolejnych przodkach w górę drzewa DOM.

można ją wyłączyć dla tak
event.stopPropagation();

lub

stopImmediatePropagation(), która nie tylko zatrzymuje propagację dalej, ale także blokuje wykonywanie kolejnych obsług zdarzeń na tym samym elemencie.

Jakie są sposoby definiowania funkcji?

Deklaracja funkcji, wyrażenie funkcyjne, arrow function, konstruktor funkcji.

Co to jest strict mode?

Tryb, który wymusza bardziej restrykcyjną składnię i wykrywa błędy („use strict”)