Some common JavaScript questions

5 min readMay 8, 2021

1. What is the difference between null and undefined?

Undefined means a variable has been declared but no value has been assigned to that particular variable yet. Undefined itself is a variable type.

Null means the variable doesn’t have any sort of value. Null is an object type.

Sounds confusing? Maybe the picture below can help you understand

2. When to use double equals (==) and when to use triple equals (===)?

Double equals and triple equals both are comparison operators. We can use them to compare between two variables. Double equals compares only the values of the two variable. It doesn’t compare the types. But triple equals compare both value and type of those variables. Example:

let x = 2, y = ‘2’;
console.log(x==y); //ouput: true
console.log(x===y) //ouput: false

3. What is a callback function?

When we pass a function as parameter to another function we call that a callback function. The function that receives the callback function is called the higher order function. Example:

function instructDirection(direction){
alert(‘Go ’+ direction);
}

function userInput(callback){
let direction = prompt(“Where to go?”);
callback(direction)
}
userInput(instructDirection);

4. What is event bubble?

We can add event listeners to increase interaction or to achieve certain effect in our website using JavaScript. We can add these listeners to capture some events like click, scroll, mouse hover etc. As we all know HTML elements are like trees and we have different nodes which have child and parent nodes. The root is the window object. What happens when we attach the same event listener into a parent and a child node?

//output upon clicking any image: first second third

//output upon clicking any aL second third

Let’s say we attach on click event listener in all child nodes of ul (li, a, img). When we click on an image node the click event of the image node will fire first. Then it will fire the parent node of the image, the anchor node and then the parent of that and so on. This is called event bubbling.

5. What is Blocking code?

JavaScript is a single threaded, high level, synchronous programming language. It can execute one line of code at a time. When it’s executing a large piece of code or maybe a code which takes a lot of processing time it seizes control of the browser over the DOM. The browser remains stuck or becomes frozen until the execution is complete. These types of code is called blocking code. A simple example can be an alert box. The code executes till it runs into the alert box code. Then until ‘Ok’ is press everything is stopped. Even rendering elements after that code.

6. What is asynchronous programming in JavaScript?

As we all know JavaScript is a single threaded programming language. So it can execute single line of code at a time. But it can achieve asynchronous behavior through promises or call back functions. Suppose we have to get some data from an API. We can use the fetch API for this. It will get the data asynchronously while the other code runs and renders the elements. Or maybe we have to wait for an event to happen, we can use an event listener and a callback function to achieve that. Example:

btn.addEventListener(‘click’, function () => {
console.log(“clicked”)
})

7. What is Prototype in JavaScript?

Prototype is used to achieve inheritance in JavaScript objects. Whenever we create a new object it inherits everything an Object prototype has. Prototype is a private property of a particular object. We can use this property to hold the link to another object. By linking these prototypes we can make a prototype chain. Prototype defines why an object has methods and properties of other objects. So prototype is a process by which we can share, copy and extend methods, objects and properties.

8. What is this in JavScript?

The this keyword is very powerful in JavaScript. It defines the context we are in inside the code. this is usually used inside a function but it can also be use in the global scope. When it is used in the global scope it refers to the window object (Not in strict mode. In strict mode it is undefined). When it’s used inside a function it refers to the invoking function. Example:

var fName=”Karen”;
var lName=”Smith”;
var person = {
fName:”Peter”,
lName:”Gomez”,
function fullName(){
console.log(this.fName+” ”+this.lName) //refers to Peter Gomez
}
}
console.log(this.fName+ “ ” +this.lName); //refers to Karen Smith

When we use this in a callback function it refers to the element (which is an object) that captures the event.

$(‘.btn’).onClick(function handleClick(){
console.log(this); //refers to btn
})

Above I gave the basic understanding of the this keyword. But it is an extensive topic and sometimes confuses developers.

9. What is bind?

bind() is used to specify the context of the this keyword. Sometimes we lose track of the reference of this key. bind() method gives us a new hope to keep track of that. We can bind an object to define the this keyword of that particular object. Example:

var person = {
fName:’Peter’,
lName:’Gomez’,
fullName:function(){
console.log(this.fName+’ ‘+this.lName) //refers to Peter Gomez
}
}
var person2 = {
fName:’Muhammad’,
lName:’Yunus’,
}
var secondName = person.fullName.bind(person2)
person.fullName(); //ouput: Peter Gomez
secondName(); //output: Muhammad Yunus

bind is used so that we can invoke the function in a later period.

10. What is call() and apply() method?

call and apply methods are almost similar to bind method. Both are used to define context of an object using another object. But these two methods invoke the bounded functions immediately. Both of these methods accepts multiple parameters in addition to the bounded property. The difference between these two functions is that the call method accepts additional parameters separately and apply method accepts the additional parameters in an array.

var person = {
fName:’Peter’,
lName:’Gomez’,
displayInfo:function(gender, status){
console.log(this.fName,this.lName,gender,status) //refers to Peter Gomez
}
}
var person2 = {
fName:’Muhammad’,
lName:’Yunus’,
}

person.displayInfo.apply(person2, [“Male”, “Single”]) //output: Muhammad Yunus Male Single

person.displayInfo.call(person2, “Male”, “Single”); //output: Muhammad Yunus Male Single

Some common JavaScript questions

Written by Asif Mahmud