What an Effective 20 Minute JavaScript Interview Should Look Like
During an interview, a lot happens in the minds of the interviewer and the interviewee. In general, the interviewer’s goal would be to pick a potential candidate who would help the project team and organization deliver value.
Occasionally I take interviews for senior front-end or back-end developers. I am sharing one such experience of a JavaScript interview to help both interviewers and interviewees.
Disclaimer: Views shared are my personal opinion, not necessarily my organization
Before I get into the details of the interview, I prefer to highlight the following
To Interviewer
- Avoid providing a code puzzle and ask for the output. Because we are interviewing a candidate (human), not a compiler/runtime engine.
- Create an opportunity for the candidate to present their approach in solving a problem/use case. Their interactions are critical and not the exact code or answer you have.
To Interviewee
- Every opportunity is a learning opportunity.
- Learning is a continuous process. The scope of improvements and steps to be taken is with you. So don’t get to any conclusions based on the interview outcome.
- Interview selection happens based on what you can do today. At times, a good interviewer can identify your potential (what you can do differently in the future) and select you.
A simple “hello world” approach could help to assess a candidate’s fluency in JavaScript. Initial questions might sound simple, but carry on. I prefer to code the solution as the candidate details it out. The candidate can code directly if his/her system is ready with IDE.
💡 Interviews happen over WebEx/Zoom these days, where you can easily share your IDE for the discussion
Use Case 1: Print a simple hello world message. I have created two simple arrow functions already.
I will use the time to interact about the arrow function, the scope of “this”, template string, console log versus debugger approach, and few other essential features.
// Qn 2: Template string
// Solution for Use case 1
console.log(`Ans 1 & 2: ${hello()} ${world()}`);Use case 2 — Delay the response by 300 ms for “Hello” and 200 ms for “World”
// Qn 3: setTimeout
const helloTimeout = () => setTimeout(hello, 300);
const worldTimeout = () => setTimeout(world, 200);// Incomplete solution
console.log(`Ans 3: ${helloTimeout()} ${worldTimeout()}`);
The output would be integers and not the expected ‘Hello World’. The candidate can right away point out the incompleteness and suggest a solution. Sometimes we might lead them to the solution. I will use the opportunity to talk about setTimeout versus setInterval, the importance of clearInterval, etc.
// Qn 4: Promise
const delayedHello = () => new Promise((resolve, reject) => setTimeout(() => resolve(hello()), 300));const delayedWorld = () => new Promise((resolve, reject) => setTimeout(() => resolve(world()), 200));// Incomplete solution
console.log(`Ans 4: ${delayedHello()} ${delayedWorld()}`);
The output would be a Promise object and not the expected “Hello World”. Again the interactions are crucial and not the exact solution.
// Qn 5: Promise.then().catch()// Solution for Use case 2
delayedHello().then((h) =>
delayedWorld().then((w) => console.log(`Ans 5: ${h} ${w}`))
);
Probe for an alternate solution. Take the opportunity to discuss Promise all/any/race, Promise rejection & error handling, callback hell, etc. There are high chances for the candidates to suggest Async/Await.
// Qn 6: Async/Await
// Alternate solution for Use case 2async function greet() {
const h = await delayedHello();
const w = await delayedWorld(); console.log(`Ans 6: ${h} ${w}`);
}greet();
Use case 3 — Create a utility function that accepts “another function” and their arguments but executes after the specified delay.
Check the instinct on creating re-usable functions/components, interest in different programming models, etc. Discuss high-order function, currying, spread and rest operators, default parameters, and more.
// Qn 7: High-order function and Currying
// Qn 8: Spread vs Rest operators
// Qn 9: Default parameters
const delayedExec = (fn, sleep) => {
return (...args) => {
return new Promise((resolve, reject) =>
setTimeout(() => resolve(fn(...args)), sleep)
);
};
};const helloFn = () => 'Hello';
const worldFn = (msg) => msg;async function greetV2() {
const h = await delayedExec(helloFn, 300)();
const w = await delayedExec(worldFn, 200)('World');
console.log(`Ans 7 & 8: ${h} ${w}`);
}greetV2();
Recollect the whole interactions and compare it against asking direct JavaScript questions
Q1: Arrow functions
Q2: Template string
Q3: setTimeout vs setInterval
Q4: Promise and error handling
Q5: Promise.then().catch()
Q6: Async/Await
Q7: High-order function and Currying
Q8: Spread vs rest operators
Q9: Default parameters
Conclusion
I have shared one of my interview experiences. I prefer “use cases” based discussions instead of theoretical Q&A for the selection process. I hope the blog helped both the interviewer and the interviewee in conducting a successful interview. Feel free to share your experience through comments.
