Przykładowe fiszki JavaScript z naszej aplikacji

Pobierz naszą aplikację w App Store lub Google Play, aby uzyskać więcej darmowych fiszek lub subskrybuj dostęp do wszystkich fiszek.

Co to jest zasięg leksykalny (lexical scope) w JavaScript?

Zasięg leksykalny w JavaScript to zasada, wg której zakres widoczności zmiennej jest określony przez jej położenie w kodzie. Oznacza to, że zmienne są dostępne wewnątrz bloku, w którym zostały zdefiniowane, oraz w blokach zagnieżdżonych. Umożliwia to tworzenie zamykań i kontrolę nad dostępem do zmiennych. Przykład użycia zasięgu leksykalnego w kodzie JavaScript:

function outerFunction() {
  let outerVariable = 'Jestem na zewnątrz!';

  function innerFunction() {
    console.log(outerVariable); // Ma dostęp do zmiennej 'outerVariable'
  }

  innerFunction();
}
outerFunction(); // Wyświetli 'Jestem na zewnątrz!'

Zasięg leksykalny umożliwia funkcji wewnętrznej dostęp do zmiennych zdefiniowanych w funkcji zewnętrznej, nawet po jej zakończeniu. Jest to kluczowy element tworzenia zamykań (closures) w JavaScript, co pozwala na bardziej elastyczne zarządzanie stanem w aplikacjach.

Co to jest hoisting?

Hoisting to mechanizm w językach JavaScript, w którym zmienne i funkcje są przenoszone na górę swojego zakresu przed wykonaniem kodu. W praktyce oznacza to, że możemy używać funkcji lub zmiennych przed ich faktycznym zadeklarowaniem.

Należy jednak zwrócić uwagę, że hoisting działa nieco inaczej dla zmiennych i funkcji.

Dla zmiennych deklarowanych za pomocą słów kluczowych var, tylko deklaracja jest przenoszona na górę, nie zaś inicjalizacja. Zmienne zainicjalizowane przed deklaracją zostaną zwrócone jako undefined.

Przykładowy kod ilustrujący hoisting dla zmiennych:

console.log(myVar); // undefined
var myVar = 5;
console.log(myVar); // 5

Dla funkcji, hoisting przenosi na górę zarówno deklarację, jak i definicję funkcji, co pozwala na korzystanie z funkcji przed jej deklaracją.

Przykładowy kod ilustrujący hoisting dla funkcji:

console.log(myFunction()); // "Hello World"

function myFunction() {
  return "Hello World";
}

Hoisting nie ma miejsca dla zmiennych deklarowanych za pomocą let i const.

Co to jest funkcja strzałkowa (arrow function) i jakie ma zalety?

Funkcja strzałkowa, znana również jako arrow function, to rodzaj funkcji wprowadzony w ECMAScript 6 (ES6). Są one zwane funkcjami strzałkowymi, ponieważ używają specjalnej składni ze strzałka ( => ) do definiowania funkcji.

Dla porównania, tradycyjna funkcja mogłaby wyglądać tak:

function sum(a, b) {
  return a + b;
}

Zaś jej odpowiednik jako funkcja strzałkowa to:

const sum = (a, b) => a + b;

Podstawową korzyścią funkcji strzałkowej jest to, że nie tworzy ona własnego kontekstu wywołania (bindingu do this), co jest często źródłem błędów w JavaScript. W funkcjach strzałkowych this jest dziedziczone z otaczającego kontekstu. Inną zaletą jest zwięzłość składni, szczególnie przydatna, gdy funkcje są używane jako argumenty innych funkcji, np. w funkcjach wyższego rzędu.

Z drugiej strony, ze względu na brak własnego this, funkcji strzałkowe nie są odpowiednie do definiowania obiektów konstruujących (twórczych) ani do tworzenia metod w obiektach prototypowych.

Co to jest obiekt Promise i jak można go użyć?

Obiekt Promise w JavaScript jest używany do obsługi operacji asynchronicznych. Promise reprezentuje wartość, która może nie być dostępna już w momencie utworzenia Promise, ale może być dostępna w przyszłości, albo nigdy.

Obiekt Promise może znajdować się w jednym z trzech stanów:
1. Pending - operacja nadal trwa, nie zakończona ani pomyślnie, ani z błędem.
2. Fulfilled - operacja zakończona pomyślnie, Promise zwróciło wartość.
3. Rejected - operacja zakończona z błędem, Promise zwróciło powód błędu.

Promise, które zostało spełnione lub odrzucone, jest uznawane za „osiągnięte” (settled) i jego stan nigdy nie zmienia się.

Tworzenie obiektu Promise:

const promise = new Promise((resolve, reject) => {
  const success = true;
  if (success) {
    resolve('Operacja pomyślna.');
  } else {
    reject('Operacja nieudana.');
  }
});

Użycie obiektu Promise:

promise
  .then(result => {
    console.log(result); // Wypisze: 'Operacja pomyślna.'
  })
  .catch(error => {
    console.log(error);
  });

Metoda .then() jest wykonywana, kiedy Promise jest spełnione, a .catch() kiedy jest odrzucone. W obu przypadkach jako argument przekazywany jest rezultat operacji albo powód odrzucenia Promise.

Co to jest callback?

Callback, zwany również funkcją zwrotną, to funkcja, która jest przekazywana jako argument do innej funkcji i jest potem wykonana (wołana z powrotem) po zakończeniu działania tej funkcji. Funkcje callback są powszechnie stosowane w JavaScript, szczególnie w asynchronicznych operacjach, takich jak żądania AJAX, czy obsługa zdarzeń.

Do funkcji callback są zazwyczaj przekazywane wyniki danej operacji, więc mogą być użyte do przetwarzania czy analizowania tych wyników.

Użycie takiej funkcji w praktyce może wyglądać następująco:

function executeAfterTimeout(callback, timeout) {
  setTimeout(() => {
    console.log('Czas minął!');
    callback();
  }, timeout);
}

executeAfterTimeout(() => {
  console.log('To jest callback!');
}, 2000);

W tym przypadku funckja `executeAfterTimeout` otrzymuje jako parametr funkcję `callback`, która zostanie wykonana po upłynięciu zadanego czasu. Funkcje callback są bardzo przydatne do zarządzania asynchronicznym przepływem sterowania w JavaScript.

Co to jest nullish coalescing operator i jak działa?

Nullish Coalescing Operator (??) jest operatorem logicznym, który zwraca prawą stronę operacji, gdy lewa strona jest null lub undefined. Innymi słowy, gdy zmienna jest pusta, operator skoalescencyjny null zwraca zdefiniowaną wartość jako wynik.

Podstawowy zapis to:

let value = null ?? 'default value';

W tym przypadku, ponieważ lewa strona (value) jest null, wynik to 'default value'. Dodatkowo, operator ten różni się od operatora OR (||), ponieważ funkcja OR zwraca prawą stronę, gdy lewa strona jest fałszywa (false, 0, '', null, undefined, NaN), podczas gdy operator nullish coalescing zwraca tylko prawą stronę, gdy lewa strona jest null lub undefined.

Przykład z OR:

let value1 = 0 || 'default';
console.log(value1); // output: 'default' ponieważ 0 to wartość fałszywa

Przykład z nullish coalescing:

let value2 = 0 ?? 'default';
console.log(value2); // output: 0 ponieważ 0 nie jest null ani undefined

Czyli w odróżnieniu od OR, operator nullish coalescing nie traktuje 0, '' oraz NaN jako "puste" wartości.

Co to jest i kiedy używać Symbol?

Symbol w JavaScript jest unikalnym i niezmienialnym typem danych, który jest często używany do identyfikowania unikalnych właściwości obiektów.

Symbol można utworzyć poprzez wywołanie konstruktora Symbol(), który tworzy unikalny symbol za każdym razem, gdy jest wywoływany. Nawet jeśli wywołamy konstruktor Symbol() z tym samym argumentem, każdy utworzony symbol będzie inny.

const symbol1 = Symbol('mySymbol');
const symbol2 = Symbol('mySymbol');
console.log(symbol1 === symbol2); // zwraca false

Symbol jest często używany do definiowania (unikalnych) właściwości obiektów, szczególnie gdy chcemy, aby ta właściwość była ukryta lub prywatna. Podobnie obejmuje właściwości które nie są uwzględniane podczas iteracji po obiektach za pomocą for...in lub for...of oraz nie są zwracane przez metodę Object.keys(). Poza tym, symbole umożliwiają tworzenie "pseudo" prywatnych właściwości.

let obj = {};
let privateProperty = Symbol('private');

obj[privateProperty] = 'This is private';

console.log(obj[privateProperty]); // 'This is private'
console.log(Object.keys(obj)); // []

Nie ma jednoznacznej zasady, kiedy należy używać Symbol. Zazwyczaj używa się ich, gdy chcemy utworzyć unikalną właściwość w obiecie, której nie można łatwo zobaczyć lub zmienić, lub chcemy zdefiniować metady, które wpływają na zachowanie obiektów na niskim poziomie.

Co to jest WeakMap i WeakSet?

WeakMap i WeakSet to specjalne wersje JavaScriptowych obiektów Map i Set, które nie zapobiegają automatycznemu zwalnianiu pamięci przez Garbage Collector.

WeakMap jest kolekcją par klucz-wartość, gdzie klucze muszą być obiektami, a wartości mogą być dowolne. Główna różnica między Map a WeakMap polega na tym, że klucze w WeakMap są trzymane "słabo", co oznacza, że jeśli nie ma innych odwołań do obiektu klucza, zostanie on garbage-collected, a jego wpis w WeakMap zostanie automatycznie usunięty.

Oto przykład użycia WeakMap:

let john = { name: "John" };

let weakMap = new WeakMap();
weakMap.set(john, "...");

john = null; // overwrite the reference

// john is removed from memory!

WeakSet jest względem Set czymś podobnym co WeakMap do Map. Jest to zbiór obiektów, ale nie zapobiega garbage-collection jeśli obiekt jest niewidoczny gdziekolwiek indziej. Nie posiada metod typowych dla Set jak `size` i `clear`, a metoda `add` przyjmuje tylko obiekty.

Przykład zastosowania WeakSet:

let john = { name: "John" };

let weakSet = new WeakSet();
weakSet.add(john);

john = null; // overwrite the reference

// john is removed from memory!

Oba, WeakMap i WeakSet, są używane głównie w sytuacjach, gdy chcemy przechowywać dodatkowe informacje o obiektach, które powinny być usunięte, gdy sam obiekt jest usunięty.

Fiszki JavaScript