{"id":107,"date":"2007-07-30T11:32:05","date_gmt":"2007-07-30T01:32:05","guid":{"rendered":"http:\/\/www.thunderguy.com\/semicolon\/2007\/07\/30\/be-careful-with-javascript-variable-declarations\/"},"modified":"2007-07-30T11:32:05","modified_gmt":"2007-07-30T01:32:05","slug":"be-careful-with-javascript-variable-declarations","status":"publish","type":"post","link":"https:\/\/thunderguy.com\/semicolon\/2007\/07\/30\/be-careful-with-javascript-variable-declarations\/","title":{"rendered":"Be careful with JavaScript variable declarations"},"content":{"rendered":"

Make sure you declare all your JavaScript variables exactly<\/em> once. Otherwise it’s easy to introduce bugs that are hard to diagnose, especially if you’re used to programming in a C-like language such as Java, C++ or C#.<\/p>\n

Local variables in JavaScript are scoped to the function they are in, not to their containing block. This is different to C++, Java and similar languages. One of the consequences of this is that a var<\/code> statement by itself generally does nothing at all, unlike in C++, Java, etc. Here’s a contrived example.<\/p>\n

for (var i = 0; i < 5; ++i) {\r\n\tvar t;<\/span>\r\n\t\/\/ If i is even then set t to \"even\"\r\n\tif (i % 2 == 0) {\r\n\t\tt = \"even \";\r\n\t}\r\n\t\/\/ If t is not set then i must be odd\r\n\tif (!t) {\r\n\t\tt = \"odd \";\r\n\t}\r\n\tdocument.write(t);\r\n}<\/code><\/pre>\n
After one iteration, t<\/code> contains the value “even “. In the second iteration, a Java or C++ programmer might expect the var t<\/code> to initialise the variable t<\/code> again, so t<\/code> will subsequently end up with the value “odd “. But actually the var t<\/code> has no effect and t<\/code> always has the value “even “. The program above writes “even even even even even ” to the document.<\/p>\n
The fix is simple. Instead of an ineffectual var t<\/code>, use var t = null<\/code> to explicitly set the value of t<\/code>. In fact, you could follow Douglas Crockford’s JavaScript coding conventions<\/a>, which recommend:<\/p>\n
All variables should be declared before used. JavaScript does not require this, but doing so makes the program easier to read and makes it easier to detect undeclared variables that may become implied globals.<\/p>\n
The var statements should be the first statements in the function body.<\/p>\n
…<\/p>\n
JavaScript does not have block scope, so defining variables in blocks can confuse programmers who are experienced with other C family languages. Define all variables at the top of the function.<\/p><\/blockquote>\n
Following this recommendation, you’d write the following code, which produces “even odd even odd even ” in proper accordance with the laws of parity.<\/p>\n
var t;<\/span>\r\nvar i;<\/span>\r\nfor (i = 0; i < 5; ++i) {\r\n\tt = null;<\/span>\r\n\t\/\/ If i is even then set t to \"even\"\r\n\tif (i % 2 == 0) {\r\n\t\tt = \"even \";\r\n\t}\r\n\t\/\/ If t is not set then i must be odd\r\n\tif (!t) {\r\n\t\tt = \"odd \";\r\n\t}\r\n\tdocument.write(t);\r\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Make sure you declare all your JavaScript variables exactly once. Otherwise it’s easy to introduce bugs that are hard to diagnose, especially if you’re used to programming in a C-like language such as Java, C++ or C#. Local variables in JavaScript are scoped to the function they are in, not to their containing block. This […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[21],"class_list":["post-107","post","type-post","status-publish","format-standard","hentry","tag-javascript"],"_links":{"self":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/107","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/comments?post=107"}],"version-history":[{"count":0,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/posts\/107\/revisions"}],"wp:attachment":[{"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/media?parent=107"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/categories?post=107"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thunderguy.com\/semicolon\/wp-json\/wp\/v2\/tags?post=107"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}