10 Most Important JavaScript Interview Questions

Prepare Yourself before your Interview

There is some most important interview question of JavaScript a web Developer should know today or tomorrow. So, start learning

1.What is javascript, key features of javascript?

JavaScript is an open-source and most popular client-side scripting language supported by all browsers. JavaScript is mainly used for enhancing the interaction of the webpage with users by making it more lively and interactive. It is also used for game development and mobile application development.

Key Features of JavaScript:

• Validating User’s Input
• Simple Client-side Calculations.
• Greater Control.
• Platform Independent.
• Handling Dates and Time.
• Generating HTML Content.
• Detecting the User’s Browser and OS.

2. How Javascript code is executed?

Everything in JavaScript happens inside an “Execution Context”. Whenever a JavaScript program is run an execution context is created.

var number=10;  //line1 
function add(n) //line2
{               //line3
var result=n+n; //line4
return result;  //line5
} 
var result1=add(4); //line6

when we run the above code, a global execution context (GEC) is created. It is created in two phases:

1)Creation Phase or Memory Creation

In this phase, javascript allocates the memory to all the variables and functions present in the program. The variables are stored with the value undefined and the function is stored with all the code present in that particular function. For the above code, the variable number is stored with the value undefined and the function add is stored with value b/w the {…} curly braces. The result1 is also a variable so it is stored with the value undefined.

2)Code Execution Phase

In this phase the main execution takes place and the javascript runs through the code line by line. Now the number value is changed from undefined to 10. Then it moves to the next line as there is nothing to execute it moves to line 5. In line 5 function invocation takes place. When a new function is invoked a new execution context is created within the GEC.

Now the again above process is repeated with the two phases but for only the add function. After the function is executed completely, the execution context created for that particular function will get deleted automatically.

Now, when the whole javascript program is executed completely the GEC will also get deleted.

A Call stack is also maintained by javascript. Call stack maintains the “Order of execution of execution contexts”. It works similarly as a stack whenever a new function invoked its execution context is pushed into the call stack.

The GEC is at the bottom of the call stack as it is created at the starting of the program and all the new execution context is pushed on top of it. So when a function’s execution gets finished its execution context is also removed from the call stack.

3. Double equal (==) vs Triple equal(===)

Double equal is a logical operator which used in comparing two values. But why Triple equal(===)?

Ok, let explain this…

Double equals named as Equality Operator which used as Type converting the conversion. Double equals first convert the operands into the same type and then compare i.e comparison would perform once both the operands are of the same type. This is also known as type coercion comparison.

On the other hand Triple equal (===) is identity or strictly Operator.

Triple equals used as Strict conversion without performing any conversion in operands. Triple equals do not perform any type of conversion before comparison and return true only if type and value of both operands are exactly the same.

Now let see some example…

str1 and str2 both are string type operands so that double equal and triple equal both are True.

Here, the two number are not same type so that triple equal show false result.

In here, ‘0’ is a number type data and false is a boolean type data.so that results is different.

For this example empty string like as false value so that double equal result is true and triple equal result is false because of they are different types.

3.1 When should you use == and when should you use ===?

When in doubt, use ===. This will save you from a ton of potential bugs.

If you are supporting a use case where you can be a little lenient about the type of incoming data, then use ==. For example, if an API accepts both "true" and true from the client, use ==. In short, do not use == unless you have a strong use case for it.

4. Block Scope VS Function Scope

Is block scope is same as function scope? The answer is sometimes yes and sometimes no. Confusing…? read forward…

Block Scope or Local Scope is everything inside a curly braces {..block scope..}. ES6 has maintain block scope so that confusing is avoid as much as possible by using ‘let’ and ‘const’ keywords. If we use ‘var’ that makes our confusion.let see an example…

If you want to access a variable which is defined inside a variable from outside of block , You can not do this in ES6. It throws to you an undefined error!

Function is nothing but just a function inside its body {} .

At the top of this function the block is the same as block scope. But the inner one is a smaller block scope and you can not access variable z.

5. Hoisting:

In general, hoisting is a mechanism that handles execution contexts in JavaScript. This means the variable and function declarations (not initializations) are put into the memory during the compile phases before going for any execution.

var declarations are treated as if they are hoisted to the top of the function (enclosing block) or to the global scope if they are declared outside a function. So JavaScript engine treats the previous function internally as the following:

Notice carefully the declaration is hoisted to the top but the initialization is staying exactly where we type the name variable. This means that we can access the name variable from everywhere in the enclosing block in case of var binding.

To address this issue with var ES6 introduces block-level declarations using let and const.

7. Closure in JavaScript

Closures are important because they control what is and isn’t in scope in a particular function, along with which variables are shared between sibling functions in the same containing scope. Understanding how variables and functions relate to each other is critical to understanding what’s going on in your code, in both functional and object oriented programming styles.

function eventCounter() {
    var count = 0;
    return function() {
        count++;
        console.log(count);
    }
}var counter = eventCounter();

For the basic understanding eventCounter function contains a private variable count and returns a function. Now let’s see what happens when we call the counter function again and again.

Want to read this story later? Save it in Journal.

counter();
// 1

When counter function is invoked for the first time we all know that it will print 1 in console.

counter();
// 2

Now the question arises here, when we are invoking the counter function for the second time it will console 2 not 1. Why?
The reason behind this is closure, even if we are calling the counter function outside it has access to the lexical scope(basically in the outer scope of the returned function) variable count in eventCounter function through closure scope. So when we called the counter function first time its value is incremented to 1 and now when we are accessing the same variable in the 2nd call which is now incremented from 1 to 2.

Benefits of Closures:

1. Able to access the private variable & functions using closures.
2. Maintain state between each function call.

In the example, the private variable count can be accessed in the return function scope and its value was maintained in the second call

8.GET vs POST method:

The Hypertext Transfer Protocol (HTTP) is designed to enable communications between clients and servers and it works as a request-response protocol between a client and server.

A web browser may be the client, and an application on a computer that hosts a web site may be the server.

GET and POST are two commonly used methods for a request-response between a client and server .

The GET method

The GET method is used to retrieve data from the server. This is a read-only method, so it has no risk of mutating or corrupting the data. For example, if we call the get method on our API, we’ll get back a list of data from the server.

The POST method

The POST method sends data to the server and creates a new resource. The resource it creates is subordinate to some other parent resource. When a new resource is POSTed to the parent, the API service will automatically associate the new resource by assigning it an ID (new resource URI). In short, this method is used to create a new data entry.

9. Event Bubbling:

In JavaScript Event Bubbling is related to the event propagation order in which event listeners are called in case of nested HTML element and all the elements have registered with the event listener with the same events ( here we will use ‘click event’.

Event Bubbling is the event that starts from the deepest element or target element to its parents, then all its ancestors which are on the way to bottom to top. At present, all modern browsers have event bubbling as the default way of event flow.

So for better understanding, let see the HTML code example below :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Event Bubbling</title>
</head>
<body>
<div id="parent">
<button id="child">Child</button>
</div>
<script>
var parent = document.querySelector('#parent');
// <!-- Add click event on parent div -->
parent.addEventListener('click', function(){
console.log("Parent clicked");
});
var child = document.querySelector('#child');
// <!-- Add click event on child button -->
child.addEventListener('click', function(){
console.log("Child clicked");
});
</script>
</body>
</html>

10. Difference Between call(),apply() and bind() function in JS?

The main concept behind all these methods is Function burrowing.

Function borrowing allows us to use the methods of one object on a different object without having to make a copy of that method and maintain it in two separate places. It is accomplished through the use of . call() , . apply() , or . bind() , all of which exist to explicitly set this on the method we are borrowing

1. Call invokes the function immediately and allows you to pass in arguments one by one
2. Apply invokes the function immediately and allows you to pass in arguments as an array.
3. Bind returns a new function, and you can invoke/call it anytime you want by invoking a function.

Below is an example of all these methods

let name =  {
    firstname : "Arham",
    lastname : "Chowdhury",
}
printFullName =  function(hometown,company){
    console.log(this.firstname + " " + this.lastname +", " + hometown + ", " + company)
}

CALL

the first argument e.g name inside call method is always a reference to (this) variable and latter will be function variable

printFullName.call(name,"Mumbai","Taufa");     //Arham Chowdhury, Mumbai, Taufa

APPLY

apply method is same as the call method the only diff is that, the function arguments are passed in Array list

printFullName.apply(name, ["Mumbai","Taufa"]);     //Arham Chowdhury, Mumbai, Taufa

BIND

bind method is same as call except that ,the bind returns a function that can be used later by invoking it (does’nt call it immediately)

let printMyNAme = printFullName.bind(name,"Mumbai","Taufa");
printMyNAme();      //Arham Chowdhury, Mumbai, Taufa

printMyNAme() is the function which invokes the function

8.when and how to use the javascript callback function?

A callback function is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action.

Here is a quick example:

// function
function greet(name) {
    console.log('Hi' + ' ' + name);
}

greet('Omar'); // Hi Omar
// function
function greet(name, callback) {
    console.log('Hi' + ' ' + name);
    callback();
}

// callback function
function callMe() {
    console.log('I am callback function');
}

// passing function as an argument
greet('Omar', callMe);

Output

Hi Omar
I am callback function

Thank You so much for reading the article. If you have a question or clue about these topics, feel free to leave a comment.