Minified JavaScript Code
Minified JavaScript Code

A JavaScript Quiz — Explained.

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.

#14.

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

The with statement extends the scope chain for a statement.” — MDN

If you didn’t understand the with statement, see below.

“The use of with statement” from MDN, Screenshot
Example of with statement — Source: MDN

So we can think the question like this

(function(x, undefined)).length

So it evaluates the function’s length. But what does Function.length return?

The length property indicates the number of parameters expected by the function.” — MDN

In this case, The function expects 2 parameters. So the length property returns 2.

Finally: Thank You!

I hope you found this useful. Why does someone waste this much time on this story?
And don’t forget to comment your score.

If you have any questions to ask or any feedback on this story, please mention them in your comments. I’ll reply ASAP.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sahithyan

Sahithyan

Just a teen boy who likes Computers and Mathematics.