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