The ten most asked JavaScript front-end interview questions

I know there are many people who disagree with this type of interview. In fact, whether you like it or not, you have to accept it. Especially if you are self-taught and applying for your first job.

I guess there are many other ways to prove themselves, such as Github/project address may be an ideal proof method, but don’t count on all of them.

The good news is that there were some difficult questions that I couldn’t answer in the limited time (such as Event Loop and Yang Hui Triangle), and some other interview candidates also admitted that they couldn’t answer them either, which would make the discussion less interesting. Much more relaxed.

The bad news is that there are some interviews where there is no feedback after all. Three companies were never contacted again. This click kills confidence and is disrespectful. Then you may have psychological struggles, "Didn't the interview go well enough?", "They don't like my type?". So if you are an interviewer, give your interviewer a clear answer, even an automated reply is better than nothing at all.

1. Design a function to return the Yang Hui triangle of the nth row. (There is only this problem in the whole interview)

Note* Yang Hui triangle is also called Pascal's triangle

1

1

1

1

1 3 3 1

...

2 . Design a function that returns the most repeated word in a string.

3. Use recursion to print the Fibonacci sequence of length n.

Note* The Fibonacci sequence starts with 0 and 1, and then adds the previous two numbers 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233

4. Explain the usage and differences of bind, apply and call.

5. Explain what event delegation is and why it is useful.

6. What is event loop?

7. How does hoisting (declaration hoisting) work in JavaScript?

8. Describe your process when designing an app or website.

9. What features do you most hope to add to JavaScript or browsers, and why?

10. What is the difference between functional programming and imperative programming? Which one do you like?

5 classic front-end interview questions

Question 1: Scope

Consider the following code:

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

console.log(b);

What will be printed on the console?

Answer

The above code will print 5.

The trick to this problem is that there are two variable declarations, but a is declared using the keyword var. Indicates that it is a local variable of a function. In contrast, b becomes a global variable.

Another trick with this question is that it doesn't use strict mode ('use strict';) . If strict mode is enabled, the code will raise a ReferenceError: b is not defined. Remember that strict mode requires explicit specification in order to implement global variable declarations. For example, you should write:

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

console.log(b);

Question 2: Create a "native" method

Define a repeatify function for a string object. When an integer n is passed in, it returns the result of repeating the string n 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;
};

The current question tests the developer’s knowledge about JavaScript inheritance and prototypes. This also verifies that the developer knows how to extend built-in objects (even though this should not be done).

Another important point here is that you need to know how not to override functionality that may already be defined. Test that the function definition did not exist before:

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

When you are asked to do This technique is especially useful when good JavaScript functions are compatible.

Question 3: Statement Hoisting

Execute this code and what will be the output?

function test() {
   console.log(a);
   console.log(foo());
   var a = 1;
   function foo() {
      return 2;
   }
}

test();

Answer

The result of this code is undefined and 2.

The reason is that the declarations of variables and functions are brought forward (moved to the top of the function), but the variables are not assigned any values. So, when printing the variable, it exists in the function (it was declared), but it is still undefined . In other words, the above code is equivalent to the following:

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🎜

下面的代码会输出什么结果？给出你的答案。

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());

回答 

答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。 

在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。 

问题5：call() 和 apply()

现在让你解决前一个问题，使最后的console.log() 打印 Aurelio De Rosa。 

回答 

该问题可以通过强制使用 call() 或者 apply() 改变函数上下文。在下面我将使用call()，但在这种情况下，apply()会输出相同的结果： 

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