Top Javascript Interview Questions And Answers

Javascript was introduced by a Netscape employee Brendan Eich in 1995, and it was inspired by Java. It was introduced with the intention to make web pages more interactive. It is used to change the contents of a web page just with a mouse click or by hovering, and one can perform many more events with both mouse and keyboard.

What is Javascript?

Before the introduction of Javascript, internet communication was done through HTML and CSS (for good design). But, just HTML and CSS were not enough to generate a user interactive web pages; as they were not programming languages. Here comes the actual usage of Javascript, using which a web page can be made to interact with the users. Javascript is a client-side language and the programs or codes written in Javascript run on a browser.  Using Javascript, it is possible to make a web page more intelligent, as it requires the user to provide all mandatory details before submitting the information (filled in HTML elements) to the server. Not only this, using Javascript, we can also restrict a web page to go back to the visited pages; e.g., security measure in net banking services.

Phases of Interview

Interviews on Javascript are mostly done in 2-3 phases; but again, it depends on the company.

Phase I: The first phase is a telephonic interview; where basic questions are asked on topics like current projects the candidate is working on, or the number of years the candidate has worked on Javascript and some other technical questions are asked. Depending on the response given by the candidate for these basic questions, a Face to Face Interview is scheduled.

Phase II: This is the phase where the job seeker has to prove his/her ability by answering questions on the projects that were developed using Javascript and technical questions on Javascript. A few very important Javascript interview questions are given below:

Javascript Basic Questions

1) What is an ECMAScript?

ECMAScript (European Computer Manufacturers Association) Script is a specification for the scripting language standards. It has standardized Javascript which made Javascript the best implementation of 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.

3) List out the different ways an HTML element can be accessed in a Javascript code.

Here are the list of ways an HTML element can be accessed in a Javascript code,

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

4) In how many ways a Javascript code can be involved in an HTML file?

The Javascript code can be involved in 3 ways (i) Inline (ii) Internal (iii) External

5) What are the new ways to define a variable in Javascript?

There are three possible ways of defining a variable in Javascript (i) var (which is used from the beginning) (ii) const (iii) let. The last two ways are the latest ways of defining a variable and are introduced in ES-2015(ES6 version).

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?

The keyword var is from the beginning of Javascript; whereas, let is introduced in ES2015/ES6. The keyword let has a block scope; whereas, the keyword var has a functional scope.

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.

13) Are Javascript and JScript the same?

No, Javascript was provided by Netscape; whereas, JScript was provided by Microsoft.

14) Are Typescript and Javascript the same?

Typescript is not the next version of Javascript but is developed by Microsoft and can be taken as a superset to Javascript; the code written in Typescript is later compiled into Javascript. Typescript adds new features like Interfaces, Generics, etc.

15) Name some of the Javascript frameworks.

There are many Javascript Frameworks available today, but the most commonly used frameworks are:

(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

Javascript Console (Arrays & Functions) Questions

17) What are anonymous functions in Javascript?

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: 
(function(){
    console.log('in iffe');
})()

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.

24) Name the different types of pop up boxes in Javascript.

There are three types of pop up boxes in Javascript (i) alert() provides some information to the user with just an OK button (ii) confirm() asks a question to the user with two options Ok and cancel, and (iii) prompt() takes an input from the user.

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.

26) Is Exception handling possible in Javascript?

With the latest version of Javascript, exception handling is possible; and this can be achieved using the following keywords try, catch and finally.

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.

28) What is the difference between typeof and instanceof operators in Javascript?

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.

Explore Top 5 Skills That Make You A Sure Shot Programmer

Javascript DOM (Document Object Model) Questions

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.

31) What is the difference between window and document in Javascript?

Javascript window is a global object which holds variables, functions, history, location; the document also comes under the window and can be considered as the property of the 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.

You may also like: Difference Between Java And Javascript

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 
(ii)   parentElement.appendChild(ele)

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.

42) What is an Event Bubbling in Javascript?

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.

43) What does window.print() do in Javascript?

The print() function from window object prints the current web page when executed.

Read through: Top 55 Java Interview Questions and Answers for 2018

44) How can a Javascript code redirect the user to a different page?

The window.location is assigned a value; i.e., a web link. On its execution, the Javascript code can redirect the user to the mentioned web link.

45) What are Cookies in Javascript?

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.

46) How do Javascript primitive/object types passed in functions?

Primitive types in Javascript are passed by value; whereas, object types are passed by reference.

47) What is NaN in Javascript?

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.

48) List out all the falsifying tokens in Javascript.

There are 6 tokens that falsify in Javascript and they are false, null, undefined, 0, NaN.

49) What is Currying in Javascript?

A partial invocation of a Javascript function is called Currying. Few arguments of a function are processed and a function is returned. Few more arguments are added by the returning function.

50) When do we use JSON.stringify()?

The JSON.stringify() method is used to convert a Javascript data to a string.

51) What does unshift() function do in Javascript?

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.

Learn 8 Up-and-Coming Programming Languages Developers Should Know

Interview Tips for Freshers

As a newbie in the IT industry looking for a career as UI Developer, it is good to learn the latest UI frameworks like Angular.JS, React.JS, and Vue.JS which are all Javascript frameworks. Make sure you take up some course on these front-end technologies and end up doing some projects using the technologies learned. The industry is looking for freshers who can start work immediately and not those who are looking for on the job training.

Conclusion

As time passed, Javascript has grown tremendously and it has risen to a standard where it is being used in programming games, server programming, and even robotic programming. Javascript is the most popular programming languages when it comes to web development. The modern Javascript allows creating responsive web pages that improve the user experience, and it also allows dynamic functionality without connecting to a server or waiting for a server to respond.