10 Interview Questions Every JavaScript Developer Should Know

Question No-1: What are Promises?

Promises are one way in handling asynchronous operations in JavaScript. It represents the value of an asynchronous operation. Promises was made to solve the problem of doing and dealing with async code before promises we’re using callbacks.

The problem with this approach if we have another async operation inside the callback and another. We will have a code that is messy and unreadable. This code is called Callback Hell.

If we use promises in this code it will be more readable and easy to understand and easy to maintain.

Promises have 3 different states.

Pending — The initial state of a promise. The promise’s outcome has not yet been known because the operation has not been completed yet.

Fulfilled — The async operation is completed and successful with the resulting value.

Rejected — The async operation has failed and has a reason on why it failed.

Settled — If the promise has been either Fulfilled or Rejected.

The Promise constructor has two parameters which are functions resolve and reject respectively.
If the async operation has been completed without errors call the resolve function to resolve the promise or if an error occurred
call the reject function and pass the error or reason to it.
We can access the result of the fulfilled promise using the .then
method and we catch errors in the .catch method. We chain multiple async promise operations in the .then method because the .then method returns a Promise just like the example in the image e above.

We can make a helper func that converts an async operation with a callback to promise. It works like the promisify utility function from the node core module util.

Question No-2: What are Template Literals?

Template Literals are a new way of making strings in JavaScript. We can make Template Literal by using the backtick or back-quote symbol.

In the ES5 version, we need to escape the ' using the \ to escape the normal functionality of that symbol which in this case is to finish that string value. In Template Literals, we don't need to do that.

In the ES5 version, we need to add this \n to have a new line in our string. In Template Literals, we don't need to do that.

In the ES5 version, If we need to add an expression or value in a string we need to use the + or string concatenation operator. In Template Literals, we can embed an expression using ${expr} which makes it cleaner than the ES5 version.

Question No-3: What is Object Destructuring?

Object Destructuring is a new and cleaner way of getting or extracting values from an object or an array.

Suppose we have an object that looks like this.

The old way of getting properties from an object is we make a variable that has the same name as the object property. This way is a hassle because we’re making a new variable for every property. Imagine we have a big object with lots of properties and methods using this way in extracting properties will be irritating.

If we use object destructuring it looks cleaner and takes a little time than the old way. The syntax for object destructuring is that if we are getting properties in an object we use the {} and inside that, we specify the properties we want to extract and if we are getting data from an array we use the [].

If we want to change the variable name we want to extract we use the propertyName:newName syntax. In this example the value of fName variable will hold the value of the firstName property and lName variable will hold the value of the lastName property.

We can also have default values when destructuring. In this example, if the firstName property holds an undefined value in the object then when we destructure the firstName variable will hold a default of "Snigdho".

Question No-4: What is async/await and How does it work?

async/await is the new way of writing asynchronous or non-blocking code in JavaScript’s. It is built on top of Promises. It makes writing asynchronous code more readable and cleaner than
Promises and Callbacks. But you must learn the basics of Promises before using this feature because as I said earlier it is built on top of Promises which means is still uses Promises under the hood.

Using Promises.

Using Async/Await.

Note: We’re using the old try/catch statement to catch any errors that happened in any of those async operations inside the try statement.

Note: The async keyword before the function declaration makes the function return implicitly a Promise.

Note: The await keyword can only be used inside an async function. Using await keyword in any other function which is not an async function will throw an error. The await keyword awaits the right-hand side expression (presumably a Promise) to return before executing the next line of code.

Question No-5: What are Default Parameters?

Default Parameters is a new way of defining default variables in JavaScript it is available in the ES6 or ECMAScript 2015 Version.

We can also use Destructuring in Default Paremeters.

We can also use the parameters defined first to the parameters defined after them.

Question No-6: What are Wrapper Objects?

Primitive Values like string,number and boolean with the exception of null and undefined have properties and methods even though they are not objects.

name is a primitive string value that has no properties and methods but in this example we are calling a toUpperCase() method which does not throw an error but returns SNIGDHO.

The reason for this is that the primitive value is temporarily converted or coerce to an object so the name variable behaves like an object. Every primitive except null and undefined have Wrapper Objects. The Wrapper Objects are String,Number,Boolean,Symbol and BigInt. In this case, the name.toUpperCase() invocation, behind the scenes it looks like this.

The newly created object is immediately discarded after we finished accessing a property or calling a method.

Question No-7: What are the ways to deal with Asynchronous Code in JavasScript?

Callbacks
Promises
async/await
Libraries like async.js, bluebird, q, co

Question No-8: How many ways can a function be invoked?

There are 4 ways that a function can be invoked in JavaScript. The invocation determines the value of this or the "owner" object of that function.

Invocation as a function — If a function isn’t invoked as a method, as a constructor or with the apply, call methods then it is invoked as a function. The "owner" object of this function will be the window object.

Invocation as a method — If a property of an object has a value of a function we call it a method. When that method is invoked the this value of that method will be that object.

Invocation as a constructor — If a function was invoked with a new keyword before it then it's called a function constructor. An empty object will be created and this will point to that object.

Invocation with the apply and call methods - If we want to explicitly specify the this value or the "owner" object of a function we can use these methods. These methods are available for all functions.

Question No-9: What does the new keyword do?

The new keyword is used with constructor functions to make objects
in JavaScript.

Suppose we have an example code below.

The new keyword does 4 things.

Creates an empty object.
Assigns that empty object to the this value.
The function will inherit from functionName.prototype.
Returns the this if no Explicit return statement is used.

In the above image, it will first create an empty object {} then
it will the this value to that empty object this = {} and add properties to that this object. Because we don't have a explicit return statement it automatically returns the this for us.

Question No-10: What’s Event Capturing?

When an event occurs on a DOM element, that event does not entirely occur on that just one element. In Capturing Phase, the event starts from the window all the way down to the element that triggered the event.

If we have an example markup like this.

And js code.

— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —