10 Front End Interview Questions that you might face in Interview

You might have taken pretty decent preparation for your front end interview, but all of a sudden you discover some questions are bursting straight to you which you were not aware of. Well, this article may rescue you in that condition.

01. Difference between Window and Document

The JavaScript window object sits at the top of the JavaScript Object hierarchy and represents the browser window. The window object is supported by all browsers. All global JavaScript objects, functions, and variables automatically become members of the window object. The window is the first thing that gets loaded into the browser.

The Document interface represents any web page loaded in the browser and serves as an entry point into the web page’s content, which is the DOM tree. When an HTML document is loaded into a web browser, it becomes a document object. It is the root node of the HTML document.

Document is a property of Window.

02. Difference between attribute and property

When writing HTML source code, you can define attributes on your HTML elements. Then, once the browser parses your code, a corresponding DOM node will be created. This node is an object, and therefore it has properties.

03. Wrapper object

Strings are considered primitive data types — they are not objects. However, consider the following code:

var str = ‘hello’;
console.log(str.toUpperCase()); // → HELLO

If strings are not objects, why do they have properties like toUpperCase, toLowerCase, etc…?

Whenever you try to access a property of a string str, JavaScript coerces the string value to an object, by new String(str). This object is called a wrapper object.

04. Why is a React component constructor called only once?

React’s reconciliation algorithm assumes that without any information to the contrary, if a custom component appears in the same place on subsequent renders, it’s the same component as before, so reuses the previous instance rather than creating a new one.

05. Find the output of the code below:

Console

hello

06. What is the main goal of React Fiber?

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

07. Find the output of the following code:

Console

    //empty string
string

08. What is a Web Worker?

When executing scripts in an HTML page, the page becomes unresponsive until the script is finished.

A web worker is a JavaScript that runs in the background, independently of other scripts, without affecting the performance of the page. You can continue to do whatever you want: clicking, selecting things, etc., while the web worker runs in the background.

09. Find the output of the following code

Console

undefined

10. Difference between set and weakset

• Unlike Set, WeakSets are collections of objects only and not of arbitrary values of any type.
• The WeakSet is weak: References to objects in the collection are held weakly. If there is no other reference to an object stored in the WeakSet, they can be garbage collected. That also means that there is no list of current objects stored in the collection. WeakSets are not enumerable.

var ws = new WeakSet();
var window = {};
var foo = {};
ws.add(window);
ws.add(obj);
ws.has(window); //true
ws.has(foo); //false, foo has not been added to the set
ws.delete(window); //removes window from the set
ws.has(window); //false, window has been removed

That’s all for today. Thanks for reading.