Pytania rekrutacyjne JavaScript

JavaScript API - część 1

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

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

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

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.

x	y	x == y	x === y
5	5	true	true
1	'1'	true	false
null	undefined	true	false
0	false	true	false
‘1,2’	[1,2]	true	false

3. Jak wyczyścić tablicę obiektów w JavaScript?

Jak wyczyścić tablicę obiektów w JavaScript?

Nadpisanie tablicy pustą tablicą:

let arr = ['hello', 'world'];
arr = [];
console.log(arr); // []

Ustawienie właściwości length tablicy na wartość 0:

let arr = ['hello', 'world'];
arr.length = 0;
console.log(arr); // []

Wykorzystanie metody splice(), która może być użyta do usuwania elementów z tablicy (splice() modyfikuje tablicę i zwraca usunięte elementy:

let arr = ['hello', 'world'];
let removed = arr.splice(0, arr.length);
console.log(arr); // []
console.log(removed); // ["hello", "world"]

4. Czym się różnią let i var?

Czym się różnią `let` i `var`?

Różnica dotyczy zasięgu w jakim zadeklarowana jest zmienna

var deklaruje zmienną dla całej funkcji (function scope)
let deklaruje zmienną dla bloku (block scope) Dodatkowo, deklaracje wszystkich zmiennych są hoistowane, ale tylko var są inicjalizowane przez undefined, podczas gdy let i const pozostają niezainicjalizowane.

function saveCourse(courseData) {
    if (courseData) {
        console.log(maxStudents);  // undefined
        console.log(courseLength); // ReferenceError

        var maxStudents = 12;      // function scope
        let courseLength = 30;     // block scope
    }

    console.log(maxStudents);      // 12
    console.log(courseLength);     // ReferenceError
}

5. Jakie są typy danych w JavaScript?

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)

6. Jak utworzyć obiekt w JavaScript?

Jak utworzyć obiekt w JavaScript?

class Course {
 constructor(title) { this.title = title; }
}
// 1. Za pomocą konstruktora
const jsCourse = new Course('JS'); 
// 2. Za pomocą Object Literal
const angularCourse = { title: 'Angular' };
 
// 3. Za pomocą new Object
const reactCourse = new Object(); 
reactCourse.title = 'React';
 
// 4. Za pomocą Object.create
const vueCourse = Object.create(jsCourse); 
vueCourse.title = 'Vue';

7. Jakie znasz falsy values?

Jakie znasz falsy values?

Falsy values są to wartości, które są traktowane tak samo jak false, gdy są użyte w kontekście boolean, np. w instrukcji if.

JavaScript używa konwersji typów rzutując każdą wartość na boolean w sytuacjach, które tego wymagają, np. w instrukcji warunkowej if lub pętlach. Wyróżniamy 8 falsy values:

false Domyślna wartość boolean
null Brak wartości
undefined Wartość niezdefiniowana
NaN Not a number, np. "abc" / 4
'' Pusty string
0 Liczba 0
-0 Liczba -0
0n Wartość 0 jako BigInt

8. Co odróżnia null od undefined?

Co odróżnia `null` od `undefined`?

W świecie JS undefined oznacza zmienną, która została zadeklarowana, ale nie posiada jeszcze wartości, na przykład:

let courseLength;
console.log(courseLength); // undefined
console.log(typeof courseLength); // "undefined"

Z kolei null jest wartością, która może zostać przypisana do zmiennej, która nie posiada żadnej wartości:

let courseContent = null;
console.log(courseContent); // null
console.log(typeof courseContent); // "object"
console.log(null === undefined); // false
console.log(null == undefined); // true

9. Czym jest spread operator?

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"]

10. Czym jest rest operator?

Czym jest rest operator?

Rest operator wygląda tak samo jak Spread operator, ale jest używany do destrukturyzacji obiektów i tablic. W przeciwieństwie do Spread operatora, pakuje wiele elementów w jeden:

function sum(...results) {
return results.reduce((a, b) => a + b);
}
sum(5) // 5
sum(5, 5) // 10
sum(5, 5, 4, 3, 1, 5); // 23

11. Co oznacza NaN?

Co oznacza `NaN`?

NaN reprezentuje wartość, która nie jest liczbą, przykładowo:

'abc' / 4 // NaN

Do sprawdzenia czy zmienna lub wyrażenie zawiera NaN, możemy skorzystać z funkcji Number.isNan()

Number.isNan('abc' / 4); // true
Number.isNan('100');     // false

Co ciekawe NaN nigdy nie jest równa innej liczbie, nie jest równa nawet samej sobie:

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false
console.log(typeof NaN); // "number"

12. Jak poprawnie stworzyć URL?

Jak poprawnie stworzyć URL?

Aby stworzyć poprawny adres URL można skorzystać z funkcji encodeURI(), która zakoduje wszystkie znaki specjalne za wyjątkiem <, ,, /, ?, :, @, &, =, +, $, #, >.

W drugą stronę, aby odczytać adres URI zakodowany przez encodeURI() można skorzystać z decodeURI(). Funkcja rzuca wyjątek w przypadku, gdy nie można poprawnie odczytać adresu URI.

const uri = 'https://example.com/ąę';
const encodedURI = encodeURI(uri);

console.log(encodedURI); 
// https://example.com/%C4%85%C4%99

console.log(decodeURI(encodedURI));
// https://example.com/ąę

13. Co odróżnia call() od apply()?

Co odróżnia `call()` od `apply()`?

Funkcje call() i apply() służą do podmiany kontekstu wykonania funkcji, czyli podmiany wskaźnika this, przez co możliwe jest wywołanie funkcji zdefiniowanej w obiekcie A na obiekcie B.

Funkcja apply() wywołuje funkcję używając do tego przekazanej wartości this oraz listy argumentów przekazanej w formie tablicy:

const numbers = [1, 2], others = [3, 4];
numbers.push.apply(numbers, others);
console.log(numbers); // [1, 2, 3, 4]

Funkcja call() w odróżnieniu od apply() przyjmuje argumenty w postaci pojedynczych wartości:

const numbers = [1, 2], others = [3, 4];
numbers.push.call(numbers, ...others);
console.log(numbers); // [1, 2, 3, 4]

14. Do czego służy funkcja bind()?

Do czego służy funkcja `bind()`?

Funkcja bind(), w odróżnieniu od call() i apply() nie zwraca wyniku, ale funkcję, którą można wywołać w przyszłości. Dzięki powiązaniu z this funkcja ta - niezależnie kiedy zostanie wywołana - będzie znała poprawną wartość this z momentu kiedy została utworzona.

Dzięki takiemu zachowaniu, bind() stosuje się do obsługi asynchronicznej eventów.

const numbers = [1, 2];
const addFn = numbers.push.bind(numbers);
addFn(3);
addFn(4);
console.log(numbers); // [1, 2, 3, 4]

15. Co różni slice() i splice()?

Co różni `slice()` i `splice()`?

W JavaScript funkcje slice() oraz splice() są często mylone. Mimo że mają bardzo podobne nazwy, mają zupełnie inne zadania:

slice	splice
Nie modyfikuje tablicy	Modyfikuje tablicę
Zwraca część tablicy jakonową tablicę	Zwraca usunięte elementy tablicy
Służy do wybierania elementów z tablicy	Służy do dodawania lub usuwania elementów z listy

Pojęcia - część 1

16. Czym jest scope?

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.

17. Jakie znasz typy scope?

Jakie znasz typy scope?

W JavaScript wyróżniamy trzy rodzaje scope:

Global scope, gdzie zmienne są deklarowane poza obrębem funkcji
Function scope, gdzie zmienne są deklarowane w obrębie funkcji
Block scope, gdzie zmienne są deklarowane w obrębie bloku kodu (od ES6)

function foo(courseData) {
    let maxStudents = 10;
    var numLessons = 10;
  
    if (courseData) {
        let maxStudents = 4;  // block scope
        var numLessons = 4;   // function scope
    }
    
    console.log(maxStudents); // Wyświetla 10
    console.log(numLessons);  // Wyświetla 4
}

18. Co to jest dziedziczenie prototypowe?

Co to jest dziedziczenie prototypowe?

Dziedziczenie prototypowe jest mechanizmem, za pomocą którego obiekty dziedziczą właściwości i metody po obiektach - rodzicach. Prototype jest obiektem, który służy jako szablon podczas tworzenia innych obiektów.

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

function Dog(name) {
    // Podczas tworzenia Dog, wywoływany jest konstruktor Animal
    Animal.call(this, name);
}

// Dog dziedziczy po Animal
Dog.prototype = Object.create(Animal.prototype);
Animal.prototype.getName = function () {
    return 'Hello, ' + this.name;
}

// Mimo że 'name' jest zapisane w Animal, Dog ma do niego dostęp
var dog = new Dog('Husky');
console.log(dog.getName()); // 'Husky'

19. Jak działa hoisting?

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

20. Co to jest closure?

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

21. Co to jest IIFE?