Finally, we've reached the last question of the Perfection Kills Quiz.

14)

 with (function(x, undefined){}) length;

Correct answer: 2.

To answer this question, it is helpful to look at the definition of with statement. A with statement consists of an expression (in the parentheses) and a statement or a block of statements. The expression is added to the scope chain used when evaluating the statement.

To get a better feel of what a with statement is, we can play with a couple of examples in the console.

Example 1:

a; //throws an error "a is not defined"
   //as the property "a" is not defined in the global scope;

Example 2:

with ({a: "b"}) a; //evaluates to "b"

In the quiz question, the expression is function(x, undefined){}. The statement is length. The snippet of code evaluates to the value of property "length" on the object function(x, undefined){}. Function objects' length property specifies the number of arguments expected by the function. The function function(x, undefined){} expects two arguments. Hence, its length property has the value 2.

Note that undefined is just a name of the function's second parameter rather than the value undefined.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

13)

function f(){ return f; }
new f() instanceof f;

Correct answer: false.

In this snippet of code, the instanceof operator checks whether the left operand new f() has the object f.prototype in its prototype chain.

Let's go through the code that runs when the left operand new f() is evaluated:

1) Function f is invoked in the "construction mode";
2) A new object is created, inheriting from f.prototype, and this keyword is bound to the newly created object (source). The interpreter inserts the line

this = Object.create(f.prototype);

as the first line of the function body.
3) Function f returns its return value. In this case, its return value is the function f itself.

The newly created object (described in step 2) is constructed in such a way that it has the object f.prototype in its prototype chain. The problem is that function f never returns this object. Instead, it returns function f, which does not have f.prototype in its prototype chain. For this reason, the snippet of code evaluates to false.

If there was no explicit return statement in function f, the result would have been true.

function f(){}
new f() instanceof f; //true 

If a function does not have an explicit return statement and is run in the "construction mode", it returns the newly created object inheriting from f.prototype.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

12)

(function f(){
  function f(){ return 1; }
  return f();
  function f(){ return 2; }
})();

Correct answer: 2.

For simplicity, I will refer to the "outer" function

function f(){
  function f(){ return 1; }
  return f();
  function f(){ return 2; }
}

as Function A,  to the function function f(){ return 1; } as Function B, and to the function function f(){ return 2; } as Function C.

Function A is immediately invoked. The snippet of code evaluates to the return value of this function. In order to determine this return value, we have to find out what f in the statement return f(); refers to.

Theoretically, f could refer to any of the three functions: A, B, or C. Let me start by explaining why f could have referred to any of them under some circumstances.

Function A is defined with a named function expression (you can read more on them here). The name of Function A f is available within the function local scope. Hence, f in the function body (specifically in the statement return f();) can refer to Function A.

Function B is defined with a function declaration. Function declarations 'move' function definitions to the top of the current scope. In case of Function B, this is not too interesting, because this function is declared at the top of the current scope anyway.

Function C is defined with a function declaration too. Although this function is declared at the very bottom of Function A body, its definition is 'moved' to the top of the current scope (in this case the current scope is the scope of Function A). Hence, the variable f in the statement return f(); can refer to Function C.

Obviously, when the statement return f(); is executed, the variable f refers to one value only. Let's find out which one.

First, when Function A has just been initialized, the identifier f points to Function A. As explained in the post on question 5 of Perfection Kills Quiz, the Function A's identifier f is an outer variable relative to the Function A local scope. Then the declaration of Function B creates a new variable f, which points to Function B and belongs to the Function A local scope. Finally, the declaration of Function C redefines f in the local scope and makes it point to Function C.

At the moment when the line return f(); runs, the interpreter will first look for a variable f in the Function A local scope and will find it there. This variable f points to Function C. The expression f() evaluates to 2, and Function A returns 2.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

11)

(function(foo){
  return typeof foo.bar;
})({ foo: { bar: 1 } });

Correct answer: "undefined".

This is also one of the easier questions of the quiz.

The anonymous function function(foo) {return typeof foo.bar;} is immediately invoked with the argument { foo: {bar: 1} }.

The foo in the body of the function refers to the parameter foo, which has the value { foo: {bar: 1} }. Hence, foo.bar refers to the property 'bar' of this object. However, the object { foo: {bar: 1} } does not have a property 'bar'. It has only one property 'foo' (and the value of this property is an object with the property 'bar', but 'bar' is not the property of the "original" object). For this reason, foo.bar is undefined. Since typeof undefined is "undefined", the return value of our snippet of code is "undefined".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

10)

var x = [typeof x, typeof y][1];
typeof typeof x;

Correct answer: "string".

Compared to other questions in the quiz, this is a relatively easy one. Let's just go step by step parsing and executing the code.

Since the '=' operator assigns the value of its right operand to its left operand, we first need to evaluate the expression [typeof x, typeof y][1]. We are executing the first line of code, and neither x nor y variables have been defined so far. Hence, x has the value undefined and typeof x evaluates to the string "undefined". For the same reason typeof y also evaluates to "undefined".

The original snippet of code can be rewritten in the following way:

var x = ["undefined", "undefined"][1];
typeof typeof x;

From here, we get:

var x = "undefined"; //note that "undefined" is a string
typeof typeof x;

The variable x points to the string "undefined". Then typeof x is the string "string", and typeof typeof x is the string "string" too.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

9)

var x = 1;
if (function f(){}) {
  x += typeof f;
}
x;

Correct answer: "1undefined".

This question is closely related to question 2 from the same quiz.

First of all, it's important to understand that function f(){} is a (named) function expression rather than a function declaration. This follows from the fact that the condition in an if statement should be an expression that evaluates to true or false. Also, the grouping operator, i.e. the parenthesis, can only contain an expression.

Now let's determine whether our function expression evaluates to true or false. The only values that would evaluate to false are  0, -0, null, false, NaN, undefined, or the empty string (""). All other values evaluate to true (see MDN). Hence, the function expression evaluates to true and the statement within the if block is executed.

The statement x += typeof f; within the if block is equivalent to x = x + typeof f;. f in the named function expression is the function name, and it's only available in the scope of the function itself. Since the statement x += typeof f; is outside of the function's scope, f is undefined and typeof f evaluates to the string "undefined". Due to automatic type conversion, the variable x is assigned the value "1undefined".

For the discussion of named function expressions, see the following resources: Named function expressions demystified by Juriy "kangax" Zaytsev, definition of function expression on MDN.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

8)

var f = (function f(){ return "1"; }, function g(){ return 2; })();
typeof f;

Correct answer: "number".

In order to understand this snippet of code, we have to look into the comma operator. A good explanation of the subject can be found here. According to MDN, "the comma operator evaluates each of its operands (from left to right) and returns the value of the last operand". Here is a simple example:

var y = ("abc", 5);
y; //5

Parentheses are needed in order to create a group and apply the comma operator before the '=' operator.

In our case, the expression (function f(){ return "1"; }, function g(){ return 2; }) evaluates to function g(){ return 2; }. As a result, the original snippet of code is equivalent to the following one:

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

Function function g(){ return 2; } is immediately invoked and returns 2. Hence, the variable f is assigned the value of 2 and typeof f is "number".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

7)

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

Correct answer: "undefined".

This question is very similar to the previous one (see part 6).

First, let's consider the following snippet of code, which looks very similar:

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

This snippet of code returns the value "number". foo.bar points to a function, and when this function is invoked, its this keyword refers to the object foo.

In the original snippet of code, we start by assigning the value of foo.bar to the variable f. As a result, the variable f points to the function function(){ return this.baz; }. However, when this function is invoked, the keyword this no longer refers to foo. The original snippet of code is roughly equivalent to the following one:

var f = function(){
  return this.baz;
}
typeof f();

The function function(){ return this.baz; } is invoked as a freestanding function, so the keyword this refers to the global object. As the global object does not have the property baz, the function returns undefined. Since typeof undefined is "undefined", the return value of our snippet of code is "undefined".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

6)

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

Correct answer: "undefined".

For simplicity, I will refer to the function function(){ return this.baz; } as Function A and to the function function(){ return typeof arguments[0](); } as Function B.

Function B is immediately invoked with the argument foo.bar, which evaluates to Function A. The whole snippet of code returns the value of typeof arguments[0]();, so we can focus just on this line.

It is tempting to believe that the statement return typeof arguments[0](); returns the same value as the statement return typeof foo.bar();. However, this is not true. Although both foo.bar and arguments[0] point to the same function, i.e. Function A, in those two cases the keyword this in the body of Function A refers to two different objects.

If foo.bar was invoked, the keyword this in Function A would refer to the object foo. This object has a property baz, and hence Function A would have returned the value 1 (a number).

It is important to understand that our snippet of code does not invoke foo.bar. When function B is invoked, the arguments object is created, and its [0] property points to Function A rather than foo.bar. When the line return typeof arguments[0](); is executed, the keyword this in Function A refers to the arguments object. As this object does not have a property baz, Function A returns undefined. Since typeof undefined is "undefined", the return value of our snippet of code is "undefined".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

5)

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

Correct answer: "number".

The function f(f) {return typeof f();} is immediately invoked with the argument function(){ return 1; }.

The expression function f(f) {return typeof f();} is a named function expression. The first f (outside the parenthesis) is the name of the function, which is available within the function local scope. The second f (in the parenthesis) is just a parameter, which is also available within the function local scope.

So what does the f in the body of the function refer to?  There are two possible "candidates" for the value of f in this scope: function name f and the value of the parameter f, but of course f can refer to only one thing. In order to answer this question, one has to know where the function name is actually 'stored'.

I will quote a great article on named function expressions by the author of the Perfection Kills Quiz: "When named function expression is evaluated, a special object is created. The sole purpose of that object is to hold a property with the name corresponding to function identifier, and value corresponding to function itself. That object is then injected into the front of the current scope chain, and this 'augmented' scope chain is then used to initialize a function".

This means that the function name is an outer variable relative to the function local scope. The invoked function will first look for the variable f in its local scope, where this variable refers to the value of the parameter f.

Hence, f in the statement return typeof f(); refers to the argument of the invoked function. This argument is function(){ return 1; }.

Important note: if the function parameter had a different name, f in the function body would have referred to the function itself.

Now let's evaluate typeof f(). The f() is equal to the return value of the function function(){ return 1; }, which is 1. Then typeof f() equals typeof 1, i.e. "number".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

4)

var y = 1, x = y = typeof x;
x;

Correct answer: "undefined".

The '=' operator in JavaScript has right associativity, which means that x = y = typeof x is equivalent to x = (y = typeof x). First, the expression typeof x is evaluated. Since x has not been defined yet, typeof x evaluates to the string "undefined". After that, y is assigned the value of "undefined", and then x is assigned the same value. As a result, when the second line of code in this snippet is run, x has the value of "undefined" (a string).

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

3)

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

Correct answer: 1.

The line of code delete x; does not actually delete x, so the immediately invoked function returns the value of x, i.e. 1. To check whether the line delete x; deletes x, we can modify the code in the following way:

(function(x){
  console.log(delete x);
  return x;
})(1);

The logged value in this case is false, and delete only returns false if the property cannot be deleted.

The best explanation of why x is not deleted can be found here: http://perfectionkills.com/understanding-delete/. When a function is executed, its arguments become properties of the function's activation object: activation_object.x = 1. These properties have DontDelete attribute, hence they cannot be deleted.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

2)

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

Correct answer: error.

There are two common ways two define a function in JavaScript.

i) With a function expression that is assigned to a variable. In this case, one defines a variable that refers to a function:

var fun = function () {};

This line of code is an assignment statement, and function () {} is is an (unnamed) function expression.

ii) With a function declaration:

function fun() {};

The two methods are almost equivalent. The only difference is that function declaration is hoisting the function definition (moving it to the top of the current scope).

In the quiz question, the function is defined with an assignment statement and not declared. What makes this question tricky is that the assignment statement uses a named function expression function g(){ return 23; }. g is the function name, and it's only available in the scope of the function itself (see MDN article, Parameters section). Since the second line of code in the snippet (typeof g();) is outside of the function body, both g() and typeof g() return an error. The expression typeof g would have evaluated to "undefined".

A great discussion of named function expressions can be found in this article by Juriy "kangax" Zaytsev.

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.

Attention: spoilers ahead.

All the questions are structured in the same way. There is a snippet of code and one has to predict what it evaluates to.

1)

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

Correct answer: "object".

First of all, we see parentheses immediately after the function definition. This means that our function is immediately invoked, and our snippet of code returns the return value of the anonymous function, i.e. typeof arguments. 'arguments' is an array-like object of all arguments passed to a function. In our case, as no arguments are passed to the function (there is nothing in the last pair of parentheses), 'arguments' object looks like an empty array. The typeof operator with an array or an object returns the string "object".

All posts on Perfection Kills JavaScript quiz: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14.