loading...
Cover image for Quick tip: How to console.log in implicitly returned arrow functions

Quick tip: How to console.log in implicitly returned arrow functions

ryanlanciaux profile image Ryan Lanciaux ・1 min read

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;

Posted on by:

ryanlanciaux profile

Ryan Lanciaux

@ryanlanciaux

Hi πŸ‘‹ I'm Ryan Lanciaux. I love web and mobile application development. I live in Ann Arbor with my wonderful family. In my freetime, I create electronic music.

Discussion

pic
Editor guide
 

Really nice!

And also, using an object into console.log prints 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.

(console.log({a,b}) as any) || a + b;

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

 

Very helpful but why does console.log evaluate to falsy and why does it still log when false?