front-end development Tag Archives - General Assembly Blog

Top Five JavaScript Interview Questions

By

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 an interview.

So, let’s start!

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 variable a is initialized and accessed before it’s declared, JavaScript doesn’t throw an error.

2. What is the purpose of closures?

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 what 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 1

In 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, 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 Scope

4. 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. 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 regular function is the value of this  keyword.

In case of arrow functions, the this keyword is assigned 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 a.k.a., parent. 

Here is another great article explaining this in-depth. 

Conclusion

Preparing for JavaScript Interviews can feel overwhelming, but the only way to overcome them is to take one concept at a time

Explore Coding Workshops