Jedną z części rozmowy rekrutacyjnej na stanowisko Junior Web Developera jest rozmowa techniczna. Często podczas tej części rozmowy rekruter poprosi Cię o opisanie projektów, w których do tej pory brałeś(aś) udział. Warto wtedy opisać czego się nauczyłeś(aś), jakie trudności napotkałeś(aś) oraz jak udało Ci się z nimi uporać. W wielu przypadkach rekruterowi to wystarczy. Gdy jednak nie masz zbyt wiele doświadczenia, to rekruter będzie chciał sprawdzić Twoją wiedzę poprzez serię kilku pytań technicznych.

W tym artykule przedstawię Ci kilkanaście pytań rekrutacyjnych, jakie możesz usłyszeć podczas technicznej części rozmowy rekrutacyjnej. Pod każdym pytaniem zamieściłem odpowiedź i ewentualne dodatkowe informacje konieczne do odpowiedzi na wskazane pytanie. Pytania na stanowisko Junior Web Developera zorientowane są głównie na sprawdzenie znajomości podstawowych technologii webowych: HTML, CSS i JavaScript. Oprócz tego mogą się również pojawić pytania związane z dobrymi praktykami programistycznymi czy zagadnieniami związanymi z web developmentem.

Część pytań pochodzi z portalu DevFAQ — bazy z pytaniami rekrutacyjnymi tworzonej przez społeczność. Część pytań pochodzi z mojego e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer, który możesz odebrać, zapisując się na mój mailing. Nie wszystkie pytania zawarte w tym artykule znajdziesz w moim e-booku, więc zachęcam Cię do przeczytania tego wpisu, nawet jeśli planujesz przeczytać e-booka.

Na blogu tematyce pytań technicznych poświęciłem szerszą uwagę w serii wpisów. Zachęcam do sprawdzenia pozostałych artykułów:

Pytania z tej serii możesz również traktować jako trening i sprawdzenie swoich umiejętności przed rozmową rekrutacyjną.

Czym jest CDN (Content Delivery Network)?

CDN to usługa, której celem jest efektywne dostarczanie treści. Dzięki CDN można w szybki sposób udostępniać zasoby, takie jak pliki graficzne i video, pliki bibliotek programistycznych, a nawet całe strony WWW. Wiele z bibliotek JavaScript i CSS umożliwia ich wykorzystanie poprzez dołączenie linka kierującego do zasobów serwowanych przez CDN. Samo wykorzystanie takiego zasobu jest banalnie proste. Przeanalizuj poniższy przykład wykorzystujący CDN od Cloudflare.

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

Wykorzystanie zasobów serwowanych przez CDN ma sporo zalet:

CDN składają się zwykle z wielu serwerów rozmieszczonych w różnych częściach świata. Nie są to przypadkowo wybrane miejsca, a miejsca, gdzie umieszczenie serwera jest najefektywniejsze. Pozwala to na skrócenie odległości użytkownika od serwera, co przyspiesza serwowanie treści użytkownikom z różnych części świata. CDN są w stanie samodzielnie skierować użytkownika do najkorzystniejszego serwera.
CDN są zoptymalizowane pod kątem serwowania zasobów (np. poprzez umiejętne wykorzystanie cache), co zmniejsza czas dostępu do zasobów.
CDN przez swoją specyfikę powinny implementować warstwę ochrony przed atakami typu DDoS. Serwując zasoby przez CDN, zmniejszamy ryzyko, że serwowany przez nas zasób będzie niedostępny wskutek wspomnianego ataku.
Wiele CDN dostarcza narzędzia analityczne pozwalające na monitorowanie pobrań treści.
Delegując przechowywanie plików na zewnętrzny serwer, można optymalizować rozmiar zajmowanej przestrzeni dyskowej. Jest to przydatne, gdy usługa, z której korzystasz, oferuje mało przestrzeni dyskowej i z jakiegoś powodu nie możesz jej rozszerzyć.

Warto również wspomnieć o niektórych wadach wykorzystania CDN. Przy korzystaniu z zasobów utrzymywanych przez innych użytkowników istnieje ryzyko ich usunięcia. Oczywiście dotyczy to każdego rodzaju treści i nie jest to ściśle powiązane z CDN.

CDN tak jak każda inna usługa może ulec awarii, co może skutkować jej czasową niedostępnością.

Czym jest DRY?

DRY oznacza Don’t Repeat Yourself, czyli „nie powtarzaj się” i jest jedną z dobrych praktyk programowania. Programowanie zgodne z DRY ma kilka zalet:

łatwość utrzymania kodu – wprowadzanie zmian jest łatwiejsze, gdy trzeba to zrobić w jednym miejscu;
łatwiejsza detekcja i poprawianie błędów;
mniejsze ryzyko popełnienia błędu – jeżeli zmieniane jest kilka fragmentów kodu, istnieje większe ryzyko popełnienia błędu.

Z reguły DRY warto nauczyć się korzystać umiejętnie. Niekiedy powielenie danego fragmentu kodu może mieć wiele sensu, a zbyt agresywna optymalizacja liczby linii kodu może przynieść więcej szkody niż pożytku. Więcej uwagi tematowi DRY (ale też SOLID i KISS) poświęciłem w artykule SOLID, KISS i DRY.

Jakie znasz sposoby wyczyszczenia tablicy z elementów?

Pokażę dwa przykładowe rozwiązania. Pierwsze z nich polega na nadpisaniu tablicy pustą tablicą. Jest to rozwiązanie dość oczywiste, ale wymaga, by tablica była zadeklarowana z wykorzystaniem słów kluczowych var lub let. Drugim ze sposobów jest ustawienie właściwości length tablicy na wartość 0. Oba te działania w rezultacie dadzą pustą tablicę.


//Metoda nr 1
let arr1 = ['hello','world'];
arr1 = [];
console.log(arr1);

//Metoda nr 2
const arr2 = ['hello','world'];
arr2.length = 0;
console.log(arr2);

Do czego służy ternary operator?

Prawdę mówiąc, nazwa ternary operator podczas rozmowy technicznej niewiele by mi powiedziała. Warto w takiej sytuacji zamiast odpowiedzi „nie wiem” poprosić o sparafrazowanie pytania. Sparafrazowane pytanie mogłoby brzmieć: jakie znasz sposoby zapisu instrukcji warunkowej w kodzie?

Ternary operator to alternatywny sposób zapisu instrukcji warunkowej, bez wykorzystania słowa kluczowego if. Wyrażenie z tym operatorem konstruuje się poprzez podanie sprawdzanej wartości, następnie znaku zapytania. Po nim zamieszcza się kod, który wykona się, gdy warunek zostanie spełniony. Następnie dajemy dwukropek i po nim kod, jaki ma się wykonać, gdy warunek nie zostanie spełniony. Wykorzystanie ternary operator ilustruje poniższy przykład.


const arr = ['hello'];

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

Napisz funkcję, która przyjmie 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”

Celem tego zadania jest sprawdzenie umiejętności znajomości podstawowych funkcji i mechanizmów języka JavaScript. Pierwsza z wykorzystanych funkcji to split(). Funkcja split podzieli 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 do rozdzielenia elementów – w naszym wypadku będzie to spacja. Drugą z wykorzystanych funkcji jest reverse(). Służy ona do odwrócenia naszej nowo powstałej tablicy. Ostatnią wykorzystaną funkcją będzie join() łączący tablicę w całość. Domyślnie join() do łączenia używa przecinka, tak konieczne jest podanie stringa ze spacją jako parametr, aby powstało zdanie. Proponowane rozwiązanie prezentuje się następująco:


const sentence = 'Ala ma kota';

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

console.log(reverseSentence(sentence));

Oczywiście nie jest to jedyne poprawne rozwiązanie. Możesz np. zamiast funkcji reverse() próbować wykorzystać pętlę i pominąć wykorzystanie funkcji join().

Jakie znasz typy danych? Na czym polega referencja?

W JavaScript wyróżniamy dwa typy danych: proste (prymitywne) oraz referencyjne. Zadaniem zmiennych typu prostego jest jedynie przechowanie konkretnej wartości. Do typów prostych zaliczają się: number, boolean, string, null, undefined i symbol.

Typ object jest typem referencyjnym. Do typu object zalicza się również tablice. Zmienne typu referencyjnego cechują się tym, że nie przechowują one bezpośrednio wartości, a jedynie referencję. Referencja to wskazanie miejsca w pamięci, w jakim znajduje się dana wartość. Powoduje to, że klonowanie zmiennych z wartościami typu referencyjnego jest nieco trudniejsze niż klonowanie wartości z typami prostymi. Zwykłe przypisanie powoduje jedynie przypisanie referencji wskazującej na ten sam obiekt. Klonując obiekty i tablice, należy pamiętać, że zagnieżdżone obiekty i tablice również mają swoje referencje.

Do sprawdzenia typu zmiennej służy polecenie typeof. Szczególnie ciekawe rezultaty zwracają dwa ostatnie logi z poniższego przykładu.


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

Jak sklonować obiekt w JS?

Obiekty bez właściwości będących typami referencyjnymi można sklonować, korzystając np. z spread operatora. Bardziej problematyczne jest klonowanie obiektów zawierających w sobie typy referencyjne. W zależności od tego, czy klonowanie ma polegać na klonowaniu wartości, czy akceptowalne jest klonowanie referencji, podejście może się różnić. Wśród metod klonowania obiektów wyróżnić można:

wykorzystanie zewnętrznego komponentu np. metody cloneDeep z biblioteki lodash;
wykorzystanie metody structuredClone();
napisanie własnej metody, która rekursywnie przeniesie wszystkie wartości do klona;
wykorzystanie metod JSON.stringify() i JSON.parse();
użycie metody Object.assign();
wykorzystanie spread operatora;
zastosowanie pętli for...in.

O klonowaniu obiektów w JavaScript napisałem obszerny artykuł, do którego przeczytania serdecznie zachęcam — Kopiowanie obiektów w JavaScript.

Co to są menedżery pakietów i do czego się ich używa?

Menedżery pakietów pozwalają na zarządzanie zależnościami dodawanymi do projektu. Dzięki menedżerom można dodawać, usuwać czy aktualizować wykorzystywane pakiety. Menedżery umożliwiają też zarządzanie paczkami: publikowanie nowych wersji, dodawanie tagów itp. Do najpopularniejszych menadżerów należą npm, yarn i pnpm. Więcej o menadżerach pakietów możesz dowiedzieć się z artykułów: Co to jest npm – podstawy pracy z npm oraz Menadżery pakietów w JavaScript.

Czy dane przechowywane w Local Storage są widoczne w innych aplikacjach (pod innymi domenami)?

Odpowiedź brzmi, nie są. Przed dostępem do danych zapisanych w Local Storage w przez aplikacje w domenie chroni mechanizm Same Origin Policy. Aby uzyskać dostęp do danych z Local Storage, konieczna jest zgodność protokołu, domeny, subdomeny i portu.

Czym jest Grid i Flexbox? Kiedy z nich korzystać?

Grid i Flexbox to narzędzia CSS służące pozycjonowaniu elementów na stronie. Grid pozwala na pozycjonowanie względem dwuwymiarowej siatki z wierszami i kolumnami. Można definiować zarówno szerokość i wysokość wierszy, jak i kolumn oraz kontrolować ich miejsce na stronie. Flexbox pozwala pozycjonować elementy w jednym wymiarze, tzn. poziomo lub pionowo. Flexbox nada się do tworzenia layoutów, w których elementy mogą dostosowywać się do dostępnego miejsca, zmieniać swoje rozmiary i zachowanie w zależności od potrzeb. Szczególnie przydatny będzie do stylowania komponentów takich jak menu nawigacyjne, listy elementów, galerie zdjęć.

Stylowanie z wykorzystaniem opisanych narzędzi możesz potrenować przez gry online: Flexbox Froggy oraz Grid Garden.

Zaprojektuj prosty layout, który będzie na desktopie miał kwadraty o wymiarach 100px na 100px w układzie 2×3 a na urządzeniach mobilnych 3×2.

W celu uproszczenia wszystkie style będą osadzone w pliku HTML w znaczniku style. Umownie, jako wartość graniczną między desktopem a urządzeniami mobilnymi przyjąłem wartość 768px. Aby zwiększyć czytelność layoutu, warto ustawić kolor kwadratów, ja wybrałem pomarańczowy. Do wykonania zadania wykorzystałem Grid omówiony w poprzednim pytaniu. Przykładowe rozwiązanie znajdziesz poniżej, ale zachęcam też do samodzielnego rozwiązania zadania.


<style>
  .container {
    width: 300px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
  }

  .container div {
    background-color: orange;
    width: 100px;
    height: 100px;
  }

  @media screen and (max-width: 768px) {
    .container {
      width: 200px;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(3, 1fr);
    }
  }
</style>

<div class="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Jakie problemy wynikają z zastosowania innerHTML?

Metoda innerHTML służy do modyfikacji zawartości elementu HTML. Stanowi ona jeden z gorszych sposobów na aktualizację treści na stronie. Pierwszym powodem jest fakt, że utracimy listenery do elementów znajdujących się wewnątrz modyfikowanego elementu. Dzieje się tak, ponieważ nowo wyrenderowane elementy nie są tymi samymi, do których podpięto wcześniej nasłuchiwanie. Ponowne renderowanie wszystkich dzieci modyfikowanego elementu jest również mniej wydajne niż precyzyjna modyfikacja wybranych elementów.

Znacznie poważniejszym problemem, jaki wiąże się z wykorzystaniem innerHTML, jest to, że oczekiwaną wartością do przekazania jest kod HTML. Wartość przekazana przy wywołaniu innerHTML zostanie wstrzyknięta do strony WWW. Jeżeli aplikacja pozwala na dynamiczne wstrzykiwanie do wywołania innerHTML wartości przekazywanych przez użytkownika, to aplikacja jest podatna na atak XSS. Wystarczy, że użytkownik przekaże wartość z tagiem script zawierającym kod JavaScript.

Podsumowanie

Te kilkanaście pytań to o wiele za mało, by być dobrze przygotowanym do rozmowy rekrutacyjnej. Jeszcze raz gorąco zachęcam do sprawdzenia innych wpisów na blogu oraz pobranie e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer. Zachęcam też do zostawiania komentarzy i udostępnienia tego wpisu znajomym, którym ta wiedza może się przydać.

Źródła i materiał dodatkowe:

*Artykuł jest odświeżoną wersją wpisu z 2019 roku.

Zaobserwuj mnie na LinkedIn!

LinkedIn jest głównym medium, poza blogiem, gdzie publikuję swoje przemyślenia. Zaobserwuj mój profil na LinkedIn, by być na bieżąco!
Zachęcam też do zaobserwowania devszczepaniak.pl na Facebooku, gdzie oprócz informacji o nowych artykułach publikuję linki do ciekawych treści.

Udostępnij wpis

Szukasz taniego i dobrego VPS? Skorzystaj z Mikrusa i przy zakupie odbierz dodatkowy miesiąc usługi za darmo!

📖 Koniecznie sprawdź ofertę księgarni Helion oferującej tysiące książek dla programistów w dobrych cenach! Kupując z tego linku, pomagasz w rozwoju bloga.

Chcesz docenić moją pracę? Postaw mi kawę!

Zapisz się na mailing i odbierz e-booka

Odbierz darmowy egzemplarz e-booka 106 Pytań Rekrutacyjnych Junior JavaScript Developer i realnie zwiększ swoje szanse na rozmowie rekrutacyjnej! Będziesz też otrzymywać wartościowe treści i powiadomienia o nowych wpisach na skrzynkę e-mail.

2 komentarzy

Most Voted

Newest Oldest

Inline Feedbacks

View all comments

Asia

2 years ago

Bardzo fajne opracowanie, czytam wlasnie przed rozmowa rekrutacyjna i dodaje otuchy 🙂

Dominik Szczepaniak

Reply to Asia

Mam nadzieję, że pytania okażą się pomocne, trzymam kciuki! 🙂

Junior Web Developer – pytania rekrutacyjne cz. 1