es6 箭头函数调试器语句

Question

If I have a function like that:

param => params + 1

and I need to put a debugger statement inside the function's body. Is adding parenthesis like this:

param => { debugger; return params + 1 }

the only option?

Answer 1

From the MDN article on arrow functions:

 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression 

You can see that the brace-less syntax requires the code on the right of the arrow to be an expression , which is an (unfortunate) distinction made by the language itself.

Since debugger is a statement, using it anywhere an expression is expected is a syntax error. One thing you could to to work around this is to transform your debugger statement in an expression which you trick JavaScript into evaluating but not returning, eg:

function debug(args) {
     debugger;
     return true;
}

params => debug() && params + 1

// or

params => console.log(params) || params + 1

The way this works is that because of the way logical operators function in JavaScript, this is true:

truthyA && B  === B

falsyA || B === B

When chaining logical operators, JavaScript evaluates sub-expressions left to right and then act depending on their boolean equivalent. That's why you'll sometimes see && used in place of if statements:

 if (smth) doStuff();
 // is equivalent to:
 smth && doStuff();

Answer 2

Use console.log with a logical OR operator. This writes the arguments to the console.

const add = (x, y) => console.log(x, y) || x + y;

Answer 3

This is another way to do it, which doesn't require defining a function:

(() => { debugger; })()

It is a self invoking arrow function that calls the debugger statement, and it is also an expression.

So in your code you could use:

param => (() => { debugger; })() && params + 1

It's a bit harder to type, but does the trick anywhere an expression is expected.

Note that if you want params + 1 to also be executed (eg continue after debug statement) you have to return true from the function:

(() => { debugger; return true })()

Answer 4

have not found decent fat arrow function inline debugger injection yet. Option:

 ()=>console.log(9)?? (()=>{debugger} )() ?? console.log(0) 

console is a stub of any code. (()=>{debugger} )() seems only way to make debugger inline. In your case:

param => (()=>{debugger} )() ?? params + 1