Web developer - pytania rekrutacyjne cz. 1

Jedną z części rozmowy kwalifikacyjnej są pytania techniczne. W tym artykule przedstawię ci 10 pytań rekrutacyjnych, jakie możesz usłyszeć wraz z odpowiedziami na nie. Pytania dotyczą głównie HTML’a, CSS’a oraz JavaScriptu i tematów związanych z tworzeniem stron i aplikacji internetowych.

Pytania zaczerpnąłem z portalu fefaq.pl – bazy z pytaniami rekrutacyjnymi tworzonej przez społeczność. Sama idea niesamowicie mi się podoba i jeśli usłyszałeś na rozmowie pytanie, którego nie ma w tej bazie, to serdecznie zachęcam do uzupełnienia jej!

Wpis ten jest jednym z serii wpisów. Pozostałe artykuły z tej serii znajdziesz tutaj:

1. Czym jest CDN (Content Delivery Network) i czemu służy?

CDNy są to usługi, które udostępniają developerom możliwość korzystania z zasobów takich jak biblioteki, frameworki czy zdjęcia bez konieczności dołączania dodatkowych plików do naszego katalogu z projektem. Jedyne co musimy zrobić to podlinkować nasz zasób, na przykład tak:

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>

Zaletą takich rozwiązań jest szybszy dostęp do treści serwowanych przez CDN. Serwery te są często o wiele szybsze niż te, z których korzystamy na co dzień. Oprócz tego nie obciążamy aż tak naszej maszyny, przez co możemy wytrzymać zwiększony ruch na serwerze. Dodatkowym plusem jest to, że nasz projekt waży mniej, przez co oszczędzamy miejsce na serwerowym dysku!

Niestety to rozwiązanie ma również wadę – dostęp do usługi może zostać przerwany…

2. DRY – co to jest i dlaczego jest ważne?

Rozwinięcie skrótu DRY to z języka angielskiego Don’t Repeat Yourself. Jest to reguła, która mówi nam o tym, abyśmy nie powtarzali się podczas pisania kodu. Jest do dosyć istotne z kilku względów.

Po pierwsze, kod zawierający wiele powtórzeń staje się nieoptymalny. Wielokrotnie powtarzane operacje sprawiają większe zużycie pamięci.

Po drugie, powtarzanie kodu znacznie wpływa na jego czytelność (oczywiście negatywnie). Wielokrotne użycie tego samego kodu nie tylko wpływa na nasz kod objętościowo, ale też spowalnia naszą pracę – w przypadku błędu wymagana jest zmiana kodu w wielu miejscach. Powoduje to możliwość popełnienia kolejnych błędów oraz zbędną pracę i stratę czasu.

3. Jakie znasz sposoby wyczyszczenia tablicy z elementów?

Pokażę tu dwa najpopularniejsze. Pierwszy z nich polega na nadpisaniu tablicy pustą tablicą. Drugim ze sposobów jest ustawienie właściwości length tablicy na wartość 0. Oba te działania w rezultacie dadzą nam pustą tablicę.


//Metoda nr 1

let arr1 = ['hello','world'];

arr1 = [];

console.log(arr1);

//Metoda nr 2

let arr2 = ['hello','world'];

arr2.length = 0;

console.log(arr1);

4.Czym jest ternary operator?

Jest to skrócona odmiana instrukcji warunkowej if. Wyrażenie z tym operatorem konstruujemy poprzez podanie sprawdzanej wartości, następnie znaku zapytania. Po nim piszemy kod, który wykona się jeśli warunek zostanie spełniony. Następnie dajemy dwukropek i po nim kod, jaki ma się wykonać, gdy warunek nie zostanie spełniony. Oto przykład:


let arr = ['hello'];

arr.includes('hello') ? console.log('true') : console.log('false');
arr.includes('world') ? console.log('true') : console.log('false');

5. Napisz funkcję, która przyjmuje ciąg znaków (zdanie) i ciąg znaków z odwróconą kolejnością słów. Przykład: Dla „Ala ma kota” funkcja ma zwrócić „kota ma Ala”.

Do napisania tej funkcji wykorzystamy trzy funkcje jakie dostarcza nam JavaScript. Pierwsza z nich to split(). Split podzieli naszego stringa na poszczególne słowa oraz każde ze słów umieści jako osobny element w tablicy. Funkcja ta jako parametr przyjmuje string, który posłuży nam do rozdzielenia elementów – w naszym wypadku będzie to spacja. Drugą z funkcji jest reverse() – służy ona do odwrócenia naszej nowo powstałej tablicy. Ostatnią funkcją jakiej użyjemy będzie join() łączący naszą tablicę w całość. Domyślnie join() do łączenia używa przecinka, tak więc musimy podać string ze spacją jako parametr, aby powstało nam zdanie. Nasz kod prezentuje się następująco:


let sentence = 'Ala ma kota';

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

sentence = reverseSentence(sentence);
console.log(sentence);

6. Jakie znasz typy danych?

W JavaScript wyróżniamy dwa typy danych: proste(lub też prymitywne) oraz referencyjne (złożone).

Typy proste jak sama nazwa wskazuje nie cechują się zbyt wielką złożonością. Zadaniem zmiennych typu prostego jest jedynie przechowanie konkretnej wartości. Na typy proste składają się:

Number
Boolean
String
Null
Undefined
Symbol

Natomiast wszystkie inne są typami referencyjnymi. Zmienne typu referencyjnego cechują się tym, że nie przechowują one bezpośrednio wartości a jedynie jak sama nazwa wskazuje – referencje. Referencja to wskazanie miejsca w pamięci w jakim znajduje się dana wartość. Typem referencyjnym jest chociażby typ Object.

Do sprawdzenia typu służy polecenie typeof (ciekawostka – zobacz co zwróci ostatni console.log()).


console.log(typeof 'hello');
console.log(typeof 2);
console.log(typeof {name: 'Bob'});
console.log(typeof [1,2,3]);

7. Jak sklonować obiekt w JS?

O klonowaniu obiektów w JavaScript napisałem obszerny artykuł, do którego przeczytania serdecznie zachęcam. Link znajdziesz poniżej:

https://devszczepaniak.pl/kopiowanie-obiektow-w-javascript/

8. Co to jest npm i do czego się go używa?

Na ten temat również pojawił się artykuł i tu też, aby się nie powtarzać pozostawię jedynie link:

https://devszczepaniak.pl/podstawy-pracy-z-npm/

9. Czy dane przechowywane w localStorage są widoczne w innych aplikacjach (pod innymi domenami)?

Odpowiedzią na to pytanie jest nie. Przed dostępem do danych zapisanych w localStorage w innej domenie chroni nas mechanizm same origin policy. Aby uzyskać dostęp do danych z localStorage muszą się zagadzać: protokół, subdomena, domena oraz port. Więcej o mechanizmie same origin policy znajdziesz w źródłach.

10. Jaka jest różnica pomiędzy metodami empty, remove a detach w jQuery?

empty() – metoda ta powoduje „opróżnienie” selektora. To znaczy, że nie usuwa ona samego selektora a jedynie jego zawartość.

remove() – po użyciu tej metody zostaje usunięta cała zawartość wraz z selektorem, na którym została użyta ta metoda.

detach() – działa bardzo podobnie do remove(), jednak metoda ta przechowuje w pamięci „usunięty” element. Dzięki temu mamy możliwość ponownego użycia go później.

Podsumowanie

Mam nadzieję, że dzięki temu wpisowi dowiedziałeś się czegoś nowego. Ten wpis jest tylko jednym z kilku wpisów na temat pytań z rozmów kwalifikacyjnych. Zachęcam do pisania własnych odpowiedzi oraz pytań, które mają pojawić się w kolejnych wpisach!

Jeśli ten wpis pomógł Ci zdobyć wymarzoną pracę to KONIECZNIE mi o tym napisz w komentarzu lub prywatnej wiadomości – będę wniebowzięty 🙂