Load Values on Implicit JavaScript Arrow Function Returns
Using console.log() in arrow functions with implicit returns is usually a huge pain as you need to add curly bracers every time you want to peek at something before returning it. JavaScript short circuit OR operator makes it seamless and easy to place some logs on-demand where you need them.
Dimitri Ivashchuk: [00:00] The second case is the one that I'm using probably the most frequent. It's used to log values on implicit arrow function returns. Let's try to write some arrFunc. You see it accepts a num and implicitly returns num + 5.
[00:23] Let's call the function with 5. Let's say we want to, before adding the value, to see what was the number that we have passed. It gets more complicated if we're doing this for mapping the objects which have lots of values. Sometimes we want to see which values they have, but you still want to use implicit return to make your code more concise.
[00:59] In this particular case, what we would need to do is to add the curly braces and return num + 5. Before that, we would log the number. You see that we now know what number we passed, so we could change it to 1 or 6, but for this, we need to rewrite our function.
[01:30] Within the larger functions, it gets pretty messy to do that, so implicit return functions with short-circuits to the rescue. We have the same num + 5, but we add a number here and use || operator. You don't see anything here because this is a JavaScript scratchpad with Quokka, but in the output, you should see that it displays our value that we have passed to it.
[02:06] To confirm that it works, we change it to 10, and see that it has logged 10. In your browser, it would also work completely fine.