A JavaScript Quiz — Explained.

6 min readMay 14, 2020

This story will explain to you the 14 questions that appeared in the quiz http://perfectionkills.com/javascript-quiz/.

Do the quiz first (comment your score). Then read this story. And also, you can find an improved version of this story on my new blog at sahithyandev.github.io

#1

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

Here, an IIFE (Immediately-invoked Function Expression) is defined. IIFE means, the function will invoke immediately.

“arguments” is an array that holds all the arguments of the function. In this case, the function returns typeof arguments. Everyone knows it, Type of an array is “object”.

#2

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

Here, a variable named f is defined. And its value is set to a function g. We have to note one thing. g is defined but then assigned to f. So, g is undefined now.

So running g() will throw an error.

#3.

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

Here, again we encounter another IIFE. In this function, the “delete” keyword is used with the parameter x. But
“delete is only effective on an object’s properties.” — MDN

So, the “delete” operator stays silent here and 1 is returned as x’s value.

#4.

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

Here, y is defined and set to 1. Then x, y is set to the type of x. It is executed from right to left. That means x is undefined in the “typeof x” statement. So typeof undefined is “undefined” and that will be set to x and y. So at last, x’s value is “undefined”

#5. (My favorite one)

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

Here, another IIFE. A function named f is defined. the function f expects a parameter named f. To avoid confusion, I will call the function f as “$f” and the parameter f as “_f”. Then at the second line, the function is returning the typeof f().

But, What does f() mean? $f or _f ?. JavaScript first looks at the local scope for the specified variable, if it couldn’t find it, then it looks in the parent scope and continues until it finds the variable. If it couldn’t then looks up until the global scope.

So in this case, javascript looks first in the local scope. The local scope is inside $f. But hopefully inside $f, there is a variable named f (_f). So it calls _f.

In this case, _f is equal to function() { return 1; }. See, _f() is 1. So typeof _f() is “number”.

#6.

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

IIFE again. Here a variable named foo is defined and set to { bar: function() { return this.baz ;}, baz: 1}.

foo has 2 keys “bar” & “baz”. “bar” is set to function() { return this.baz }. “baz” is set to 1. In short, “baz” is 1. “bar” is a function that returns “baz”. (if it’s not short, sorry).

Then comes the IIFE. The function returns the type of the value returned by its (first argument) function. The first argument is foo.bar. foo.bar returns this.baz. But in this function, “this” (referred in foo.bar) is overridden with the function. So this.baz becomes undefined. And typeof undefined is “undefined”.

#7.

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

This question is also like the previous one. foo is defined with the same value as of #6. But we want to find the answer for typeof (f = foo.bar)().

Here, a variable named f gets defined and set to foo.bar. Then f gets executed. f is now equal to function() { return this.baz; }. Again “this” gets overridden and this.baz becomes undefined. So again, the typeof undefined is “undefined”.

#8.

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

The comma operator is used here. Don’t know what a comma operator is? Read this. After reading, can you please tell me “What is the purpose of comma operator?”

“The comma operator (,) evaluates each of its operands (from left to right) and returns the value of the last operand. This lets you create a compound expression in which multiple expressions are evaluated, with the compound expression's final value being the value of the rightmost of its member expressions. This is commonly used to provide multiple parameters to a for loop.” — MDN.

As of MDN’s statement, the comma operator evaluates each operand and returns the rightmost value. In this case, g is the rightmost value. So the value of the variable f is the return value of function g. g returns 2. So f is 2. Therefore typeof f is “number”.

#9.

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

In this question, a variable “x” is defined and set to 1. Then “function f() {}” is checked with an if condition. And, inside the if condition, we are adding typeof f to x.

First, we need to find whether “function f() {}” is true or false.

“In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, -0, 0n, "", null, undefined, and NaN).” — MDN.

So it is true. If it’s true, we have to add typeof f to x. But f is defined inside the if condition, that means, f will be changed to boolean. So the typeof f is “undefined” now. Now x’s value is “1undefined”.

#10. (Easiest, my opinion)

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

In the first line, “x” is defined and assigned to [typeof x, typeof y][1]. So it means x gets the value of typeof y. because it is the 2nd element of the array. But y is not defined, means typeof y is “undefined”.

In the second line, typeof typeof x is evaluated. x is “undefined”. So “typeof x” is “string”. So “typeof typeof x” is again “string”.

#11.

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

Another IIFE. This function expects one parameter named “foo” and returns “typeof foo.bar”.
The function is invoked with { foo: { bar: 1 }} as the argument.

Now the function should return the “bar” property of the first argument. But the first argument doesn’t have the “bar” property. So it’s undefined. Therefore the return value is “undefined”.

#12.

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

IIFE again. Here a function named “f” is defined. Inside the function, two functions are defined with the same name “f”. The first function returns 1. The second function returns 2.

And the parent “f” function returns the child “f” function’s return value. But 1 or 2?. To understand this, You have to know Function Hoisting.

“Function declarations in JavaScript are hoisted to the top of the enclosing function or global scope.” — MDN.

So the second “f” function gets hoisted to the top of the enclosing function but under the existing functions. Then the first “f” function is overridden by the second “f” function. So “f()” will return 2.

#13.

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

“The instanceof operator tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object.” — MDN.

I didn’t understand it. Explain it to me, please.