Javascript Interview Questions – Prepare JavaScript Interview Questions

Question 1) What do you know about JavaScript map() function?

The map() function is available with a JavaScript array. Using this function, we get a new array, as we apply a transformation function on each and every element of the array. Here is the Syntax for JavaScript array map function-

 

Syntax :

yourArray.map((theElement){

      process(theElement)

      return processedValue
}) // returns new array with each element processed...

 

Explanation :

Suppose, there are few unwanted characters entered into some Phone numbers. And, We need to remove them. So, Instead of removing the character by iterating and finding, we can use JavaScript map() function to perform the same operation and get desired results as another array.

JavaScript is enriched with a number of useful concepts and features ranging from Functions to Events, Cookies to Arrays and Animations to RegEx. If you really want to be an expert in JavaScript, then here’s a Complete JavaScript Course 2021: From Zero to Expert course on Udemy that you should check to be a lot better in JavaScript.

Example :

var data = ["9898878777g", "887766w9988", "98798879877", "7987897897"];

var reg = /[a-z A-Z]/;         // It's RegEx : A Regular Expression

var filteredData = data.map((elem) => {return elem.replace(reg, "")});

console.log(filteredData); 

// Output :  ["9898878777", "8877669988", "98798879877", "7987897897"]

Question 2) How to use JavaScript filter() function?

theArray.filter(( yourElement ) => {
      return true/false
})

Let’s take a simple example and filter the array of website-names that starts with given conditions. Suppose, we need to filter all website-names starting with ‘s’ from the array:

var websites = ["geeksforgeeks.com", "skype.com", "shubhamklogic.com", "javatpoint.com"];

var filteredData = websites.filter((theElement) => {
   return theElement.startsWith('s') ? true:false;
});

console.log(filteredData); 

// Output : ["skype.com", "shubhamklogic.com"]

By the way, the return statement is returning either true or false, as we have used the Ternary operator in JavaScript. It’s similar to using an if-else.

Question 3) What would be the Outcome of these calls? –

console.log( yourSquare(7) );   // Call- 1

function yourSquare(n) { 
      return n * n; 
}


console.log( mySquare(7) );      // Call- 2
 
var mySquare = function(n) { 
      return n * n; 
}

ERROR- Uncaught TypeError: mySquare is not a function

console.log(yourSquare(5));          // Call- 1

/* ... Some JS Code ... */

function yourSquare(n) { return n * n; }

 
var mySquare = function(n) {    // Defining mySquare()
  return n * n; 
}

console.log(mySquare(5));            // Call- 2

Question 4) .call() in JavaScript : How to use call() in JavaScript?

var theCircleLib = {

    pi: 3.14,

    area: function(r) {
        return this.pi * r * r;
    },

    circumference: function(r) {
        return 2 * this.pi * r;
    }
};

When you’ll run it with a given radius r = 5, you will successfully get this –

theCircleLib.area(2); 
12.56

Some moment later, you are told to use constant pi with 5 decimals precision. But, we had just used with 2 decimal precision:  3.14, not the 3.14159

Don’t worry, JavaScript .call( ) function to the rescue. Just call theCircleLib( ) function in this way –

theCircleLib.area.call( { pi: 3.14159 }, 2 );

And, you’ll successfully get the output with 5 decimal precision –

12.56636

In short, the .call() function can take these 2 arguments :

• The Context, and
• Function Arguments.

Question 5) .apply() in JavaScript : How to use apply() in JavaScript?

The .apply() function is same as .call() except we have to pass the Function arguments as a List. To understand it better, Let’s assume, we have a Cone, and we need to calculate its volume –

var cone = {

    pi: 3.14,

    theVolume: function(r, h) {
        return this.pi * r * r * h/3;
    }
};

Now, if you want to invoke theVolume using .call() function, here is how to use .call() in this case –

cone.theVolume.call({pi:3.14159}, 3, 6)
56.54867

And, with .apply() function, here’s how to do the same –

cone.theVolume.apply({pi: 3.14159}, [3, 6]);
56.54867

The difference between .call() and .apply() in this simple example, is just that we passed the values not just as regular values separated by comma (with .call() statement), but as a List. See the brackets : [ 3,6 ]  in .apply() statement above.

Question 6) .bind() in JavaScript : How to use bind() in JavaScript?

• If we consider this outside a function, then in the Global execution context, this refers to the Global object whether in strict mode or not.

var newVolume = cone.theVolume.bind({pi: 3.14159}); // It's now a call to theVolumn, but just the binding of pi with its value

// After some time in mid of the year...

newVolume(3,6);                                     // Now pi is 3.14159, as we already binded it earlier.

Now, you might be thinking, What is the actual use of .bind() function?

Technically speaking, It allows us to inject a context into a function that returns a new function with updated context. In simple words, this variable will be just like a variable, supplies by the users. This is very useful and handy while working with JavaScript events.

Question 7) What are Objects in JavaScript? How do you use them?

Many beginners even Intermediate JavaScript developers know Objects like this –

var books = { javascript: 98, sql:95, java: 91, react:85 };

But, that NOT an Object, It’s a Map in JavaScript. Map stores Key and its Value as a pair. JavaScript Object provides a special feature of storing anything as a Value. Here, anything means anything, whether it’s an array, list, function or even another Object.

• Creation :
  In JavaScript, we can create an Object in multiple ways, like these –

var books = {};                         // Technique 1
var books = new Object();               // Technique 2

Question 8) What is the Output of the Code –

const arr = [10, 12, 15, 21];
for (var i = 0; i < arr.length; i++) {
    setTimeout(function () {
        console.log("Index: " + i + ", value: " + arr[i]);
    }, 3000);
}

It’s basically a Tricky JavaScript Interview Question asked by Amazon and shared by a user on Reddit.

The Outcome would be –

Index: 4, value: undefined
Index: 4, value: undefined
Index: 4, value: undefined
Index: 4, value: undefined

The reason for such an Outcome is because the setTimeout function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index i.

After 3 seconds go by, the function is executed and it prints out the value of i, which at the end of the loop is at 4 because it cycles through 0, 1, 2, 3, 4 and the loop finally stops at 4. Here, the arr[4] does not exist, which is the reason, you get undefined.

Anyone, who has less command over JavaScript topics: Closures, setTimeout and scoping, would feel difficult to understand it thoroughly.

• Solution : Pass the required paremeter
  To print the index numbers of the constant array, you need to pass the essential parameters to the function. Here, we passed ‘i‘ as the required parameter –

const myArr = [10, 12, 15, 21];

for (var i = 0; i < myArr.length; i++) {

      // pass in the variable 'i' so that each function has access to the correct index -

    setTimeout( function(my_local_i) {

     return function() {
          console.log( 'The index of this number is : ' + my_local_i );
     }

  }(i), 3000);         // passed 'i' with timing 3 sec. ( or 3000 milisec. )
}

Once you’ll pass the required parameter ‘i’, and run the give code snippet, you will get this output –

The index of this number is : 0 
The index of this number is : 1 
The index of this number is : 2 
The index of this number is : 3