Pytania rekrutacyjne dla Front-end developerów

Joanna

  • Funkcje anonimowe to funkcje bez nazwy, które często używa się w:

    Callbackach – np. w forEach, setTimeout, addEventListener.

    setTimeout(() => {
  // some code
}, 2000);

    Wyrażeniach funkcyjnych – np. przypisane do zmiennej:

    const hello = function (name) {
  return `Hi, ${name}!`;
};
console.log(hello("John"));

    Funkcjach strzałkowych (arrow functions) – krótsza składnia dla funkcji anonimowych:

    const pdouble = x => x * 2;
console.log(double(5)); // 10

    Natychmiastowo wywoływanych funkcjach (IIFE) – wykonują się od razu po zdefiniowaniu:

    (function () {
  console.log("it will be done immediately!");
})();

  • Domknięcie to funkcja, która zapamiętuje zakres (wartości zmiennych), w którym została utworzona, nawet jeśli jest wywoływana później, poza tym zakresem.

    W JavaScript każda funkcja tworzy swój własny zakres (scope). Jeśli funkcja jest tworzona wewnątrz innej funkcji, to ma dostęp do zmiennych tej funkcji nadrzędnej, nawet po jej zakończeniu.

    function outerFunction() {
  let count = 0; // Zmienna w zakresie funkcji nadrzędnej

  return function innerFunction() {
    count++; // Nadal ma dostęp do count
    console.log(count);
  };
}

const increment = outerFunction(); // Zwrócona funkcja zapamiętuje `count`
increment(); // 1
increment(); // 2
increment(); // 3

    innerFunction ma dostęp do count, mimo że outerFunction już się zakończyła. To właśnie jest domknięcie – funkcja przechowuje dostęp do swojego zakresu, nawet gdy funkcja nadrzędna przestaje działać.

  • Atrybuty data- to niestandardowe atrybuty html, które pozwalają na przechowywanie dodatkowych informacji, które później wykorzystać można na przykład do wyszukiwania, filtrowania lub grupowania danych (najczęściej przy użyciu javascript). Przykładowo, jeśli mamy listę restauracji z różnych miast, to w atrybutach data- możemy zapisać dane o tym, w jakim mieście mieści się dana restauracja, jaki jest to rodzaj restauracji (wegetariańska, sushi czy inna) lub czy posiada menu dla dzieci. 

    <li id="wege-restaurant" data-city="Katowice" data-menu="wegetarian" data-kids="yes">Wege Restaurant</li>

    Powinno się ich używać tylko wtedy, kiedy dla danych, które chcemy zapisać, nie istnieje standardowy atrybut html.

    Atrybuty data można odczytać w Javascript w następujący sposób:

    const restaurant = document.querySelector("#wege-restaurant");
console.log(restaurant.dataset.city); // "Katowice"
console.log(restaurant.dataset.menu); // "wegetarian"
console.log(restaurant.dataset.kids); // "yes"

  • To tablica, która działa na zasadzie klucz-wartość, dzięki czemu odczytywanie danych jest bardzo szybkie i nie zależy od wielkości tablicy. W tablicy mieszającej stosuje się funkcję mieszającą, która dla danego klucza wyznacza indeks w tablicy. W najprostszym przypadku do każdego indeksu przypisany jest jeden klucz, co sprawia, że czas odczytywania danych jest bardzo szybki i wynosi O(1).

    Sprawa komplikuje się, kiedy funkcja mieszająca przypisze ten sam indeks w tablicy dwóm kluczom. Wtedy powstaje tzw. kolizja – sytuacja, w której pod jednym indeksem znajduje się kilka kluczy. Szukając odpowiedniego klucza i przypisanej do niego wartości tablica musi przeszukać kilka elementów przypisanych do tego samego indeksu (tak jakby przeszukiwała drugą tablicę – choć niekoniecznie dane zapisane pod jednym indeksem muszą być w formie tablicy). Czas wyszukiwania danych wydłuża się w takiej sytuacji do O(n) – bo pod danym indeksem trzeba przeszukać n elementów, które są tam przypisane.

    W JavaScript tablicą mieszającą jest np. obiekt lub Map

    const hashtable = {
  "key1": "value1",
  "key2": "value2"
};
console.log(hashtable["key1"]); // "value1"

const map = new Map();
map.set(1, "one");
console.log(map.get(1)); // "one"

  • Słowo kluczowe this odnosi się do kontekstu, w którym wywoływana jest funkcja. Może przyjmować różne wartości:

    • W globalnym zakresie (lub w funkcji wywołanej w globalnym zakresie) this odnosi się do obiektu window (w przeglądarce) lub global (w Node.js).
    • W metodzie obiektu this odnosi się do obiektu, który tę metodę wywołał.
    • W funkcji strzałkowej this nie jest wiązane dynamicznie – dziedziczy wartość z otaczającego zakresu.
    • W klasach i konstruktorach this odnosi się do nowo utworzonego obiektu.
    const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name);
  }
};
obj.sayHi(); // "Alice"

    • Delegacja zdarzeń – przypisywanie eventu do rodzica zamiast każdego elementu osobno.
    • Propagacja zdarzeń – sposób, w jaki event przechodzi przez DOM (bubbling lub capturing).
    Dowiedz się więcej …

  • W języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu:

    • Znaczniki formatujące, czyli takie, które mają za zadanie zmienić wygląd tekstu. Są to np. <b> (pogrubienie), <i> (pochylenie), <u> (podkreślenie), <s> (przekreślenie), <small> (czcionka pomniejszona).
    • Znaczniki semantyczne, których zadaniem jest wskazanie robotom przeglądarki, że dana treść ma szczególne znaczenie. Znaczniki semantyczne mogą zmieniać wygląd tekstu, ale nie muszą tego robić (zależne jest od przeglądarki).

    Semantyczny HTML to taki, który jasno określa przeznaczenie elementów. Przykłady tagów semantycznych to: <strong>, <em>, <code>, <a>, <cite>, <pre>, <del>, <address>, <acronym>, <br>, <article>,<aside>,<details>, <footer>, <header>, <main>, <mark>, <nav>, <section>, ale jest ich znacznie więcej.

  • Konwencje nazewnictwa w CSS pomagają w utrzymaniu czytelnego, zrozumiałego i łatwego do zarządzania kodu. Oto najczęściej stosowane metody:

    1. BEM (Block Element Modifier)

    BEM pomaga tworzyć czytelne i uporządkowane klasy CSS, dzieląc je na trzy części:
    ✅ Blok – główny element, np. menu
    ✅ Element – część bloku, np. menu__item
    ✅ Modyfikator – zmienia wygląd elementu, np. menu__item--active

    .menu {
  background-color: blue;
}

.menu__item {
  color: white;
}

.menu__item--active {
  font-weight: bold;
}

    2. OCSS (Object-Oriented CSS)

    OCSS polega na podziale stylów na:
    ✅ Strukturę – czyli ogólne bloki używane w różnych miejscach (.media, .grid)
    ✅ Wygląd (skórki) – które zmieniają styl elementu (.media--highlighted)

    .media {
  display: flex;
  align-items: center;
}

.media--highlighted {
  background-color: yellow;
}

    Dzięki temu łatwiej ponownie używać kodu i unikać duplikacji.

    3. SMACSS (Scalable and Modular Architecture for CSS)

    SMACSS pomaga organizować CSS w logiczne części:
    ✅ Baza – ogólne style (body { font-family: Arial; })
    ✅ Layout – układ strony (.container, .header)
    ✅ Moduły – małe komponenty (.button, .card)
    ✅ Stan – specjalne modyfikacje (.is-active, .is-hidden)
    ✅ Tematy – zestawy stylów np. jasny i ciemny motyw

    .button {
  padding: 10px;
  background-color: blue;
}

.button.is-active {
  background-color: red;
}

    4. Atomic CSS

    Atomic CSS polega na używaniu bardzo małych klas, które robią tylko jedną rzecz.
    ✅ Zamiast dużych klas, używa się wielu małych (np. .text-center, .p-10).

    .text-center {
  text-align: center;
}

.p-10 {
  padding: 10px;
}

.bg-blue {
  background-color: blue;
}

    5. SUIT CSS

    Podobna do BEM, ale z innym stylem pisania:
    ✅ Komponenty – ComponentName (np. Button)
    ✅ Elementy – ComponentName-descendant (np. Button-text)
    ✅ Modyfikatory – ComponentName--modifier (np. Button--large)

    .Button {
  padding: 10px;
  background: blue;
}

.Button--large {
  font-size: 20px;
}

  • Hoisting polega na wynoszeniu deklaracji zmiennych i funkcji „na górę” kodu (konkretnie na początek funkcji lub do zakresu zmiennych globalnych, w zależności od tego, gdzie dana zmienna lub funkcja została zadeklarowana). Oznacza to, że można odwołać się do zmiennej lub funkcji zanim jeszcze zostanie zadeklarowana.

    Dowiedz się więcej …

  • Rem i Em to jednostki miary wielkości w css, używa się ich do ustawiania wielkości cziconki.

    • Em stanowi odniesienie do wielkości czcionki rodzica
    • Rem stanowi odniesienie do wielkości czcionki dokumentu głównego (roota, którym najczęściej jest znacznik html).
    Dowiedz się więcej…