Whats the difference between defining an object and set it's properties in javascript
<p>I'm forking a small library and making it object oriented in JS, everything went good until a object I was sending was not being treated correctly.
If I do this:</p>

<pre><code>var foo = {};
foo.bar = barbar; //barbar is a variable
foo.bar2 = barbar2 //barbar2 is also a variable
//more stuff
</code></pre>

<p>The object works, however if I do this:</p>

<pre><code>var foo = { bar : barbar, 'bar2': barbar2 /*more stuff*/ }
</code></pre>

<p>The library does not recognize the object properly.</p>

<p>I discovered this was the cause of the weird errors I was having after 3 hours of debugging and I still can't believe that was the cause.
Someone has any idea about why this happens? I need to dynamically create objects in the future and I would prefer the second method...</p>

<p>Edit:</p>

<p>I'm using the object to pass information to another function of what to draw in a canvas, for example:</p>

<pre><code>var test = {};//
test.init_x = 0; // all this works no matter what method I use to set them
test.init_y = 0;
test.sourceFile = 'img/tiles.png';
test.tileWidth = 16;
test.tileHeight = 16; //still works
test.arrayTiles = array; // this is a very large array of numbers
// The above only works if its defined this way, i.e. not by test = {arrayTiles:array};
</code></pre>

<p>Sample code, this is what I'm doing to create the objects:</p>

<pre><code>var test = {}
test.init_x = 0;
test.init_y = 0;
test.sourceFile = 'img/map/grid_tiles.png';
test.tileWidth = 16;
test.tileHeight = 16;
test.tile_offset_x = 1;
test.tile_offset_y = 1;
test.sourceTileCounts = 4096;
test.sourceTileAccross = 64;
test.tilesWide = 64;
test.tilesHigh = 64;
test.tilesArray = [];//large numbers array
test.physicsArray = phys;
test.zoneTilesWide = 8;
test.zoneTilesHigh = 8;
test.mapTiles = [];//large numbers array
test.decoration = [];//large numbers array
test.tilesArray = makeMapTilesArray(test.mapTiles, test.decoration);
</code></pre>

<p>The above does work, but the next snippet doesn't:</p>

<pre><code>function Map(map,tiles,decor,phys,tileSizeW,tileSizeH,totalTiles,tilesPerRow,tilesW,tilesH,zoneW,zoneH){//map
    this.mapTiles           = tiles;
    this.decoration         = decor;
    this.tilesArray         = [];
    this.physicsArray       = phys;
    this.canvas             = 0;
    this.ctx                = 0;
    this.init_x             = 0;
    this.init_y             = 0;
    this.sourceFile         = 'img/map/'+map+'.png';
    this.tileWidth          = tileSizeW;
    this.tileHeight         = tileSizeH;
    this.tile_offset_x      = 1;
    this.tile_ofset_y       = 1;
    this.sourceTileCounts   = totalTiles;
    this.sourceTileAcross   = tilesPerRow;
    this.tilesWide          = tilesW;
    this.tilesHigh          = tilesH;
    this.zoneTilesWide      = zoneW;
    this.zoneTilesHigh      = zoneH;
    this.tilesArray = makeMapTilesArray(tiles, decor);//this function does some byte shifting
}
var test = new Map('grid_tiles',mapTiles,decoration,physicsArray,16,16,4096,64,64,64,8,8);
</code></pre>

<p>Why it doesn't work? What could the library be doing for both of this to <strong>not</strong> be equal?</p>
