about javascript arrow function expression

Question

I am Korean, so I hope you could understand it with my awkward English skills

I am studying arrow function expressions

and here is my question with source code

var arguments = [1, 2, 3];
var arr = () => arguments[0];

console.log(
  arr()
)


function foo(n){
  var f = () => arguments[0] + n
  console.log(arguments[0]) //5
  console.log("----arguments[0]")
  return f();
}
console.log(
  foo(5)
)

console.log("---------------------")

function fooo(n){
  var f = (...arguments) => arguments[0] + n
  console.log(...arguments) //5
  console.log("----...arguments")
  return f(2);
}

console.log(
  fooo(5)
)

I don't get why the second function's console.log = 10 and third function's = 7 can anyone explain to me the order code process and why that output is? thank you.

arguments in f in the second one refers to the arguments of foo ... arguments in f the third one refers arguments to f ... first one clearly returns 5 + 5, third is 5 + 2 — Bravo
– Bravo, Commented Jul 26, 2021 at 5:09

Charlie · Accepted Answer · 2021-07-26 05:22:14Z

2

In JS, every conventional function has a built-in object called arguments. However, Arrow functions do not have this built-in object. So, if referred to arguments from within an Arrow function, the reference automatically goes to any external variable declared by that name.

The result you see is due to this effect. In regular function calls. your reference to the arguments global variable actually refers to their in-built arguments object.

The following code demonstrates this effect.

let arguments = 'this is a string';

function argumentsTest() {
   console.log(arguments);
}


let argumentsArrowTest = () => {
   console.log(arguments);
}


argumentsTest(10);        //{0: 10}
argumentsArrowTest(10);   // this is a string

answered Jul 26, 2021 at 5:22

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

김진석 Over a year ago

thank you a lot for replying my question!

CertainPerformance · Accepted Answer · 2021-07-26 05:12:55Z

In an arrow function, arguments, like this, will refer to either

an outer identifier named arguments (though it's very unusual to call a variable arguments due to name collision), or
the arguments provided to a full-fledged function

whichever is closer, lexically.

In foo,

var f = () => arguments[0] + n

is an arrow function, so arguments refers to an outer binding. The outer environment is

function foo(n){
  var f = () => arguments[0] + n

so arguments refers to the arguments provided to foo. Here, it's similar to doing

function foo(n){
  const theArguments = [n];
  var f = () => theArguments[0] + n

And since the argument passed to foo is 5, that plus n (the same argument) is 10.

In the third function, the same logic applies. Inside an arrow function, arguments refers to the closest identifier named arguments, or the closest function. Here, it's the parameters:

var f = (...arguments) => arguments[0] + n

Since f is called with a single argument, this simplifies to

var f = (arg) => arg + n

That argument is 2, and the n is what's passed to fooo, which is 5. Add them together, you get 7.

Collectives™ on Stack Overflow

about javascript arrow function expression

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related