Answers to some of the most common Javascript interview questions:
Programming interviews are difficult to crack so to help you ace with your next interview as a Javascript Developer I will be sharing answers to some of the common Javascript Interview Questions.
Disclaimer: The answers do not contain technical definitions, these are based on my understanding and reading.
1. What’s the difference between a variable that is: null, undefined or undeclared?
Undeclared variable is a variable without any reference.
Undefined variable is a variable which is declared (referenced) but without any value assigned.
NULL variable is a variable with value
NULLwhich refers to ‘NOTHING’.
2. Can you describe the main difference between the Array.forEach() loop and Array.map() methods and why you would pick one versus the other?
Array.forEach() returns
undefinedwhere as Array.map() returns the result array after the operations and since it returns the result array, Array.map can be selected when you want to chain the operations on the Array.- adding changes by saud.
Array.forEach(callback) applies the passed callback to each element of the array (generally used as an alternative to traditional loops on array) and returns
undefined.
Array.map(callback) applies the passed callback to each element of the array and
returns a new array with the values returned from the callback.
3. Explain “hoisting”.
Hoisting in JavaScript means implicit moving of variables and function declarations to the top of their scope before code execution.
E.g.
<script>
function foo() {
console.log("Value of a is " + a);
}
foo();
var a;
</script>// Output
Value of a is undefined
Though the declaration of Variable a is after the function call, instead of throwing reference error, code executes just fine.
4. What is the difference between == and ===?
This is one of the most popular question on stackoverflow.
This is a common feature found in many “dynamically” typed language, Javascript being one of them.
== or equality operator: checks for the values on the both sides are equal.
=== or identity operator: checks for the values as well as their data-types on the both sides are equal.
10 == '10' // true
10 === '10' // false
false == 0 // true
false === 0 // false// here is a funny thing
undefined == null // true
undefined === null // false
5. Why is it called a Ternary operator, what does the word “Ternary” indicate?
A unary operator is an operator with 1 operand
A Binary operator is an operator with 2 operands
A ternary operator is an operator with 3 operands, the word ternary indicates No. of operands.
function isOdd(x) {
return (x%2 == 1) ? true : false
}console.log(isOdd(10)); // falseconsole.log(isOdd(11)); // true// Operands: (x%2 == 1), true and false// Output
false
true
6. Consider the two functions below. Will they both return the same thing? Why or why not?
function foo1()
{
return {
bar: "hello"
};
}
function foo2()
{
return
{
bar: "hello"
};
}foo1() will return object
{bar: “hello” }where foo2() will returnundefinedbecause;is optional in Javascript, hence in function foo2, the controls are returned after the return statement and remaining code is skipped.
7. Explain event delegation.
The Event handler defined on a parent element will be delegated / passed-on to all the child elements.
<html>
<body>
<ol>
<li>Click Me!!!</li>
<li> Or Click Me!!!</li>
</ol>
<script>
document.getElementsByTagName('ol')[0].addEventListener('click', function(){
alert("Thanks!!!");
});
</script>
</body>
</html>In the above example, you click on either 1st li element or 2nd li element both with show the alert with Thanks!!! message since the event is delegated from parent element to child.
8. Explain event bubbling
Event handlers on an element are executed in a series starting from it’s own event handler moving towards executing all the event handlers defined on it’s ancestors.
<html>
<body>
<ol>
<li>Click Me!!!</li>
<li> Or Click Me!!!</li>
</ol>
<script>
document.getElementsByTagName('ol')[0].addEventListener('click', function(){
alert("Thanks!!!");
});
document.getElementsByTagName('li')[0].addEventListener('click', function(){
alert("You Clicked first list element!!!");
});
</script>
</body>
</html>In the above example, if you click on Click Me!!! then it will execute its own event-handler which is alert(“You Clicked first list element!!!”); and then it’s parent’s event-handler which is alert(“Thanks!!!”); .
9. Explain event capturing
It’s the opposite of event-bubbling. Event capturing refers to: Event handlers on an element are executed in a series starting from it’s ancestor’s event handler moving downwards executing all the event handlers defined and it’s own event-handler will be executed last. Event capturing can be achieved by setting the 3rd parameter in
addEventHandlermethod to true (default false).
<html>
<body>
<ol>
<li>Click Me!!!</li>
<li> Or Click Me!!!</li>
</ol>
<script>
document.getElementsByTagName('ol')[0].addEventListener('click', function(){
alert("Thanks!!!");
}, true);
document.getElementsByTagName('li')[0].addEventListener('click', function(){
alert("You Clicked first list element!!!");
}, true);
</script>
</body>
</html>In the above example, if you click on Click Me!!! then it will execute it’s parent element’s event-handler which is alert(“Thanks!!!”);and then it’s own event-handler which is alert(“You Clicked first list element!!!”);.
10. What is IIFE?
IIFE stands for Immediately Invoked Function Expression (IIFE). IIFE is a javascript function which executes as and when it’s defined.
let iife_result = (function(){
return 'success'
})();console.log(iife_result);// Output
success
In the above example, the function is executed at the time of definition and results are quickly passed and stored in iife_result variable and if you try iife_result() then it will give you the following error: TypeError: iife_result is not a function.
11. Create a for loop that iterates up to 100 while outputting "fizz" at multiples of 3, "buzz" at multiples of 5 and "fizzbuzz" at multiples of 3 and 5
Note: These questions are selected from a very popular GitHub repository: https://github.com/h5bp/Front-end-Developer-Interview-Questions
Thank you for reading…
Live long and prosper!!!
