Top 10 JavaScript traps for a C# developer

27 May 2014   | .NET · Code · Javascript

Tags: .net · C# ·javascript

If you are an experienced C# developer, coming into JavaScript world for application development, you will end up making few common mistakes. However some of the mistakes you would make are due to the basic differences between any strongly typed language [C#, Java etc.] and a dynamically typed language [JavaScript, Python etc]. Although dynamic feature was added to C# version 4.0, its initial design was based on static typing.

Note, I am primarily a .Net developer and have experience of developing web applications using JavaScript, and I admit that I made these mistakes when I started learning JavaScript. I spent good amount of time analyzing the root cause of the issues, just to realize that some of the mistakes were really due to my experience in C# language and assumption that JavaScript code would work exactly. I was wrong however. So in this article, I will cover top 10 JavaScript traps for a C# developer so that they don’t make the same mistakes which I did.

I assume that you have basic experience with C# language, so that we can focus more on JavaScript language in this article. With that, let’s jump into the traps.

1. Equality Operator

Most common trap between the two languages is the equality operator, also known as comparison operator. Unlike C# which has one equality operator [==], JavaScript has two [== and ===].

Let’s take a look at equality operator in C# first.

For predefined value types in C#, equality operator returns true if the values of its operands are equal, otherwise it returns false. Assuming you have basic understanding of C# language, below code snippet should be easy to understand.

Console.WriteLine("10 == 10 ? " + (10 == 10)); // returns trueConsole.WriteLine("10 != 10 ? " + (10 != 10)); // returns false.Console.WriteLine("10 != 20 ? " + (10 != 20)); // returns true. 

For reference types other than string, equality operator returns true if its two operands refer to the same object.
In the code snippet below, emp1 and emp2 are two differentEmployee instances, hence comparing two different instances in such case would return a false value.

var emp1 = new Employee();var emp2 = new Employee();Console.WriteLine("emp1 == emp2 ? " + (emp1 == emp2)); // returns false

In below code snippet, however, we have assigned emp2 instance variable toemp1, so both the instances are now pointing to same memory location. So comparing two instance in such case would return a true result.

emp1 = emp2;Console.WriteLine("emp1 == emp2 ? " + (emp1 == emp2)); // returns true

For the string type, == compares the values of the strings. In the code snippet below, strings “A” and “B” are not same, comparing these two strings would return a false result.

Console.WriteLine("A == B ? " + ("A" == "B")); // returns false

In below code snippet, we have copied string “A” to temp variable and compared it with “A” string constant. Since both the strings contains same value, comparison in such case would return a true value.

var temp = string.Copy("A");Console.WriteLine("A == A ? " + ("A" == temp));

In JavaScript however, equality operator works differently. Let’s understand the difference in these two equality operators first.

Equals (==) If the two operands are of same datatype, equality operator returns true if operand values are same, false otherwise.

console.log('10 == 10 ? ' + (10 == 10)); // returns trueconsole.log('"10" == "10" ? ' + ("10" == "10")); // returns trueconsole.log('true == true" ? ' + (true == true)); // returns true

If the two operands are NOT of the same datatype, JavaScript converts the operands and then applies comparison. If either operand is a number or a boolean or a string, the operands are converted to numbers if possible.

In below code snippets, string value “10″, boolean value ‘true’ and ‘false’ gets converted into a number before the comparison takes place. All the comparison statement below returns a true value.

console.log('10 == "10" ? ' + (10 == "10"));console.log('1 == true ? ' + (1 == true));console.log('0 == false ? ' + (0 == false));console.log('0 == "" ? ' + (0 == ""));console.log('0 == " " ? ' + (0 == " "));

If both operands are objects, then JavaScript compares internal references which are equal when operands refer to the same object in memory.

var x = { name: 'Prasad' };var y = { name: 'Prasad' };var z = x;console.log(x == y); // returns falseconsole.log(x == z); // returns true

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

In below code snippet, both the operands are of same data type with same value, all the comparison statements would return true result.

console.log('10 === 10 ? ' + (10 === 10));console.log('"20" === "20" ? ' + ("20" === "20"));console.log('true === true ? ' + (true === true));

Below code statement would return false result since the data type of the operands are different.

console.log('10 === "10" ? ' + (10 === "10"));console.log('10 === "20" ? ' + (10 === "20"));console.log('1 === true ? ' + (1 === true));console.log('0 === false ? ' + (0 === false));console.log('0 === "" ? ' + (0 === ""));console.log('0 === " " ? ' + (0 === " "));console.log('"" === " " ? ' + ("" === " "));

2. Variable Scope

C# allows programmer to declare a variable at different locations, which determines its scope. Variables that are defined at theclass level are available to any non-static method within the class. Variables declared within amethod’s code block are available for use by any other part of the method, including nested code blocks. And finally, if you declare a variable within ablock construct such as an If statement, that variable’s scope is only until the end of the block.

In the code listing below variable favoriteCity is declared at class level, so it is accessible to all the methods in the classVariableScope. Considering its a static variable, it can be accessed inside a static or an instance method, however it wont be accessible using a class instance.

Variables declared at class level can be overridden in the functions. In below example,Main method overrides variable favoriteCity and sets it to “New York”. Since the class level variable is accessible to all the methods,PrintFavoriteCity function can access it. Any local variable declared inMain method or PrintFavoriteCity won’t be accessible outside method definition.

Finally, we have declared a welcomeMessage variable inside a if block. The scope of this variable is only within the if block and it wont be accessible outside the block, withinMain method or PrintFavoriteCity method.

class VariableScope{    private static string favoriteCity = "London";    static void Main()    {    Console.WriteLine("Your favorite city is {0}", favoriteCity);    favoriteCity = "New York";    PrintFavoriteCity();    if (favoriteCity.Equals("New York"))    {            var welcomeMessage = "Welcome New Yorker";        Console.WriteLine(welcomeMessage);    }    }    static void PrintFavoriteCity()    {    Console.WriteLine("Your favorite city is {0}", favoriteCity);    }}

JavaScript has two scopes: global and local. A variable that is declared outside a function definition is a global variable, and its value is accessible and modifiable throughout your program. A variable that is declared inside a function definition is local. It is created and destroyed every time the function is executed, and it cannot be accessed by any code outside the function. JavaScript does not support block scope.

In the code listing below, favoriteCity variable is declared outside function definition, hence its scoped as global and can be accessed inside any function. VariablefavoriteIndianCity is declared inside PrintFavoriteCity function, so its a local scope variable and cannot be accessed outside function definition. Finally we have declared awelcomeMessage variable inside an if block. Since JavaScript does not support block scoped variable,welcomeMessage variable can be accessed anywhere within the containing function.

var favoriteCity = "London";        function PrintFavoriteCity() {    console.log(favoriteCity);    var favoriteIndianCity = "Pune";    console.log(favoriteIndianCity);        if (true) {    var welcomeMessage = "Hello dear traveler!";    console.log(welcomeMessage);    }    welcomeMessage = "Hello dear traveler, welcome back! ";    console.log(welcomeMessage);}

3. For each

In C# foreach statement is used to repeat a group of embedded statements for each element in an array or a collection which implementsIEnumerable or IEnumerable<T> interface. Most of the collection classes in C# like Array, List, Dictionary, HashSet etc implement these interfaces, so iterating over these collection usingforeach statement is a common practice.

Iterating over string array collection

var rainbowColors = new[] { "Red", "Orange", "Yellow", "Green", "Blue", "Indigo", "Violet" };foreach (var rainbowColor in rainbowColors){    Console.WriteLine(rainbowColor);}

Iterating over specialized collection – StringCollection

var cities = new StringCollection { "Pune", "London", "New York", "Mumbai" };foreach (var city in cities){    Console.WriteLine(city);}

Iterating over Generic collection – List

var weekdays = new List(){"Mon", "Tue", "Wed", "Thur", "Fri", "Sat", "Sun"};foreach (var weekday in weekdays){    Console.WriteLine(weekday);}

Unlike C#, JavaScript has three flavors of for each statements!.

for each…in : It is used to iterate a specified variable over all values of object’sproperties. For each distinct property, a specified statement is executed. However,for each…in is deprecated as the part of ECMA-357 (E4X) standard. E4X support has been removed, butfor each…in will not be disabled and removed because of backward compatibility considerations.

var sum = 0;var obj = {prop1: 10, prop2: 20, prop3: 30};for each (var item in obj) {    sum += item;}print(sum); // prints "60", which is 10+20+30

for…in : It is used to iterates over property names in arbitrary order. Since the order is not consistent, this version should not be used to iterate over array elements.

let arr = [ 3, 5, 7 ];arr.foo = "hello";for (let i in arr) {   console.log(i); // logs "0", "1", "2", "hello"}

for…of : It is used to iterates over property values in consistent order. This version is suitable to iterate over array like elements, however this feature is yet to be implemented in all the browsers and is part of ECMA6 proposal.

let arr = [ 3, 5, 7 ];arr.foo = "hello";for (let i of arr) {   console.log(i); // logs "3", "5", "7"}

4. Switch statement

In C#, the switch statement is a control statement that selects a switch section to execute from a list of candidates. Each switch section contains one or more case labels followed by one or more statements.

The following example shows a simple switch statement that has five switch sections. Each switch section has one case label, such as case 10, case 20 etc. Each case label specifies aconstant value. The switch statement transfers control to the switch section whose case label matches the value of the switch expression. If no case label contains a matching value, control is transferred to the default section, if there is one. If there is no default section, no action is taken and control is transferred outside the switch statement.

Console.WriteLine("Enter your age");var age = int.Parse(Console.ReadLine());switch (age){    case 10:    Console.WriteLine("Drink milk");    break;    case 20:    case 30:    Console.WriteLine("Take Latte or beer");    break;    case 50 - 10:    Console.WriteLine("You can have Whiskey");    break;    case 50:    Console.WriteLine("Take medicine");    break;    default:    Console.WriteLine("Invalid input");    break;}

JavaScript is a dynamically typed language. In other words, language doesn’t enforce you to declare the type during variable declarations and you can easily change the data type later. As we discussed earlier, in regularif statement comparison, data type doesn’t matter unless you are using strict comparison that specifically check for data type.

y = 5;x = '5';if(x == y){    console.log("they're the same"); // logs 'they're the same'}

The exception is case values in the switch statement. For the case to be a match, the data types must match. Think for it as switch statements including === (strict equal) instead of == (equal) for case comparisons.

y = 5;switch(y){    case '5':    console.log("y is 5"); // this won't log the message}

However, main difference in JavaScript switch statement is that, each section can contain an expression or a constant. Note, C# language accepts only constant value in switch expression. Below JavaScript code snippet demonstrates case expression. Note theswitch(true) statement, which always execute in this case and the actual value ofinput is used in case expression.

var input = prompt("enter your age");switch (true) {    case input > "10" && input < 20:         console.log('Take Milk');         break;          case input > "21" && input <= 40:          console.log("Take Beer");          break;          case input >= 41 && input <=50 :          console.log("Take Whiskey");          break;          case input > 51:     console.log("Take Medicine");     break;     default:     console.log("Invalid input");     break;}

5. Function overloading

In C#, function overloading is, when you have two or more methods with the same name but different signatures. At compile time, the compiler works out which one it’s going to call, based on the compile time types of the arguments and the target of the method call.

In below code snippet, we have two forms of Add function and depending on the type and number of arguments, appropriateAdd function gets called.

static void Main(){    Console.WriteLine("10 + 20 = " + Add(10,20));    Console.WriteLine("10 + 20 + 30 = " + Add(10, 20, 30));    Console.ReadLine();}static int Add(int number1, int number2){    return number1 + number2;}static int Add(int number1, int number2, int number3){    return number1 + number2 + number3;}

JavaScript does not support function overloading!! Even though everything in JavaScript is an Object in itself, the language does not support some of the common object oriented language feature like function overloading.

So what happens if you declare two functions with the same name? Lets see it in action.

In the code block defined below, we have declared two Add functions which takes different number of parameters. JavaScript unfortunately overrides theAdd function defined earlier using 2 parameters with the Add function defined later using 3 parameters, so for a calling application only oneAdd function is available.

So the question is, what happens when we call Add function with 2 arguments, when its signature contains three arguments. Well, in above case, parameternum3 gets initialized to undefined, which is our next trap in the list!

6. undefined function parameter

In C#, once you define a function with a given number of parameters, the calling code has to pass same number of arguments, unless any of the parameters are set as optional. For example,WelcomeUser function define in below code takes two parameters – userName and welcomeMessage.

static void WelcomeUser(string userName, string welcomeMessage = "Welcome"){    Console.WriteLine("{0} {1}!", welcomeMessage, userName);}

The welcomeMessage parameter was declared as an optional parameter, so the calling code may not necessarily pass its value, in which case its default value ‘Welcome’ will be considered during function execution. If the calling code passeswelcomeMessage argument, it will override its default value while calling the function.

static void Main(string[] args){    WelcomeUser("Prasad");    WelcomeUser("Colin", "Good Morning");    // WelcomeUser(); // this won't compile as userName is mandatory parameter}

JavaScript however works in a different manner. It does not enforce user to pass values for all the parameters during function call. In such case, a variable that has not been assigned a value is of typeundefined.

Let’s take a look at the example. WelcomeUser function defined below takes two parametersuserName and welcomeMessage. In the first call, we are passing arguments ‘Scott’ and ‘Good Morning’ toWelComeUser function, and it logs it as expected. No surprises here.

Now, when we call the function without passing same number of arguments, JavaScript treatsthat argument as undefined. So in second call, when we pass ‘Prasad’ as anusreName argument, welcomeMessage gets initialized to undefined, so it displays the output as ‘Prasad undefined!’

Similarly, when we call the function without passing any arguments, both the parameters gets initialized toundefined and it displays the output as ‘undefined undefined!’

function WelcomeUser(userName, welcomeMessage) {    console.log(userName + " "  + welcomeMessage + "!");}WelcomeUser("Scott", "Good Morning");WelcomeUser("Prasad");WelcomeUser();

Point to note that, unlike C# compiler, JavaScript compiler wont display any compile time error for undefined parameters. So now the question is how to handle undefined parameters? You can useundefined and the strict equality and inequality operators to determine whether a variable has a value or not. So let’s modify above code to do the same.

function WelcomeUser(userName, welcomeMessage) {    if (userName === undefined) {        userName = "Admin";    }    if (welcomeMessage == undefined) {        welcomeMessage = "Welcome";    }    console.log(userName + " " + welcomeMessage + "!");}

As you can easily notice, in the above code snippet, we have set userName to ‘Admin’ andwelcomeMessage to ‘Welcome’, if calling code doesn’t pass the argument value.

7. Truthy and Falsy

In C#, true and false values are always represented by a boolean variable or an boolean expression. The controlling conditional expression of an if-statement is a boolean-expression, which must return either true or false. If the condition doesn’t return a boolean value, a compile time error occurs. Let’s look into the code now.

The displayFlag boolean variable is initialized to true, so the statement enclosed inif block will always execute and outputs “Display flag is true”.

bool displayFlag = true;if (displayFlag){    Console.WriteLine("Display flag is true");}

Below code block shows simplest example of boolean expression, which must return either true or false value [True in this case].

if (2 > 1){    Console.WriteLine("2 is greater than 1");}

As we discussed in the earlier sections, C# is a statically typed language, so the operands in a boolean expression should be compatiable for equality operation. For e.g. comparing a int variable with a string would result into a compile time error as shown in below example.

var firstNumber = 10;var secondNumber = "10";if (firstNumber == secondNumber) { } // compile time error

To ensure the controlling conditional expression of an if-statement return a boolean-expression, we need to typecast theif statement as shown below

var firstNumber = 10;var secondNumber = "10";var equalNumber = ((bool)(firstNumber.ToString() == secondNumber));

In JavaScript, 0, false, ”, undefined, null, NaN are falsy values. All other value are truthy.

if (!0) {    console.log("0 is falsy");} if (!false) {    console.log("false is falsy");} if (!'') {    console.log("'' is falsy");} if (undefined) {    console.log('undefined is falsy');} if (!null) {    console.log('null is falsy');} if (!0/0) {    console.log('NaN is falsy');}

Note that, a space character [' '] is a trythy value in JavaScript, and so does the Infinity.

if (1 / 0) {    console.log('Infinity is truthy');} if (' ') {    console.log("' ' is truthy");}

8. Curly braces and return statement

Both C# and JavaScript languages provides a return statement to return the execution control to the caller, however there is one subtle gotcha when you used it along with curly braces in JavaScript.

You will find endless arguments on web on ‘whether the curly brace should appear on the same line as block construct [class, function etc.] or whether they should appear on their own line’. In C#, it doesn’t matter really. It’s a person preference to have it on the same line or new line, however I would suggest you to choose one and stick to it.

Add function defined in below code listing contains curly braces on new line, while theGetDefaultCategory function contains opening curly brace and return statement on different lines, which C# compiler will happily compile.

public static int Add(int num1, int num2){    return num1 + num2;} public static dynamic GetDefaultCategory(){return    new    {            Name = "General"    };}

JavaScript however behaves differently in this case. The Add function is similar to C# version and will always display the addition of two numbers passed in. HoweverGetDefaultCategory function defined below will simply return the call to the caller without returning the object literal. This is due toautomatic semicolon insertion feature of JavaScript. In this case, since we have opening curly brace on the next line after return statement, JavaScript compiler will insert a semicolon after return statement causing it to exit from the function without returning any value.

function Add(num1, num2){    return num1 + num2;} function GetDefaultCategory() {return{    name: "General"}};

This can easily get more difficult as compiler doesn’t return any error in this case, however caller will get a null reference rather than the object literal. To avoid such kind of situation, always use curly brace on the same line as return statement or block construct, as shown below

function Add(num1, num2){    return num1 + num2;} function GetDefaultCategory() {return {    name: "General"}};

9. this keyword

The this keyword in C# is generally used for two purposes

1. Access the current instance of the class
2. To add extension methods on existing types without creating new types.

Let’s discuss both of these options in detail

Following code listing contains an Employee class with two properties which has been protected by private setters, so only the parameterized constructor can initialize these values. Note that the constructor usesthis.Id syntax to access the property on a given instance. Similarly, overriddenToString method retrieves class properties using this keyword.

public sealed class Employee{    public int Id { get; private set; }    public string Name { get; private set; }    public Employee(int id, string name)    {    this.Id = id;    this.Name = name;    }    public override string ToString()    {        return string.Format("ID : {0} , Name : {1}", this.Id, this.Name);    }}

C# 3 introduced ‘Extension Method’ concept in the language. Extension methods enable you to “add” methods to existing types without creating a new derived type, recompiling, or otherwise modifying the original type. This includes even adding extension method on sealed type like string or Employee class defined in earlier code listing. Below code listing adds an extension methodPrintNameAndLength to Employee class. Note the this keyword used in thePrintNameAndLength signature, which denotes extension method on Employee type.

public static class EmployeeExtension{    public static string PrintNameAndLength(this Employee emp)    {    return emp.Name + " : " + emp.Name.Length;    }}

Once declared, you can invoke it as a normal instance method as shown in below code example

var emp = new Employee(1, "Prasad");Console.WriteLine(emp.PrintNameAndLength());

The most common extension methods are the LINQ standard query operators that add query functionality to the existingSystem.Collections.IEnumerable and System.Collections.Generic.IEnumerable types.

10. Hoisting

As we examined in earlier sections, JavaScript supports only function level scope as compared to C# which has different scope rules [class, method, block]. However, it’s worth to find out how JavaScript handles the scoping.

In JavaScript, all the variable declared inside a function share same scope. Behind the scene, JavaScript hoists all the variable declaration to the top of the function and initialize them to undefined. Their assignment still remain on the same line where it was declared. This process is known as ‘Variable Hoisting’.

Let’s take a look at simple JavaScript function defined below.

function doSomething() {     console.log(someVariable); //undefined      var someVariable = 100;     console.log(someVariable); // 100      if (true){         someVariable = 200;         console.log(someVariable); // 100     }}

JavaScript hoist the variable someVariable to the top of the functiondoSomething> and initialize it to undefined. Below is the code definition after the hoisting is done. Since variable was gets hoisted to the top of the function, it can be accessed from anywhere inside the function. This is the main reason why JavaScript does not support block scoping.

function doSomething() {    var someVariable = undefined;    console.log(someVariable); //undefined     someVariable = 100;    console.log(someVariable); // 100     if (true){        someVariable = 200;        console.log(someVariable); // 100    }}

And then JavaScript does function hoisting as well! However, the hoisting rules for variable and functions are different. JavaScript provides two ways to define a function in a program –Function Expression and Function Statement. The easiest way to tell them apart is, if it starts with the function keyword, then it is a function statement.

try {    printOne();    printTwo(); } catch (e) {    console.log(e.message);} // Function Expressionvar printOne = function () {    console.log("One");} // Function Statementfunction printTwo() {    console.log("Two");}

During function hoisting process, function statement is transformed behind the scenes into a function expression and then both the variable and the assignment are hoisted to the top of the function scope. So the function gets converted as shown below

var printOne = undefined,    printTwo = undefined; printTwo = function(){    console.log("Two");} try {    printOne();    printTwo();} catch (e) {    console.log(e.message);} printOne = function () {    console.log("One");}

Note that, function expression follows same rule as variable hoisting, but function statement behaves differently.

Summary

Ah!, we did it. Here comes the summary I hope this post helped you to understand basic differences between JavaScript and C# languages, and common traps associated with it.

Please provide your feedback in the comments section below

 

 

source: http://www.codetails.com/2014/05/27/top-10-javascript-traps-for-a-c-developer/