Why this behavior for javascript code?

Question

Recently one of my friends asked me the output of following code

var length = 10;

function fn() {
    console.log(this.length);
}

var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

obj.method(fn, 1);

I thought the answer would be 10 10 but surprisingly for second call i.e. arguments[0](); the value comes out to be 2 which is length of the arguments passed. In other words it seems arguments[0](); has been converted into fn.call(arguments);.

Why this behavior? Is there a link/resource for such a behavior?

Answer 1

The difference is because of the this context of each method call.

In the first instance, because the call is merely fn();, the this context is Window. The var length = 10; variable declaration at the top happens in the root/Window context, so window.length should be 10, hence the 10 in the console from the first function call.

Because arguments is not an array but is actually an Object of type Arguments, calling arguments[0]() means that the this context of the function call will be of the parent Object, so this.length is equivalent to arguments.length, hence the 2 (since there are 2 arguments). (See @Travis J's answer for a more thorough explanation of this part.)

If you were to add

this.fn = fn;
this.fn();

to the method() function, the result would be 5.

Answer 2

It is due to how this works within the various scopes in which it is referenced.

Notice the outputs of the this.toString() and you will see what the referenced target is.

Starting with calling the function f directly from the Window, this will reference Window and thus the length will be Window.length which has been declared to be 10.

Moving on to if we assign f directly as a method of obj, then this would reference obj and thus the length will be obj.length which has been declared to be 5.

Where it gets interesting/confusing is when you pass in f as a parameter to function method of obj.

NOTE: The outcome here will be browser specific. Run it in Safari and Chrome and observe the different outputs.

On both browsers: arguments[0]() is pseudo equivalent to arguments.0() (although not syntacticly allowed for arguments) which is exactly the same behavior observed earlier with obj.fn() which means arguments is the reference target. Which as noticed is the number of arguments passed to obj.method.

The execution of fn inside of method is how a callback function works for which you can find a more expansive answer here.

var length = 10;

function f() {
    console.log(this.toString());
    console.log(this.length);
}

var obj = {
  length: 5,
  fn: f,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};

f()
f(1);
obj.fn();
obj.fn(1);
obj.method(f, 1);
obj.method(f, 1, 2);

Answer 3

@musicnothing is fully correct, the this binding is different between the two different calls to fn.

However, there still seems to be some confusion as to the reasoning for why arguments is now the this target which I will address.

this^MDN bindings are held inside of Execution Contexts^ECMA, which are essentially what manages scope in JavaScript.

When a function is called, an arguments object is constructed. The arguments object has its own Execution Context, which means it has its own this binding, its own Variable Environment, and its own Lexical Environment. When constructed, the arguments object values are stored in its Variable Environment, making any references from that point relative to the arguments object's Execution Context.

By design, the arguments object is array-like, which basically means it agrees to have a length property, and more vaguely that accessing an index which is less than the length property should have a value. As a result you can access its value references with indexes through a facade, however, it is important to keep in mind where they are scoped to at that point.

Answer 4

Answer is 10 ,2 due to different values of "this".

1. when fn() called , that time this will refer window object . and in window object length is a property which value is 10.
2. when arguments0 called , this refers method . where method is a function and every function have a length property which value is number of parameters passed at the time of call.