Five typical JavaScript interview questions

In the IT world, a large number of javascript developers are needed. If the role best showcases your abilities, there are many opportunities to switch companies and increase your salary. But before you can be accepted into a company, you need to demonstrate your skills in order to pass the interview process. In this article, I’ll show you five typical questions.

Recommended related articles:The most complete collection of js interview questions in 2020 (latest)

Question 1: Scope

Think about the following code:

(function() {
   var a = b = 5;
})();

console.log(b);

What will the console print out?

Answer

The above code will print out 5.

The trap of this problem is that in the immediately executed function expression (IIFE), there are two names, but the variable is declared through the keyword var. This means that a is a local variable of this function. In contrast, b is a global variable belonging to this function.

Another trap in this problem is that he did not use "strict mode" ('use strict';) in the function. If strict mode is turned on, the code will report an Uncaught ReferenceError: b is not defined. Remember strict mode requirements, you need to explicitly reference global variables if this is expected behavior. Therefore, you need to write like this:

(function() {
   'use strict';
   var a = window.b = 5;
})();

console.log(b);

Question 2: Creating a “native” method

Define a repeatify function on the String object. This function accepts an integer parameter to specify how many times the string needs to be repeated. This function requires a string to be repeated a specified number of times. For example:

`console.log('hello'.repeatify(3));``

should print hellohellohello .

Answer

A possible implementation is as follows:

String.prototype.repeatify = String.prototype.repeatify || function(times) {
   var str = '';

   for (var i = 0; i < times; i++) {
      str += this;
   }

   return str;
};

This question tested the development Personnel’s knowledge of inheritance in JavaScript and the prototype attribute. This also verifies that developers have the ability to extend native data type functions (although they should not do so).

Another important point here is to show that you realize how to do it without overriding functions that may already be defined. This requires determining that the function does not exist before customizing the function.

`String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};``

This trick is useful when you are asked to shim a javascript function.

Question 3: Hoisting variables (Hoisting)

What will be the result of executing the following code? Why is this happening?

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

Answer

The execution result of this code is undefined and 2.

The reason for this result is that both variables and functions are hoisted. Therefore, at that time a was printed, it existed in the function (that is, it was declared), but it was still undefined . In other words, the code above and the code below are identical.

function test() {
   var a;
   function foo() {
      return 2;
   }

   console.log(a);
   console.log(foo());

   a = 1;
}

test();

Question 4: How does this work in javascript

What is the result of the following code? Please explain your answer.

var fullname = 'John Doe';
var obj = {
   fullname: 'Colin Ihrig',
   prop: {
      fullname: 'Aurelio De Rosa',
      getFullname: function() {
         return this.fullname;
      }
   }
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Answer

The code prints Aurelio De Rosa and John Doe. The reason is that in JavaScript, the context of a function, which is referenced by the this keyword, depends on how the function is called, not how it is defined.

In the first console.log() call, getFullname() is called as a function of obj.prop. Therefore, the context here points to the latter and the function returns the fullname property of the object. In contrast, when getFullname() is specified as a variable of test , that context points to the global object (window). Because test is equivalent to being set as a property of the global object. For this reason, the function returns a fullname property of window, which in this case is set on the first line of the code snippet.

Issue 5: call() and apply()

Fix the previous problem and let the last console.log() print out Aurelio De Rosa.

Answer

This question can force function context through function call() or apply(). If you don't know the difference between call() and apply(), I recommend reading the article What are the differences between function.call and function.apply? . In the following code, I will use call(), but in this case, apply() can also achieve the same result:

`console.log(test.call(obj.prop));``

Conclusion

In this article, we discuss Here are five typical questions asked in interviews to test JavaScript developers. The actual questions from the interviews may vary, but the concepts and topics covered are usually very similar. I hope you have fun testing your abilities. In case you don't know all the answers, don't worry: there's nothing you can't solve without learning and experience.

If you were asked other interesting questions during the interview, don’t hesitate to share them with us. This will help a lot of developers.

Related learning recommendations: javascript video tutorial