JS jobbintervju

Question 1

Vad är skillnaden mellan null och undefined?

Answer 1

null används för att indikera frånvaro av värde, undefined betyder att en variabel inte har tilldelats ett värde ännu.

Question 2

Vad är skillnaden mellan let, const och var när du deklarerar variabler?

Answer 2

let och const är blockomfattande och har blockscope, medan var har funktionsscope. let kan ändras, const är konstant.

Question 3

Vad är en closure?

Answer 3

En closure är en funktion tillsammans med den omgivande omfattningen av variabler.

Question 4

Vad är skillnaden mellan synkron och asynkron kod?

Answer 4

Synkron kod körs i sekvens.
Asynkron kod kan utföras parallellt och väntar inte på att en uppgift ska slutföras innan den går vidare.

Question 5

Vad är prototypkedja (prototype chain) och hur fungerar det i JavaScript?

Answer 5

Prototypkedjan är en mekanism för att söka efter egenskaper i objekts prototyp och dess prototypkedjor. Om en egenskap inte hittas i objektet söks det i dess prototyp och så vidare.

Question 6

När används en callback-funktion oftast?

Answer 6

Den används i asynkron kod för att hantera resultatet av en uppgift.

Question 7

Vad är en IIFE (Immediately Invoked Function Expression)?

Answer 7

En IIFE är en funktion som definieras och omedelbart körs.

Question 8

Hur väljer du ett element med JavaScript?

Answer 8

querySelector och getElementById

Question 9

Hur lägger du till en händelselyssnare på ett HTML-element?

Answer 9

Använd addEventListener för att lägga till en händelselyssnare på ett HTML-element. Det tar två argument: typen av händelse och en funktion som ska köras när händelsen inträffar.

Question 10

Vad är event bubbling och event delegation?

Answer 10

Event bubbling är när en händelse sprider sig genom DOM-trädet från det mest specifika elementet upp till dokumentet.

Event delegation är att placera en event listener på en gemensam förälder för att hantera händelser på dess barn. Det minskar antalet lyssnare och fungerar bra för dynamiskt skapade element.

Question 11

Vad är arrow-funktioner och vad skiljer dem från vanliga funktioner?

Answer 11

Anonyma funktioner med kortare syntax.
Binder inte sitt eget this, vilket gör dem användbara i vissa sammanhang för att undvika problem med scopet av this.

Question 12

Vad är destructuring?

Answer 12

Destructuring är en teknik som gör det möjligt att extrahera värden från objekt och arrayer och tilldela dem till variabler.

Question 13

Hur används promises för att hantera asynkron kod?

Answer 13

Genom att representera resultatet av en asynkron operation. Det gör det möjligt att skriva kod som ser ut som synkron kod.

Question 14

Vad är skillnaden mellan map(), filter() och reduce()?

Answer 14

map() gör något med varje element i en array och returnerar en ny array med de nya värdena.

filter() filtrerar element i en array baserat på ett villkor och returnerar en ny array.

reduce() används för att reducera arrayen till ett enda värde genom att applicera en funktion på varje element.

Question 15

Vad står AJAX för?

Answer 15

AJAX står för Asynchronous JavaScript and XML.

Question 16

Nämn 2 sätt att göra ett HTTP GET-anrop med JavaScript?

Answer 16

fetch() eller XMLHttpRequest

fetch() är en modern metod som returnerar en Promise som innehåller svaret från servern.

Question 17

Vad är ett CORS-problem och hur kan det lösas?

Answer 17

CORS (Cross-Origin Resource Sharing) är en säkerhetsåtgärd som hindrar obehörig dataåtkomst över olika domäner.

Ställ in servern för att tillåta åtkomst från specifika domäner med hjälp av HTTP-headers.

Question 18

Skillnad mellan Angular, React och Vue?

Answer 18

1. Angular: ramverk för att bygga stora och komplexa applikationer.
2. React: js-bibliotek för att bygga användargränssnitt med fokus på komponentbaserad utveckling.
3. Vue: progressivt ramverk som är lätt att integrera och använda.

Question 19

Vad är virtual DOM i React?

Answer 19

Virtual DOM är en virtuell representation av den riktiga DOM-strukturen i minnet.

Question 20

3 punkter för att beskriva konceptet “state” i React-komponenter?

Answer 20

1. Intern data som kan ändras i en React-komponent.
2. När state ändras, renderas komponenten om och visar den nya datan.
3. State används för att hålla reda på komponentens tillstånd och uppdateras vanligtvis med setState()-metoden.

Question 21

XSS-attack (Cross-Site Scripting) och hur kan du förhindra det?

Answer 21

XSS: skadlig kod injiceras i en webbsida för att stjäla information från användare.

Förhindras genom:
1. Validera och escapera användargenererad indata
2. Använda Content Security Policy (CSP) för att begränsa exekvering av skript.

Question 22

Vad är en CSRF-attack (Cross-Site Request Forgery) och hur kan du skydda en applikation från det?

Answer 22

CSRF är en attack där en obehörig hemsida försöker komma åt en annan webbplats där användaren redan är inloggad.

Kan förebyggas genom anti-CSRF tokens, som genereras och kontrolleras för varje request.

Question 23

Vad är enhetstestning?
Hur kan du utföra enhetstester för JavaScript-kod?

Answer 23

Att testa enskilda enheter av kod (funktioner eller metoder) för att säkerställa att de fungerar som förväntat.

Kan utföras med testramverk som Jest eller Mocha genom att skriva testcase som kontrollerar funktionernas resultat och beteende.

Question 24

Nämn 3 verktyg för att felsöka JavaScript-kod?

Answer 24

1. Webbläsarkonsolen för att inspektera variabler och logga meddelanden.
2. Google Chrome DevTools eller Firefox Developer Tools, kan också användas för att stega igenom koden och identifiera fel.
3. Linters

Question 25

Vad är hoisting?

Answer 25

Hoisting är mekanismen där JavaScript flyttar deklarationer av variabler och funktioner till toppen av deras scope innan koden körs.

Question 26

Vad är lexical scoping?

Answer 26

Det avgör utvärderingen av variabler baserat på var en funktion skapas funktions-hierarkin.

Inre funktioner har åtkomst till yttre funktioners variabler, oavsett om den yttre funktionen slutat exekvera.

Question 27

Vad är en generator-funktion och hur används den?

Answer 27

En generator-funktion är en speciell typ av funktion som kan pausa sin exekvering och återupptas senare. Den används med nyckelordet yield för att generera värden stegvis och asynkront.

Question 28

Hur skrivs spread-operatören?

Answer 28

(…)

Question 29

3 sätt att använda spread-operatören i JavaScript?

Answer 29

1. Skapa kopior av arrayer eller objekt
2. Kombinera arrayer eller objekt
3. Sprida argument till funktioner.

Question 30

Vad är skillnaden mellan “==” och “===”?

Answer 30

== jämför värden efter typkonvertering, medan === jämför värden utan typkonvertering och kräver att både värde och typ är lika.

Question 31

Vad är memoization och hur kan det förbättra prestandan?

Answer 31

Memoization är en teknik där funktionens resultat sparas baserat på dess inmatning.

Om samma inmatning används igen, returneras det sparade resultatet istället för att beräkningen görs igen, vilket förbättrar prestanda.

Question 32

Vad är Webpack?

Answer 32

Webpack är en modulbyggare och buntare för webbapplikationer.

Question 33

Vilka tre saker används Webpack för?

Answer 33

1. hantera beroenden,
2. kompilera och optimera koden
3. skapa buntade filer som används i webbapplikationen.

Question 34

Vad är lazy loading?

Answer 34

Lazy loading är en teknik där resurser, som bilder eller komponenter, laddas först när de behövs.

Question 35

Varför är lazy loading användbart i webbapplikationer?

Answer 35

Det förbättrar prestandan genom att fördröja laddningen av icke-essentiella resurser och snabbar upp initial sidbelastning.

Question 36

Vad är WebSockets?

Answer 36

WebSockets är en teknik som möjliggör tvåvägskommunikation mellan webbläsaren och servern över en enda TCP-anslutning.

Question 37

2 fördelar med destructuring?

Answer 37

1. Det hjälper till att skriva renare kod
2. Undvika upprepade referenser till samma objekt eller array.

Question 38

Vad användes IIFEs för?

Answer 38

Undvika namnkonflikter med andra kodblock genom att skapa en ny omfattning för att isolera variabler.

Kan istället göras genom att använda let, const och es moduler.

Question 39

vad gör querySelector och getElementById?

Answer 39

1. querySelector använder CSS-selektorer för att matcha element
2. getElementById väljer ett element med dess unika ID

Question 40

Skillnad på querySelector() och querySelectorAll()?

Answer 40

querySelector = första matchen
querySelectorAll = alla matchade element i en NodeList

Question 41

Hur använder React virtual DOM?

Answer 41

Genom att hålla en representation av DOM-strukturen i minnet kan React göra ändringar i minnet och sedan uppdatera den riktiga DOM:en enbart för de faktiska ändringarna, vilket ger förbättrad prestanda.

Question 42

Tre anledningar att är closures användbara?

Answer 42

1. funktioner kan komma åt variabler utanför sin egen omfattning
2. för att skapa privat data och
3. bibehålla variabler mellan anrop.

Question 43

Hur skiljer sig WebSockets från HTTP-protokollet?

Answer 43

WebSockets tillåter kontinuerlig och interaktiv kommunikation mellan klient och server.

HTTP är stateless och kräver upprepade anrop.

Question 44

Vad används AJAX för?

Answer 44

Göra asynkrona HTTP-anrop i bakgrunden utan att behöva ladda om hela sidan. Det gör det möjligt att uppdatera innehållet på sidan utan att användaren märker det.

Question 45

Skillnaden på AJAX och fetch()

Answer 45

AJAX är en äldre teknik som använder XMLHTTPRequest-objekt för att göra asynkrona begäranden till en server.

Fetch är en modernare API som erbjuder en enklare och mer flexibel metod för att göra liknande begäranden genom att använda Promise-baserade fetch() -funktionen.