This content originally appeared on DEV Community and was authored by JS Bits with Bill
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!
This content originally appeared on DEV Community and was authored by JS Bits with Bill
JS Bits with Bill | Sciencx (2021-11-10T21:24:48+00:00) Easy console.log() inside one liner functions. Retrieved from https://www.scien.cx/2021/11/10/easy-console-log-inside-one-liner-functions/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.