Tips For Mastering The JavaScript Interview?

According to 2019 Stackoverflow insights, Javascript is the most popular language of the year 2019.

Javascript is one of the core technologies of the World Wide Web(WWW). The other two being HTML and CSS. These two technologies are placed in the second position on the list. Javascript is an essential part of web development. It can run on both client and server-side. With the release of Node.js in 2009, Javascript became much more popular. Node.js allows javascript to execute outside the browser. When compared to other high-level languages such as Java and C, Javascript is more user-friendly. It is flexible, dynamic and easy to share. If you are searching for a job, and you are good at Javascript, you may probably end up finding an awesome one. If you know frameworks such as Angular and libraries such as React.js, you can find a job as a front-end developer. Or if you know how to use javascript at the back-end, you can find a job as a back-end developer. And if you are well-experienced in both, front-end and back-end, you may end up with an excellent full-stack developer job. It all depends upon your knowledge and experience in Javascript. But Javascript can become a headache. If you are a beginner, you may end up frustrated with Javascript. It is a complicated language, even for experienced developers. There are many reasons for this. Moreover, Javascript is a vast language with many concepts. All these can spoil your Javascript interview. If you are going for a javascript interview and you are not well prepared, you may lose your dream job opportunity. So to successfully crack a Javascript interview, one must be familiar with few concepts of Javascript. 

In this article, we will discuss such concepts that are mandatory for mastering Javascript interviews.

Javascript Functions

Every major programming language has functions. But Javascript functions are more than normal functions. In Javascript, we can:

Store a Function In a Variable

Observe the following example.

const sample = function(a,b){
	return a+b
}

The above function returns the sum of variables, a and b. The function does not have a name, but it is stored in the variable named sample. We have to use the variable name to call this function.

sample(1,2)

Pass a Function As a Parameter

Yes! We can pass a function as a parameter to another function in javascript.

function sample1(sample2Callback) {
   //calling sample2 inside sample1
	sample2Callback()
}
function sample2() {
   alert('Hello World');
}
//passing sample2 as a parameter to sample1
sample1(sample2);

Return a Function Defined Inside It.

function sample1(a,b) {
   function sample2() {
		console.log(a+b)
	}
	return sample2
}
const sample = sample1(100,200);
sample()

Observe the above code. A function named sample2 is defined inside the function sample1 and then it is returned from it. The returns function is stored inside the variable “sample”. Now pay attention here. This returned function can be accessed after the execution of the outer function and it can even access its parameter. When the code is executed, the sum of a and b will be displayed on the console. But a and b were the parameters of the outer function and the execution of the outer function is completed. But still, the inner function can access them. Such functions are called “Closures”. Almost every javascript interviewer asks about Closures.

Hoisting

Observe the following code.

console.log(x)
var x =1

What do you think will be printed in the console when the above code is executed? Will it throw an error? Well, the variable x is defined after the console statement. Shouldn’t it throw an error? Maybe in other programming languages such as Java, but not in Java. So will it print 1 because the value stored in x is 1? No! It won’t. It will print “undefined”. The reason for it is Hoisting.

Hoisting is a behavior of javascript in which each variable declaration is moved to the top of the document. Only variable declaration is moved to the top, not their values. This is why the above code prints undefined.

Promise

Another important concept of javascript is Promise. A promise is an object that may produce some value. The value can be resolved or not resolved due to any reason. A promise has 3 possible states.

The basic usage of promise in javascript is to handle asynchronous operations. Multiple asynchronous operations can lead to callback hell. The promise can be used to deal with such situations. So an interview can ask, What are the benefits of promise in javascript?

Another question can be, How to create a promise? A promise can be created by using the Promise constructor

var promise = new Promise(function(resolve, reject){
});

The promise constructor has only one parameter – a callback function and the callback function, in turn, has two parameters – resolve and reject. If everything performs well, then call resolve, and if not, then call reject.

Promise in javascript is a must learn concept.

Scope

Beginners usually get confused when it comes to scope in javascript. Javascript has two scopes – Global and Local. Observe the following code.

var x = 1
function sample(){	
	console.log(x)
}
sample()

The variable x is defined outside the function and it can be accessed inside it also. This is because it is in the global scope. It can be accessed anywhere in the document. Now observe the following code.

function sample(){
	var x = 1

}
console.log(x)
sample()

The variable x is defined inside the function. And it cannot be accessed outside the function because it is in the local scope of the function. The above code, when executed will produce an error.

This was global and local scope. What if we place the variable x inside a block statement? This is what an interviewer may ask.

if(true){
	var x = 1
}
console.log(x)

Now, the variable x is declared inside an if statement and accessed outside of it. What do you think will happen? What is its scope? Well, the block statements such as if statement, for and while loops do not create a new scoop. The variable x can be accessed outside the block statement. To encounter this, ES6 introduced two new keywords – let and const for variable declaration.

if(true){
	let x = 1
}
console.log(x)

The let and const keywords support local scope in a block statement. The above code will throw an error because the variable x is accessed outside its scope.

The const keyword also works similarly but with two exceptions.

Along with scope, working and the difference between these three keywords are also very important.

Arrow Functions

Another important concept that came with ES6 is arrow functions. Developers were long waiting for this and it finally came in ES6. Arrow functions are a simple but important concept. It makes writing functions in a different and better way.

const sample = function() {
}

This is how we defined function normally. This can be modified using arrow functions.

const sample = () => {
}
sample()

Now, suppose a function is returning some of the two values that are passed to it. Normally, we do something like this.

const sample = function(a,b) {
	return a+b
}
sample(1,2)

The above code can be modified using arrow functions.

const sample = (a,b) => a+b	
sample()

You can see how the code is reduced. But remember, this approach is applicable when there is only one line in the function. The interviewer may ask something related to the above example, or about the syntax of arrow functions.

Map and Filter

Map and filter are two functions that are used with arrays. These two are heavily used in development and interviewers always have a keen interest in asking about them, mostly the difference between them.

The map in javascript returns a new array. It iterates through an array and returns the elements accordingly.

var arr1 = [1,2,3]
var arr2 = arr1.map((ele)=>{
	return ele
})

The arr2 is similar to the arr1. The length of the new array is always the same as the original one. If we don’t return anything, it will return undefined by default for every element.

The filter in javascript is quite similar to the map, but unlike the map, it does not return undefined by default. So the length of the new array created by the filter can be less or equal to the original one.

Objects

A good programmer always knows objects very well. Objects have key-value pairs. In javascript, anything can be stored in objects. List, function, another object, just name it. There are two ways of creating objects in javascript.

1. var details = {}

2. var details = new Object()

Usually, we use the first way but do not forget the second one. Another important concept is converting an object into JSON and vice-versa. The stringify method is used to convert an object into a JSON string and parse method is used to convert a JSON string into an object.

The interviewer may ask how to iterate over an object. Use objects.keys for this.

var details = {
 name : "John",
 age : 27,
 location : "New York"
}
for (i of Object.keys(details)) {
  console.log(details[i])
}

Other three important functions are Object.prototype(object), Object.freeze(function), and Object.seal(function).

ES6

We already discussed a few concepts of ES6 like arrow functions and promises. The let and const keywords also came with ES6. But there are a few more concepts. There is a very high probability that the interviewer will ask about ES6. We already discussed the most important concepts. But there are more such as default parameters.

function sample(a = 1, b = 2){
}
sample()

Another one is string interpolation.

var fname = "John", lname = "Lee";
var multiLine = `This
is
a multi-line
string`
console.log(`Hello my name is ${fname} ${lname})
console.log(multiLine)

There are several others too such as destructuring, rest, spread, etc. Try to cover as much as you can.

Wrapping It Up

As mentioned earlier, Javascript is a vast language. Mastering it perfectly is difficult, even for experienced developers. Cracking a javascript interview is tough but not impossible. Try to master each concept we discussed in this article. As a javascript developer, I would give a piece of advice. Just don’t read and go, try to practice as much as you can. This is the way to master the javascript interview.

Acodez is a renowned web design and web development company in India. We offer all kinds of web design and web development services to our clients using the latest technologies. We are also a leading digital marketing company providing SEO, SMM, SEM, Inbound marketing services, etc at affordable prices. For further information, please contact us.