Pytania rekrutacyjne dla Front-end developerów

31/01/2025

Joanna

Główna różnica polega na wiązaniu this:
- Funkcje strzałkowe nie mają własnego this – dziedziczą je z otaczającego zakresu.
- Zwykłe funkcje mają własne this, które zależy od sposobu ich wywołania.
```
const person = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  },
  sayHelloArrow: () => {
    console.log("Hello, my name is " + this.name);
  }
};

person.sayHello();      // "Hello, my name is Alice"
person.sayHelloArrow(); // "Hello, my name is undefined" (bo `this` odnosi się do otoczenia globalnego)
```
Ponadto funkcja strzałkowa:
- Nie posiada: super, argumens i new.target. Te wartości definiowane są przez najbliższą funkcję niestrzałkową.
- Nie może zostać wywołana za pomocą new, bo nie posiada metody construct, więc nie może być konstruktorem.
- Nie posiada właściwości prototype
API (Application Programming Interface) to zestaw reguł umożliwiających komunikację między różnymi aplikacjami. W kontekście front-endu często spotyka się REST API i GraphQL API, które pozwalają pobierać i wysyłać dane między przeglądarką a serwerem. Jeśli jakaś firma chce , aby jej oprogramowanie było rozwijane przez ludzi z zewnątrz, udostępnia im API tego oprogramowania, czyli część jego fukcji, część kodu, który mogą wykorzystać w swojej aplikacji. API zawiera listę operacji, z których mogą korzystać programiści, wraz z opisem ich działań. API pozwala na korzystanie z funkcjonalności udostępnianych przez inną aplikację w twojej aplikacji. Pozwala na komunikowanie się aplikacji między sobą (np. twojego programu z systemem operacyjnym).
JSON – JavaScript Object Notation. To format do przechowywania i transportu danych, w postaci tekstu. Jest często używany do przekazywania i odbierania danych z serwera przez aplikacje na stronie internetowej.

Dane zapisywane są w tablicy, w postaci obiektów, które zawierają zestaw kluczy i wartości. Przykładowy plik JOSN wygląda tak:
```
[
  {
    "id": 1,
    "name": "Alice",
    "age": 25
  },
  {
    "id": 2,
    "name": "Bob",
    "age": 30
  }
]
```
Gulp to narzędzie (program, task runner), które pomaga developerom zautomatyzować wiele zadań programistycznych (często żmudnych i czasochłonnych).

Przykłady zadań, które może robić za nas gulp to:
- minifikowanie skryptów,
- łączenie plików,
- kompilacja SCSS do CSS
- automatyczne odświeżanie strony po zapisaniu kodu,
- dołączanie plików js do dokumentów html
- przenoszenie plików do folderów docelowych.
Git to system kontroli wersji, który umożliwia śledzenie zmian w kodzie i współpracę zespołową. Podstawowe polecenia:
```
git init
git add .
git commit -m "Initial commit"
git push origin staging
```
Czytaj więcej …
Promise to obiekt w Javascript, który reprezentuje zakończenie (sukces lub porażkę) asynchronicznej operacji i jej wartości. Ponieważ wykonanie niektórych części kodu może zająć trochę więcej czasu, a odpowiedź oczekiwana jest natychmiast (by silnik javascript mógł przejść do wykonania kolejnych części kodu z kolejki), kiedy nie ma jeszcze wyniku, z którym można dalej pracować, zwracana jest obietnica otrzymania tego wyniku. Można wtedy określić, co zrobić z otrzymanym wynikiem w przypadku sukcesu (gdy kod zostanie prawidłowo przetworzony) lub porażki (kiedy kodu nie uda się przetworzyć).
```
const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("Data loaded"), 2000);
});

promise.then(console.log).catch(console.error);
```
Zwykła tablica indeksowana jest za pomocą liczb (zaczynając od 0), pod każdym kolejnym indeksem zapisane są jakieś dane:
```
arr[5, 4, 3, 2, 1]; arr(0) = 5;
```
Tablica asocjacyjna zamiast liczb wykorzystuje ciągi znaków. Działa na zasadzie klucz-wartość. W JavaScript tablice nie są asocjacyjne – klucze muszą być liczbami. Do przechowywania par klucz-wartość używa się obiektów:
```
const obj = { name: "John", age: 30 };
```
Podwójny znak równości porównuje dane bez względu na ich typ, a potrójny znak równości porównuje jeszcze dodatkowo zgodność typów.
```
console.log(1 == '1');    // true
console.log(1 === '1');   // false 
console.log(0 == false);  // true 
console.log(0 === false); // false
```
var – posiada zakres funkcyjny i podlega hoistingowi. Onacza to, że zadeklarowanie zmiennej var w którymkolwiek miejscu funkcji umożliwia odwołanie się do niej, ponieważ jej deklaracja jest wynoszona na początek zakresu funkcji. Ogranicza ją więc zakres funkcji.

let, const – mają zakres blokowy. Oznacza to, że jeśli zmienna zadeklarowana przy użyciu let lub const użyta zostanie w bloku if {}, to poza tym blokiem będzie niedostępna (w przeciwieństwie do var). Ograniczone są zakresem najbliższego bloku, zdefiniowanego przez nawiasy {}. Ponadto ich deklaracja nie podlega hoistingowi, co oznacza, że nie można się do nich odwołać przed ich zadeklarowaniem (powstaje wtedy TZD – temporal dead zone).

Zmienna stworzona przy użyciu let nie musi posiadać przypisanej wartości, bo możną ją później zmienić (np. let foo;).

Stała stworzona przy użyciu const musi od razu posiadać przypisaną wartość (cost foo = "something"), bo nie można jej zmienić (choć można zmodyfikować jej wartość, jeśli jest obiaktem, tablicą – ponieważ const zapobiega zmianie bindowania, czyli zmianie typu wartości, a nie samej wartości).
```
const boo = ["gruszka", "jablko"]; 
boo.push("malina"); 
console.log(boo) // "gruszka", "jablko", "malina"
```
Funkcja callback to funkcja przekazana jako parametr innej funkcji. Dzięki takiemu podejściu, możliwe jest wskazanie działania, które ma nastąpić, w zależności od wyników działania poprzedniej funkcji. Innymi słowy, jest to funkcja, która ma zostać wykonana po zakończeniu wykonywania innej funkcji:
```
function greet(url, callback) {
  console.log("Sending request to:", url);

  setTimeout(() => {
    const response = "Hello from API!";
    callback(response); // Call the callback function with the response
  }, 2000);
}

// Calling greet with a URL and an anonymous callback function
greet("https://api.example.com", function(response) {
  console.log("Response received:", response);
});
```
W powyższym przykładzie funkcja greet(), wykona jakąć akcję, np. wyśle zapytanie pod wskazany adres URL, a odpowiedź zostanie przekierowana do funkcji anonimowej (callback). W ten sposób, dopiero gdy nadejdzie odpowiedź z zewnętrznego API, dane zostaną wyświetlone w konsoli.

Bardzo często, aby sprostać wymaganiom biznesowym, będziemy potrzebowali wielokrotnego zagnieżdżania wywołań zwrotnych. Powstały w ten sposób kod jest trudny w utrzymaniu i mało czytelny. Często zdarza się też, że kolejne funkcje zwrotne porozrzucane są w różnych miejscach kodu czy nawet w różnych plikach, co dodatkowo utrudnia pracę. Tego typu sytuację nazywamy piekłem wywołań zwrotnych (ang. callback hell).

Jak uniknąć callback hell:
- używajac obietnic
- używajac async/await