{"id":832,"date":"2018-07-20T11:30:23","date_gmt":"2018-07-20T11:30:23","guid":{"rendered":"https:\/\/www.audero.it\/blog\/?p=832"},"modified":"2025-05-04T22:07:39","modified_gmt":"2025-05-04T22:07:39","slug":"5-javascript-interview-questions-a-mid-level-developer-should-be-able-to-answer","status":"publish","type":"post","link":"https:\/\/www.audero.it\/blog\/2018\/07\/20\/5-javascript-interview-questions-a-mid-level-developer-should-be-able-to-answer\/","title":{"rendered":"5 JavaScript interview questions a mid-level developer should be able to answer"},"content":{"rendered":"

According to the results of the 2018’s StackOverflow survey, JavaScript is the most popular technology<\/a>. The amount of job offers for JavaScript developers is constantly increasing and with more companies adopting JavaScript as their main language, it’s easy to find good ones. But before you are hired by a company, you have to demonstrate your skills and pass the interview process.<\/p>\n

In this article, I’ll discuss 5 JavaScript interview questions that every mid-level developer (or higher) should be able to answer. So, if JavaScript is your favorite language and you’re looking for new opportunities, or you simply want to challenge yourself with a few questions on JavaScript, read on!
\n<\/p>\n

\"job<\/p>\n

Question 1: Scoping<\/h2>\n

Consider the following code:<\/p>\n

\nfunction foo() {\n   var a = 1;\n   const b = 2;\n   let c = 3;\n\n   if (b &amp;amp;amp;amp;amp;amp;amp;amp;amp;lt; 10) {\n      var a = 10;\n      const b = 11;\n      let c = 12;\n\n      console.log(a, b, c);\n   }\n\n   console.log(a, b, c);\n\n   console.log(d, e);\n\n   var d = 4;\n   const e = 5;\n}\n\nfoo();\n<\/pre>\n
What will be printed on the console?<\/p>\n
Answer<\/h3>\n
The code above, available on JS Bin<\/a>, prints:<\/p>\n
10 11 12\n10 2 3\nUncaught ReferenceError: e is not defined\n<\/pre>\n
The purpose of this question is to test the candidate’s understanding of variables scoping. The code employs the var<\/code> keyword, and the const<\/code> and let<\/code> keywords that have been introduced in ECMAScript 2015 (also known as ECMAScript 6).<\/p>\n
There are two main concepts the candidate has to grasp to correctly answer this question. The first one is that variables declared using const<\/code> and let<\/code>, unlike those declared with var<\/code>, are hoisted<\/em> but not initialized. Variables declared using these two keywords are in a temporal dead zone<\/em> from the start of the block until the declaration is processed. This means that referencing them before they are initialized causes the JavaScript engine to throw a ReferenceError<\/code> error. The second concept is that variables declared using const<\/code> and let<\/code> are block scoped. On the contrary, variables declared with var<\/code> are function scoped, so they are available throughout the whole function they are declared in.<\/p>\n
Once clarified the two notions needed to answer the question, it’s easy to understand why the value of a<\/code> is replaced by the value defined inside the if<\/code>, while the same isn’t true for b<\/code> and c<\/code>. In fact, inside the if<\/code> block two different b<\/code> and c<\/code> variables are created. So, the condition of the if<\/code> is verified. The b<\/code> inside the condition of the if<\/code> is the one declared at the beginning of the function, so its value is 2. This explains why the first console.log()<\/code> statement executed is the one inside the if<\/code> and why it prints 10 11 12<\/code>. For these same reasons, the values printed by the second console.log()<\/code> statement are 10 2 3<\/code>. Finally, the e<\/code> variable is declared using const<\/code>, thus it’s hoisted but not initialized. At the time the third console.log()<\/code> statement is executed, the e<\/code> variable is in a temporal dead zone, which explains the ReferenceError<\/code> error thrown.<\/p>\n
If you want to learn more about let<\/code>, const<\/code>, block scope, and the temporal dead zone, I recommend you the following resources:<\/p>\n