A few weeks ago a team that I collaborated with asked me to create a JavaScript Interview Test for seniors.
The third part of the interview test also contains answers.
My opinion is that if you ever use this test and the candidate can answer correctly to 1/3 of the questions, well you should definitely hire him.
Go ahead and test your skills:
Part I. Questions. [30 minutes, general JavaScript knowledge]
#1. Can you name some Javascript frameworks? Why would you recommend them?
#2. Do you use any Javascript code validators? Can you name one?
#3. Do you unit test your Javascript code? If yes, what frameworks are you using?
#4. Can you name the Javascript interpreter used by Mozilla Firefox? Or any other of the browsers?
#5. What is JSON? What is it used for?
#6. What is JSONP? Can you explain how it works?
#7. Can you write an example of a Javascript generator?
#8. What frameworks have you used for creating 2D, 3D animations?
#9. Describe how would you implement an algorithm to generate random numbers.
Part II. Option I. Classic Snake Game. [2 hours, medium developer]
Requirements:
- The game must be implemented in a typical 2-dimensional layout.
- The snake should be able to grow significantly within the bounds of the map (the grid size should be at least 20×20)
- The user may move the snake using the arrow keys, however, the snake cannot double back on itself (e.g. if it is going West it cannot go East without first going North or South). A snake should be able to travel in all 4 directions: up, down, left, right (North, South, West, East).
- Snake starts off as length 1, each time it eats a “food” object it grows +1 in length
- Food objects are randomly placed in locations other than those occupied by the snake
- Only one Food object is visible at any time
- If the Snake hits itself or a wall the game is ended
- When the game ends, the score(number of eaten “food”) is displayed followed by a button “Restart” which restarts the game.
- The task must be completed with HTML5 features: you can choose from Canvas or SVG
Part II. Option II. Brick Breaker Game. [2 hours, senior developer]
Requirements:
- The game must be implemented in a typical 2-dimensional layout
- The objective is to smash a wall of bricks by deflecting a bouncing ball with a paddle.
- The user may move the paddle horizontally using the left/right arrow keys.
- When all the bricks have been destroyed the game is won.
- If the ball hits the bottom border 3 times the game is lost.
- The task must be completed with HTML5 features: you can choose from Canvas or SVG
Part III. Solve and explain the exercises. [30 minutes, senior developer]
#1. What does alert(x) and alert(y) output?
(function() {
var x = y = 1;
}) ();
alert(x);
alert(y);
#2. What is the output of alert(window)?
(function() {
alert(window);
var window = window;
}) ();
#3. What does foo() call return?
function foo()
{
return
{
haha: "ha"
};
}
foo();
#4. What is the output for each of the following calls?
// a
function Dude(name) {
this.name = name;
return {name: 'Doug'};
}
new Dude('Bob');
// b
function Dude(name) {
this.name = name;
return [1, 2, 3];
}
new Dude('Bob');
// c
function Dude(name) {
this.name = name;
return 3;
}
new Dude('Bob');
#5. What is the output for the following sequences?
// a
parseInt('foo');
// b
parseInt('foo', 16);
#6. Output for following console.log calls:
var a = 1
b = 1;
(function() {
var a = 2
b = 2;
} ())
console.log(a);
console.log(b);
#7. Output for following line:
[,,,].join()
#8. What do the anchors alert when clicked?
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<script>
var el = document.getElementsByTagName('a');
for(var i = el.length; i--;) {
el[i].onclick = function() {
alert(i);
return false;
}
}
</script>
#9. What’s the content of the following array after the evaluation?
[typeof 'hi' === 'string', typeof new String('hi') === 'string']
#10. What’s the output for this code:
function Point() {
this.x = 20;
this.getX = function() {
return this.x;
};
}
var a = new Point();
var f = a.getX;
alert(f());
#11. What are the values of x and y after the execution of the following code?
var y = 1, x = y = typeof x;
#12. What does this code sequence output:
var x = [typeof x, typeof y][1];
typeof typeof x;
#13. What does the following code sequence output:
(function f(){
function f(){ return 1; }
return f();
function f(){ return 2; }
})();
Answers to Part III
#1. It’s treated like: var x = (y = 1); thus, ‘y=1’ creates an auto-global since there’s no binding ‘var’ statement for it. then that value gets copied into properly defined local var ‘x’.
alert(x); // undefined
alert(y); // 1
#2. Because of ‘hoisting’, all variable declarations will be executed immediately at the top of a function scope. However, the variable initializations are not hoisted. So, local variable ‘window’ is declared but uninitialized/’undefined’.
alert(window); // undefined
#3. returns ‘undefined’. Semicolons in javascript are optional but the interpreter just inserts them for you at certain newline characters if it thinks they are missing. A return statement followed by a new line tells the JS interpreter that a semicolon should be inserted after that return.
#4. Returning a primitive type from a constructor(number, string, date) will ignore the return value and return the originally initialized object, but otherwise, the returned value overrides.
- a) {name: ‘Doug’}
- b) [1, 2, 3]
- c) {name: ‘Bob’}
#5. parseInt should always have the radix parameter supplied
- a) NaN
- b) 15
#6. Since JavaScript has ‘automatic semicolon insertion’ for some statements like ‘var’, a semicolon gets inserted after ‘a = 2’, and variable ‘b’ gets declared as a global!
console.log(a); // prints 1
console.log(b); // prints 2
#7. Trailing commas are allowed in javascript and are automatically removed.
The above array is evaluated as [undefined, undefined, undefined]
[,,,].join() // outputs “,,”
#8. All anchors will output -1 when clicked
#9. [true, false]
#10. undefined
#11. x and y are undefined
#12. “string”
#13. 2
If you like this article don’t forget to share it.