Interview Preparation — Basic JavaScript-2

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

Question 4- What is the difference between function declaration and function expression ?
Answer- Function declaration is defining functions as in most languages, but function expression is assigning an anonymous function to an variable.

Consider the below example. We can call a function declaration even before defining it but same is not true for function expression and it will give reference error.

function funcD() {
console.log('Function declaration');
}
let funcE = function() {
console.log('Function expression');
};
/*
Exception: ReferenceError: can't access lexical declaration `funcE' before initialization
@Scratchpad/1:2:1
*/

Note: The detailed explanation can be found in my blog for Scopes and Closures here.

Question 5- Is JavaScript synchronous or asynchronous and what is event loop?
Answer- JavaScript is a synchronous, single-threaded language. The asynchronous behaviour of JavaScript(setTimeout, callbacks, promises) is not a part of JavaScript itself and built on top of JavaScript language in browser and accessed through browser APIs.

Now, the browser have a Call Stack, Browser API and Message Queue and the order of there processing is called event loop.

Consider the below code. It outputs A C B, even though B have a setTimeout of 0ms.

//Output
// A
// C
// B

To know the same we have to see the inner working during execution. The main() is pushed into Call Stack, which then console logs A. Then it is popped out and the setTimeout is pushed into Call Stack. Now the setTimeout() uses Browser API, so it is pushed there and the console log C is pushed into Call Stack.
Even with the delay of 0ms the exec() for setTimeout have to go to the Message Queue.
After all the statements of main() is run and the Call Stack is empty, then only the exec() from Message Queue can be pushed to the Call Stack.

Image for post
Image for post
inner working during execution

This is how the whole Event Loop works inside a browser and async calls like setTimeout or any API call is executed.

Note: This answer is heavily influenced by Philip Roberts’s talk on JS Event Loop.

Question 6- What will be the output of the below?

Answer- The output of the same will be A C B. setTimeout even with 0ms will be called last because of event loop concept as shown in Question 5.

Question 7- What is a closure and how do we use it?
Answer- Closures are basically a inner function storing the scope information of the variable stored in Outer function.

Consider the below code. The variable b have an scope in outer function ie from line 4 to line 10. So, at line 13 when we call the outer function, it can access the value of b, but at line 14 there is no outer function.

So, how does the innerFn() access the value of b. This is where the JS feature of Closures comes into play.
When the var inner is created at line 6, the JS engine not only stores the function object information but also it’s scope information. So, it stores a scope of variable b inside the inner function object.
Now it doesn’t matter where you call inner, whether in this file or some third party file. It will always remember the value of a and b, as if a snapshot is been taken.

Image for post
Image for post
Closures in play

Note: You can find detailed explanation about Closures in my article here.

Question 8- Explain “this” keyword in JavaScript?
Answer- JavaScript “this” keyword simply means that if you are inside a scope or function or object, “this” means whichever scope/function/object you are in. We can have “this” in various context. Let’s go through them.

“this” inside global scope

When we have this in global scope as in below example, it can also be referred with window.

Image for post
Image for post
“this” inside global scope

“this” inside a method

Let have a private Object nabsRoom and have a function cleanTable() in it. Now “this” inside the function refers to the table inside the Object nabsRoom.

Image for post
Image for post
“this” inside a method

“this” inside a function

Now if we have a function called cleanTable(), then “this” refers to window

Image for post
Image for post
“this” inside a function

Question 9- Explain “this” keyword in call method?
Answer- call method is used for calling a function, with some Object and in such cases the “this” is for that Object. We can also pass some argument to it.

Image for post
Image for post
“this” keyword in call method

Question 10- What are the different way to access “this” inside an inner function for below code?

let nabsRoom = {
table: "nabs table"
}
cleanTable.call(nabsRoom, "Harpic");
//Output - Cleaning undefined with Harpic

Answer- There are four solutions to access “this” inside the innerFunc().

Solution 1

Use a “that” variable in cleanTable() for accessing “this” inside innerFunc(). Basically “that” is nothing but the outer “this”.

let nabsRoom = {
table: "nabs table"
}
cleanTable.call(nabsRoom, "Harpic");
//Output - Cleaning nabs table with Harpic

Solution 2

Use call method to use the outer “this” inside the innerFunc().

let nabsRoom = {
table: "nabs table"
}
cleanTable.call(nabsRoom, "Harpic");
//Output - Cleaning nabs table with Harpic

Solution 3

Use bind method to use the outer “this” inside the innerFunc().

let nabsRoom = {
table: "nabs table"
}
cleanTable.call(nabsRoom, "Harpic");
//Output - Cleaning nabs table with Harpic

Solution 4

Use arrow function in the innerFunc. Arrow functions have special meaning for “this” and it is that, it takes the value of “this” from the enclosing scope and is very useful in this case.

let nabsRoom = {
table: "nabs table"
}
cleanTable.call(nabsRoom, "Harpic");
//Output - Cleaning nabs table with Harpic

Question 11- Explain “this” keyword inside a constructor function or ES6 class?
Answer- Constructor function and ES6 classes are both same. The ES6 classes are nothing but synthetic sugar for constructor function and internally behaves exactly the same.

“this” inside both of them is the instance which creates the variable with new keyword.

Consider the below example. Here “this” is nabsRoom or shikhaRoom inside cleanTable() depending on from which it is called.

Image for post
Image for post
“this” inside a constructor function

The same can be written with ES6 classes with constructor, but it is exactly the same and “this” also means the same.

Image for post
Image for post
“this” inside a ES6 class

This concludes part-2 of Basic JavaScript Interview questions. You can find Part-3 here.

Written by

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store