{"id":647,"date":"2018-03-13T07:00:00","date_gmt":"2018-03-13T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=647"},"modified":"2018-03-12T21:35:56","modified_gmt":"2018-03-13T04:35:56","slug":"dont-write-magic-hard-to-understand-code","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/03\/13\/dont-write-magic-hard-to-understand-code\/","title":{"rendered":"Don’t Write Magic, Hard-to-Understand Code"},"content":{"rendered":"

Take a look at this:<\/p>\n

var string = '42';\r\nvar foo = +string;<\/code><\/pre>\n
Do you know what that second line does?  Do you know what foo<\/code> will contain when this code is run?  Chances are you don’t, even if you’re a seasoned JavaScript developer.<\/p>\n
This is an example of what many refer to as “a neat hack” or “a bit of magic.”  I, on the other hand, refer to this as “hard to read and understand.”<\/p>\n
That second line above takes advantage of how the +<\/code> operator works in JavaScript to cast the content of the string<\/code> variable to a number.  Thus, foo<\/code> now contains the number 42<\/code> instead of the string '42'<\/code>.<\/p>\n
Still find that code hard to understand even after I explained it?  I don’t blame you.<\/p>\n
Compare the code above to the following:<\/p>\n
var string = '42';\r\nvar foo = Number(string);<\/code><\/pre>\n
This code does the exact same thing, but it omits confusion and embraces clarity.  It doesn’t depend on the reader having obscure knowledge of the esoteric behaviors of JavaScript.  It’s readable<\/em> and understandable<\/em>.<\/p>\n
Here’s another example:<\/p>\n
var string = 'hello';\r\nvar foo = !!string;<\/code><\/pre>\n
What?  What’s foo<\/code> now?<\/p>\n
This code casts the value of the string<\/code> variable as a boolean and sets foo<\/code> to true<\/code>.  I’ve been using JavaScript for years and years, but if I came across this code I’d have no idea what it did without looking it up.  This technique might be a fun intellectual curiosity, but it should never be used in practice.<\/p>\n
Examine this alternative:<\/p>\n
var string = 'hello';\r\nvar foo = string ? true : false;<\/code><\/pre>\n
This reads almost like a sentence.  If string<\/code> is truthy, set foo<\/code> to true<\/code>, otherwise set foo<\/code> to false<\/code>.  Easy to read, easy to understand; the hallmark of great code.<\/p>\n
It can be tempting to show off a neat trick you just learned, or show how deep your knowledge of a programming language goes.  Doing that, however, is just going to come back to haunt you.  Future You is unlikely to remember this stuff unless you use it constantly, and the vast majority of other developers won’t appreciate it.  Most will see an annoying hurdle standing between them and understanding the code, not a nifty trick that will save them a few keystrokes.<\/p>\n
Avoid temptation.  Write code that’s easy to read and easy to understand.<\/p>\n","protected":false},"excerpt":{"rendered":"
Neat code tricks can be tempting to use, but today’s tip explains why you should put clarity first.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-647","post","type-post","status-publish","format-standard","hentry","category-javascript"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/comments?post=647"}],"version-history":[{"count":14,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/647\/revisions"}],"predecessor-version":[{"id":714,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/647\/revisions\/714"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}