main banner

Development

That time I flunked my JavaScript Technical Interview: Some tips from personal experience

As the title suggests, this article is about those times that I did not land the job that I was applying for because I did not know the answer to a particular question.


It did not mean that I was bad at my job or that I did not know JavaScript. I have been using it almost every day since I became a software engineer. So, what went wrong? In this article, I will tackle some of those problems where I have struggled as well as some common questions asked to candidates applying for JavaScript related positions (Front-end, Back-end, or Full Stack).

 

Knowledge of Concepts

 

The way companies get a feel for how experienced a candidate may be is by asking very specific questions about core concepts of the programming language that the open position requires. Below are some concepts that I have been asked about during interviews.

 

Closure, Timeouts, and Scoping

 

According to MDN web docs (2020), “A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment)”. In simple terms, this means that variables and properties inside a function are exclusive to that function, but the function can have access to outer properties.


Simple enough, right? But the real challenge comes when the interviewer asks you something like this: in the code below, what would the output be for the following?

 

for (var i = 0; i < 3; i++) {

  setTimeout(function() {

    console.log(i);

  }, 3000);

}

 

Seems pretty straight forward, doesn’t it? After a 3-second delay, it will output 0, 1, and 2.

 

I know what you are thinking, did you give that answer? Well, unfortunately, yes I did... 


But here is what I learned. The setTimeout function creates a function (the closure) that has access to its outer scope, which is the loop that contains the index “i”. After 3 seconds go by, the function is executed and it prints out the value of “i”, which at the end of the loop is at 3 because it cycles through 0, 1, 2, 3, and the loop finally stops at 3. So the correct answer would be that it prints 3 all three iterations. With this simple question, you can tackle three concepts: JS Closure, Scope, and Timeouts.

 

JavaScript Paradigms

 

Once during an interview, I got this question: What are the paradigms of JavaScript? If you are relatively new or coming from some other programming language, this question may catch you off guard (as it did to me). Answering this one right will give a good impression as someone who not only knows the basics but has an advanced or expert understanding of the JavaScript language. So, let’s answer the question.


JavaScript is a multi-paradigm programming language. JavaScript supports both object-oriented programming (OOP) and functional programming and it lets us use the combination of both for the same project


  • Procedural OOP specifies how to do something. Inheritance is common with the purpose of creating reusable code. One important thing is that JavaScript uses Prototypal Inheritance. Unlike objects with classes, JavaScript links objects through its prototype allowing access to the “parent” properties.

  • Functional Programing refers to code that declares what is done but not necessarily how it should be done. Examples of this could be first-class functions where functions can be treated as a variable, stored in an array, or even sent as a parameter in another function call (such as lambda functions).

 

Asynchronous vs Synchronous JavaScript

 

One important aspect of JavaScript is that it runs in a single thread and there may be times that a blocking operation is needed. This could be an HTTP request (either from client to server or server-side) or a timeout just to mention or a user inputs popular examples. There are many questions that interviewers ask around this topic.

 

Timeouts

 

What would be the output of the following code?

console.log("A")

function log() {

   setTimeout(() => console.log("B"), 10);

   console.log("C");

   setTimeout(() => console.log("D"))

   console.log(E)

}

console.log("F");

log();

 

This is a common trick question that I have got a few times. The correct answer is A, E, C, E, D, B. The reason for that being that when the code runs the first instruction is console.log("A"), then the next line is a function declaration but has not been called. After the function comes console.log("E"), then comes the function call to “log” which has 3 instructions, the first one is timed out 10, so the callback goes to the event loop queue, then comes console.log("C"). Immediately after comes the next timeout with no delay, however, at this point, the callback goes to the event loop queue so no execution yet. Next comes console.log("E"). Then after the code gets executed come the tasks in the queue, which at this point B was delayed 10 milliseconds, and D 0 milliseconds; so, D comes before B.

 

Promises and Generators

 

Promises and Generators are examples of asynchronous programming with JavaScript. It may be useful to have a good understanding of these concepts which I briefly explain below.


Another thing that interviewers may be interested in knowing is whether you understand Promises.  According to MDN web docs (2020), “The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.


One of the newer features of JavaScript is the Generator Object, described by MDN (2020) as follows: “object is returned by a generator function and it conforms to both the iterable protocol and the iterator protocol.

 

What about Problem-solving challenges?


Some technical interviews involve problem-solving exercises. These may come in a variety of ways, remote or on-site. What most have in common is that there is an evaluator that poses you with a challenge. Usually, they are trying to know two things (apart from confirming that you can actually code). 


  1. Determine how good your problem-solving skills are.

  2. Get an idea of what’s it like to work with you.


For the first item on the above list, I would recommend practicing code challenges. There are some popular resources like Coderbyte, CodeWars, or CodeSignal that have many exercises, many of which are used by big companies.


When you start writing your solution, you must communicate with your interviewer. Since the goal of this is to get an idea of how you work, it matters if you spell out your thought process at all times. This will help you give a good initial impression as a team player. Don’t be afraid of exchanging ideas, refactoring what you have already done. It’s not necessarily about your coding speed but the quality of your work as well, so keep that in mind.

 

Conclusion

 

There are so many topics and dynamics that interviewers may use. I use just a few from personal experiences. However, what you need to demonstrate is that you understand JavaScript behind the scenes. If you want more tips and information check the resources below which explain every concept used for this article and have more detailed explanations and examples.

 

Further Reading

 

Elliott, E. (2019, December 19). Master the JavaScript Interview: What is a Closure? Medium. https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36


Elliott, E. (2020, January 14). 10 Interview Questions Every JavaScript Developer Should Know. Medium. https://medium.com/javascript-scene/10-interview-questions-every-javascript-developer-should-know-6fa6bdf5ad95


Closures. (2020, June 23). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures


Borowski, D. (2018, December 11). The 10 Best Coding Challenge Websites for 2018. Retrieved August 25, 2020, from https://medium.com/coderbyte/the-10-best-coding-challenge-websites-for-2018-12b57645b654


Austin, D. A. (2019, August 26). What Are JavaScript Programming Paradigms? - JavaScript In Plain English. Medium. https://medium.com/javascript-in-plain-english/what-are-javascript-programming-paradigms-3ef0f576dfdb


Object Prototype. (2020, May 20). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object


First-class Function. (2020, January 3). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Glossary/First-class_Function


Promise. (2020, August 20). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise


function*. (2020, August 17). MDN Web Docs. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*

Arturo E.

Amateur Musician, Combat Sports Enthusiast, Philosophy and history lover and a software engineer specialized in Javascript technologies.

Articles