Void in single expression arrow functions

Question

I'm looking into the use cases for the good old void operator. One that I've seen mentioned is for preventing arrow functions from "leaking" their result, because of the way they're often written (see fn0 in example below).

So the argument is to use void to prevent such leaks in the cases you don't actually need the result (see fn2) but I don't really see what the difference is with just wrapping the statement in brackets (see fn1).

function doSomething(number) { return number + 1 }

const fn0 = () => doSomething(1)
const fn1 = () => { doSomething(1) }
const fn2 = () => void doSomething(1)

console.log(fn0()) // 2
console.log(fn1()) // undefined
console.log(fn2()) // undefined

Could someone explain to me what the differences are between fn1 and fn2? Does it do something different "under the hood"? Is it just a matter of convention / readability?

Answer 1

All that void does is:

The void operator evaluates the given expression and then returns undefined.

So, it's the same as returning undefined.

When you don't explicitly return anything from a function, undefined is returned by default. So there's no difference here.

Other equivalents:

function doSomething(number) { return number + 1 }

const fn1 = () => { doSomething(1) }
const fn2 = () => void doSomething(1)
const fn3 = () => {
  doSomething(1);
  return undefined;
}
function fn4() {
  doSomething(1);
}
function fn5() {
  return void doSomething(1);
}
function fn6() {
  doSomething(1);
  return void 'foo';
}

console.log(fn1()) // undefined
console.log(fn2()) // undefined
console.log(fn3()) // undefined
console.log(fn4()) // undefined
console.log(fn5()) // undefined
console.log(fn6()) // undefined

(note that the use of an arrow function vs a non-arrow function doesn't make a difference, except for the fact that arrow functions can lack {s, in which case they implicitly return the following expression, which may be undefined or not)

Answer 2

...but I don't really see what the difference is with just wrapping the statement in brackets...

There isn't any significant difference, both achieve the same result. Using void is just more characters and more obscure. :-)

Could someone explain to me what the differences are between fn1 and fn2? Does it do something different "under the hood"?

Not really. It takes a different path to the same destination, but in both cases the result of calling the functions is undefined. As you know, fn1 gets there by using a full function body (the {}), and fn2 gets there by applying the void operator, but there's no subtle difference lurking in there.

Answer 3

Maybe you need to change the view on void, because this can clearly show in the code, to throw away a return value from a function by using a call and omit the result of it.

For example, if you have

void someFunction();

you describe a pattern, which returns something and this result is not used in the code.

If you have just this

someFunction();

and the function returns something useful, the review of the code may mention the unused result of it.