To rock the interview to achieve what you deserve and to improve your concepts about front end technologies, I have consolidated a list of questions and answers. It’s a one stop solution for front end interview process.
What are the differences between null and undefined?
What are the differences between == and ===?
How would you compare two objects in JavaScript?
11+ true false related questions that will trick you.
As [] is true, [] == true should also be true. right?
How could you write a method on instance of a date which will give you next day?
If you want to use an arbitrary object as value of this, how will you do that?
Write a simple function to tell whether 2 is passed as parameter or not?
How could you use Math.max to find the max value in an array?
What the heck is this in JavaScript?
21 quick questions that will trick you.
How could you set a prefix before everything you log? for example, if you log(‘my message’) it will log: “(app) my message”
What will you see in the console for the following example?
Look at the code below, you have a for loop if you have setTimeout inside it. If log the loop counter inside setTimeout, what will be logged?
Look at the code below, I have a property in a object and I am creating a new object where I am setting it to a new value. If I delete that property what will i get if I try to access that property?
Does JavaScript pass parameter by value or by reference?
How could you implement cache to save calculation time for a recursive fibonacci function?
How could you cache execution of any function?
If you need to implement the following chaining with call back, how will you implement it?
How could you implement moveLeft animation?
How would you implement currying for any functions?
Access to local variables, parameters, variables in the parent scope, and global variables
‘Remembers’ the environment in which it was created
Still has access to those variables even after the outer function has returned
MDN: A “closure” is an expression (typically a function) that can have free variables together with an environment that binds those variables (that “closes” the expression).
‘A closure is formed when an inner function is made accessible outside of the function in which it was contained, so that it may be executed after the outer function has returned. At which point it still has access to the local variables, parameters and inner function declarations of its outer function.’
Event delegation is a strategy where you attach your event handlers to a parent element rather than on multiple child elements
Classic example: a list (i.e. ul) with multiple li children.
If you want to attach some behavior for when the user clicks an li, you could either:
1) attach an event handler to each li specifically, or
2) attach one event listener to the parent ul and determine which child element was clicked by inspecting the event object itself when it bubbles up.
This can simplify things quite a bit, especially when li elements are going to be added and removed dynamically. It can be a hassle to manually attach and remove all those individual handlers.
Event bubbling has to do with how events are propagated through elements in the DOM
When you click on an element (an li for example), that element will receive the event and then, unless you explicitly stop propagation, the event will “bubble up” to its parent element (the ul), and so on
After an event triggers on the deepest possible element, it then triggers on parents in nesting order.
The bubbling guarantees that click on Div 3 will trigger onclick first on the innermost element 3 (also caled the target), then on the element 2, and the last will be element 1.
The order is called a bubbling order, because an event bubbles from the innermost element up through parents, like a bubble of air in the water.
deepest element that triggered the element is called the event.target or event.srcElement
‘Hoisting is JavaScript’s behavior of moving declarations to the top of a scope (the global scope or the current function scope).’
Compiler reads the entire program to find which functions/variables you have used
Only declarations are hoisted, not initializations
6. What does this console?
var a =1;
function b(){
a =10;
return;
function a(){}
}
b();
console.log(a)
Answer:
1
within function b, the inner function a is hoisted to the top of the scope, before a is re-assigned to a value of 10.
because a is hoisted to the top of the scope (within b), the re-assignment of 10 does not change the global variable a.
7. What is the prototype chain?
Each object has an internal property called prototype, which links to another object
The prototype object has a prototype object of its own, and so on – this is referred to as the prototype chain
If you follow an object’s prototype chain, you will eventually reach the core Object prototype whose prototype is null, signalling the end of the chain.
What is the prototype chain used for?
When you request a property which the object does not contain, JavaScript will look down the prototype chain until it either finds the requested property, or until it reaches the end of the chain
This behaviour is what allows us to create “classes”, and implement inheritance.
i is 5 because the for loop has completed and exited by the time the callback in setTimeout is called. Since the value of i in each callback is not bound to a specific value of i, every callback returns the current value of i.
It seems simultaneous because setTimeout delay is set on 0, 1, 2, 3, and 4 ms.
8b What does this console?
for(var i =0; i <5; i++){
setTimeout(function(){
console.log(i)
}, i*500);
};
Answer:
500ms apart each:
5
5
5
5
5
Similar answer as above, but the callback is now being called at 0ms, 500ms, 1s, 1.5s, and 2s.
8c How would you turn this code into its intended effect?
For example, how could you produce the output
0
1
2
3
4
with 500ms apart?
One answer:
for(var i =0; i <5; i++){
(function(i){
setTimeout(function(){
console.log(i);
}, i *500);
})(i);
}
Turn it into an IIFE and pass the value of i for each one.
Another answer:
for(var i =0; i <5; i++){
setTimeout(function(num){
console.log(num)
}.bind(this, i), i*500);
}
Use ‘bind’ to bind the value of i for each callback.
9. Rapid-fire questions!
What is …
console.log(typeof []) ?
console.log(typeof arguments)?
console.log(typeof "hi")?
console.log(typeof new String('hi'))
console.log(typeof NaN)?
console.log(2+true)?
console.log('6'+9)?
console.log(4+3+2+"1")?
console.log(-'34'+10)?
var a = (2, 3, 5); console.log(a)?
console.log(3 instanceof Number)?
console.log(typeof null)?
9. Answers
console.log(typeof []) ? object. Array is derived from Object.
console.log(typeof arguments)? object. arguments is an array-like object.
console.log(typeof "hi")? string. This is a string primitive.
console.log(typeof new String('hi')) ? object. Using new String constructor makes it an object.
console.log(4+3+2+"1")? 91. Evaluated from left to right.
console.log(-'34'+10)? -24. -34 is coerced to -34, in the same way +34 is coerced to 34.
var a = (2, 3, 5); console.log(a)? 5. The comma operator evaluates each of its operands (from left to right) and returns the value of the last operand. Detailed explanation
console.log(3 instanceof Number)? false, because 3 is a primitive. console.log(new Number(4) instanceof Number) will return true.
global reference (this usually refers to global object)
free function invocation (global object)
call/apply (first argument to call/apply)
method invocation (object on the left of dot, at call time)
construction mode (new object created for that invocation)
See HR notes on summary of binding patterns for this (since it is copyrighted material I won’t put it here)
11. What is the event loop?
event loop runs in a single thread
want to avoid blocking the whole thread
non-blocking I/O - define a callback that is called once the action is complete
incoming callbacks are like events that are propagated to the event loop, which checks for new events in the queue and processes them
instead of waiting for the results, you can register callbacks that are executed when the event is triggered - so that you can deal with long-taking actions
I highly recommend, especially if you have difficulties understanding the event loop and questions like #8 and #14, to watch this video: What the heck is the event loop anyway?
