{"id":338,"date":"2018-02-13T07:00:00","date_gmt":"2018-02-13T14:00:00","guid":{"rendered":"https:\/\/coreassistance.com\/tips\/?p=338"},"modified":"2018-02-21T14:07:52","modified_gmt":"2018-02-21T21:07:52","slug":"be-careful-with-code-formatting","status":"publish","type":"post","link":"https:\/\/coreassistance.com\/tips\/2018\/02\/13\/be-careful-with-code-formatting\/","title":{"rendered":"Be Careful with Code Formatting"},"content":{"rendered":"

Usually code formatting is a matter of personal preference, with no impact on how code actually works, but there are exceptions<\/strong>.<\/p>\n

Let’s start with this if statement:<\/p>\n

if (foo) {\r\n    \/\/ Do something if foo is true.\r\n} else {\r\n    \/\/ Do something else if foo is false.\r\n}<\/code><\/pre>\n
Some people prefer to format their code differently, and would write the if statement above like this:<\/p>\n
if (foo)\r\n{\r\n    \/\/ Do something if foo is true.\r\n}\r\nelse\r\n{\r\n    \/\/ Do something else if foo is false.\r\n}<\/code><\/pre>\n
So far, so good.  This code looks different, but it works exactly the same.<\/p>\n
Now let’s look at a function that returns an object:<\/p>\n
function foo() {\r\n    \/\/ Imagine some code here.\r\n\r\n    return {\r\n        property1: value1,\r\n        property2: value2\r\n    };\r\n}<\/code><\/pre>\n
Good times, no problems here.  But what if we try to format this differently, like before?<\/p>\n
function foo()\r\n{\r\n    \/\/ Imagine some code here.\r\n\r\n    return\r\n    {\r\n        property1: value1,\r\n        property2: value2\r\n    };\r\n}<\/code><\/pre>\n
Everything might look fine, but making these formatting changes actually broke the function!<\/strong>  Depending on where and how this code is run the foo()<\/code> function will either return undefined<\/code> or the code will refuse to run at all and throw a syntax error.<\/p>\n
Why?  It has to do with semicolons!<\/p>\n
Yes, you heard me correctly: semicolons!  As you may know, semicolons in JavaScript are (mostly) optional.  The reason they’re optional is that JavaScript parsers have a step called automatic semicolon insertion (ASI) which inserts semicolons for you.  The problem with the function as written above is, after the parser adds semicolons, you get this:<\/p>\n
return;\r\n{\r\n    property1: value1,\r\n    property2: value2\r\n};<\/code><\/pre>\n
So now you’ve got a return<\/code> statement with nothing attached, meaning one of two things will happen:<\/p>\n
    \n
  1. The function will return undefined<\/code> when it hits the return<\/code> statement and the code following it will never be run.<\/li>\n
  2. The parser will throw a syntax error when parsing the code because there’s an object hanging out down there doing nothing, and will refuse to even run the code in the first place.<\/li>\n<\/ol>\n
    This also applies to arrays.<\/strong>  This is okay:<\/p>\n
    return [\r\n    value1,\r\n    value2\r\n];<\/code><\/pre>\n
    But this is not:<\/p>\n
    return\r\n[\r\n    value1,\r\n    value2\r\n];<\/code><\/pre>\n
    So, regardless of how you format your code, watch out for situations like this.  Generally speaking, you’re fine formatting blocks and scopes however you wish; however, object and array literals may need to be treated differently depending on your preferred style.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Most of the time the way you format your code doesn’t matter.  Most of the time.<\/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":[12,11],"class_list":["post-338","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-submitted-to-freecodecamp","tag-unique-featured-image"],"_links":{"self":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/338","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=338"}],"version-history":[{"count":15,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"predecessor-version":[{"id":636,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/posts\/338\/revisions\/636"}],"wp:attachment":[{"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coreassistance.com\/tips\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}