Arrow functions with implicit returns are an awesome, concise way to interact with data.
An example of an arrow function with implicit return
const sum = (a, b) => a + b;
Where an arrow function without an implicit return would look like this:
const sum = (a, b) => { return a + b; }
Very similar but in the first example, the return value of the function is inferred where in the latter, we're specifying the return statement of the function.
Logging in a standard function / arrow function is pretty straight-forward
const sum = (a, b) => {
console.log('HERE!');
return a + b;
}
But how do we accomplish this same thing in an arrow function with implicit return? Many times, developers convert the function with implicit return to a standard function but this isn't necessary.
A potential solution
We can take advantage of the fact that console.log is evaluated as falsy. This means that if we ran
if(console.log('someStatement')) {
// ...
} else {
...
}
We would encounter our else block every time. Using this knowledge, we can now update our arrow function with logging as follows:
const sum = (a, b) => console.log('A:', a, 'B:', b) || a + b;
Top comments (11)
Really nice!
And also, using an object into
console.logprints both the variable name and its value, like:console.log({a, b})Thank you! This is a really great point!
Ryan just informed me that TypeScript knows console.log is void function so you need to cast it to any.
Thanks again.
That's super clever! I log in functions like this all the time, but I add braces and convert to an explicit return
That's wicked smart
Great tip Ryan!
Thats nice share
Any suggestions on getting this approach to work in TS?
For Typescript, I think this is easier (a,b) => (console.log(a), a+b)
The comma will only return the last expression-
Very helpful but why does console.log evaluate to falsy and why does it still log when false?
really helpful