Å beherske JavaScript i porteføljen din øker sannsynligheten for å sikre seg en stilling som programvareutvikler. Med det sagt, la oss undersøke noen vanlige spørsmål som ofte stilles i JavaScript-intervjuer.
JavaScript er et av de mest brukte språkene innen webutvikling. Det brukes nå til å utvikle nesten alle typer applikasjoner.
Før vi dykker ned i intervjuspørsmålene, la oss se på fordelene ved å lære JavaScript.
JavaScript er et lett, tolket eller «just-in-time»-kompilert programmeringsspråk. Det er et av kjerne språkene på verdensveven. Du bør undersøke de to andre kjerne språkene til www, hvis du ikke allerede har gjort det.
JavaScript er hovedsakelig utviklet for internett. Men det er ikke bare for internett lenger. Ved hjelp av miljøer som Node, Deno, osv., kan vi kjøre det på nesten hvilken som helst plattform.
La oss se på noen fordeler med det.
Fordeler med JavaScript
- Lett å komme i gang med. Du kan lære det selv uten forkunnskaper om kode.
- Stort fellesskap rundt det. Du får all hjelp du trenger hvis du står fast.
- Det finnes mange biblioteker/rammeverk som er bygget med JavaScript, noe som bidrar til å utvikle applikasjoner raskere.
- Vi kan utvikle frontend, backend, Android, iOS, osv., applikasjoner med JavaScript. Vi kan lage nesten alle typer applikasjoner med det. Det er derimot mer robust i webutvikling.
Hva er datatypene i JavaScript?
Datatyper brukes til å lagre forskjellige typer data. Datatyper varierer fra programmeringsspråk til programmeringsspråk. I JavaScript har vi 8 datatyper. La oss se på dem en etter en.
- Tall
- String
- Boolsk
- Udefinert
- Null
- BigInt
- Symbol
- Objekt
Alle datatypene unntatt Objekt kalles primitive verdier. De er også uforanderlige.
Hva er de innebygde metodene i JavaScript?
De innebygde metodene i JavaScript er forskjellige for hver datatype. Vi kan få tilgang til disse innebygde metodene ved å bruke den respektive datatypen. La oss se på noen innebygde metoder for ulike datatyper og datastrukturer.
- Tall
- String
- toLowerCase
- startsWith
- charAt
- Array
Det finnes mange innebygde metoder for hver datatype. Du kan sjekke referansene for alle innebygde metoder for ulike datatyper og datastrukturer.
Hvordan lager man en matrise i JavaScript?
Matriser er en av de sentrale datastrukturene i JavaScript. Matriser kan inneholde alle typer data, siden JavaScript er dynamisk. La oss se hvordan du oppretter matriser i JavaScript.
Vi kan lage en matrise ved å bruke firkantede parenteser []. Det er enkelt og raskt å lage objekter.
// Empty array const arr = []; // Array with some random values const randomArr = [1, "One", true]; console.log(arr, randomArr);
Vi kan lage en matrise ved å bruke Array-konstruktøren. Folk bruker sjelden konstruktøren til å lage matriser i vanlige prosjekter.
// Empty array const arr = new Array(); // Array with some random values const randomArr = new Array(1, "One", true); console.log(arr, randomArr);
JavaScript-matriser er foranderlige, noe som betyr at vi kan endre dem som vi ønsker etter at vi har opprettet dem.
Hvordan lager man et objekt i JavaScript?
I tillegg til matriser er objekter en annen sentral datastruktur i JavaScript. Objekter brukes til å lagre nøkkelverdi-par. Nøkkelen må være en uforanderlig verdi, mens verdien kan være hva som helst. La oss se hvordan du lager objekter i JavaScript.
Vi kan lage objekter ved å bruke krøllete parenteser {}. Det er enkelt og raskt å lage objekter.
// Empty object
const object = {};
// Object with some random values
const randomObject = { 1: 2, one: "Two", true: false };
console.log(object, randomObject);
Vi kan lage objekter ved å bruke Object-konstruktøren. Folk bruker sjelden dette i vanlige prosjekter.
// Empty object const object = new Object(); // Object with some random values const randomObject = new Object(); randomObject[1] = 2; randomObject["one"] = "Two"; randomObject[true] = false; console.log(object, randomObject);
JavaScript-objekter er foranderlige, det vil si at vi kan endre dem etter at de er opprettet, som du ser i det andre eksemplet.
Hvordan feilsøker man JavaScript-kode?
Feilsøking av kode er ikke enkelt. Det er også forskjellig fra programmeringsspråk til programmeringsspråk, fra prosjekt til prosjekt osv. La oss se på noen vanlige metoder for å feilsøke JavaScript.
1. Logging
Vi kan bruke console.log-setninger flere steder i koden vår for å identifisere feil. Koden vil slutte å kjøre de påfølgende kodelinjene når det er en feil i en tidligere linje.
Logging er en av de eldste feilsøkingsmetodene, som er ganske effektiv for mindre prosjekter. Det er en vanlig feilsøkingsteknikk for alle programmeringsspråk.
2. Utviklerverktøy
JavaScript brukes mest til å utvikle webapplikasjoner. Derfor har nesten alle nettlesere nå utviklerverktøy som hjelper til med å feilsøke JavaScript-koden.
En av de mest brukte feilsøkingsmetodene er å sette inn bruddpunkter i utviklerverktøyene. Bruddpunktene stopper kjøringen av JavaScript og gir all informasjon om kjøringen i det øyeblikket.
Vi kan sette flere bruddpunkter rundt stedet der vi opplever feil og se hva som forårsaker dem. Det er den mest effektive måten å feilsøke JavaScript-nettapplikasjoner på.
3. IDE-er
Vi kan bruke IDE-er til å feilsøke JavaScript. VS Code støtter feilsøking med bruddpunkter. Feilsøkingsfunksjonen kan variere avhengig av hvilken IDE du bruker. De fleste IDE-er vil imidlertid ha denne funksjonen.
Hvordan legger man til JavaScript-kode i en HTML-fil?
Vi kan legge til JavaScript i en HTML-fil ved å bruke <script>-taggen. Du kan se eksemplet nedenfor.
<!DOCTYPE html>
<html lang="en">
<head>
<title>tipsbilk.net</title>
</head>
<body>
<h1>tipsbilk.net</h1>
<script>
// JavaScript code goes here
console.log("This is JavaScript code");
</script>
</body>
</html>
Hva er informasjonskapsler?
Informasjonskapsler er nøkkelverdi-par som brukes til å lagre små mengder informasjon. Informasjonen kan være hva som helst. Vi kan sette en utløpstid for informasjonskapslene, som vil bli slettet etter utløpstiden. Disse brukes ofte til å lagre brukerinformasjon.
Informasjonskapsler blir ikke slettet selv om vi oppdaterer siden før vi sletter dem eller de utløper. Du kan sjekke informasjonskapslene til en hvilken som helst nettapp/nettside i en hvilken som helst nettleser ved å åpne utviklerverktøyene.
Hvordan leser man en informasjonskapsel?
Vi kan lese informasjonskapsler i JavaScript ved å bruke document.cookie. Dette returnerer alle informasjonskapsler vi har laget.
console.log("All cookies", document.cookie);
Det returnerer en tom streng hvis det ikke finnes informasjonskapsler.
Hvordan oppretter og sletter man en informasjonskapsel?
Vi kan lage informasjonskapsler ved å sette nøkkelverdi-paret i document.cookie. La oss se et eksempel:
document.cookie = "one=One;";
I syntaksen ovenfor er «one» nøkkelen for informasjonskapselen, og «One» er verdien. Vi kan legge til flere attributter til informasjonskapselen, som domene, sti, utløpsdato, osv. Hver av disse skal skilles med semikolon (;). Alle attributter er valgfrie.
La oss se et eksempel med attributter:
document.cookie = "one=One;expires=Jan 31 2023;path=/;";
I koden ovenfor har vi lagt til en utløpsdato og en sti for informasjonskapselen. Hvis utløpsdatoen ikke er oppgitt, vil informasjonskapselen slettes etter økten. Standardstien vil være filstien. Utløpsdatoformatet skal være i GMT.
La oss se hvordan du lager flere informasjonskapsler:
document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;";
Informasjonskapslene vil ikke overskrives hvis nøkkelen eller stien er forskjellig når du angir flere informasjonskapsler. Hvis nøkkelen og stien er den samme, vil det overskrive den forrige informasjonskapselen. Ta en titt på eksemplet nedenfor, som vil overskrive den forrige informasjonskapselen:
document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "one=Two;path=/;";
Vi har fjernet utløpsdatoen fra informasjonskapselen og endret verdien.
Bruk en fremtidig dato som utløpsdato når du tester koden, slik at den fungerer som den skal. Hvis du beholder samme dato 31. januar 2023 selv etter 31. januar 2023, vil ikke informasjonskapslene bli opprettet.
Vi har sett hvordan man oppretter og oppdaterer informasjonskapsler. La oss se hvordan du sletter informasjonskapsler.
Det er enkelt å slette informasjonskapsler. Bare endre utløpsdatoen for informasjonskapselen til en tidligere dato. Se eksemplet nedenfor:
// Creating cookies document.cookie = "one=One;expires=Jan 31 2023;path=/;"; document.cookie = "two=Two;expires=Jan 31 2023;path=/;"; document.cookie = "three=Three;expires=Jan 31 2023;path=/;"; // Deleting the last cookie document.cookie = "three=Three;expires=Jan 1 2023;path=/;";
Du vil ikke finne den siste informasjonskapselen i informasjonskapslene, siden den er slettet i siste linje av koden. Det var alt for min informasjonskapsel-opplæring.
Hva er de forskjellige JavaScript-rammeverkene?
Det finnes mange JavaScript-rammeverk. React, Vue, Angular osv., brukes til UI-utvikling. Express, Koa, Nest osv., brukes til serverbasert utvikling. NextJS, Gatsby osv., brukes til statisk nettstedgenerering. React Native, Ionic osv., brukes til utvikling av mobilapper. Vi har nevnt noen av JavaScript-rammeverkene her. Du kan finne flere rammeverk, men det vil ta mye tid å utforske dem. Utforsk når du trenger dem.
Lukking i JavaScript
En lukking er en funksjon sammen med sitt leksikale omfang og det overordnede leksikale miljøet. Med lukking kan vi få tilgang til data fra ytre omfang. Lukninger opprettes når funksjoner opprettes.
function outer() {
const a = 1;
function inner() {
// We can access all the data from the outer function scope here
// The data will be available even if we execute this function outside the outer function
// as inners' closure formed while creating it
console.log("Accessing a inside inner", a);
}
return inner;
}
const innerFn = outer();
innerFn();
Lukninger er mye brukt i JavaScript-applikasjoner. Det kan hende at du har brukt dem før uten å vite at de er lukninger. Det er mye mer å lære om lukninger. Pass på at du lærer dette konseptet fullt ut.
Heising i JavaScript
Heising er en prosess i JavaScript der deklarasjonen av variabler, funksjoner og klasser flyttes til toppen av omfanget før koden kjøres.
// Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` var name = "tipsbilk.net";
Hvis du kjører koden ovenfor, vil du ikke se noen feil. Men på de fleste språk vil du få en feil. Utgangen vil være udefinert, ettersom heising bare flytter deklarasjonene til toppen, og den vil ikke initialiseres før linje nummer 3.
Endre var til let eller const som følger, og kjør koden på nytt:
// Accessing `name` before declaring console.log(name); // Declaring and initializing the `name` const name = "tipsbilk.net";
Nå vil du få en referansefeil som sier at vi ikke får tilgang til variabelen før den er initialisert.
ReferenceError: Cannot access 'name' before initialization
Dermed ble let og const introdusert i ES6, som ikke kan nås før initialisering, som feilen antyder. Dette er fordi variablene som er deklarert med let eller const, vil være i Temporal Dead Zone (TDZ) frem til linjen de er initialisert. Vi har ikke tilgang til variablene fra TDZ.
Currying i JavaScript
Currying er en teknikk for å konvertere funksjoner med mange parametere til funksjoner med færre parametere med flere kallbare. Med dette kan vi konvertere en funksjon som kan kalles add(a, b, c, d) til en add(a)(b)(c)(d)-kallbar. La oss se et eksempel på hvordan man gjør dette:
function getCurryCallback(callback) {
return function (a) {
return function (b) {
return function (c) {
return function (d) {
return callback(a, b, c, d);
};
};
};
};
}
function add(a, b, c, d) {
return a + b + c + d;
}
const curriedAdd = getCurryCallback(add);
// Calling the curriedAdd
console.log(curriedAdd(1)(2)(3)(4));
Vi kan generalisere funksjonen getCurryCallback, som vil bli brukt for forskjellige funksjoner for å konvertere til «curry callables». Du kan se JavaScript-informasjon for mer informasjon om dette.
Forskjellen mellom dokument og vindu
Vinduet er det øverste objektet i nettleseren. Det inneholder all informasjon om nettleservinduet, som historie, posisjon, navigasjon osv.; det er globalt tilgjengelig i JavaScript. Vi kan bruke det direkte i koden vår uten import. Vi kan få tilgang til egenskapene og metodene til vindusobjektet uten window.
Dokumentet er en del av vindusobjektet. All HTML som er lastet inn på nettsiden, konverteres til dokumentobjektet. Dokumentobjektet refererer til det spesielle HTMLDocument-elementet, som vil ha forskjellige egenskaper og metoder som alle HTML-elementer.
Vinduobjektet representerer nettleservinduet, og dokumentet representerer HTML-dokumentet som er lastet inn i det nettleservinduet.
Forskjellen mellom klientside og serverside
Klientsiden refererer til sluttbrukeren som bruker applikasjonen. Serversiden refererer til webserveren der applikasjonen er distribuert.
I frontend-terminologien kan vi si nettlesere på brukernes datamaskiner som klientside og skytjenester som serverside.
Forskjellen mellom innerHTML og innerText
Både innerHTML og innerText er egenskaper for HTML-elementer. Vi kan endre innholdet i et HTML-element ved å bruke disse egenskapene.
Vi kan tilordne HTML-strengen til en innerHTML-egenskap som gjengis som vanlig HTML. Se eksemplet nedenfor:
const titleEl = document.getElementById("title");
titleEl.innerHTML = '<span style="color:orange;">tipsbilk.net</span>';
Legg til et element med id «title» i HTML-en din og legg til skriptet ovenfor i JavaScript-filen. Kjør koden og se utdataene. Du vil se «tipsbilk.net» i oransje farge. Og hvis du inspiserer elementet, vil det være innenfor <span>-taggen. Så innerHTML vil ta HTML-strengen og gjengi den som vanlig HTML.
innerText vil på den andre siden ta en vanlig streng og gjengi den som den er. Det vil ikke gjengi HTML som innerHTML. Endre innerHTML til innerText i koden ovenfor, og sjekk utdataene.
const titleEl = document.getElementById("title");
titleEl.innerText="<span style="color:orange;">tipsbilk.net</span>";
Nå vil du se den nøyaktige strengen som vi ga på nettsiden.
Forskjellen mellom let og var
Nøkkelordene let og var brukes til å opprette variabler i JavaScript. Nøkkelordet let ble introdusert i ES6.
let har blokkomfang, og var har funksjonsomfang.
{
let a = 2;
console.log("Inside block", a);
}
console.log("Outside block", a);
Kjør koden ovenfor. Du vil få en feilmelding på den siste linjen, siden vi ikke har tilgang til let utenfor blokken fordi den har blokkomfang. Endre det til var og kjør det på nytt.
{
var a = 2;
console.log("Inside block", a);
}
console.log("Outside block", a);
Du vil ikke få noen feil, siden vi også kan få tilgang til variabelen a utenfor blokken. La oss nå erstatte blokken med en funksjon.
function sample() {
var a = 2;
console.log("Inside function", a);
}
sample();
console.log("Outside function", a);
Du vil få en referansefeil hvis du kjører koden ovenfor, siden vi ikke får tilgang til var a utenfor funksjonen, fordi den har funksjonsomfang.
Vi kan omdeklarere variablene ved å bruke nøkkelordet var, men vi kan ikke omdeklarere variablene ved å bruke nøkkelordet let. La oss se et eksempel:
var a = "tipsbilk.net"; var a = "Chandan"; console.log(a);
let a = "tipsbilk.net"; let a = "Chandan"; console.log(a);
Den første kodebiten vil ikke gi noen feil, og verdien til a vil bli endret til den siste tildelte verdien. Den andre kodebiten vil gi en feil, siden vi ikke kan omdeklarere variabler ved å bruke let.
Forskjellen mellom øktlagring og lokal lagring
Øktlagring og lokal lagring brukes til å lagre informasjon på brukernes datamaskiner som kan nås uten internett. Vi kan lagre nøkkelverdi-par i både øktlagring og lokal lagring. Både nøkkel og verdi vil bli konvertert til strenger hvis du oppgir en annen datatype eller datastruktur.
Øktlagringen tømmes når økten er over (når nettleseren er lukket). Plasseringslagringen tømmes ikke før vi tømmer den.
Vi kan få tilgang til, oppdatere og slette øktlagring og plasseringslagring med henholdsvis sessionStorage– og localStorage-objekter.
Hva er NaN i JavaScript?
NaN er forkortelse for Not-a-Number. Det representerer at noe ikke er et lovlig/gyldig tall i JavaScript. Det finnes noen tilfeller der vi vil få NaN som utdata, som 0/0, undefined * 2, 1 + undefined, null * undefined, osv.
Hva er leksikalsk omfang?
Det leksikale omfanget refererer til å få tilgang til variablene fra foreldrenes omfang. La oss si at vi har en funksjon med to indre funksjoner. Den innerste funksjonen har tilgang til variablene i de to overordnede funksjonenes omfang. På samme måte kan funksjonen på 2. nivå få tilgang til det ytterste funksjonsomfanget. La oss se dette i et eksempel:
function outermost() {
let a = 1;
console.log(a);
function middle() {
let b = 2;
// `a` are accessible here
console.log(a, b);
function innermost() {
let c = 3;
// both `a` and `b` are accessible here
console.log(a, b, c);
}
innermost();
}
middle();
}
outermost();
JavaScript bruker en omfangskjede for å finne variabelen når vi får tilgang til den et sted i koden. Først sjekker den variabelen i gjeldende omfang, og deretter det overordnede omfanget opp til det globale omfanget.
Hva er bestått av verdi og bestått av referanse?
Pass by value og pass by reference er to måter å sende argumenter til en funksjon i JavaScript.
Pass by value: den lager en kopi av de originale dataene og sender den til funksjonen. Så når vi gjorde endringer i funksjonen, vil det ikke påvirke de originale dataene. Se eksemplet nedenfor:
function sample(a) {
// changing the value of `a`
a = 5;
console.log("Inside function", a);
}
let a = 3;
sample(a);
console.log("Outside function", a);
Du vil se at den opprinnelige verdien til a ikke endres, selv om vi endret den inne i funksjonen.
Pass by reference: den sender referansen til dataene til funksjonen. Så når vi gjør endringer i funksjonen, vil det også endre de originale dataene.
function sample(arr) {
// adding a new value to the array
arr.push(3);
console.log("Inside function", arr);
}
let arr = [1, 2];
sample(arr);
console.log("Outside function", arr);
Du vil se at den opprinnelige verdien til arr endres når vi endrer den inne i funksjonen.
Merk: Alle primitive datatyper sendes av verdi, og ikke-primitive sendes ved referanse.
Hva er memoisering?
Memoisering er en teknikk som lagrer de beregnede verdiene i cacher og bruker dem når vi trenger dem igjen uten å beregne dem igjen. Det vil fremskynde kjøringen av koden hvis beregningen er veldig tung. Det er en lagringsmessig avveining som ikke er et stort problem sammenlignet med tiden.
const memo = {};
function add(a, b) {
const key = `${a}-${b}`;
// checking whether we computed the value already or not
if (memo[key]) {
console.log("Not computing again");
return memo[key];
}
// adding the newly computed value to cache
// here cache is a simple global object
memo[key] = a + b;
return memo[key];
}
console.log(add(1, 2));
console.log(add(2, 3));
console.log(add(1, 2));
Det er et enkelt eksempel som demonstrerer memoisering. Her er det ikke vanskelig å legge til to tall. Det er bare for demoen.
Hva er hvileparameteren?
Hvileparameteren brukes til å samle alle de gjenværende parameterne i en funksjon. La oss si at vi har en funksjon som aksepterer minimum to argumenter og maksimalt kan akseptere et hvilket som helst antall parametere. Siden vi ikke har det maksimale antallet argumenter, kan vi samle de to første parameterne med normale variabler og alle andre med hvileparameteren ved å bruke hvileoperatoren.
function sample(a, b, ...rest) {
console.log("Rest parameter", rest);
}
sample(1, 2, 3, 4, 5);
Hvileparameteren vil være en matrise med de tre siste argumentene i eksemplet ovenfor. Med dette kan vi ha et hvilket som helst antall parametere for en funksjon.
En funksjon kan bare ha én hvileparameter. Og hvileparameteren skal være den siste i rekkefølgen av parameterne.
Hva er objektdestrukturering?
Objektdestrukturering brukes til å få tilgang til variablene fra objektet og tilordne dem til variabler med samme navn som objektets nøkler. La oss se et eksempel:
const object = { a: 1, b: 2, c: 3 };
// Object destructuring
const { a, b, c } = object;
// Now, a, b, c will be used as normal variables
console.log(a, b, c);
Vi kan endre variablene til destrukturerte variabler på samme linje, som følger:
const object = { a: 1, b: 2, c: 3 };
// Changing the names of `a` and `b`
const { a: changedA, b: changedB, c } = object;
// Now, changedA, changedB, c will be used as normal variables
console.log(changedA, changedB, c);
Hva er matrise-destrukturering?
Matrise-destrukturering brukes til å få tilgang til variablene fra matrisen og tilordne dem til variabler. La oss se et eksempel:
const array = [1, 2, 3]; // Array destructuring // It's based on the index of the array const [a, b, c] = array; // Now, we can use a, b, c as normal variables console.log(a, b, c);
Hva er hendelsesfangst og hendelsesbobling?
Hendelsesfangst og hendelsesbobling er to måter å formidle hendelser på i HTML DOM. La oss si at det finnes to HTML-elementer, et inni det andre. Og en hendelse oppstår på det indre elementet. Nå vil hendelsesforplantningsmodusen bestemme rekkefølgen som disse hendelsene utføres i.
Hendelsesbobling: den kjører hendelsesbehandleren på elementet først, deretter det ytre elementet, og så går det helt opp til det øverste elementet. Dette er standard oppførsel for alle hendelsene.
Hendelsesfangst: vi må spesifisere i tilfelle at vi må bruke denne typen hendelsesforplantning. Vi kan spesifisere det mens vi legger til hendelseslytteren. Hendelsene vil utføres i følgende rekkefølge hvis vi har aktivert hendelsesfangst:
- Hendelsene begynner å kjøre fra det øverste elementet til mål elementet nedover.
- Hendelsen på målelementet vil bli utført på nytt.
- Forplantningen av boblende hendelse vil igjen skje opp til det øverste elementet.
Vi kan stoppe hendelsesforplantningen ved å kalle event.stopPropogation i hendelsesbehandleren.
<h2 id=»h