Better option for strongly-typed containers in javascript

Question

I've just discovered the way to create fake 'classes' in javascript, but I wonder how you can store them and still get easy access to their functions in an IDE.

Like this:

function Map(){
   this.width = 0;
   this.height = 0;
   this.layers = new Layers();
}

Now I've got a function that loops through an XML and creates multiple Map() objects. If I store them under a single variable, I can access them just fine, like:

map1 = new Map();
map1.height = 1;

But I don't know under what name they'll be stored! So I thought I could save them like this:

mapArray = {};
mapArray['map1'] = new Map();

But you can't access the functions like this: (At least the IDE code completion won't pick it up)

mapArray['map1'].height = 1;

I then thought this would be the best solution:

function fetch(name){
    var fetch = new Map();
    fetch = test[name];
}

That way I could write:

fetch('test').height = 1;

But this seems like it'll generate lots of overhead continuously copying variables like that.

Am I overlooking something simple?

Answer 1

The reason it doesn't work is that, in order for a map/array to allow anything inside it, it must assume only that the things inside are at most a very low-level thing on the inheritance tree. Unfortunately, unlike Vector<> and proxy objects in Actionscript, and similar things in other languages, this isn't easy to do in Javascript.

How would you overload the [] operator in javascript

The solution you have, if that's what functionality you would like, is about the simplest you can do. You can also make a .get(whatever) function that returns what [whatever] is, but specifically as the type you want. And you can make a .set(whatever,value) as well. However, it won't stop the code from shoving things in using [].

On one hand, it's not a good idea to depend too heavily on the IDE to do this for you, but attempting to strongly-type things better is not a bad idea in and of itself.

Update:

To answer your other question... First, to easily test simple JS things, it's nice to use the command-line version:

http://blog.thefrontside.net/javascript/learning-javascript-from-the-command-line

https://developer.mozilla.org/en/SpiderMonkey_Build_Documentation

Now, I'm also not recommending you do this just to hack the IDE, but just to show "a way" to do it:

# js
js> function FooDataClass(){ this.data = "argh!"; }
js> function FooClass(){ this.get = GetStuff; this.put = PutStuff; this.stuff = new FooDataClass(); }
js> function PutStuff(name,stuff){ this[name]= this.stuff = stuff; }    
js> function GetStuff(name){ return this.stuff = this[name]; }     
js> f = new FooClass()       
[object Object]
js> f.put('bar', new FooDataClass())       
js> f.get('bar')    
[object Object]
js> f.get('bar').data
argh!
js> 

This might fake out your IDE for you.

Answer 2

One other way is to use a strongly-typed language that compiles to JavaScript. ST-JS is a Maven plugin that integrates also with Eclipse that allows you to write your code in Java. The corresponding JavaScript code is generated each time you save your file. By using Java as your original language, code auto-completion, refactoring, browse execution paths is very well supported by your IDE.

You don't need to learn much, as the APIs you need to know are exactly the ones you'd use in JavaScript: DOM or jQuery. Only that they are presented in a strongly-typed way.