DEV Community

Cover image for Easy console.log() inside one liner functions
JS Bits Bill
JS Bits Bill

Posted on

Easy console.log() inside one liner functions

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);
Enter fullscreen mode Exit fullscreen mode

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;
});
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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 (12)

Collapse
 
loucyx profile image
Lou Cyx

Other alternatives:

array.map(item => console.log(item) ?? item.value * 2);
array.map(item => (console.log(item), item.value * 2));
array.map(console.log).map(({ value }) => value * 2);
Enter fullscreen mode Exit fullscreen mode

BTW, I saw the comment by other user that you hid, and it wasn't offensive or anything, so I don't get why you hid it if it was only discussing that for some folks this is still more readable:

array.map(item => {
    console.log(item);
    return item.value * 2;
});
Enter fullscreen mode Exit fullscreen mode

You should be open to those kind of discussions ^_^

Cheers!

Collapse
 
mfurkankaya profile image
Furkan KAYA • Edited

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.

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ

Yep, you can easily test this in the dev tools with [1, 2, 3].map(console.log) and it retuns an array of undefined

Thread Thread
 
loucyx profile image
Lou Cyx

Yup, my bad, I have a pick util this that logs and then returns the value and I used log here as I use that -_-

Collapse
 
sargalias profile image
Spyros Argalias

Nice, the comma is the one I've always used

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ • Edited

You could also wrap your function with a logger wrapper function. Ending up with something like:

nums.map(logged(num => <li key={num}>{num}</li>))
Enter fullscreen mode Exit fullscreen mode

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 the logged function

Collapse
 
js_bits_bill profile image
JS Bits Bill

I like this!

Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

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

Collapse
 
js_bits_bill profile image
JS Bits Bill

Care to explain more? Just to be clear, these logs are meant to be temporary for debugging purposes.

Collapse
 
frankwisniewski profile image
Frank Wisniewski

why console.log ?
set a breakpoint and monitor the variable in the developer tools...

Collapse
 
js_bits_bill profile image
JS Bits Bill

console.log can be more convenient - it depends on the situation and your preferred debugging workflow.