We’ve actually hired a couple of people recently, so I’m not sure if I’ll be able to bust this one out any time soon. Instead, I’ll share it with you.

This is another one that I feel works for a lot of different experience and knowledge levels. A good, junior developer should be able to give me a satisfactory answer and a senior developer could take the same problem, decide to be clever, and give me a great answer.

Let’s take a look at it.

The Markup, a Task and a Twist

I start with the following markup:

[javascript]
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
<div>div 5</div>
[/javascript]

The task is simple. Using plain JavaScript, add a 1px border to each of those divs. The only catch is, the for loop is forbidden.

Depending on the level of the candidate, there are several answers that will bring a smile to my face.

While Loop

This is a while loop that basically takes the place of a for loop.

[javascript]
var divs = document.getElementsByTagName("div"),
i = 0;
while (i < divs.length) {
    divs[i].style.border= "1px solid blue"
    i++;
}
[/javascript]

This is a standard “right” answer for a junior developer. A junior dev who thinks of using a while loop and can actually craft one is not a phony. This is especially true now since so many people just use $(selector).each without even thinking.

This can be improved.

Faster While Loop

This isn’t much different, but it caches the divs.length to save the lookup each time.

[javascript]
var divs = document.getElementsByTagName("div"),
i = 0,
  test=divs.length;
while (i < test) {
    divs[i].style.border="1px solid blue"
    i++;
}
[/javascript]

This would be a great answer for a junior developer and a satisfactory answer for someone more senior.

With a senior developer I would ask for another alternative.

Get Wacky With a Do… While

Here’s one potential alternative. I would be surprised to get this as a primary answer, but as a secondary answer it’d be great.

[javascript]
var divs = document.getElementsByTagName("div"),
i = 0,
test=divs.length;
do {
    divs[i].style.border= "1px solid purple"
    i++;
} while (i < test)
[/javascript]

Silver Medal- a Fast While Loop

This one indicates attention to detail and an eye towards performance.

[javascript]
var divs = document.getElementsByTagName("div"),
i = divs.length;
while (i–) {
   divs[i].style.border= "1px solid grey"
}
[/javascript]

This reverse while loop made rounds a few years ago as the outcome of the incredible survey: What’s the Fastest Way to Code a Loop in JavaScript? Someone who either read that or had the results filter down to them is okay in my book.

The Golden Ticket

If a more senior developer busts out the below solution, they get the Gold Star.
[javascript]
[ ].forEach.call(divs, function(obj){obj.style.border="1px solid red"})
[/javascript]

This shows someone who’s poked at the guts of JavaScript in a meaningful way. They also get bonus points for pointing out that forEach is slower than a for loop.

Bonus: Ignore Me For Fun and Profit

In addition to any of the above solutions, if a candidate of any level says “but really, just use CSS,” even though the instructions say “use JavaScript,” they get bonus points because, really, why do it like this?

JavaScript Ninja/Pirate/Jedi Section

Feel free to follow Adam‘s lead and propose other, interesting solutions in the comments.