Q:

No binding of arguments in JavaScript

Can anyone please explain me the behavior of this code?       
var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = (i) => arguments[0] + i; // foo's implicit arguments binding
  return f(2);
}

foo(1); // 3       

I know what implicit arguments binding is.         

What I don't understand is how foo(1) is returning 3?
What does return f(2) does? As in which function it calls?      

PS: I'm following this Mozilla docs.

A:

To make this a little clearer for you I'll re-write it as ES5
function foo(){
   var arg1 = arguments[0]; // argument is 1 in your example
   var f = function(i) {
      return arg1 + i; // i is 2 in your example
   };
   return f(2); // returns 3
}

foo(1); // sets argument to 1 and returns 3

In ES6 arrow functions do not have an arguments property like standard functions. You're accessing the foo function arguments array like object. As the first argument you passed in is 1, the arrow function accesses the foo function arguments object and retrieves the first value within the arrow function.

