JavaScript quiz (Baranovskiy’s Answering)

Last week, I tweeted about a JavaScript quiz I came across on Dmitry Baranovskiy’s blog entitled, So you think you know JavaScript? As with other quizzes of this type, there is only one question to answer for five different pieces of example code: what is the result? The example code tests some of the quirkier attributes of JavaScript engine behavior. I’ve seen similar quizzes in the past, sometimes by people saying that they use it as a test during job interviews. I think doing so is both disrespectful to the candidate as well as generally useless. You don’t encounter this type of quirk every day, so making that the minimum to get a job is about as useful as asking flight attendant candidate to explain jet propulsion.

Still, I liked some of the example code in this post because it can be used to explain some interesting things about JavaScript as a language. The following is an in-depth explanation of what is happening in each of those examples.

Example #1

if (!("a" in window)) {
    var a = 1;
}
alert(a);

This strange looking piece of code seems to say, “if window doesn’t have a property ‘a’, define a variable ‘a’ and assign it the value of 1.” You would then expect the alert to display the number 1. In reality, the alert displays “undefined”. To understand why this happens, you need to know three things about JavaScript.

First, all global variables are properties of window. Writing var a = 1 is functionally equivalent to writing window.a = 1. You can check to see if a global variable is declared, therefore, by using the following:

"variable-name" in window

Second, all variable declarations are hoisted to the top of the containing scope. Consider this simpler example:

alert("a" in window);
var a;

The alert in this case outputs “true” even though the variable declaration comes after the test. This is because the JavaScript engine first scans for variable declarations and moves them to the top. The engine ends up executing the code like this:

var a;
alert("a" in window);

Reading this code, it makes far more sense as to why the alert would display “true”.

The third thing you need to understand to make sense of this example is that while variabledeclarations are hoisted, variable initializations are not. This line is both a declaration and an initialization:

var a = 1;

You can separate out the declaration and the initialization like this:

var a;    //declaration
a = 1;    //initialization

When the JavaScript engines comes across a combination of declaration and initialization, it does this split automatically so that the declaration can be hoisted. Why isn’t the initialization hoisted? Because that could affect the value of the variable during code execution and lead to unexpected results.

So, knowing these three aspects of JavaScript, re-examine the original code. The code actually gets executed as if it were the following:

var a;
if (!("a" in window)) {
    a = 1;
}
alert(a);

Looking at this code should make the solution obvious. The variable a is declared first, and then the if statement says, “if a isn’t declared, then initialize a to have a value of 1.” Of course, this condition can never be true and so the variable a remains with its default value,undefined.

Example #2

var a = 1,
    b = function a(x) {
        x && a(--x);
    };
alert(a);

This code looks far more complex than it actually is. The result is that the alert displays the number 1, the value to which a was initialized. But why is that? Once again, this example relies on knowledge of three key aspects of JavaScript.

The first concept is that of variable declaration hoisting, which example #1 also relied upon. The second concept is that of function declaration hoisting. All function declarations are hoisted to the top of the containing scope along with variable declarations. Just to be clear, a function declaration looks like this:

function functionName(arg1, arg2){
    //function body
}

This is opposed to a function expression, which is a variable assignment:

var functionName = function(arg1, arg2){
    //function body
};

To be clear, function expressions are not hoisted. This should make sense to you now, as just with variable initialization, moving the assignment of a value from one spot in code to another can alter the execution significantly.

JavaScript quiz from Perfection Kills

I came across this JavaScript quiz on a very cool blog and since I really enjoy solving such problems, I took the quiz. The result was humbling, and I was eager to find out why I got some of the questions wrong. I figured out why each problem behaves the way it does so I put them together for others below.

1 2 3

1. (function(){       return typeof arguments;     })();

(a) “object” (b) “array” (c) “arguments” (d) “undefined”

The answer is (a). The arguments array is of type “object”. My first instinct was to think its an array, until I realized there was a typeof to be considered.

1 2	2. var f = function g(){ return 23; };     typeof g();

(a) “number” (b) “undefined” (c) “function” (d) Error

This results in an error because the function g has been assigned to the var f. So the answer is (d)

1 2 3 4

3. (function(x){       delete x;       return x;     })(1);

(a) 1 (b) null (c) undefined (d) Error

I made the mistake of assuming I could delete x, but apparently you cannot delete arguments inside a function. So the answer is 1 which is option (a).

1 2	4. var y = 1, x = y = typeof x;     x;

(a) 1 (b) “number” (c) undefined (d) “undefined”

The answer here is “number”, because after assigning a value of 1 to y, x is also assigned that value. Doing a typeof on 1 obviously yields “number”.

1 2 3

5. (function f(f){       return typeof f();     })(function(){ return 1; });

(a) “number” (b) “undefined” (c) “function” (d) Error

Notice that we pass a function which returns 1 to the function f, which inturn executes the passed function and evaluates the type of the returned value. So typeof 1 results in “number” which is option (a)

1 2 3 4 5 6 7

6. var foo = {      bar: function() { return this.baz; },      baz: 1    };    (function(){      return typeof arguments[0]();    })(foo.bar);

(a) “undefined” (b) “object” (c) “number” (d) “function”

This returns “undefined” because when the foo.bar function is executed, “this” refers to the window scope which ofcourse knows nothing about baz. How do you fix this?
Remember how to use JavaScript’s call() and apply()? If not, check here
In this case, we need to specify the “this” to be the object “foo”, like this:

1 2 3 4 5 6 7

var foo = {          bar: function() { return this.baz; },      baz: 1    };    (function(){      return typeof arguments[0].call(foo);    })(foo.bar);

1 2 3 4 5

7.  var foo = {       bar: function(){ return this.baz; },       baz: 1     }     typeof (f = foo.bar)();