How to use arrow function with || operator

Question

Using Babel, I can see that

 callback = () => {};

compiles to

callback = function callback() {};

which is what I expect. However I get an error when I try to use it with ||

callback = callback || () => {}

Which I'd expect to be equivalent to

 callback = callback || function(){};

Why is this an error? Also, is there a more correct ES6 version of this familiar syntax?

Answer 1

It fails because that is just not valid syntax.

Use the following to make it work:

callback = callback || (() => {})

If you don't wrap it that way, it would be interpreted as if you typed the following. But that is invalid syntax.

callback = (callback || ()) => {}

To extend on the evaluation of the assignment, see the specification of the AssignmentExpression. It consist of a ConditionalExpression or an ArrowFunction (or some other expressions I will disregard). So the interpreter will try to use your code as a conditional. But the () itself is not valid in that context as an expression is expected inside that ParenthesizedExpression. As a result, it will fail. If you instead group the expression as callback || (() => {}) both sides of the LogicalOrExpressions are valid expressions.

Answer 2

Due to operator precedence, you have to wrap the arrow function in parentheses to make it work:

callback = callback || (() => {})

Answer 3

If you're planning to use the || to provide a default value for the callback parameter to a function, it's easier to just write

function myfunc(callback = () => { }) {
  callback("Hi 1252748");
}

No extra parens needed.