JavaScript Interview Questions & Answers

What is JavaScript? Who invented this?

As per wikipedia-
Alongside HTML and CSS, JavaScript is one of the core technologies of the World Wide Web. JavaScript enables interactive web pages and is an essential part of web applications.

JavaScript often abbreviated as JS, is a high-level, interpreted scripting language that conforms to the ECMAScript specification. JavaScript has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.

The terms Vanilla JavaScript and Vanilla JS refer to JavaScript not extended by any frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.

JavaScript is developed by Netscape.
read more..

JavaScript is single thread or multi thread language?

JavaScript is a single thread language. It has one call stack and one memory heap.

What is  ASYNC and DEFER in JavaScript?

We load external files in HTML by using script tag. This <script> tag has two attributes, async & defer
These attributes gives us more control over fetching external files.

Let's first see Normal execution:  <script src="script.js">       
 In this case JavaScript file will interrupt the parsing of HTML document until it fetched and executed. After successfully executing JS file, again start HTML parsing.

Async Execution <script async src="script.js">   
In this case, HTML parser does not need to pause to fetch external files and when files fetched successfully, it executes, during file execution html parsing paused and after execution, again parsing starts.

Defer execution <script defer src="script.js">    
In this case HTML Parsing and loading files can work simultaneously. The script is not executed until the parsing is complete. After successfully document parsing finished, it executes.   

Explain “this” in JavaScript?

In JavaScript ‘this’ represent a scope. ‘this’ can have different values based on where it is used. this can represent a window, a Object, any other object , any function that created using new, this is undefined in strict mode, In Event handler this represent to that element.

What is Event Bubbling and Event Capturing?

Event Bubbling is a process to move an event from bottom to top. When an event occurred on an element, it runs handler on this and then on its parent element and then move to all ancestors.

 <form onclick="alert('clicked on form')">
    <div onclick="alert('clicked on div')">
        <p onclick="alert('clicked on p')">
            Hi this is test

So if we click on p element, we see three alerts because of Event Bubbling.

On other side when event moves from top to bottom, it is called Event capturing. It starts from HTML element and then moves to targeted element.
Sequence: HTML > Body > Form > Div > p

Note: To catch Event Capturing, we need to set the handler capture as true.
elem.addEventListener('click', function(e){alert('hi')}, {capture: true});
elem.addEventListener('click', function(e){alert('hi')}, true); // both lines are same

What is Event Delegation?

Event delegation is an Event handling pattern that happens by using Event Bubbling & Capturing. Suppose we have a lot of elements and we have to apply handler on all items. So instead of putting handler on each element we assign single handler on common ancestor element. In the handler function we can get and by this we can find out where actually event happened.

What is Primitive and Non Primitives In JavaScript?

There are two different types of data types in JavaScript.
1. Primitive data types
2. Non primitives data types
String, Number, Boolean, Undefined and Null are primitives types. Object and Array are non primitives types. Primitives data types are immutable means we can not change a primitive value once it gets created. Non-Primitives are mutable. Primitives are compared by value while Non-primitives compare by reference.
var empId = 12345; // primitive
var obj = {emp: 123}; OR var arr =[1,2,4,5]; // Non-Primitive 

How variables are stored in JavaScript?

There are two types of allocations.

  1. Static Allocation
  2. Dynamic Allocation.

For Primitives data types (variables for those we know size at compile time) required memory allocated in stack space. And variables for which we do not know how much memory they will need and size can grow dynamically during run time, these are allocated in heap space.

What is Static Typing and Dynamic Typing?

Static and Dynamic types are two programming approach. JavaScript is Dynamic Typing Language.
Core difference between is Static Typed language performs Type checking at compile time or before run time while Dynamically Type checking performs type checking during run time.
Type Script is Static Typing Language.

Below code will throw error during compile time because we are assigning string to number type variable.

Var emp: number  = 123;
emp = 'JS Mount'; // error
IN JavaScript such syntax does not throw any error because of dynamic typing.
Var emp = 9876;
emp = 'JS Mount';

What is Strict mode, What is advantages of it?

Strict mode enables modern way to write JavaScript. It is introduced in ECMAScript 5.
To enable strict mode we write 'use strict' at top of the body inside function or as first line in whole script. Strict Mode makes it easier to write ‘secure’ JavaScript. Strict Mode throws errors for any unsafe action unsafe declarations.

  • We can not create global variable with strict mode.
  • we can not use delete operator with strict mode.
  • let x = 020; such statement throws error in strict mode.
  • delete Object.prototype; // throw error
  • let eval = 1.14; // eval can not used as varaible name in strict mode.

What is the difference between Function Declaration & Function expression?

Case 1:
printName(); // output > 'My name is JS Mount'
function printName() {
    console.log('My name is JS Mount');

Case 2:
printNewName(); // output > Error
var printNewName = function() {
    console.log('My new name is Master JS Mount');

Case 1 works successfully because of a function declaration.
Case 2 gives an error because it is a function expression.

Function declarations move to the top of their scope & load before any code is executed means Function declarations are hoisted. Function expression only runs when the interpreter reaches that line. Function expressions aren’t hoisted.
Function declarations start with keyword ‘function’. Function expression starts with the keyword ‘var’.

What is Call Bind and Apply?

Call method is used to call a function with a given ‘this’ value & arguments provided. We pass arguments with comma-separated. Apply is used for the same task but with the apply function we pass arguments with an array.

 var emp = {
    fName: 'JS Mount',
    lName: 'Master',
    getName() {
        return this.fName + ' ' + this.lName;

var empFunction = function(fName, lName) {
    console.log('Logged Value ' + fName + ' ' +  lName);
}, 'John', 'David');
JS Mount Master
Logged Value John David
empFunction.apply(emp, ['Crish', 'Mind']);
JS Mount Master
Logged Value Crish Mind

Bind function create a new function with provided ‘this’ value and that is called Bound function. We can later call this bound function when required.

var bound = empFunction.bind(emp);
bound('Mine', 'JS');
JS Mount Master
Logged Value Mine JS

Can you please give a real example of using call apply?

Suppose we have created a library to Calculate the circumference of a circle. Inside our library function, we have used PI values like 3.14. We tested the library and freeze it. Now we don’t have any access to update this Library.

var circleLib = {
     pi: 3.14,
     calcCircumference(r) {
         return 2 * this.pi * r;
 output > 25.12

Later On, someone asked to change the PI value to 3.149. Now we are stuck because we fixed the pie value 3.14. In such situations, JavaScript Call comes into action.

var obj = {pi: 3.149};, 4);
 output > 25.192 

 AND Problem solved !!!!

What is Hoisting?

Hoisting is a JavaScript mechanism that moves all variables and function declarations to the top of its scope before any code execution. The key point is it only moves declaration to the top not its value. Let’s see an example..

var name = 'jsmount';

Output > undefined. // we have used name before it's creation still we do not get any error because of hoisting. 

What is Default Binding, Implicit Binding, Explicit Binding, or New Binding?

When we create a function with window scope then ‘this’ represents to window object and it is called Default Binding.

When we create a method within a specific object then ‘this’ represents that particular object only and it is called Implicit Binding.

Explicit Binding we can see with the call or apply methods. Where we pass an outside object into the function and call method.

When we use a new keyword before a function and create an object. It is called New Binding.

// Default Binding
 function getName() {
 // Implict Binding
 var obj = {
     myName: 'JS Mount',
     getName: function() {
 //Explicit Binding
 any example of call or apply
 // New Binding
 function Emp() { = 'JS Mount';
     this.printName = function(){
 var e = new Emp();

What is Pass By Value and Pass By Reference?

Primitive data types in Javascript like String, Boolean, and Numbers always pass by value whereas Objects are passed by reference.

Call By Value Example: 
var id = 1;
function myprint(id){
     id = id + 2;
 console.log(id);  //output is 1

Call By Reference Example:
var obj = {id: 1};
 function myprint(obj){ = + 3; 
 console.log(; // output 4, so obj has been updated because of reference.

What is Functional Programming?

Read here for functional programming:

What is the Pure function in JavaScript?

Read here for pure function:

What is the First Class function and Higher Order Function in JavaScript?

Read here for first-class functions and higher-order functions:

What is a Prototype?

Read here for prototype:

What is Prototype Chaining?

Read here to understand complete Prototype Chaining:

What is the difference between forEach vs for-of vs for-in loop?

foreach is available only for Array Objects. It allows you to iterate through elements of an array.

for in is used to loop over properties of objects. It can be any object. It returns a key or index.

for of come from ES 6 & also used to iterate over collections.

var obj = {a: 1, b: 2};
 for (var item in obj) {
 output > // return keys of object

for (var item of obj) {
Output > throw error, for of can not work with Object
 var arr = [1,3,6];
 for (var item in arr) {console.log(item);}
 output > // return index

 for (var item of arr) {console.log(item);} 
output >
1 3 6
 var str = 'This is JS Mount';
 for (var item in str) {
 //output > returns index from 0 to 15

 for (var item of str) {
output > 

What is the difference between slice vs splice?

var arrDeletedItems = array.splice(start[, deleteCount[, item1[, item2[, ...]]]]) >> start is start Index and deleteCount is number of elements 
which have to delete. item1, item2.. these are items which we have to add.

arr.slice([begin[, end]]) >> begin is start Index and end is end Index 
but it does not include end index element.

Splice() method returns removed items & Slice() method returns selected items from an array.
Splice changes original array but slice() method does not change.

For more info read here…

var fruits = ['apple', 'orange', 'banana', 'kiwi'];
fruits.splice(0); // it will remove all elements. 
fruits.splice(1,1, 'mango') // it removes 1 element from 1st index and will add 'mango'.
fruits.slice(0,1); // ['apple'] 
fruits.slice(1,2); // ['orange'] 

Explain array map, filter, and find method?

The map() method returns a new array of elements after processing logic passed in a callback function., index, array){ // return new array })

Filter() method returns a new array of elements that passes the test passed in a callback function.

Find() method returns the first element only which passes the test provided in a callback function.

var fruits = ['apple', 'orange', 'banana', 'kiwi'];{return element.length});
 output > (4) [5, 6, 6, 4]

 fruits.filter(function(element){ return element.length > 5});
 output > (2) ["orange", "banana"]

 fruits.find(function(element){ return element.length > 5});
 output > orange

Explain Array reduce and reduceRight method?

The reduce() method executes a callback function on each item of an array and returns output in a single value.

arr.reduce(callback(accumulator, currentValue, index, array) {}, initialValue);

So if we have to return the sum of all elements of an array, we can use reduce method.

var arr = [1,2,3];

arr.reduce(function(accum, currentElement) { return accum + currentElement}); 

output > 6

The reduceRight() method executes a function against an accumulator and each element of the array (from right to left) to reduce it to a single value.
read here for more info…

What happens if we remove the array value by using the DELETE operator?

If we try to remove an element of an array with, the delete operator, it removes only the value not its reference & creates an empty element on the same Index. So the length of that array is always same.

var fr = ["apple", "orange", "banana", "kiwi"];
delete fr[1]
output > true

and if check fr then >
(4) ["apple", empty, "banana", "kiwi"]

fr.length >> 4

What is the difference between function and method?

Method is a function associated with any Object. And when there is no Object attached to it that is Function.

// This is function because it does not attached with any Object
function printName(name) {console.log(name);}
var str = 'This is JS';
str.toLowerCase(); // here toLowerCase() is a method because it is related with string.

Read here HTML Interview Questions and Answers :
JavaScript Interview Questions & Answers

  1. Having read this I believed it was extremely informative.
    I appreciate you finding the time and energy to put this short article together.
    I once again find myself personally spending way too much time both reading
    and posting comments. But so what, it was still

Leave a Reply

Your email address will not be published.