Good javascript habits for C# developers

I felt the urge to write this post after watching a certain video a couple days back, it was called Good javascript habits for C# developers the same as the title for this post. The presenter was Elijah Manor, a microsoft MVP that works at .appendTo(). It was about what common mistakes that C# developers made when dealing with javascript, some of that common mistakes that he mention would explain why i sometime wonder why this javascript function is not working properly while at other place it did. You’ll see what i’m talking about in after reading this post, hopefully this would help someone as it did help me.

1.Javascript false values

In C# an if else condition is evaluated by a boolean value, however this is not so in javascript. In javascript this values would return as false if put inside an if else condition

so if we put those values in an if condition

if the value is one of the above values, then it would evaluate as a false condition. So just remember that when you start scratching your head thinking what’s going on with your code šŸ˜€

2.Not setting the default values correctly

In C# we can use the syntax below to check for null value and set a default value for it

in javascript it’s a bit different

Can you notice the difference ? in C# it only check if the IsActive variable is null if it is then set false as the default value, in javascript however it check all the values in point 1 and if it return false then it will set the “default value” string.

3.Using the wrong comparison operators

Let’s take a look at the following code

All the above code returns true, yes surprising isn’t it i also didn’t understand at first, but after reading the Mozilla comparison operators reference

==
If the two operands are not of the same type, JavaScript converts the operands then applies strict comparison. If either operand is a number or a boolean, the operands are converted to numbers if possible; else if either operand is a string, the other operand is converted to a string if possible.

so in the above code for example

it first tries to convert the 0 string to a number type which would then result as

. At first glance this would lead my opinion that javascript comparison operator suck, however still at the above reference

===
Returns true if the operands are strictly equal (see above) with no type conversion.

Which mean that it will do the comparison without trying to change the value of either operand to other type, and in most cases this is exactly what we want.
So if we modify our first code to

all those condition would evaluate as false condition, so be sure to know the difference of comparison operators in javascript.

4.Not declaring arrays and objects correctly

This is the preferred way on declaring arrays and objects

don’t use the new keyword to create an array and object, why ? you may ask. Because that is actually a wrapper on how an object and object is created natively, so you might as well create it directly without using the wrapper. On the other hand you would like to use new keyword to create an object and you want it to use a constructor that you defined.

5.Variable hoisting in Javascript
What’s that mean ?, take a look at the following code

if you run the above script the result would be

let’s put it together now

notice something ?, inside the doSomething method, it first print undefined, but shouldn’t it be print 42 ? this is a tricky part, and as a C# developer i was totally shocked by Elijah explanation on this.

Turns out there’s a concept of variable hoisting in javascript, what this means is that our line code above will be translated by javascript as the following

It all make sense now isn’t it. All our variable declaration is put at the top by javascript, if it’s inside a function then it will put at the top most of that function, rendering the global variable that we set outside the doSomething method be hidden by our declaration of a variable with the same name. After that the only way we can access the global variable again is by using

because the global variable is attached to the window object.

The best practice here would be to declare all your variable declaration at the top, so that it’s clear and not lead to confusion like our previous case.

6.Function hoisting on Javascript
This is equally confusing as variable hoisting at first, let’s take a look at the following code.

From the above code we got a function expression and a function statement, this two ways to define a function works fine but there’s a significant difference between the two.More on this later on, if we run the above code, this will be the result.

functionA was not called, the reason is because Javascript see it like this

As we can see functionB is defined at the top just after the function declaration, functionA on the other hand stays where it was.To make it easy, we should just use the function statement so wherever in the code the function is declared, we can use it immediately.

In his video, Elijah also explain about the concept of closure and implementing public and private member in Javascript, which is awesome but rather hard to explain here :D. If you got a decent connection and want to watch Elijah presentation it’s there on channel 9, so go and get it.

Leave a Reply

Your email address will not be published. Required fields are marked *