function is undefined

Question

im struggling with a script where a method/object returns undefined

var Lang = new function(){
 this.get = function(str, trans){
 if(TRANSLATE[str]){
 var str = TRANSLATE[str][LANG];
 if(count_obj(trans) > 0){
 for(var key in trans){
 str = str.replace('%'+key+'%', trans[key]);
 }
 }
 return str;
 }
 };
};
function Language(){
 this.tbl_list = null;
 this.append = function(string, obj, index){
 var row = $('<tr></tr>')
 .append('<td class="list_row">'+js2txt(string)+'</td>');
 for(var key in obj){
 row.append('<td class="list_row">'+js2txt(obj[key])+'</td>');
 }
 var td = $('<td class="list_row"></td>').appendTo(row);
 //var inp_edit = $('<input type="button" value="'+Lang.get('BTN_EDIT')+'" />');
 alert(Lang.get);
 List.append_row(row, this.tbl_list, index);
 };
};
alert(Lang.get);

inside the Language object Lang.get returns undefined, but outside it returns the function!?

• Matt Ball: Not enough context to understand what's going on.
• Naftali: how do you know what is inside and what is outside?
• Jason: Is there a variable scoping issue? perhaps try specifying it as a global? var window.Lang = Lang; (above the function) and then in the function change it to window.Lang.get
• Ry-: Are you showing the whole code? Is Lang an instance of Language?

Answer 1

I think this is where you went wrong:

var Lang = new function(){

Don't use new when assigning a function to a variable. Do this:

var Lang = function(){

• user578895: or it's a singleton and should be var Lang = new (function(){ ... });

Answer 2

> var Lang = new function(){
> this.get = function(str, trans){
> if(TRANSLATE[str]){
> var str = TRANSLATE[str][LANG];
> if(count_obj(trans) > 0){
> for(var key in trans){
> str = str.replace('%'+key+'%', trans[key]);
> }
> }
> return str;
> }
> }; };

I don't see a reason for using new above, it's just a waste of resources. Since Lang doesn't seem to be called as a constructor, it should, by convention, start with a lower case letter. Why not:

var lang = {
 get: function(str, trans) {
 // function body
 }
};

.

> function Language(){
> this.tbl_list = null;
> 
> this.append = function(string, obj, index){
> /* snip */
> alert(Lang.get);
> /* snip */
> }; };
alert(Lang.get); // shows source of Lang.get

inside the Language object Lang.get returns undefined, but outside it returns the function!?

How are you calling it? It appears to be a constructor, so:

var x = new Language(); // Create instance lf Language
x.append(); // Shows Lang.get

Which is the same result as calling Language as a function. What is the issue?

Also, the jQuery stuff seems to be very inefficient. You might want to work on that. e.g.

> var row = $('<tr></tr>')
> .append('<td class="list_row">'+js2txt(string)+'</td>');

would be much better as:

var row = $('<tr><td class="list_row">'+js2txt(string)+'</td></tr>');

Or even better would be to create a single row with the structure you want, clone it for each row, then just replace the content of the cell.

Answer 3

The Language function definition and initialization are hoisted above the var Lang initialization. Is it possible that Language is being called before the initializer for Lang is reached?

• clarkk: no.. the Lang is initialized first.. the code is coming in the same order as pasted here
• clarkk: the alert with Lang.get outside the Language object returns the funtion perfectly
• Mike Samuel: @clarkk. I wasn't asking which is initialized first. Language is definitely initialized first. Try running alert(f()); var x = 42; function f() { return "x=" + x; } and it will alert x=undefined instead of reporting an error because f is initialized first, then f is called, then x is initialized.
• Mike Samuel: @clarkk What I was asking is whether Language is called before var Lang appears in the program text. There's no call to Language in your code.