Let's say we want to log obj
inside this .map()
function here:
const arr = [
{ val: 1 },
{ val: 2 },
{ val: 3 }
];
const nums = arr.map(obj => obj.val*2);
Well, dang! Now we have to convert this to a multi-line function, right?
const nums = arr.map(obj => {
console.log(obj);
return obj.val * 2;
});
Instead we can use the logical OR (||
) operator with console.log()
to short-circuit evaluate the return statement:
const nums = arr.map(obj => console.log(obj) || obj.val*2);
This works because console.log()
evaluates to undefined
so our OR (||
) opertator will evalutate the next operand which is the return portion of the function and will return the same result as the original example!
This is especially usefull with JSX where we commonly render components with implicit return statements:
export default function App() {
return (
<div>
<h2>Short-circuit Logging</h2>
<ul>
{nums.map((num) => console.log(num) || (
<li key={num}>{num}</li>
))}
</ul>
</div>
);
}
Huzzah! 😃
Yo! I post byte-sized tips like these often. Follow me if you crave more! 🍿
I'm on Twitter, TikTok and I have a new debugging course dropping soon!
Top comments (9)
You could also wrap your function with a logger wrapper function. Ending up with something like:
The function returned by your
logged
wrapper function would log inputs, outputs, whatever; as well as calling the passed function and returning its result. This way you could have consistent logging everywhere, and switch it off at a stroke just by modifying thelogged
functionI like this!
If you wanted them fully removed though, you would still need to do that. The wrapped versions of the functions will be slower than the originals
I think your third example won't work because in the first mapping console.log will not return anything, so you will have an array of undefineds for second map function. I might be wrong but I think it's going to be like this.
Yep, you can easily test this in the dev tools with
[1, 2, 3].map(console.log)
and it retuns an array of undefinedNice, the comma is the one I've always used
Care to explain more? Just to be clear, these logs are meant to be temporary for debugging purposes.
why console.log ?
set a breakpoint and monitor the variable in the developer tools...
console.log can be more convenient - it depends on the situation and your preferred debugging workflow.