Skip to main content
App management icon

This post is from the Apperian blog and has not been updated since the original publish date.

Last Updated Apr 27, 2011 — App Management expert

Common Javascript and jQuery Mistakes

App Management

Javascript and jQuery can be tricky. Here is some advice to avoid common pitfalls.

Missing Semicolons
Javascript will automatically insert semicolons at the end of any line, so not including them isn't necessarily 'wrong'. However, for code maintainability and debugging they should always be included. Also, you cannot minify Javascript without including semicolons, which is desirable for reducing file size and code obfuscation.



Braces on new lines
In K&R style coding, braces begin on a new line, such as:

function foo(param)
{
//Code...
}


However, this is bad practice in Javascript, such as in the following example:

return
{
'firstname' : 'James',
'score' : 150
}


This looks like the function is returning JSON, but Javascript's auto-insertion of semicolons means that it isn't returning anything! The 'return' command terminates immediately, and the JSON is ignored. For this reason, it's good practice to put the opening brace on the same line as the preceding code, in every situation:

return {
'firstname' : 'James',
'score' : 150
}



Hiding Elements
CSS has two values you can use for hiding elements, 'visibility' and 'display'. The difference is that 'display' can be used to completely hide an element and the space it contains, while 'visibility' keeps the space but appears invisible. When most people hide elements, they mean completely removing the space, which can be accomplished dynamically using jQuery:

$('#id_name').css('display', 'none');

It's easier to use a built in jQuery function for hiding and showing elements:

$('#id_name').hide();
$('#id_name').show();

Toggle can be used to flip the visibility state of the object if you don't care about being precise:

$('#id_name').toggle();


Variable Scope
It's quite easy to get confused by the 'this' keyword, which references the current scope. Without delving too deeply, using 'this' can cause a wide variety of unintended consequences if the current scope is misunderstood. If you want to read further, read up on the 'apply' Javascript function, which lets you manually set what scope 'this' refers to.

If you want a quick fix, manually set a variable to 'this', and you can be confident that it's referencing the correct scope. For example:

this.Name = 'James';
this.Score = 150;
personThis = this;

this.getScore = function() {
this.Score = 200;
return personThis.Score; // returns 150
}


If we had returned this.Score in the getScore() function, 200 would have been returned, which would be wrong if we want James' score. We set 'this' to a specific variable so we don't get confused as to what scope 'this' references.


That's it for now, next week we will discuss more mistakes and focus on common AJAX errors.

More from the Blog

View more
Apr 30, 2020

Mobile Application Management: A Forward View

App Management
  IT Is Adapting in the Midst of the COVID-19 Pandemic The Coron ...
Read More
May 19, 2019

Sneak Peek: How Are IT Leaders Driving Mobile App Adoption?

App Management
Apperian conducted the The Mobile Enterprise Application Survey to fin ...
Read More
Jan 30, 2019

Part 1: App Security Should Be an Integral Part of Your DevSecOps Process — Not an Afterthought

Application Security
What are the key considerations and components of DevSecOps? The in ...
Read More
Nov 19, 2018

Breaking Down the New California IoT Law

Application Security
Recently California passed legislation regarding the security of all I ...
Read More
Contact Us