Frontend and JavaScript Interview Questions

Advanced frontend questions to brush up your skills in web development

3 min readApr 9, 2023

Put these scripts in order of their load time:

A. <script async src="app1.js" /> 300
B. <script defer src="app2.js" /> 200
C. <script defer src="app3.js" /> 300
D. <script async src="app4.js" /> 50
E. <script async defer src="app5.js" /> 60

D. <script async src="app4.js" /> 50
E. <script async defer src="app5.js" /> 60
A. <script async src="app1.js" /> 300
B. <script defer src="app2.js" /> 200
C. <script defer src="app3.js" /> 300

Whenever script tag is discovered by HTML parser, it stops parsing and downloads the script, run it and then continue parsing HTML.

If it sees async , HTML parser continues parsing and the javascript is downloaded in background, and once the JS is downloaded, parsing will stop and JS will be executed in main thread, and after the execution HTML parsing will continue.

If it sees defer attribute, HTML parser continues parsing and download the JS once the parsing is done. defer ensures the order of download.

If we use both defer and async then priority will be given to async .

Will this piece of code works?

Note that we have used `defer` to load the script at the end.

<html>
    <head>
        <script defer type="text/javascript">
             document.getElementById("root").innerText = "Hello";
        </script>
     </head>
    <body>
        <div id="root"/>
    </body>
</html>

This will throw error , because defer and async only works with external files. To make this work we have to use document.ready method or move the script at the bottom.

What will be the output of this code snippet:

setTimeout(()=> console.log("A));

Promise.resolve().then(()=> console.log("B"));

Promise.resolve().then(()=> setTimeout(()=> console.log("C")));

new Promise(()=> console.log("D"));

setTimeout(()=> console.log("E"));

D
B
A
E
C

Which statement is correct about following code?

const dataMap = new WeakMap();
const person = {name: 'Ram'};

dataMap.set(person, "God");

Statement A: Setting person to null, dataMap returns 0
Statement B: if person object is set to null, its dataMap entry can
             be garbage collected.
Statement C: [...dataMap] returns array of dataMap entries

Statement B is correct.

In order to get result “2” in console, which promise method should we use for below code:

const promises = [
  new Promise((res) => setTimeout(()=> res(1), 200)),
  new Promise((res) => setTimeout(()=> res(2), 100)),
  new Promise((_, rej) => setTimeout(()=> rej(3), 100)),
  new Promise((res) => setTimeout(()=> res(4), 300)),
];

// we want to get 2 in console, out of all, race, any, allSettled which method
// should we use

Promise.race or Promise.any

What will be printed in console?

setTimeout(() => console.log(1), 0);

(async () => {
  console.log("2");
  await Promise.resolve();
  console.log("3");
})();

console.log("4");

Promise.resolve().then(() => Promise.resolve().then(() => console.log("5")));

Key thing to note here is that, whatever comes after the await keyword, will not run directly, instead it will be pushed to microtask queue.
This is the reason we get 4 before 3.

What will be printed in the console?

const personA = {
  name: "Ram",
  showName() {
    console.log(this.name);
  },
};

const personB = {
  name: "Laxman",
  showName: personA.showName,
  showBrotherName: () => personA.showName(),
  directlyShowBroName() {
    personA.showName();
  },
};

personB.showName();
personB.showBrotherName();
personB.directlyShowBroName();

Laxman
Ram
Ram

What is difference between `font-display:swap` and `font-display: block` ?

font-display:block temporarily renders an invisible font until the custom font has been downloaded.

font-display:swap renders a fallback font, while custom font is being downloaded.

Using CSS Selectors, change background color of<li>one</l1> red.

<div>
      <ul>
        <li>One</li> <!-- Make background color red, no classes or ids-->
        <ul>
          <li>Two</li>
          <li>Three</li>
        </ul>
      </ul>
      <ul>
        <li>Four</li>
      </ul>
    </div>

div ul:first-child > li {
  background-color: red;
}