Rozmowa rekrutacyjna na pierwsze stanowisko juniorskie nie jest łatwa. Liczba możliwych pytań na temat JavaScript jest ogromna. Zatem gdzie zacząć? Jak przygotować się na rozmowę? Pozwól, że pokażę Ci kilka pytań, które przybliżą Cię do otrzymania Twojej pierwszej pracy!
1. Jaka jest główna różnica pomiędzy Array.forEach a Array.map?
Array.forEach
- Iteruje przez wszystkie elementy w tablicy od początku do końca
- Wykonuje funkcję dla każdego elementu tablicy
- Nie zwraca żadnej wartości
const array = [1, 2, 3];
array.forEach((num, index) => {
array[index] *= 2;
});
console.log(array); // [2, 4, 6]
Array.map
- Iteruje przez wszystkie elementy w tablicy od początku do końca
- Zastępuje każdy element nowym, który jest wynikiem wywołanej funkcji
- Zwraca nową tablicę
const array = [1, 2, 3];
const doubled = array.map((num) => {
return num * 2;
});
console.log(doubled); // [2, 4, 6]
Różnica
Główna różnica między forEach a map polega na tym, że map zwraca nową tablicę.
Co więcej map pozwala zmieniać wartość elementów tablicy tworząc jej kopię - nie zmienia oryginalnej tablicy.
const array = [1, 2, 3];
const doubled = array.forEach((num) => {
return num * 2;
});
console.log(doubled); // undefined
2. W jaki sposób możemy tworzyć obiekty w Javascript?
Istnieje wiele sposobów tworzenia obiektów w JavaScript, a oto kilka z nich:
Konstruktor obiektu
Pierwszym sposobem utworzenia obiektu jest użycie konstruktora Object.
const myObject = new Object({
name: "Azor",
age: 34,
});
console.log(myObject);
/*
{
name: 'Azor',
age: 34
}
*/
Object.create
Metoda create klasy Object tworzy nowy obiekt poprzez przekazanie prototypu jako parametr.
const myObject = Object.create({
name: "Azor",
age: 34,
});
console.log(myObject);
/*
{
__proto__: {
name: 'Azor',
age: 34
}
}
*/
Składnia klamrowa
Składnia klamrowa to oddzielony przecinkami zestaw par nazwa-wartość owiniętych w nawiasy klamrowe. To obecnie najczęściej stosowany i najprostszy sposób na tworzenie obiektu w JavaScript.
Zaletą tworzenia obiektów w ten sposób jest bardzo krótka składnia, pozwalająca szybciej tworzyć obiekty w locie, co jest łatwiejsze i bardziej uporządkowane. Jest też minimalnie szybsza w interpretacji przez przeglądarki od składni opisanych wyżej.
const myObject = {
name: "Azor",
age: 34,
};
console.log(myObject);
/*
{
name: 'Azor',
age: 34
}
*/
Poniżej ciekawostka - szybkość interpretacji w Node.js na przykładzie 200 milionów elementów 🙈
for(let i=0; i<200000000; i++){
const obj = {};
};
// 870ms
for(let i=0; i<200000000; i++){
const obj = new Object();
};
// 5637ms
Wartości właściwości wewnątrz obiektu mogą mieć dowolny typ danych, w tym tablicę, funkcję, czy nawet kolejny obiekt.
Konstruktor funkcji
Tworząc funkcję i podczas inicjalizacji stosujemy operator new do tworzenia instancji obiektu.
function Dog(name, age) {
this.name = name;
this.age = age;
}
const myObject = new Dog("Azor", 34);
console.log(myObject);
/*
Dog {
name: 'Azor',
age: 34,
}
*/
Składnia klas ES6
ES6 wprowadziło metodę do tworzenia obiektów na podstawie instancji klasy. W rzeczywistości jest to tylko cukier składniowy (ang. syntax sugar) dla funkcyjnego tworzenia obiektu przez konstruktor, który opisałem wyżej.
class Dog {
constructor(name) {
this.name = name;
}
}
const myObject = new Dog("Azor");
console.log(myObject);
/*
Dog {
name: 'Azor',
age: 34,
}
*/
3. Jakie są różnice między plikami cookie, LocalStorage i SessionStorage?
Ale czym w ogóle są te trzy rzeczy?
Pliki cookie, LocalStorage i SessionStorage to mechanizmy, dzięki którym możemy przechowywać dane lokalnie w naszych przeglądarkach i pobierać w ramach potrzeby.
Stosujemy je na przykład do przechowywania na przykład danych na temat użytkownika i wykorzystywane są w procesie autentykacji
A więc, jakie są różnice?
Pamięć
Pamięć lokalna (LocalStorage), oraz pamięć sesji (SessionStorage) zapewniają dużą pojemność pamięci w przeglądarce.
Mówiąc dokładniej, LocalStorage przechowuje do 10 MB, a SessionStorage do 5 MB.
Natomiast cookie zapewniają znacznie mniejszą pojemność pamięci, która wynosi zaledwie 4KB
Czas przechowywania
Kluczową różnicą jest także czas przechowywania. Dane LocalStorage nigdy nie wygasają, dopóki użytkownik nie usunie ich ręcznie.
SessionStorage przechowuje dane w ramach otwartej karty (sesji), a więc usuwane są wraz z jej zamknięciem.
Pliki cookie są wyjątkowe, ponieważ możemy ręcznie ustawić dla nich datę wygaśnięcia. Można również usunąć je ręcznie.
Miejsce przechowywania
Z trójki omawianych sposobów, tylko pliki cookie mogą być dodatkowo przechowywane na serwerze. Reszta jest ograniczona wyłącznie do przeglądarki.
Wsparcie
Jedynie pliki cookie działają w starym już standardzie HTML 4. Cała trójka naszych bohaterów działa na obecnym standardzie HTML w wersji 5.
4. Czym jest promise w JavaScript i do czego mogę ją wykorzystać?
Czym jest promise?
Promise to obiekt, który asynchronicznie zwraca wartość lub błąd, gdy wystąpi np. błąd serwera.
Rozwiązany promise zawsze będzie w jednym z 3 możliwych stanów:
- pending: stan początkowy, ani spełniona, ani odrzucona.
- fulfilled: operacja zakończona sukcesem (spełniona).
- rejected: operacja zakończona porażką (odrzucona).
Składnia tworzenia promise wygląda jak poniżej.
const myPromise = new Promise((resolve, reject) => {
// ...
});
Użycie promise wyglądałoby jak poniżej:
const myPromise = new Promise((resolve, reject) => {
if (Math.random() > 0.5) {
resolve("Your random number is more than 0.5");
} else {
reject(Error("Your random number is less than 0.5"));
}
});
Promise to obiekt, który dostarcza metodę then służącą do odebrania wartości ze spełnionej obietnicy.
Oczekujący promise (pending) może przejść w stan spełniony (fulfilled) lub odrzucony (rejected)
Spełniony lub odrzucony obietnica jest zakończona i nie może przejść w żaden inny stan.
Po spełnieniu jej wartość nie może się zmienić.
Aby uzyskać wartość zwróconą z obiektu promise używamy składni then/catch lub nieco nowszej async/await
Składnia then/catch wygląda w ten sposób. Używamy łączenia funkcji then jak w łańcuszku.
function getData() {
const myPromise = new Promise(
// ...
);
myPromise
.then((response) => response.json())
.then((response) => console.log(response))
.catch((error) => console.error(error));
}
Składnia async/await do łapania błędów używa klamer try {} catch {}.
async function getData() {
const myPromise = new Promise(
// ...
);
try {
const response = await myPromise;
console.log(response.json());
} catch (error) {
console.error(error);
}
}
5. Do czego służy Array.reduce i do czego możemy go użyć?
Array.reduce służy do sprowadzenia tablicy do pojedynczej wartości. Na przykład chcemy policzyć sumę wszystkich liczb w tablicy.
const sum = [0, 1, 2, 3, 4].reduce((sum, currentValue) => {
return sum + currentValue;
}, 0);
console.log(sum); // 10
możemy zrobić to samo przy pomocy tablicy obiektów
const sum = [
{ price: 1 },
{ price: 2 },
{ price: 3 },
{ price: 4 },
].reduce((sum, {price}) => {
return sum + price;
}, 0);
console.log(sum); // 10
lub po prostu jednego obiektu, posiadającego wartości numeryczne
const sum = Object.entries({
price1: 1,
price2: 2,
price3: 3,
price4: 4,
}).reduce((sum, [key, price]) => {
return sum + price;
}, 0);
console.log(sum); // 10
Podsumowanie
Mam nadzieję, że ten post przybliżył Ci trochę podstawowe zagadnienia Javascript i pomoże Ci przy rozmowie rekrutacyjnej. Nie przestawaj się uczyć, rozwijać swojej wiedzy a przed wszystkim (o ile to możliwe) nie stresuj się na rozmowie rekrutacyjnej. Spróbuj nawiązać wspólny język z rekruterem.
Umiejętności miękkie są także bardzo istotne, bardzo często to one decydują o przyjęciu do pracy lub awansie. Pamiętaj także, że Twoje umiejętności nie wystarczą jeśli nie będziesz osobą, z którą przyjemnie się współpracuje.