Kolejne 10 pytań na rozmowę rekrutacyjną z języka JavaScript

Pytania na rozmowę rekrutacyjne były bardzo popularne. Do CSS i React było po 15 pytań, a tych do języka JavaScript było tylko 5. Postanowiłem więc napisać jeszcze 10 pytań jakie bym zadał na rozmowie kwalifikacyjnej na stanowisko Front-End developer.

Sprawdź czy znasz odpowiedź na każde z nich.

1. Jak można zmienić kontekst this metody/funkcji?

można użyć trzech metod dostępnych dla funkcji (metod dla obiektów funkcji): bind, call oraz apply.

2. Czym różnią się let, const i var?

var deklaruje zmienną dla całej funkcji, natomiast let oraz const dla bloku.

for (var i = 0; i < 10; ++i);
console.log(i);
// 10

for (let j = 0; j < 10; ++j);
console.log(j);
// Uncaught ReferenceError: j is not defined
{
    let x = 10;
    console.log(x);
    // 10
}
console.log(x);
// Uncaught ReferenceError: x is not defined

Różnica między const a let jest taka, że const nie może być ponownie przypisane. Chociaż nie oznacza to stałej. Ponieważ gdy wartością będzie obiekt może się on zmienić (mutować).

const foo = 10;
foo = 20;
// Uncaught TypeError: Assignment to constant variable.
const bar = {};
bar.baz = 10;
console.log(bar);
// {baz: 10}

3. Jakie są różnice między funkcją strzałkową od normalną?

Funkcje strzałkowe (ang. arrow function) dostają kontekst this z pierwszej zwykłej funkcji nadrzędnej lub jest to obiekt window, gdy nie ma żadnej zwykłej funkcji w łańcuchu zakresów.

var x = 10;
const foo = () => this.x;
console.log(foo());
// 10

const bar = {
    x: 10,
    baz: function() {
        return [1,2,3].map((x) => this.x + x);
    }
};
console.log(bar.baz());
// [11, 12, 13]

Funkcja strzałkowa może też występować w dwóch wersjach:

• skróconej (wyrażeniowej)

foo = () => 10;

gdzie wynikiem wywołania funkcji jest pojedyncze wyrażenie

• rozszerzonej (blokowej)

foo = (x) => { console.log(x); return x; }

Gdzie mamy wszystko to co w zwykłej funkcji

Dodatkowo jeśli mamy tylko jeden parametr, można pominąć nawiasy:

const square = x => x * x;

Warto też dodać, że aby zwrócić pojedynczy obiekt używając skróconej wersji, trzeba użyć nawiasów:

const obj = arg => ({x: arg});
console.log(obj(10));
// {x:10}

ponieważ gdy nie użyjemy nawiasów, będzie to blok z etykietą x, a wynikiem wywołania funkcji będzie undefined.

const obj = arg => {x: arg};
console.log(obj(10));
// undefined

4. Jak użwać tablicy jak stosu oraz kolejki?

Ciekawe pytanie, które pokazuje także, że znasz struktury danych.

1. Stos (dodaje na koniec, pobiera z końca - czyli LIFO)
   • dodawanie: a.push(10);
   • zdejnowanie: a.pop();
2. Kolejka (dodaje na koniec, pobiera z początki - czyli FIFO)
   • dodawanie: a.push(10);
   • zdejmowanie: a.shift();

5. Co wyświetli poniższy kod?

for (let item of ['foo', 'bar', NaN, 'baz', NaN]) {
    if (item === NaN) {
        console.log('Not a number');
    }
}

Nie wyświetli się nic ponieważ, NaN !== NaN. Aby sprawdzić czy wartość jest NaN, należy użyć funkcji isNaN lub lepiej Number.isNaN. Ponieważ funkcja isNaN zwróci true dla wartości isNaN('x'), dzieje się tak dlatego, gdyż konwertuje ona wartość do liczby przed sprawdzaniem (tak jakby używała parseInt).

6. Wymień metody operacji na plikach w JavaScript (w przeglądarce)

Dostępne są:

• FileReader API - umożliwia czytanie plików tekstowych i binarych dodanych do elementu file (html <input type="file"/>) lub za pomocą drag & drop. W niektórych przeglądarkach można też upuszczać cały katalog (zobacz wsparcie)

• Filesystem API - umożliwia utworzenie przestrzeni na dysku i zapis w niej plików. Wsparcie jest dość ograniczone

• Ajax - jest to podstawowe narzędzie gdy chcemy czytać i zapisywać pliki, działa tylko z serwerem i to on musi obsłużyć czytanie i pisanie i zwracać wynik do przeglądarki.

7. Co wyświetli poniższy kod?

var x = 10;
delete x
console.log(x);

Wyświetli 10 ponieważ operator delete działa tylko dla pól obiektów.

8. Co to znaczy że funkcje są typem pierwszo klasowym?

Typ pierwszo klasowy oznacza, że funkcje można używać wszędzie tam, gdzie inne wartości. Czyli można je:

• utworzyć jako anoniowe wyrażenie
• przypisać do zmiennej
• użyć jako elementu struktury danych
• porównywać z innymi obiektami
• przekazywać jako argumenty funkcji
• zwracać jako wynik funkcji

9. Jakie problemy może sprawić poniższy kod odwracający ciąg znaków?

function reverse(str) {
    return str.split('').reverse().join('');
}

Problemem jest sposób w jaki JavaScript zapisuje znaki Unicode. Niektóre znaki składają się z kilku zakodowanych punktów (ang. code points). Są to tzw. pary surogatów lub znaki emoji, które mogą się składać nawet z 3 zakodowanych punktów. Mogą się też zdarzyć znaki, które dodają dodatkowe ozdobniki np. akcenty do zwykłych liter, których może być więcej niż jeden.

np.:

"mañana".length;
// 7
reverse("mañana")
// "anãnam"

ponieważ słowo zapisane jest jako: ’ma\u{006E}\u{0303}ana’

'💩'.length;
// 2
reverse('💩')
// "��"

Więcej o kodowaniu znaków Unicode w artykule: „JavaScript has a Unicodeproblem” Mathiasa Bynensa lub jak ktoś woli jego wystąpienie „JavaScript ♥ Unicode” na konferencji JSConf.

10. Co wyświetli poniższy kod i dlaczego?

function foo() {
    return foo;
}
console.log(new foo() instanceof foo);

Wyświetli się false, ponieważ funkcja/konstruktor zwraca nowy obiekt, tylko gdy funkcja nic nie zwraca (zwraca undefined). Gdy natomiast zwracana jest jakaś wartość będzie ona wynikiem wywołania tej funkcji z operatorem new. Operator instanceof sprawdza czy wartość jest instancją konstruktora. W tym przypadku nie będzie to obiekt tylko funkcja/konstruktor foo (chociaż funkcje w JavaScript to też obiekty).