1024px-Flatirons_Winter_Sunrise_edit_2

This is the second post in a multi-part series covering common mistakes C# developers tend to make when they first start writing JavaScript.

The first post covered the following topics:

  • 1. Having Variables & Functions in Global Scope
  • 2. Not Declaring Arrays & Objects Correctly

Introduction

This post continues to focus on areas where C# developers tend to make poor decisions when writing JavaScript based on their previous training. The languages are syntactically similar enough that C# developers tend to not invest the time to learn JavaScript’s differences.

The following post points out several misunderstandings that can get you into some confusing situations.


[cta id=”3166″ align=”none”]

More Bad Practices

3. Not Understanding False-y Values

Unlike C# there are many values that JavaScript has that act false-y. Inside an if statement truth-y values will proceed into the then branch and false-y values will drop into the else branch. It is important to understand these special false-y values not only when writing your code, but when trying to understand other people’s code.

The False-y values are:

[js] false
null
undefined
“” (empty string)
0
NaN (not a number)
[/js]

All other values that aren’t listed in the above list will be considered truth-y (including all objects, the strings “0”, “false”, and many other strange combinations).

Best Practice

When it comes to understanding the outcome of a logical statement, you should know the false-y values in JavaScript. Since these rules are considerably different than C#, you should take the time to understand them.

We will examine the implications of knowing these false-y values a little further in the next few sections.

4. Not Testing & Setting Default Values Correctly

You can easily spot a C# developer if you see them checking for null inside of an if statement or when setting a default value.

[cta id=”3166″ align=”none”]

Checking for Null

It is common and considered a best practice in C# to check for null before using a variable. If you don’t, then you might fall victim to the dreaded “Object reference not set to an instance of an object” exception. Also, when dealing with strings you’ll also want to test if it is empty or not. The following code snippet is a typical way to do this in C#.

[js] // C# example. Don’t do this in JavaScript
if ( someString != null &&
someString.length > 0 ) {
//Do something here…
}
[/js]

In fact, the above code snippet is such a common practice that there is a special IsNullOrEmpty method in the .NET framework to help simplify this case.

[js] // C# code to simplify checking for null and empty string
if ( !string.IsNullOrEmpty(someString) ) {
//Do something here…
}
[/js]

As it turns out, when considering the JavaScript false-y values, you can shorten all this logic to the following code snippet. The following code snippets checks to see if the variable is not undefined, not null, and is not empty.

[js] // Simplified JavaScript syntax to check for
// undefined, null, & empty string values
if ( someString ) {
//Do something here…
}
[/js]

As a side note, the above someString variable is more likely to be undefined than it is null due to variable hoisting, but thanks to false-y values that is being checked.

Setting A Default Value

Another common scenario you’ll run into is setting a default value to a variable. In C#, you might be be tempted to write some code like the following.

[js] // C# example. Don’t do this in JavaScript
if ( someString == null ) {
someString = “default Value”;
}

// Slightly better, but don’t do this either
someString = someString ? someString : “default value”;
[/js]

Instead, there is a much simpler way to perform this in JavaScript that uses the logic or operator.

[js] // JavaScript syntax to set a default value
someString = someString || “default value”;
[/js]

Best Practice

Based on the false-y rules we learned earlier, if we want to check if a variable is undefined, not null, and has a value then all we need to do is check the object itself.

5. Using the Wrong Comparison Operators

Knowing that JavaScript is loosely typed and having the False-y values fresh in our mind from the previous section, let’s focus now on common mistakes when using the comparison operator.

Coming from C# you will intuitively use the == and != in your if statements, however, this may yield some results that you didn’t expect.

Problems When Using == or != Comparison Operators

When using the == and != comparison operators, JavaScript tries to help you by coercing the two values into the same type so that it can compare them. This sounds like a good idea, but in the end it can lead to some very confusing results. Check out the following for some of these unexpected results.

[js] // Unexpected Comparisons using the == Operator
0 == ” //true
0 == ‘0’ //true
false == ‘0’ //true
null == undefined //true
‘ trn ‘ == 0 //true
[/js]

You Should Use the === or !== Instead

A better way to compare is to use the === and !== operators (also known at the identify operators), which are much more rigorous. They will not only check the value, but also check the type as well. The results of these comparisons are probably more what you would expect in a strongly typed language. The following code uses the same comparison as the above example, but uses the identify operator instead.

[js] // Expected Comparisons using the === Operator
0 === ” //false
0 === ‘0’ //false
false === ‘0’ //false
null === undefined //false
‘ trn ‘ === 0 //false
[/js]

Best Practice

When you are comparing two values in JavaScript you should use the Identify Comparison Operators (=== & !==).

6. Not Using the for…in Statement Correctly

For those of you who regularly write C#, you probably don’t use the classic for loop much, but use the for…in loop instead. If you aren’t careful this can byte you in several different ways.

Using the for…in Statement on Arrays

You may see the for…in statement used to iterate over arrays, but don’t! You can get into some weird issues. You should instead use the for statement when looping over arrays.

The for…in statement does not guarantee the order of the items that are going to be retrieved, plus you can get into some interesting problems.

In the following example we are creating an array and then setting the 5th index with a value of “test”. Since we have an item at the 5th index, the array is marked as having a length of 6 items. So far, there shouldn’t be any surprises here.

[js] var myArray = [], name;
myArray[5] = “test”;
console.log( myArray.length ); //6
[/js]

However, if you used the for..in statement on this array, you would only see the one item that you inserted in the array, which is probably not what you intended. If this is what you intended, then you should probably not be using an array and should be using an object instead.

[js] var myArray = [], name;
myArray[5] = “test”;
console.log( myArray.length ); //6

for ( name in myArray ) {
console.log( name, myArray[name] );
//Outputs…
// 5, test
}
[/js]

You can execute and modify the above code from

jsFiddle.

You should use the standard for loop when iterating over an array. The following example does loop over the entire range of indexes, although most of them are undefined since we didn’t set their values.

[js] var myArray = [], name;
myArray[5] = “test”;
console.log( myArray.length ); //6

for ( var i = 0, length = myArray.length; i < length; i++ ) {
console.log( i, myArray[i] );
//Outputs…
// 0, undefined
// 1, undefined
// 2, undefined
// 3, undefined
// 4, undefined
// 5, test
}
[/js]

You can execute and modify the above code from

jsFiddle.

If you are not convinced, there is another problem that you can run into when using the for…in statement on an array. Now just suppose that you or some other library changed the prototype of the Array object? If someone where to add a property to the Array.prototype it would also show up as one of the keys in the for…in.

[js] var myArray = [], name;
myArray[5] = “test”;
console.log( myArray.length ); //6

Array.prototype.someVariable = “Where did this come from?”;
for ( name in myArray ) {
console.log( name, myArray[name] );
//Outputs…
// 5, test
// someVariable, Where did this come from?
}
[/js]

You can execute and modify the above code from

jsFiddle.

This actually brings up our next subtopic about using the for…in statement correctly when using an object.

Using the For…In Statement Incorrectly with Objects

As we discussed briefly in the above section, hopefully you are only using the for…in statement with objects and not arrays. You might have seen the for…in used like the following

[js] for ( var name in object ) {
//Your code here
}
[/js]

That seems harmless, right? And in many cases it does exactly what you want it to. As it turns out, you should be careful using the above syntax. The for…in statement will actually iterate through all the properties of the object and also the properties that are inherited from the prototype! Since you probably don’t want to iterate over your inherited prototype properties, you should check the object you are enumerating to see if it contains the property before proceeding.

Your modified code snippet should look something like the following instead.

[js] /* Check if object has property before
iterating, because functions inherited
from prototype are also included */
for ( var name in object ) {
if ( object.hasOwnProperty(name) ) {
//Your code here
}
}
[/js]

The following code snippet shows an example of when the for…in statement might show some undesired results.

[js] var Person = function( firstName, lastName ) {
this.firstName = firstName;
this.lastName = lastName;
return this;
};

Person.prototype = {
isMarried : false,
hasKids: false
};

var john = new Person( “John”, “Smith” ),
linda = new Person( “Linda”, “Davis” ),
name;

john.isMarried = true;

console.log( “Not Checking hasOwnProperty” );
for ( name in john ) {
console.log( name + “: ” + john[name] );
//Outputs
// firstName: John
// lastName: Smith
// isMarried: true
// hasKids: false
}

console.log( “Checking hasOwnProperty” );
for ( name in linda ) {
if ( linda.hasOwnProperty(name) ) {
console.log( name + “: ” + linda[name] );
//Outputs
// firstName: Linda
// lastName: Davis
}
}
[/js]

You can execute and modify the above code from jsFiddle.

In the above code we created two Person objects and set it’s prototype to include two new properties (“isMarried” and “hasKids”). We then loop over the properties of the “john” person, you will see that not only are his firstName and lastName displayed, but also the inherited “isMarried” and “hasKids” prototype values! In contrast, by checking .hasOwnProperty() when looping over linda’s properties, we only see that her immediate properties are displayed, instead of displaying her inherited properties as well.

Best Practice

The take aways for this point are:
* Use the for statement for arrays
* Use the for…in statement when iterating over objects and check the hasOwnProperty method

Conclusion

This article has covered some of the common issues you might address coming from C# to JavaScript. I have committed just about everyone of the above Bad Practices myself when I starting to code in JavaScript heavily.

With the recent serge of jQuery hitting the market and other great JavaScript libraries, it is important that we as developers understand the language instead of just thinking that our previous language knowledge will get us by.

This article only covers some of the things you should know. The next post in the series will be published next week. In the meantime please feel free to add comments of any other gotchas that you’ve experience coming from a C# background. I would love to hear about it.

Comments

  • yekit
    Reply

    Nice post but the code snippet for this page is not working.