JavaScript is one of the most popular programming languages. Even though there are many JavaScript-based frameworks like React.js and Node.js, the ability to answer some core JavaScript questions will always give you an upper hand during a coding interview.
So, let’s start with the top 5 JavaScript interview questions!
1. What is hoisting?
Hoisting is a default process wherein JavaScript moves all the declarations to the top of the current scope.
Example:
a=20;
console.log(a) // 20
var a;Even though the JavaScript variable a is initialized and accessed before it’s declared, JavaScript doesn’t throw an error.
What is the Purpose Of Closures in JavaScript?
As per MDN Web Docs,
“Closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).”
In simple terms, Closure is under functional programming, and it allows an inner function to access an outer function’s scope, even when the outer function has already returned.
Example:
const cartMode = function() {
let items=[] // acts like a private variable
function addItem(item) {
items.push(item)
return "Item added to Cart"
}
function totalItems() {
return items.length
}
return {
addItem,
totalItems
}
}
const cart=cartMode()
cart.addItem("Bag") // returns Item added to Cart
console.log(cart.items) // returns undefined
cart.totatItems() // returns 1In the above example, the items variable is accessible to all the inner functions, but it’s not directly accessible from outside. This happens because of closures.
3. What is the difference between let, const, and var?
Before ES6, JS had no way to support block-level scope variables. Now, we have:
- var for creating function-level scope variables.
- let for creating dynamic block-level scope variables.
- const for creating constant block-level scope variables.
Example:
var a = 20
if(a > 10) {
let b = 1
const a = 2
console.log(b,a, 'Inner Scope') // 1 2 Inner Scope
}
console.log(a, 'Outer Scope') // 20 Outer Scope4. What is the output of the following code?
console.log("1")
setTimeout(function(){
console.log("2")
},0)
console.log("3")Output:
"1"
"3"
"2"Even though we specified the delay as 0ms, it still prints “2” after “3.” This is because of the Event Loop in JavaScript.
In this case, first, console.log(“1”) is executed, then setTimeout() is executed; after the specified delay (in this case, 0ms), the callback function is added to Message Queue. Now the main thread only picks up items from the message queue once the current execution is done. So, the main thread first evaluates the console.log(“3”) statement post. Then, it picks up the callback() from the Queue and executes the console.log(“2”) statement. Hence, the above output.
5. The Difference between arrow functions and regular functions?
Arrow functions are new ES6 syntax for defining functions. It looks like this:
const add = (a,b) => a+b
add(2,3) // 5 The main difference between the arrow function and the regular function is the value of this keyword.
In the case of arrow functions, the keyword assigns a value lexically. What this means is unlike regular functions, arrow functions never create their own execution context. They, by default, take the execution context of the enclosing function, aka, parent.
Here is another great article explaining this in-depth.
Conclusion
Preparing for JavaScript Interviews can feel overwhelming, but you now know the JavaScript code, the programming language, and the scripting language; the only way to really answer an advanced JavaScript interview question is to examine things one concept at a time.