How to log easily an arrow function in JavaScript and TypeScript

Glauco Pater
2 min readSep 8, 2019

How to debug JavasScript and TypeScript without touching (too much) the existing code

Arrows

Logging in JavaScript is pretty easy, and there a lot of editor helping the debug phase of your code, you can set a breakpoint or even better a conditional breakpoints in Chrome for example.

But sometimes you still want to log a parameter of a specific function arrow function. The problem is that the common approach requires to rewrite a part of your code as an arrow function implies that only the return value is inside the parentheses. Other instruction or assignment will break your code.

So for example if I have a function like:

const doubleValue= (x) => (2*x)

If I want to log the value of x before returning the value I need to adjust the code like:

The above example is a really trivial one, but what about something more specific, like logging a single property of an object?

const f = ({a,b,c}) => { console.log(a); return {a,b,c});

And what about another scenario like a functional component in React JS, in which the you want to inspect a certain prop and you have to fight again multiple curly braces?

Well I found a less painfull way that doesn’t involve any rewriting, just adding the console.log in the right way, well is a bit tricky to be honest

For the example aboves:

const doubleValue= (x) => !console.log(x) && (2*x)const f1 = ({ a, b, c }) => !console.log(a) && { a, b, c };

And in a React JS scenario:

const UserComponent = (props) => (
<h1>{`Hello ${props.name} ${props.surname}`}</h1>
);
const UserComponentWithLog = (props) =>
console.log(props) || <h1>{`Hello ${props.name} ${props.surname}`}</h1>;

So where is the magic? In order to let the normal flow of the execution going ahead, you need to add something always true, console.log() is a void instruction that when negated in js becomes truthy.

In the React JS example it is also very easy to chain a conditional rendering with the same trick without impacting other parts of the code.

The same examples in Codepen and in Codesanbox

Update: What about TypeScript?

In TypeScript the same condition will throw an error at compile time, as void cannot be together with a boolean. But you can easily add a small helper function like:

const cl = (o: any) => { console.log(o); return true; }

Then you can use it inside your code without changing the structure of your statements:

if (cl(data) && data) {
return <div>hello with data </div>
}

And this can be also used inside conditional rendering

{cl(props) && translateTitle(props.title)}

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Glauco Pater
Glauco Pater

Written by Glauco Pater

Berlin Expat, Engineering Manager and Tech Lead

No responses yet

Write a response