Closure compiler number getting undefined in advanced optimization - google-closure-compiler

Question

I have the following line of code
frame = self.spriteData['backgroundps.png'];
self.bgBoard = new gg.casino.game.sprite(self.spriteSheet, frame, 0, 0, frame.w, frame.h);
console.log(frame);
console.log(self.bgBoard.x + ' ' + self.bgBoard.y + ' ' + self.bgBoard.w + ' ' + self.bgBoard.h);
and gg.casino.game.sprite is defined as
gg.casino.game.sprite = function(sheet, frame, x, y, twidth, theight) {
this.sheetRef = sheet;
this.frame = frame;
this.x = x;
this.y = y;
this.w = twidth;
this.h = theight;
console.log(this.x + ' ' + this.y + ' ' + this.w + ' ' + this.h);
}
when compiling with simpleoptimization, everything works well and I get the following log:
0 0 800 480
(frame object)
0 0 800 480
but when I compile with advanced optimization, log shows
0 0 undefined undefined
(frame object) - with correct values
0 0 undefined undefined
what could have gone wrong with this code?
EDIT:
added a log after frame = self.spriteData['backgroundps.png'];
console.log('ps ' + frame.w + ' ' + frame.h);
and it prints w and h as undefined !!!!!!
ps undefined undefined
where as console.log(frame) in next line prints the object with correct values
Edit 2:
more on self.spriteData:
I have a json file exported from texturepacker. It has an array of objects where each object is represented as
{
"filename": "backgroundps.png",
"frame": {"x":105,"y":304,"w":800,"h":480},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":0,"w":800,"h":480},
"sourceSize": {"w":800,"h":480}
}
I loop through that json array and assign the values to self.spriteData as follows:
var respData = xhr.getResponseJson();
self.spriteData = {};
for(var i = 0, len = respData.frames.length; i < len; i++) {
self.spriteData[respData.frames[i].filename] = respData.frames[i].frame;
}
so frame will having the following structure, which gets printed on console:
Object
h: 480
w: 800
x: 105
y: 304
so in advanced compilation, there is no problem if I print the frame as console.log(frame). But when I try accessing its members console.log(frame.h) it prints as undefined. Just tried adding #expose comment to var frame = {};, hoping it wont get renamed, but didnt help.
Edit:
changed frame assignment as
frame.x = self.spriteData['backgroundps.png'].x;
frame.y = self.spriteData['backgroundps.png'].y;
frame.w = self.spriteData['backgroundps.png'].w;
frame.h = self.spriteData['backgroundps.png'].h;
and declared frame.w and frame.h with comment `#type {number} (didnt do for x and y as the were working fine already).
Now console.log(frame) shows
Object
a: undefined
b: undefined
x: 105
y: 304
but why?
EDIT (Solved) :D :-)
I explicitly declared frame's members as
/**
* #type {number}
* #expose
*/
frame.w = 0;
/**
* #type {number}
* #expose
*/
frame.h = 0;
/**
* #type {number}
* #expose
*/
frame.x = 0;
/**
* #type {number}
* #expose
*/
frame.y = 0;
and now it works :-)
thanks to Kayhr, Ross and Chad for you help. but now I wonder whose answer should I mark the right one?

Answer 1

What is the definition of self.spriteData['backgroundps.png']?
I would be willing to bet that the 'w' and 'h' keys of self.spriteData['backgroundps.png'] are defined with strings. If so, things will usually break when you access such properties with dot-syntax, because the compiler will leave strings untouched but optimize the names of properties written in dot-syntax.
For example:
foo['bar'] => a['bar']
foo.bar => a.b
...where a and b are hypothetical compiler output tokens.
See: https://developers.google.com/closure/compiler/docs/api-tutorial3#propnames

Answer 2

Can't reproduce it. I have faked the missing code with simple objects to get your code running. The output is the same, doesn't matter if I use SIMPLE or ADVANCED optimization. I guess your problem is in the code which you did not mention here (Maybe in the definition of this spriteData stuff). Please give us a complete example and the exact compiler options you used.
Here is the code I'm compiling, maybe you can see a crucial difference to your REAL code:
// Faked code (The stuff you didn't include in the question):
var gg, self;
gg = {};
gg.casino = {};
gg.casino.game = {};
self = { spriteData: { 'backgroundps.png': { w: 800, h: 480 } } };
// Your code (unchanged):
gg.casino.game.sprite = function(sheet, frame, x, y, twidth, theight) {
this.sheetRef = sheet;
this.frame = frame;
this.x = x;
this.y = y;
this.w = twidth;
this.h = theight;
console.log(this.x + ' ' + this.y + ' ' + this.w + ' ' + this.h);
}
frame = self.spriteData['backgroundps.png'];
self.bgBoard = new gg.casino.game.sprite(self.spriteSheet, frame, 0, 0, frame.w, frame.h);
console.log(frame);
console.log(self.bgBoard.x + ' ' + self.bgBoard.y + ' ' + self.bgBoard.w + ' ' + self.bgBoard.h);