Table of Content
Phases of Interview
1) What is an ECMAScript?
2) Are Attributes and Property the same?
No. Attributes are something that can give more details on an element like id, type, value etc. Whereas, Property is the value assigned to the property like type="text", value='Name' etc.
(i) getElementById('idname'): Gets an element by its ID name
(ii) getElementsByClass('classname'): Gets all the elements that have the given classname.
(iii) getElementsByTagName('tagname'): Gets all the elements that have the given tag name.
(iv) querySelector(): This function takes css style selector (like #id/.classname/tagname) and returns the first selected element.
(v) querySelectorAll(): Similar to querySelector, this function returns a NodeList of html elements.
6) What is a Typed Language?
Typed Language is in which the values are associated with values and not with variables. It is of two types:
Dynamically: in this, the variable can hold multiple types; like in JS a variable can take number, chars.
Statically: in this, the variable can hold only one type, like in Java a variable declared of string can take only set of characters and nothing else.
NOTE: Typescript is a superset of JS which is of typed language.
7) What does a typeof operator do?
The operator typeof gives the type of a variable/data available in it. The typeof operator can be used on Reference data types also.
You might want to explore: Top 40 Spring Interview Questions and Answers (Updated for 2018)
8) Name some of the ways in which Type Conversion is possible.
Type Conversion is to convert from one data type to another data type.
(i) Number to String Conversion.
toString: Other data type to String.
val = (5).toString(); converts integer to string.
val = (true).toString(); converts boolean to string.
Convert from Number/Boolean/Date to String.
Number to String: String(9) converts num to string
Boolean to String: String(true) converts bool to str
Date to String: String(new Date()) date to string
Array to String: String([2,2,2]) Array to string.
(ii) String to Number Conversion.
parseInt: String to Int only (no decimals)
val = parseInt('11'); outputs 100 as number
val = parseFloat('22.22') outputs 22.22 as float
Convert from String/Boolean to Number/Date.
String to Number: Number('9') converts str - num
(9).toFixed(4) gives 9.0000 as the output
Boolean to Number: Number(true) converts to no.
Null to Number: Number(null) converts to no. (0)
Chars to Number: Number('ss') give NaN.
9) What is the difference between Local Storage and Session Storage?
Local Storage will stay until it is manually cleared through settings or program.
Session Storage will leave when the browser is closed.
10) What is the difference between the keywords var and let?
11) What is the difference between the operators '==' and '==='?
The operator '==' compares the value; whereas, the operator '===' compares both value and type.
12) What is the difference between null and undefined?
When used the typeof operator on null; i.e., typeof(null), the value is an object. Whereas, when used the typeof operator on undefined; i.e., typeof(undefined), the value would be undefined.
(i) Angular (ii) React (iii) Vue
16) Explain the typeof operator.
The operator typeof is an example of Unary Operators, which is used by placing it before its operand; which can be of any type.
You may also like: Top 30 Interview Questions and Answers on Angular 5
An anonymous function allows a developer to create a function that has no name. In other words, anonymous functions can be used to store a bit of functionality in a variable and pass that piece of functionality around.
18) What is the difference between an Anonymous Function and a named function?
Anonymous functions exist only after they are called; whereas, Named functions to exist even if not called.
19) What are self Executing Functions?
These functions are executed right after its definition. Also called as Immediately Invoked Function Expressions (IIFE's). Syntax:
20) What is a function callback?
The callback function is a mechanism to send one function to another function as an argument; i.e., passing func as an argument to another function.
21) What happens when the recursion calling is applied on two functions?
The calling of recursion is possible in two functions, but the call comes to an end after some time.
22) Explain the term closure.
The inner functions can be called as closure when it has access to the outer function's variables.
23) Explain the terms synchronous and asynchronous code.
The synchronous code is something that should be finished before anything else can happen, or in other words, the synchronous code is blocking. And the Asynchronous code is something in which actions can happen and is not dependent on other actions- in other words, it is non-blocking.
25) What is the use of the ‘this’ keyword?
The keyword ‘this’ refers to the current instance of the object when used inside a function. But, when used outside a function, it refers to the window object.
27) How is it possible to get the total number of arguments that are passed to a function?
The arguments.length property helps in getting the total number of arguments that are passed to a function.
The typeof operator returns a string of what type the operand is. Whereas, the instanceof operator does not work with primitive data types; but works with objects and checks on what type the object is.
29) What is DOM?
DOM (Document Object Model) is an object-oriented representation of the HTML elements. All the elements (or nodes) are part of window.document.
30) Expand BOM and explain it.
BOM stands for Browser Object Model. Using BOM interaction with a browser is possible. Default object of the browser is a window.
32) What is the difference between innerHTML and innerText?
innerHTML will process an HTML tag if found in a string, whereas innerText will not. For Example document.querySelector('p').innerHTML='one <br> two' gives the output one and two in two lines as <br> in html is a new line. Whereas document.querySelector('p').innerText='one <br> two' gives the output of the text as it is in one line.
33) What is the difference between textContent and innerText?
Let us have a paragraph element and a span element in it as a child element.
<p>some text and a <span style="visibility: hidden">span tag hidden <\span>in it</p>
Now, if the following two steps would result in the following-
console.log(document.querySelector('p').textContent); gives some text and a span tag hidden in it.
console.log(document.querySelector('p').innerText); gives some text and a in it.
34) What is the difference between HTMLCollection and NodeList?
The functions querySelectorAll() returns NodeList in which the forEach can be used directly to traverse the elements. Whereas, the getElementsByClassName() or getElementsByTagName() returns an HTMLCollection, which does not have a forEach by default.
35) How can an HTMLCollection be traversed?
The HTMLCollection by default does not have forEach, it needs to be converted into an array (eleName = Array.from(eleName)) and then the traversal is possible using forEach.
36) What is the difference between childNode and children?
A childNode, when used returns a NodeList. Whereas, children, when used; returns an HTMLCollection.
37) What is the difference between firstChild and firstElementChild?
A firstChild when used returns the first node. It could be an HTML element or even a space, or a new line. Whereas, firstElementChild, when used returns the first HTML element only.
38) Name the two functions that are used to create an HTML element dynamically.
To generate an html element dynamically, we need to use two functions:
(i) var ele = createElement ('elementName'), which creates an element and
39) What is the difference between remove() and removeChild()?
The remove() function just removes the element. Whereas, the removeChild() returns the deleted element.
40) List out the Mouse Events.
There are altogether 9 mouse events. Here is the list:
1. click: A single click
2. dblclick: A double click
3. mousedown: When the mouse button is clicked down.
4. mouseup: When the mouse button is released up.
5. mouseenter: When the mouse cursor enters an external element.
6. mouseleave: When the mouse cursor leaves an external element.
7. mouseover: When the mouse cursor enters an internal and external element.
8. mouseout: When the mouse cursor leaves an internal and external element.
9. mousemove: When the mouse cursor is moved.
41) What is the use of history object?
By using the history object you can change or switch back to history pages or forward from current page to another page.
When an event is fired on an HTML element, the execution starts from that event and goes to its parent element. From there, the execution passes to its parent element and so on till the body element.
The print() function from window object prints the current web page when executed.
Read through: Top 55 Java Interview Questions and Answers for 2018
A Cookie is a variable that is stored on a client's/visitors machine. Using Cookies, the servers can identify the client and the client's transactions.
NaN is a short form of Not a Number. When a string or something else is being converted into a number and that cannot be done, then we get to see NaN. A strange thing about NaN is that it is not equal to anything including itself.
50) When do we use JSON.stringify()?
Just like push() which inserts elements into an array at the end of it, the unshift() function inserts elements at the beginning of an array.
Interview Tips for Freshers