Interview Preparation — Basic JavaScript-4

Welcome to part-4 of the series, you can find part-3 here. Let’s start with where we left.

Question 16- Explain the concept of hoisting in JavaScript?
Answer- Hosting means we can use a variable even before declaring it. When the compiler runs and finds all the var declaration, it sorts of move them to the top of the file.

Lets consider this simple example. Here we are doing operations on a , b and c without declaring them first. They are declared on line 5, 6, 7 and yet the interpretor doesn’t throws a runtime error. It is because it doesn’t matter where the variables are declared. They are always hoisted to the top by when the compiler makes the first pass.

hoisting explained

This is also true for function declaration, as the compiler also treats function declaration as variable declaration as in JS all function declaration are object declaration.

function declaration

But the same is not true about function expressions. Let’s see the below example.

function expressions

Also cannot use let variables before declaring them. It will give reference error.

let also gives error

Question 17- What is event bubbling and capturing in JavaScript?
Answer- Event bubbling means when an event occurs in an webpage on an element, it bubbles to the top. Meaning the parent to the parent and all the way to the body.

Event capturing is the opposite of bubbling and it means when you click on parent element, it goes till the child.

Note that Event bubbling is the default behaviour of a browser and event capturing have to be enabled.

event bubbling and capturing

Let see both through an example. The jsfiddle to the same is here.

We will first see Event Bubbling. The HTML contains an parent element containing a child element called Child1. When we click on the button, first the console log of child is displayed and then the parent is displayed.

Event bubbling

We will now see Event Capturing. The HTML contains an parent2 element containing a child element called Child2. When we click on the button, first the console log of parent is displayed and then the child is displayed. Notice that in addEventListener we have to pass a value of true.

Event Capturing

Question 18- What is IIFE(Immediately Invoked Function Expression)?
Answer- IIFE means function expressions which are defined and invoked at the same time.

Let consider the below example. As you can see IIFE is nothing but a function expression, but it is defined and invoked at the same time.

Question 19- What are promises in JavaScript?
Answer- Promises in JavaScript are like promises in real life. You promise to do something, and then it is done or not done.
In JavaScript a Promise either sent a resolve or reject. Then the promise is captured and if resolve is sent, the statements inside “then” are executed. But if reject is sent, the statements inside “catch” are executed.

Consider the below example. Here inside promiseCleanRoom we generate a random number between 0 and 1. If the number is greater the 0.5, we send a resolve or else we send a reject.
Depending on the case either .then is executed or .catch is executed.

resolve case
reject case

Promises are used a lot to do the API calls in REST endpoints. Fetch function or libraries like axios returns a promise resolve or reject and then we need to have an .then and .catch block for the action.

Question 20- Explain nested promises in JavaScript?
Answer- Nested promises are set of promises in which , the result of one promise we call another in the .then statement.
It is very useful in practical applications, where the result of fetch from an API endpoint will result in sending the data to another endpoint.
Nested promises can also be done with callback functions, but the code get complicated soon.

Let’s look at an example of nested promises. Here we have three functions which return promises- cleanRoom, removeGarbage and winIcecream. Now only the cleanRoom is returning resolve() or reject() depending on random number. The other two functions are returning only resolve() for simplicity sake.

Now, when the cleanRoom function is run and return a resolve(), then the immediate .then block will be run or else we will go to the .catch block. In the .then we are returning the next removeGarbage and in it’s .then we are returning the winIcecream. We are passing the message from one function to other, so it will be appended.

On running the code and getting a resolve, because we random number greater then 0.5, we get below output.

On running the code and getting a reject, because we random number less then 0.5, we get below output.

Question 21- Explain callback functions in JavaScript?
Answer- In JavaScript you can pass functions to other function also as arguments and execute at a later time. These are know as callback functions.

Let’s look at the example below. Here we call function y with function x as argument and then from inside y, calling it after some console log.

When we use anonymous function inside our function call for callback like in the below code.

This type of code is actually used in implementation of map, reduce and filter in JavaScript.

Question 22- Implement your version of Array methods forEach, map and filter in vanilla JavaScript?
Answer- We can implement the Array methods by using callbacks and that is how it is implemented in JavaScript engine.

We are implementing our version by having the callback attached to the prototype, which is available to every JS function. Here “this” is equal to the array. So, we are iteration over it using traditional for loop and calling the callback function on each iteration.

We are implementing map, by creating an empty array in our function and then pushing it in the iteration. From inside the push we are calling our callback, so when we are calling it we can use something like Math.sqrt to change an individual item.

We are implementing map also, by the same process as forEach and filter. But as we know that filter goes through the array and gives an subset of elements depending on boolean expression.
Here when we iterate through the array and call the callback in a if statement, and depending on it’s passing push it to the array.

Question 23- Implement your version of Array methods some, every and reduce in vanilla JavaScript?
Answer- We will be implementing some, every and reduce in the same way as we implemented forEach, map and filter.

The Array prototype method some returns true if any element of the array fulfils the condition we are testing. Here also like filter, we will have the callback been checked in a if statement in every iteration. This will test our condition and even if one of it pass we return a true and get out of loop. If the iteration is complete, it means not a single element satisfy condition and we return false.

It is the opposite of some. The method “every” will return true only if every element passes the test. Here we do a trick in the if statement. We check the opposite of the test, so say if element should be greater then 10, we check for less then 10. So, if that the case we return false. And if we iterate through whole loop, means all element satisfy the condition so we return true.

The method reduce is considered the hardest in the Array prototype methods to master. It is because it’s concept is quite different. It takes the whole array and iterate through it and returns a single value. It is useful to do sum/multiply/subtract of all the elements of an array, but is more powerful then that. To do this it have an accumulator, which is used to hold the number in each run. This accumulator will be operated with the current value of the iteration.
Now in our implementation, we first check whether an accumulator was supplied or else make it to undefined. Now inside the loop we update the accumulator variable by using the callback.

Question 24- Implement multiply(2)(3)(4)(10) using currying in vanilla JavaScript?
Answer- Named after Haskell Brooks Curry, currying is the process of breaking down a function into a series of function that take a single argument.

Here is a simple example to write a simple multiply function and then the function with currying.

Currying works in JavaScript because of closures.

Question 25- Explain recursion in JavaScript?
Answer- Recursion is simply when a function calls itself.

Let consider the below simple example to add numbers in a series. It will add any number till 0. Say we pass 3, then 3+2+1 = 6.

Now, in recursive function there are two parts. One is termination condition and other is the recursion itself. In the above example If(n≤0) is the termination condition and return n + add(n-1); is the recursion.
The termination condition is very important or else the recursion never stops and goes into infinite loop.

The recursion works like below. It works like loop, so the first call will go to recursion part and give “3 + add(2)”. Now the add(2) will be called and will be expended into “2 + add(1)”.
After that add(1) will be called and expanded into “1 + add(0)”. Finally the add(0) will trigger the termination condition If(n≤0) and produce 0.
After this everything will be added 3 + 2 + 1 + 0 to give 6.

Question 26- Explain Higher Order Function in JavaScript?
Answer- A Higher Order Function is a function that takes one or more function as argument. We use them at many places in JavaScript, and are used mainly as callback functions.

Consider, the simple JS code that adds an event listener to a button. Here, we have a callback function proveIt.

These callbacks are usually defined inline as anonymous function. So, the refactored code is below.

The array methods map(), filter(), reduce(), forEach() are also Higher Order Functions.

This concludes part-4 of Basic JavaScript Interview questions. This is the final part of Basic JavaScript. Please find the part-5 of the series here.

UI Lead- ReactJS, JavaScript and everything in-between.