Useful JS Tips

#65 - Tapping for quick debugging

2017-03-16 by @loverajoel

This little beastie here is tap. A really useful function for quick-debugging chains of function calls, anonymous functions and, actually, whatever you just want to print.

function tap(x) {
    console.log(x);
    return x;
}

Why would you use instead of good old console.log? Let me show you an example:

bank_totals_by_client(bank_info(1, banks), table)
            .filter(c => c.balance > 25000)
            .sort((c1, c2) => c1.balance <= c2.balance ? 1 : -1 )
            .map(c =>
                 console.log(`${c.id} | ${c.tax_number} (${c.name}) => ${c.balance}`));

Now, suppose you’re getting nothing from this chain (possibly an error). Where is it failing? Maybe bank_info isn’t returning anything, so we’ll tap it:

bank_totals_by_client(tap(bank_info(1, banks)), table)

Depending on our particular implementation, it might print something or not. I’ll assume the information that we got from our tapping was correct and therefore, bank_info isn’t causing anything.

We must then move on to the next chain, filter.

            .filter(c => tap(c).balance > 25000)

Are we receiving any c’s (clients actually)? If so, then bank_totals_by_client works alright. Maybe it’s the condition within the filter?

            .filter(c => tap(c.balance > 25000))

Ah! Sweet, we see nothing but false printed, so there’s no client with >25000, that’s why the function was returning nothing.

(Bonus) A more advanced tap.

function tap(x, fn = x => x) {
    console.log(fn(x));
    return x;
}

Now we’re talking about a more advanced beast, what if we wanted to perform a certain operation prior to tapping? i.e, we want to access a certain object property, perform a logical operation, etc. with our tapped object? Then we call old good tap with an extra argument, a function to be applied at the moment of tapping.

tap(3, x => x + 2) === 3; // prints 5, but expression evaluates to true, why :-)?
<<返回目录