Wednesday, June 18, 2014

JavaScript for C# Programmers: Enumerating Properties

JavaScript Tips for C# Programmers

If you are from the C# (C or C++ too) world, mainly and you are planning to dive into more of "current" way of the JavaScript, you'd run into situations where "I can do this in C#" but why not in JavaScript, or what is going on here, it's not possible in C#.  Here are some notes I was taking as I was learning to apply to my situations. I think you are likely looking for the same answers.
Two Key Concepts in Understanding JavaScript Object

As I got up to speed with JavaScript coming from years of C# only programming, it dawned on me that there are two key concepts that really helps to un-do your C#, C++ minds.  The first one is the dynamic aspect of JavaScript, and also the rampant use of in-line function declarations.

It is Dynamic!

The most important thing to be aware of as a C# or C++ programmer is that the language is dynamic. This is very important in understanding the source codes.

For example, you'd be often confused reading lines of code and suddenly you run into a new property like .address in the example below,

myInfo.address = "1234 Main St.";

You could be wondering where is this .address come from? Where is it declared?

The key to understanding this is that the address member was just added now. There is no requirement in JavaScript to declare anything. You just build your object as you go. This approach is so different that even if you understood it first in a textbook, it will catch you off-guard. We are so fixated in the declaration part of it, it is hard to get rid of that thought. (Note there is a type of declaration, in JavaScript but I am not getting into that now.)

The easiest way to understand this in another way is that if you have used C# Dictionary<> then any JavaScript object is the equivalent of  MyObject.

Add("address", "1234 Main St."); In other words, JavaScript objects are nothing but key value pairs of name and objects.
Rampant Use of Function "Pointers or Delegates"

This is also another difficult part to undo your minds.

A JavaScript object can be a function and JavaScript programmer uses almost exclusively of this. And to confuse the matter even more, many of these functions are anonymous functions. And because you can do that a function are defined usually in a context of a function call! This is so widely used that without understanding this, you would not understand the most JavaScript code these days

var  myFunc = function(x) { return x = x + 1; }

is an example of anonymous function that's assigned to a pointer variable (so to speak) myFunc.

So later on the code you can do y = myFunc(2);

I don't like the term "anonymous" function as everything has to have some reference point. In fact, it does have a name in my example, which is myFunc. So whenever you hear about anonymous function, think of it as a function that's assigned to a variable which is like a function pointer in C or C++, or a delegate in C#.

This approach is used very commonly in callbacks.

myCallback(function(data) { ... });

This is same as

var myFunc = function(x) { return x = x + 1; };

But it is done "in-line" in the calling parameters, which is especially odd looking with the C#, C++ mindset. But if you accept the fact that you can write a function as a parameter to a call, then it will start to sink in.

How To Access A Property That's All in Numeric String.

Given this is a very esoteric situation, it also illustrates a point that you can simply access any member of an object using the object['memberName'] notation.

Consider this situation (this is from Medical Imaging, DICOM protocol JSON obeject except that I have added 'patientName" to demonstrate the following example.)

'patientName' : { 'vr' : 'PN', 'Values' : ['Smith^John'] }

  '00100010' : { 'vr' : 'PN', 'Values' : ['Smith^John'] },

  '00100020  : { 'vr' : 'LO', 'Values' : ['123456'] }

The above is equivalent of the C# code like this.

public class myData
   public patientName = new DataElement();
   public  DataElement 00100010 = new DataElement();
   public  DataElement 00100020 = new DataElement();

Of course, this is not an acceptable syntax in C#, but it is in JavaScript it is possible to have something like this (and it is a part of the DICOM Web standard.

The patientName part is easy to get to just say something like myDataInstance.patientName, but if you try to do myData.00100010  it won't accept that (neither in C# nor in JavaScript actually).

Fortunate in JavaScript the objects are accessible as key value pairs and so it is possible to say theData['00100010'] to get to its content.

How About Finding All Its Properties?

You can iterate through

for (var prtop in heData) {
     var name = prop;
     var val = theData[prop];

What is the === Stuff?

Remember, just this important point. JavaScript auto-converts types when doing an "==" comparison, so you can compare a string that just contains digits against an actual number and come out to be equal. === prevents that from happening.

To be continued...

No comments: