Jaka jest różnica między setTimeout() a setInterval()?

Funkcja setTimeout() wykonuje kod lub funkcję raz po określonym czasie wyrażonym w milisekundach.

setTimeout(function () {
    console.log('Done after one second!');
}, 1000);

Funkcja setInterval() wykonuje kod lub funkcję cyklicznie co określony czas, zaczynając po pierwszym okresie. Funkcja zwraca identyfikator, którego można użyć do przerwania działania za pomocą clearInterval().

const intervalID = setInterval(function () {
    console.log('Done every second...');
}, 1000);
// clearInterval(intervalID); // Przerwanie

Jaka jest różnica między == i ===?

Podwójny znak równości == (ang. equality) sprawdza równość dwóch wyrażeń lub wartości. Przed porównaniem próbuje je przekonwertować do tego samego typu.

Potrójny znak równości === (ang. identity) porównuje dodatkowo zgodność typów, ale nie dokonuje konwersji.

Jakie są typy danych w JavaScript?

W JavaScript wyróżniamy 9 typów:

• undefined typeof undefined === "undefined"
• Boolean typeof true === "boolean"
• Number typeof 2 === "number"
• String typeof "2" === "string"
• BigInt typeof 2n === "bigint"
• Symbol typeof Symbol("id") === "symbol"
• null typeof null === "object"
• Object typeof new Object() === "object"
• Function typeof alert === "object" (operator typeof wskazuje, że jest to obiekt, jednak wynika to z faktu, że każdy konstruktor funkcji dziedziczy po konstruktorze Object)

Czym jest spread operator?

Spread operator pozwala rozwinąć wyrażenie w miejscach, gdzie potrzebne jest wiele argumentów (do wywołań funkcji), wiele elementów (tworzenie tablic) lub wiele zmiennych.

const results = [5, 5, 4];
function calculateResults(a, b, c) {
    return a + b + c;
}
calculateResults(5, 5, 4); // 14
calculateResults(...results); // 14

var courses = ['Vue', 'React', 'Angular'];
const [firstCourse, ...allTheRest] = courses;
console.log(firstCourse); // "Vue"
console.log(allTheRest); // ["React", "Angular"]
console.log([...firstCourse]);// ["V", "u", "e"]

Czym jest scope?

Scope jest to zakres zmiennych, który określa ich widoczność i dostępność w różnych miejscach kodu. Jest zależny od sposobu, w jaki zostaną zadeklarowane.

Przy pomocy słowa kluczowego let deklarujemy zmienne w ramach block scope. Zakres zmiennych jest ograniczony tylko do bloku kodu, w którym zostały zadeklarowane.

Słowo kluczowe const służy do deklarowania stałych. Ich zakres jest analogiczny do zmiennych zadeklarowanych przy pomocy let a różnica polega na tym, że wartość raz przypisana const nie może zostać już zmodyfikowana.

Za pomocą var można definiować zmienne, które są widoczne wewnątrz funkcji nawet po opuszczeniu bloku, w którym zostały zdefiniowane. Ich zakres ograniczony jest do funkcji, tzw. function scope, lub do przestrzeni globalnej.

Jak działa hoisting?

Hoisting to mechanizm JavaScript przenoszący deklaracje funkcji oraz zmiennych na samą górę, tzn. do zasięgu funkcji, lub globalnego zasięgu.

Przenoszone są deklaracje a nie definicje funkcji oraz zmiennych.

var x = 1;                // inicjalizacja x
console.log(x + ' ' + y); // '1 undefined'
var y = 2;                // inicjalizacja y

Co dla interpretera jest równoznaczne z:

var x = 1;                // inicjalizacja x
var y;                    // deklaracja y
console.log(x + ' ' + y); // '1 undefined'
y = 2;                    // inicjalizacja y

Co to jest closure?

Closure, czyli domknięcie to funkcja wewnętrzna, która ma dostęp do

a) zmiennych, które sama definiuje,
b) zmiennych w scope funkcji zewnętrznej,
c) zmiennych globalnych.

W przykładzie poniżej funkcja add10 stanowi domknięcie (funkcję wewnętrzną) funkcji add (zewnętrznej). Pomimo że podczas wywołania funkcji add10(20) i add10(50) przekazujemy tylko jeden parametr, domknięcie zwraca poprawny wynik działania.

Wartość 10 jest w scope funkcji zewnętrznej add. Została zapamiętana w momencie wywołania add(10), dzięki czemu jest dostępna w domknięciu.

const add = x => y => x + y;
const add10 = add(10);
console.log(add10(20)); // 30
console.log(add10(50)); // 60

Czym jest Event Loop?

Event loop jest to mechanizm który wykonuje zadania ze stosu wywołań (ang. call stack), kolejki zadań (ang. task queue) oraz kolejki renderowania (ang. render queue).

Każde użycie funkcji powoduje umieszczenie jej na stosie wywołań. Utworzenie callback dla funkcji asynchronicznej, powoduje dodanie go do kolejki zadań.

Natomiast w render queue umieszczane są wszystkie operacje, które zmieniają wygląd strony.

Proces działania Event loop można sprowadzić do cyklicznego wywoływania:

1. Wykonaj wszystkie zadania ze stosu wywołań.
2. Wykonaj wszystkie operacje z render queue, które zmieniają coś na stronie (zmiana stylu, przeliczenie wysokości, zmiana DOM).
3. Sprawdź, czy jest coś w task queue. Jeżeli jest, sprawdź, czy call stack jest pusty. Jeżeli call stack jest pusty, weź jedno zadanie z task queue i przenieś je na call stack.

Jak działają funkcje map(), filter() i reduce()?

Funkcja map() tworzy nową tablicę z rezultatem wykonania wskazanej funkcji na każdym elemencie tablicy:

const numbers = [1, 2, 3, 4, 5];
const squared = numbers.map(number => Math.pow(number, 2));
console.log(squared); // [1, 4, 9, 16, 25]

Funkcja filter() tworzy nową tablicę z wszystkimi elementami, które spełniają warunek określony w predykacie:

const odds = numbers.filter(number => number % 2 !== 0);
console.log(odds); // [1, 3, 5]

Funkcja reduce() ma na celu redukcję całej tablicy do pojedynczej wartości. Odbywa się to przez wywołanie funkcji i przekazanie jej zakumulowanego rezultatu z poprzednich wywołań i bieżącego elementu tablicy (od lewej do prawej).

const sum = numbers.reduce((total, current) => total+current, 0);
console.log(sum); // kroki: 0+1=1; 1+2=3; 3+3=6; 6+4=10; 10+5=15

Czym są first class functions?

Mówimy, że funkcje pierwszej klasy (ang. first class functions) posiada język programowania, w którym funckjee są traktowane jak każda inna zmienna.

W świecie JavaScript wszystkie funkcje są funkcjami pierwszej klasy, ponieważ można je:

• przekazywać jako argumenty wywołania innych funkcji,
• zwracać jako rezultat działania funkcji
• przypisywać do zmiennych zupełnie jak każdą inną wartość

W przykładzie poniżej isEven() jest funkcją, którą możemy przekazać jako parametr metody filter():

const numbers = [1, 2, 3, 4, 5];
const isEven = number => number % 2 === 0;
numbers.filter(isEven); // [2, 4]

Co to jest pure function?

Pure function to funkcja, która ma poniższe cechy:

• jest deterministyczna - dla tych samych parametrów wejściowych zawsze zwraca ten sam wynik,
• jej wynik zależy tylko od parametrów wywołania,
• nie modyfikuje zewnętrznych wartości ani zmiennych,
• nie ma efektów ubocznych (ang. side effects) takich jak: manipulacja DOM, zapytania HTTP, operacje I/O

Przykładowo, funkcja Array.push() dodająca element do tablicy nie jest pure function, ponieważ modyfikuje tablicę a kolejne jej wywołania dają inne rezultaty.

Z kolei funkcja Array.concat() łącząca tablice w jedną, jest pure function, ponieważ nie modyfikuje istniejących tablic tylko tworzy nową zawierającą połączone tablice.

Czym jest Event Bubbling?

Event Bubbling jest typem propagacji zdarzeń, gdzie zdarzenia obsługiwane są w pierwszej kolejności przez element najbardziej wewnętrzny, a dalej przez kolejne parent elementy w hierarchii aż do najbardziej zewnętrznego elementu drzewa DOM.

funkcja addEventListener() pozwala zarejestrować listenera zdarzeń określonego typu. Trzecim parametrem tej funkcji jest useCapture, które kontroluje czy korzystamy z propagacji event bubbling (domyślne), czy event capturing.

Event Bubbling można przerwać poprzez wywołanie event.stopPropagation().

element.addEventListener('click', handle, false);
// useCapture = false, obsługa bubbling

Na czym polega delegacja zdarzeń?

Event Bubbling oraz Event Capturing pozwalają na implementację ważnego wzorca obsługi zdarzeń zwanego delegacją zdarzeń (ang. Event Delegation).

Jeżeli mamy wiele elementów drzewa DOM obsługiwanych w ten sam sposób, tworzymy jeden handler, do którego będziemy delegować obsługę zdarzeń wszystkich elementów.

Przykładowo, zdarzenie click na dowolnym elemencie <li> delegujemy do handlera umieszczonego na <ul>. Informacja, o tym który element <li> został kliknięty uzyskujemy przez event.target.

const form = document.querySelector('#signin');
form.addEventListener('input', function (event) {
    console.log(event.target);
}, false);

Jaka jest różnica między attribute a property?

Atrybuty (ang. attributes) są zdefiniowane na poziomie HTML a właściwości (ang. properties) na poziomie drzewa DOM.

Używamy właściwości w kodzie JavaScript, aby modyfikować wartości atrybutów HTML. Przykładowo, <input> posiada atrybut value typu string, którego wartość wynosi 0:

<input type="text" value="0">

Korzystając z JavaScript możemy odczytać tą wartość:

const input = document.querySelector('input');
console.log(input.value); // '0'

Modyfikując property po stronie JavaScript, wartość atrybutu w HTML nie ulegnie zmianie. Aby zmodyfikować wartość po stronie HTML, należy użyć:

input.setAttribute('value', 9);

Jak skorzystać z web storage?

Web storage jest dostępny poprzez window.localStorage oraz window.sessionStorage. W ten sposób uzyskujemy dostęp do obiektów z Web API : WindowLocalStorage oraz WindowSessionStorage.

Za pomocą tych obiektów można tworzyć, odczytywać, zapisywać i usuwać dane w pamięci przeglądarki, przykładowo:

const courses = ['React', 'Vue', 'Angular'];
localStorage.setItem('courses', courses);

const saved = localStorage.getItem('courses'); 
console.log(saved); //['React', 'Vue', 'Angular']

localStorage.removeItem('courses');
localStorage.clear();