10 JavaScript Concepts to Master Before Your Next Interview

Uncover the Key JavaScript Insights to Ace Your Interview and Avoid Common Pitfalls

JavaScript is filled with subtle quirks that can trip up even seasoned developers. Below are ten commonly asked JavaScript interview questions and their explanations. Understanding these concepts will help you avoid surprises during interviews and solidify your grasp of the language.

1. What is the output of [] + [] and [] + {}?

Output:

[] + []   // Output: ""
[] + {}   // Output: "[object Object]"

Explanation:

• [] + []: Both arrays are coerced to strings. Since empty arrays convert to empty strings, the result is an empty string.

• [] + {}: The array is coerced to an empty string, while the object is coerced to its string representation ("[object Object]"). The result is their concatenation.

2. What does typeof NaN return?

Output:

typeof NaN   // Output: "number"

Explanation:
NaN stands for "Not a Number," but JavaScript considers it a numeric type. This is a known quirk in the language.

3. What’s the difference between == and ===?

Answer:

• ==: Performs type coercion and compares the values.

• ===: Strictly compares values without type conversion.

Example:

'5' == 5    // true
'5' === 5   // false

4. What is hoisting in JavaScript?

Answer:
Hoisting is JavaScript’s default behavior of moving declarations to the top of the scope during the compilation phase. Only declarations are hoisted, not initializations.

Example:

console.log(x); // undefined
var x = 10;

Explanation:
Here, x is declared but not initialized before the console.log statement, resulting in undefined.

---

5. What’s the difference between null and undefined?

Answer:

• null: Represents an explicitly set "no value."

• undefined: Represents a variable that has been declared but not yet assigned a value.

Example:

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

6. What is the output of the following code?

Code:

(function() {
    var a = b = 3;
})();
console.log(b);

Output:

3

Explanation:
The assignment b = 3 creates a global variable because it lacks a var, let, or const declaration. Therefore, b is accessible outside the function.

---

7. What does 0.1 + 0.2 === 0.3 return?

Output:

console.log(0.1 + 0.2 === 0.3); // false

Explanation:
Due to floating-point precision errors, 0.1 + 0.2 results in 0.30000000000000004, not 0.3.

---

8. What is the output of console.log([] == false)?

Output:

true

Explanation:
When comparing with ==, JavaScript performs type coercion. The empty array ([]) converts to an empty string (""), which is falsy. Hence, [] == false evaluates to true.

---

9. Explain this in JavaScript

Answer:
The value of this depends on the execution context:

• In a regular function, this refers to the global object (window in browsers).

• Inside an object’s method, this refers to the object.

• In arrow functions, this is lexically bound to the surrounding context.

Example:

const obj = {
  name: 'Alice',
  greet() {
    console.log(this.name);
  }
};
obj.greet();  // "Alice"

10. What is the output of the following code?

Code:

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}

Output:

3, 3, 3

Explanation:
The variable i declared with var has function scope. By the time the callbacks execute, the loop has already finished, and i has the value 3.

Fix using let:

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1000);
}
// Output: 0, 1, 2

Conclusion

JavaScript is full of quirks and subtleties that can surprise even experienced developers. These questions illustrate the importance of a deep understanding of the language’s behavior. Prepare for your interview by practicing these concepts and confidently showcasing your JavaScript knowledge!