JS jobbintervju Flashcards by Arvid Lindström

Vad är skillnaden mellan null och undefined?

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

Vad är en closure?

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

How well did you know this?

Not at all

Perfectly

Vad är skillnaden mellan synkron och asynkron kod?

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.

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

Hur väljer du ett HTML-element med JavaScript?

querySelector och getElementById

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

Vad är event bubbling och event delegation?

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.

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

Vad är destructuring?

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

How well did you know this?

Not at all

Perfectly

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

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

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

Vad står AJAX för?

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

How well did you know this?

Not at all

Perfectly

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

fetch() eller XMLHttpRequest

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

How well did you know this?

Not at all

Perfectly

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

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.

How well did you know this?

Not at all

Perfectly

Skillnad mellan Angular, React och Vue?

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

How well did you know this?

Not at all

Perfectly

Vad är virtual DOM i React?

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

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

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

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

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.

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

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.

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

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.

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

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

Vad är hoisting?

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

Vad är lexical scoping?

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.

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

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.

Hur skrivs spread-operatören?

(...)

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

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

Vad är skillnaden mellan "==" och "==="?

== 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.

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

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.

Vad är Webpack?

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

Vilka tre saker används Webpack för?

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

Vad är lazy loading?

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

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

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

Vad är WebSockets?

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

2 fördelar med destructuring?

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

Vad användes IIFEs för?

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.

vad gör querySelector och getElementById?

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

Skillnad på querySelector() och querySelectorAll()?

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

Hur använder React virtual DOM?

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.

Tre anledningar att är closures användbara?

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.

Hur skiljer sig WebSockets från HTTP-protokollet?

WebSockets tillåter kontinuerlig och interaktiv kommunikation mellan klient och server. HTTP är stateless och kräver upprepade anrop.

Vad används AJAX för?

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.

Skillnaden på AJAX och fetch()

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.