java-script arrow function returns (x++,x)

Question

i don't know how the code:const countFrom = x => () => (x++, x); from here, works:

const countFrom = x => () => (x++, x);
let a = countFrom(1)

console.log('output:', a()) // output: 2
console.log('output:', a()) // output: 3
console.log('output:', a()) // output: 4
console.log('output:', a()) // output: 5

.as-console-wrapper {min-height: 100%!important; top: 0;}

This is just comma operator. It evaluates each of its operands from left to right and returns the value of the last operand. — Alex, Apr 25 '20 at 19:25
`countFrom` receives `x` as an argument and then returns a closure that when called increments x and returns its value. `(x++, x)` is just shorthand for `{ x++; return x; }` — Đinh Carabus, Apr 25 '20 at 19:27

score 4 · Accepted Answer · answered Apr 25 '20 at 19:27

4

x is a variable inside the outer (x =>) function, therefore all inner functions (() => (x++, x)) share the same variable. x++ post increments that variable whenever the inner function executes. The comma operator (..., x) evaluates to the last comma seperated expression, x in this case.

It is maybe easier to understand without the comma operator:

 const counter = x => () => x = x + 1;

answered Apr 25 '20 at 19:27

Jonas Wilms

132,000
20
149
151

1

I wonder why nobody has mentioned `const counter = x => () => ++x;` yet… – Bergi Apr 25 '20 at 19:39
@bergi yeah, thought that `x = x + 1` was easier to understand, would've chosen `++x` if I'd write it for myself though – Jonas Wilms Apr 25 '20 at 19:41
@Bergi yes that is better – Babak Karimi Asl Apr 25 '20 at 20:19

score 1 · Answer 2 · answered Apr 25 '20 at 19:31

//const countFrom = x => () => (x++, x);
//Lets refactor the code a bit:

function countFrom(x){
return function(){
x++;
return x;
}
}

let a = countFrom(1)
//now a is the returned function at line 5, and x is stored as a local variable.
console.log('output:', a()) // output: 2 you call the function at line 5 so it adds 1 to x and returns it

.as-console-wrapper {min-height: 100%!important; top: 0;}

score 0 · Answer 3 · answered Apr 25 '20 at 19:36

It's quite simple if you understand some aspects:

You have got two functions in the first line, not only one: the first one returns the second function ()=> (x++,x) (see what closure is)
Inside round bracket you see comma operator and the result of the statement is the last operand of the comma operator (here x),
The round bracket works like return x, that is => (x) is the same as => return x

java-script arrow function returns (x++,x)

3 Answers3

Related