A developer interview without JavaScript questions? That’s hard to believe 😃 And it’s not surprising tricky questions are asked from a few common categories in multiple interviews.
But why do interviewers ask these questions? Because they often arise in real-world situations! Here’s how:
1. Type Coercion in Web Development
Understanding type coercion is pivotal while building web applications, especially during string manipulations and URL formations.
What output would you expect?
console.log([] + []);
console.log([] + {});
console.log({} + []);
console.log({} + {});
Answer:
JavaScript type coercion can give unexpected results, especially with complex types like arrays and objects.
2. Precision Dilemma in Financial Apps
Even a slight discrepancy can lead to significant issues when working on finance-based applications.
Is 0.1 + 0.2 equal to 0.3?
console.log(0.1 + 0.2 === 0.3);
Answer: false
Precision issues with floating-point arithmetic means 0.1 + 0.2 results in a number slightly more than 0.3.
3. JavaScript’s Automatic Semicolon Insertion
Have you ever thought why a function that seemed to work correctly gave you unexpected results? The behavior of semicolons in JavaScript might be the culprit.
What does the following function return?
function getNumber() {
return
{
value: 23
};
}
console.log(getNumber());
Answer: undefined
Automatic Semicolon Insertion causes the return to be treated as a standalone statement, so the function returns undefined.
4. Variable Hoisting Mysteries
A deep grasp of hoisting is vital, especially when initializations don’t behave as expected.
Can you figure out what’s wrong?
var x = 21;
var girl = function () {
console.log(x);
var x = 20;
};
girl();
Answer: undefined
Due to variable hoisting, the variable x inside the function is declared but not initialized when console.log is executed. Therefore, its value is undefined.
5. Tricky Increment Operations
Simple arithmetic can sometimes confound developers.
Can you predict the output?
var num = 8;
function fun() {
num += 7;
num--;
console.log(num);
}
fun();
Answer: 14
The function first adds 7 to num (resulting in 15) and then decrements it by 1.
6. Elusive Comma
When writing a script for sequential data processing, it is sometimes important to know how to do more than one thing on a single line.
Do you know how it evaluates its operands?
var val = (1, 2, 3, 4);
console.log(val);
Answer: 4
The comma operator evaluates each of its operands and returns the value of the last one.
7. Scope in Large-Scale Applications
When dealing with large applications using multiple libraries, correctly scoping variables becomes crucial.
Consider the following code:
var b = 5;
(function foo() {
var b = 6;
console.log(b);
})();
console.log(b);
Answer:
The IIFE (Immediately Invoked Function Expression) has its own scope, and the variable b inside foo does not affect the outer variable b.
8. Context Handling in Modern Web Frameworks
In modern web app development, especially with frameworks like React, maintaining context for callbacks is essential.
Why might this callback lose its context?
let obj = {
value: 'hello',
print: function(callback) {
callback();
}
};
function sayValue() {
console.log(this.value);
}
obj.print(sayValue);
Answer: undefined
The sayValue function is called without context, so this.value doesn't refer to obj.value.
9. Order Matters in Script Loading
When building with a plugin-based architecture, the way in which scripts are loaded becomes very important.
Can you figure out what the problem is with this code?
function bar() {
return foo;
foo = 10;
function foo() {}
var foo = '11';
}
console.log(typeof bar());
Answer: function
Due to hoisting, the function declaration of foo is moved to the top, above the return statement, making it the value that gets returned.
10. Handling Sparse Arrays in Reservation Systems
Sparse arrays may be a concern when designing systems such as theater seat reservations.
How does JavaScript handle sparse arrays in this example?
var a = [1, 2, 3];
a[10] = 10;
console.log(a[6]);
Answer: undefined
The array a now has a length of 11, but only indices 0-2 and 10 have values. All others are undefined.
In dynamic survey forms, data operations based on user input can become tricky.
Can you explain the output?
let arr = [1, 2, 3];
let res = arr.map(parseInt);
console.log(res);
Answer: [1, NaN, NaN]
map passes three arguments to the callback: (currentValue, index, array). parseInt can take two arguments: string and radix, which causes unexpected results.
12. CMS and Variable Assignments
Working within a CMS may require on-the-fly variable definitions based on user inputs.
What’s the output of this code?
let a = (b = 3) - 3;
console.log(a, typeof b);
Answer: 0, "number"
The value of b is set to 3, and then subtracted, leaving a as 0 and b as a number.
13. Temporal Dead Zones
Frameworks like React and Vue require a clear understanding of block-scoping.
What would this code output and why?
console.log(typeof undeclaredVariable);
console.log(typeof y);
let y = 1;
Answer:
"undefined"
Throws a ReferenceError
Even though let and const declarations are hoisted, they're not initialized, causing a temporal dead zone.
14. Shared State in UI Components
While creating UI libraries, ensuring individual components don’t share unintended state is critical.
What will the following code log?
let arr = new Array(3).fill([]);
arr[0].push(10);
console.log(arr);
Answer: [[10], [10], [10]]
The same reference to the array is filled in all positions. Modifying one modifies all.
15. Destructuring in API Responses
Destructuring can simplify data extraction when working with API responses.
Can you explain the result of this destructuring operation?
let {x, x: y} = {x: 23};
console.log(y);
Answer: 23
Here, x is matched with a property in the object and then y is assigned the value of x.
JavaScript remains a cornerstone in the developer’s toolkit, with its nuances often serving as gateways to deeper understanding.
As you prepare for interviews, remember that these tricky questions are not just about memorization but about grasping the essence of the language.
By diving deep into such challenges, you not only prepare for potential interviews but also enrich your JavaScript proficiency.
Best of luck, and keep coding!
