10 popular interview questions of JavaScript for Front-end Developers
1. How to understand ‘this’ keyword in JavaScript?
Those who learn JavaScript as the beginners always get confused about ‘this’ keyword, because ‘this’ in JavaScript is a little bit tricky compared to other modern programming languages. It should represent the object where ‘this’ keyword currently located in, but things did not take place as it should be. ‘this’ keyword in JS is determined by how the function will be called. ‘this’ refers to the caller. If the caller cannot be found, ‘this’ will point to windows object.
Here are some examples:
This first example is straightforward. ‘test’ is the object calls the func(), so ‘this’ in func() refers to test object and console log 42 as the output.
var test = {
prop: 42,func: function(){
return this.prop;},
};console.log (test.func()); // 42
The second example will print out ‘David Jones’ if we directly call the getFullname function, then ‘this’ keyword will not find the obj object it belongs to. ‘the getFullname’ function is called under the windows object, so ‘this’ refers to windows.
var fullname = ‘David Jones’
var obj ={
fullname: ‘Colin Brown’,
prop:{
fullname:’Aurelio Deftch’,
getFullname: function(){
return this.fullname;
}
}
}
var test = obj.prop.getFullname
console.log(test()) // David Jones
obj.prop.getFullname() // ‘Aurelio Deftch’ // prop object calls the function
2. Since ‘this’ keyword is confused, how to fix ‘this’ problem?
There are many approaches to solve this problem; however, no matter what solutions you choose, the most important thing is to know which object you decide to let ‘this’ point.
Once you figure out the correct object ‘this’ should be, you can directly change it into the object name. Otherwise, using ‘bind,’ ‘call,’ ‘apply’ functions also works out.
3. What is closure?
When I first explained the closure, I used to say ‘function in function’; however, it doesn’t correctly describe what precisely the closure is.
The closure is about creating a closed lexical scope inside another scope, so the inner scope can access the outer scope. The closure is created as the function is created. The closure is to make variables and methods private in the scope.
Currying is one example of closure. It usually self returns for generating this lexical environment. This environment consists of any local variables that were in-scope at the time the closure was created. It is like a mini-factory to manufacture a product with specific functions from those ingredients.
function add(n){
var num = n
return function addTo(x){return x + num
}
}addTwo = add(2)
addTwo(5)
JavaScript is not like Java which can support oop well. There is no clear way to create private methods in JS, but the closure can ‘private’ the methods.
4. Explain ‘ Hoisting’
Hoisting is the default behavior under the JavaScript which means moving all declarations to the top of the current scope and let variables can be used before the declaration. Initialization won’t be hoisted. Hoisting is only for declaration.
The example below will hoist x, y at the top
var x = 1
console.log(x + “ — -”+y) // 1 — -undefined
var y = 2
5. How does JavaScript handle the synchronous and asynchronous case?
Although JavaScript is a single thread programming language with one call stack, it can also deal with some asynchronous functions using a mechanism called event loop. Knowing how JavaScript works from the fundamental level is the essential section to understand how the JS handles async.
As the pictures show above, ‘call stack’ is the place for locating functions. Once the functions were called, the functions would be pushed into the stack. However, async functions won’t be pushed into call stack immediately, they will be pushed into task queue instead and be executed after the call stack is empty. Transporting events from task queue to the call stack is called ‘event loop.’
6. How to understand event delegation?
Binding the event listeners on DOM tree and using the JS event handlers is the typical approach to deal with the event responses in the client side. Theoretically, we can attach listeners to any DOM elements in HTML, but it is wasted and unnecessary to do that because of the event delegation.
What is event delegation?
It’s a technique to let the event listeners on parents element also affect children element. Usually, event propagation( capturing and bubbling) allows us to implement event delegation. Bubbling means that when a child element is triggered(target), the parent’s elements of this child can also be triggered layer by layer until it bumps to the original listener the DOM binds(current target). The capture attribute turns the event phase into the capture phase which let events goes down to the elements; hence the direction of triggering is opposite to bubbling phase. The default value of capture is false.
7. How to understand the higher-order function?
Don’t be scared away by buzz word. Usually, it is a wrapped name for a summary of several concepts. Everything in JavaScript is object including functions. We can pass variables as arguments to a function, so does a function. We call a function that accepts and /or returns another function as the higher-order function.
8. How do you differentiate the declaration function and the expression function?
function hello(){
return “HEllO”
}
— — — — — — — — — — — — — — — — — — -
var h1 = function hello(){return “HELLO”}
Two functions will be defined in different periods. The declaration will be defined during the parsing time, and expression will be defined at run time; therefore, if we console log the h1, it will show “HELLO.”
9. Explain how prototypal inheritance works.
JavaScript is not an oop friendly programming language, but it still uses the idea of inheritance to implement the dependency and lots of built-in functions to make it flexible to use. Knowing how prototypal inheritance works will let your JavaScript knowledge well-understood avoid a misuse conceptually.
It’s better to picture the whole mechanism of the JavaScript in your brain to understand the prototypal inheritance.
There is a super object in JavaScript that all objects will inherit from it. ‘__proto__’ is an internal property of an object which points to the Prototype. A prototype contains a constructor which lets the object be capable of creating the instances from it. __proto__ will always exist in objects and hierarchically point to the prototype it belongs to until null, which is called the prototype chain.
10. Explain strict mode
Strick mode is used to standardize the normal JavaScript semantic. Strick mode can be embedded into a un-strick mode with the keywords ‘use strict’. The code after ‘use strict’ should follow the strict syntax rules of JS. For example semicolon after each statement declaration before the use.
