Web Development

JavaScript interview questions and answers

Development hiring managers and potential interviewees may find these sample JavaScript proficiency interview Q&As and code snippets useful.

My first adventures in Web development were brightened with the introduction of JavaScript (anybody remember LiveScript?). For many years, the language was shunned by self-proclaimed real developers, but there has been an about-face within the industry, with JavaScript now viewed as a major vehicle for building powerful Web applications and beyond (think Node.js).

When the time comes to hire JavaScript developers, the following interview questions and talking points might help. The depth and focus of an interview will depend on the position's requirements, so you can choose to go further with some questions or avoid topics based on your needs. I hope these questions will stimulate a discussion that gives you a peek into what the candidate knows and how the person works.

Note: This content is also available as a downloadable PDF.

What are global variables? How are they declared? What are the problems with using globals?

Global variables are available throughout your code: that is, the variables have no scope. Local variables scope, on the other hand, is restricted to where it is declared (like within a function). The var keyword is used to declare a local variable or object, while omitting the var keyword creates a global variable.

Most JavaScript developers avoid globals. One reason why is they're averse to naming conflicts between local and globals, Also, code that depends on globals can be difficult to maintain and test.

// Declare a local variable

var localVariable = "TechRepublic"

// Declare a global

globalVariable = "CNet"

How do you organize your JavaScript code?

The key concept here is to get an idea of how the candidate maintains and designs code. Do they design code that is specific to an application with no possible reuse? Do they use class inheritance or the module pattern to build reusable code? These approaches allow multiple developers to work on a project without stepping on their coworkers' toes. In addition, testing modular code or classes is easier to approach than a jumbled mess of code thrown together (look around the Web, and you'll find plenty of examples).

What are JavaScript types?

Unlike Java or C#, JavaScript is a loosely-typed language (some call this weakly typed); this means that no type declarations are required when variables are created. Strings and numbers can be intermixed with no worries. JavaScript is smart, so it easily determines what the type should be. The types supported in JavaScript are: Number, String, Boolean, Function, Object, Null, and Undefined.

var fName = "Mary";   //Declare a String

var total = 100.32;    //Declare a number

var fName = new String; //Another way to declare a string

fName = "Mary";

var total = new Number;

var isIt = new Boolean;
var names = new Array;
var car = new Object;

What is the difference between undefined and null?

The value of a variable with no value is undefined (i.e., it has not been initialized). Variables can be emptied by setting their value to null. You can test for each using the === (three equal signs) or == (two equal signs) for comparison checking. The big difference is the latter uses coercion, which can have some odd results -- it returns true for a null or undefined comparison if they are either.

if (nullExample === null) { // executes this block only if null }

if (undExample ===Undefined) { // executes this block only if Undefined }

if (bothExampe == null) { // executes this block if Undefined or null }

You can be more exact with a comparison by using the typeof to return an object's type.

If (typeof variable ==="undefined")  { // executes this block of if undefined }

What is JavaScript's this keyword?

JavaScript's this keyword normally refers to the object that owns the method, but it depends on how a function is called. Basically, it points to the currently in scope object that owns where you are in the code. When working within a Web page, this usually refers to the Window object. If you are in an object created with the new keyword, the this keyword refers to the object being created. When working with event handlers, JavaScript's this keyword will point to the object that generated the event.

What is event bubbling?

Event bubbling describes the behavior of events in child and parent nodes in the Document Object Model (DOM); that is, all child node events are automatically passed to its parent nodes. The benefit of this method is speed, because the code only needs to traverse the DOM tree once. This is useful when you want to place more than one event listener on a DOM element since you can put just one listener on all of the elements, thus code simplicity and reduction. One application of this is the creation of one event listener on a page's body element to respond to any click event that occurs within the page's body.

Do you have a JavaScript framework preference? What are your thoughts on using frameworks?

This open-ended question has the potential to spawn a good conversation. There are the vastly popular frameworks like jQuery, although you might be surprised when the person tells you about the framework they developed or even played the contributor role.

The answer to the second question gives you an idea of the candidate's feelings about open source (well, that is the way I see it). There are so many open source options available today (Knockout, postal.js, jQuery, etc.), and a developer's time is very valuable, so why reinvent the wheel? These open source options provide robust code that has been thoroughly tested by an army of developers. From my perspective, I want developers who will use whatever is available to meet a project's demands. Plus, the interviewee might introduce you to something you've never used.

How are errors gracefully handled in JavaScript?

Exceptions that occur at runtime can be handled via try/catch/finally blocks; this allows you to avoid those unfriendly error messages. The finally block is optional, as the bare minimum to use is try/catch. Basically, you try to run code (in the try block between the braces), and execution is transferred to the catch block of code when/if runtime errors occur. When the try/catch block is finally done, code execution transfers to the finally code block. This is the same way it works in other languages like C# and Java.

try {

// do something

} catch (e) {
// do something with the exception
} finally {
// This code block always executes whether there is an exception or not.
}

You can give bonus points to any candidate who discusses the onerror event handler tied to the Window object in the browser -- this allows it to monitor all errors on a page. This allows you to properly handle code syntax errors and runtime exceptions.

Can you explain how inheritance works in JavaScript?

This subject confuses many developers, and I would expect a candidate to stammer on this question or throw up their hands and say "can anybody?" Instead of trying to explain, take a look at this overview on the Mozilla Developer Network.

How do JavaScript timers work? What is a drawback of JavaScript timers?

Timers allow you to execute code at a set time or repeatedly using an interval. This is accomplished with the setTimeout, setInterval, and clearInterval functions. The setTimeout(function, delay) function initiates a timer that calls a specific function after the delay; it returns an id value that can be used to access it later. The setInterval(function, delay) function is similar to the setTimeout function except that it executes repeatedly on the delay and only stops when cancelled. The clearInterval(id) function is used to stop a timer. Timers can be tricky to use since they operate within a single thread, thus events queue up waiting to execute.

More in our development interview Q&A series

Keep your engineering skills up to date by signing up for TechRepublic's free Software Engineer newsletter, delivered each Tuesday.

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

9 comments
JSCoder
JSCoder

Types in Javascript:  Function is not a data type. Object is. Function is a type of Object.

Ref: CHP3: Javascript The Definitive Guide by David Flanagan

juzerali
juzerali

Hahaha, he called jQuery a framework!!!

belli_bettens
belli_bettens

As far as I'm concerned, somebody who calls himself a javascript developer should understand the concept of inheritance and thus the concept of prototyping. It's really not that hard to get, it's just not the same as in other (mainstream) languages. But once you get it, it's very useful and you'll be wondering how you ever managed without. I'm not trying to brag here, it's really not that difficult, just pick up a book about JavaScript or read the link in the article twice and you're good to go (which is the least you can do to prepare for an interview).

charliecalvert
charliecalvert

Using var gives you local scope if you are in a function, otherwise it gives you global scope: var test01 = 2; // global function test() { var test02 = 2; // local test03 = 3; // global test01 = test01 + 1; test02 = test02 + 1; $("#par01").html(test01); $("#par02").html(test02); }

Slayer_
Slayer_

A good programmer can learn any language, it is not useful to judge on a specific one.

Pete6677
Pete6677

This is not a good way to interview candidates. All it will tell you is how good someone is at memorizing syntax; it will give you very little clue as to how well they find reasonable solutions to business problems which is presumably why you're hiring them. And if the person asking the questions is just reading off a sheet and does not actually understand the underlying technology, the problem is greatly compounded. You'll end up hiring a professional interviewer instead of a good worker. Professional interviewers get good at interviewing because they get fired for poor performance frequently and thus end up with a lot of interview practice. You do not want to hire one of these. Ask the candidate to elaborate on their work experiences and to give real-life examples of application of relevant technologies. It will be a lot more revealing than how many trivia questions they can memorize the answers to.

Nick Rodriquez
Nick Rodriquez

Questions pertaining to how JavaScript and HTML5 tie in are probably most relevant at the moment.

PattiF
PattiF

@Pete6677  Although I do understand your point, I don't believe this has anything to do with syntax memorizing. I mean if a candidate has a JS experience then he should defensibly know the meaning of 'this', 'null', 'Undefined', etc.

Nevertheless I agree that a work experience discussion should be conducted instead, but you need to have some sort of threshold which would help you out with choosing the right participants. For example we like to use small front end coding tests (http://www.testdome.com/Programming-Tests/Html-Css-JavaScript/16) which define our minimum requirements. These are straightforward tasks that you will encounter at job, like write a specific function, write a form, fix a small bug, etc.

Editor's Picks