{"id":4109,"date":"2019-03-17T13:03:35","date_gmt":"2019-03-17T07:33:35","guid":{"rendered":"https:\/\/code4developers.com\/?p=4109"},"modified":"2019-03-10T23:45:36","modified_gmt":"2019-03-10T18:15:36","slug":"tap-for-quick-debugging","status":"publish","type":"post","link":"https:\/\/code4developers.com\/tap-for-quick-debugging\/","title":{"rendered":"Tap for quick debugging"},"content":{"rendered":"

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.<\/p>\n

function tap(x) {\r\n    console.log(x);\r\n    return x;\r\n}<\/pre>\n
Why would you use instead of good old\u00a0console.log<\/code>? Let me show you an example:<\/p>\n
bank_totals_by_client(bank_info(1, banks), table)\r\n            .filter(c => c.balance > 25000)\r\n            .sort((c1, c2) => c1.balance <= c2.balance ? 1 : -1 )\r\n            .map(c =>\r\n                 console.log(`${c.id} | ${c.tax_number} (${c.name}) => ${c.balance}`));<\/pre>\n
Now, suppose you\u2019re getting nothing from this chain (possibly an error). Where is it failing? Maybe\u00a0bank_info<\/code>\u00a0isn\u2019t returning anything, so we\u2019ll tap it:<\/p>\n
bank_totals_by_client(tap(bank_info(1, banks)), table)<\/pre>\n
Depending on our particular implementation, it might print something or not. I\u2019ll assume the information that we got from our tapping was correct and therefore, bank_info isn\u2019t causing anything.<\/p>\n
We must then move on to the next chain, filter.<\/p>\n
.filter(c => tap(c).balance > 25000)<\/pre>\n
Are we receiving any c\u2019s (clients actually)? If so, then bank_totals_by_client works alright. Maybe it\u2019s the condition within the filter?<\/p>\n
   .filter(c => tap(c.balance > 25000))<\/pre>\n
Ah! Sweet, we see nothing but\u00a0false<\/code>\u00a0printed, so there\u2019s no client with >25000, that\u2019s why the function was returning nothing.<\/p>\n
(Bonus) A more advanced tap.<\/h2>\n
function tap(x, fn = x => x) {\r\n    console.log(fn(x));\r\n    return x;\r\n}<\/pre>\n
Now we\u2019re talking about a more advanced beast, what if we wanted to perform a certain operation\u00a0prior<\/em>\u00a0to 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.<\/p>\n
tap(3, x => x + 2) === 3; \/\/ prints 5, but expression evaluates to true, why :-)?<\/pre>\n
If you want to improve Tap let your answer in comment section below.<\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":7,"featured_media":3127,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[2],"tags":[283,22,282,281,177],"powerkit_post_featured":[],"class_list":{"0":"post-4109","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-debugging","9":"tag-javascript","10":"tag-quick-debugging","11":"tag-tap","12":"tag-tips-and-tricks"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-14h","jetpack-related-posts":[{"id":3784,"url":"https:\/\/code4developers.com\/debugging-with-black-box-javascript\/","url_meta":{"origin":4109,"position":0},"title":"Debugging With Black Box – Javascript","author":"Arif Khoja","date":"July 23, 2018","format":false,"excerpt":"By the end of 2013 Firefox launched a tool\u00a0called Black Box to their browser inspector.\u00a0About a year later, Chrome did the same. If you need to carry out debugging in your code but don't know about black boxing scripts then you should definitely give this post a read. What is\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":7069,"url":"https:\/\/code4developers.com\/ways-to-use-generator-functions-in-javascript\/","url_meta":{"origin":4109,"position":1},"title":"Ways to use Generator Functions in JavaScript","author":"Arif Khoja","date":"May 15, 2020","format":false,"excerpt":"In this Article we will see below points Generator Functions Recap: Functions How does it work? 4 ways to use Generator Functions with Examples Advantages of using Generator function What are Generator Functions? Ever imagined what would happen if a function had an infinite input or output to deal with?\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"Functional-programming-js","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2020\/04\/avatar-js.png?fit=512%2C512&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2975,"url":"https:\/\/code4developers.com\/event-capturing-bubbling-javascript\/","url_meta":{"origin":4109,"position":2},"title":"Event Capturing and Bubbling in JavaScript","author":"Yatendrasinh Joddha","date":"July 21, 2017","format":false,"excerpt":"The DOM has two approaches for object to sense events: first is top down approach and second is bottom up approach. Top down approach is called event capturing\u00a0whereas bottom up is known as event bubbling. Let\u2019s start with example where you have one html which contains 
, 
 under 
,\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3106,"url":"https:\/\/code4developers.com\/javascript-template-literals\/","url_meta":{"origin":4109,"position":3},"title":"Javascript: What Are Template Literals?","author":"Arif Khoja","date":"September 30, 2017","format":false,"excerpt":"ES6 introduced two types of literals: Template Literals and Tagged Template Literals to tag Template Literals. In this post, we cover both of them in depth! In ES6, two types of literals were introduced: Template Literals for string concatenation and expression embedding in a string Tagged Template Literals to tag\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/06\/thumb-1-e1498942297714.png?fit=240%2C269&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3321,"url":"https:\/\/code4developers.com\/spread-syntax-in-javascript\/","url_meta":{"origin":4109,"position":4},"title":"Spread syntax (three dots) in JavaScript","author":"Yatendrasinh Joddha","date":"March 21, 2018","format":false,"excerpt":"Spread syntax which is used by typing three dots (...) in JavaScript. It allows an array expression or string or anything which can be iterating to be expanded in places where zero or more arguments for function calls\u00a0or elements for array are expected. It can also be used for an\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":3174,"url":"https:\/\/code4developers.com\/for-of-loop\/","url_meta":{"origin":4109,"position":5},"title":"For-of Loop","author":"Arif Khoja","date":"December 25, 2017","format":false,"excerpt":"For of loop is one of a few recent additions to the for loop in JavaScript. It makes it possible to do what is basically a foreach in most other programming languages, like for example C#. for(var item of array){} is more or less the same as foreach(var item in\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/4109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=4109"}],"version-history":[{"count":1,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/4109\/revisions"}],"predecessor-version":[{"id":4110,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/4109\/revisions\/4110"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3127"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=4109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=4109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=4109"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=4109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}