Calling nested functions in javascript

Question

I have a javascript file named js/jsClasses.js which is relative to to the index.html file.

This file has some nested functions. Here's the code -

function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
var langSetting;
this.setLanguage = function(){
    langSetting = "en-GB";
    console.log(langSetting);
}
this.getLanguage = function(){
    return langSetting;
}

}

I need to set the value of the variable langSetting in index.html. This will be the global variable and in all the subsequent pages, I need to access the value of langSetting and load the page in the corresponding language.

At the moment, this is how I am trying to access the js/jsClasses.js file from index.html

<html>
    <script src="js/jsClass.js">
        var object1 = new JSClass();
        object1.setLanguage();
        object1.getLanguage();
    </script>



</html>

When I click the button, nothing happens. Can someone please help ?

Community · Accepted Answer · 2017-05-23 11:56:23Z

2

There are two ways to solve this, a bad and common one and a good one,

The bad one is to remove the var key word from langSetting which would make it langSetting a global varaible.

The good one is to have JSClass return langSetting or more broadly an object revealing what it, as a module is willing to reveal, this is called the revealing module pattern, here is an excellent book chapter on it by Google developer Addy Osmani

Here is a good solution in your case:

var jsClass= function(){


    var langSetting = "en"; // this is javascript's version of a private variable, it is 'closed' in your jsClass

    var getLanguage = function(){
        return langSetting;
    }

    var setLanguage = function(){
        navigator.globalization.getPreferredLanguage(function (language){
            langSetting = language.value; //set the local variable
            console.log(langSetting);
        }, function(){
            console.log("there was an error");
        });
    }
    return {
        getLanguage:getLanguage,
        setLanguage:setLanguage
    };
}

Then in your code you can do

var obj = new jsClass(); // is exactly the same as var obj = jsClass , when functions return objects it doesn't matter if you use the 'new' keyword
obj.getLanguage(); //returns en

Another solution would be to use the constructor pattern. Some consider the constructor pattern as a mistake made to implement java developers migrating to javascript although it is widely used in the industry and in a lot of libraries. This would look the following way:

function JSClass(){ //notice the capital J which though doesn't change execution is a convention indicating a class constructor
    var langSetting;
    this.setLanguage = function(){
        //setter code here
    }
    this.getLanguage = function(){
        //getter code here
    }
}

and then use the new keyword, it would look like:

var myClass = new JSClass();
myClass.getLanguage();//getter result

Also, note I'm noticing that you're using Apache Cordova API for globalization, please note that makes setLanguage asynchronous, so you might want to have it accept a callback parameter which means you get to 'hook' on when it completes. See This stackoverflow question for more details on callbacks and how to use them.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Feb 6, 2013 at 22:43

Benjamin Gruenbaum

278k90 gold badges524 silver badges524 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Benjamin Gruenbaum Over a year ago

@AshishAgarwal please avoid making comments like 'it's not working' to answers as it will not help either of us, if you do not find my answer satisfactory or do not understand it I will gladly improve it but I have to know what is not working for you, otherwise I won't be able to address your specific problem. Also, please avoid putting your script including the external source and the data inside the script in the same tag, see stackoverflow.com/questions/6528325/…

Ashish Agarwal Over a year ago

I understand that. I am using the approach involving constructors (since I'm good at Java) but I am seeing nothing in the console logs.

Ashish Agarwal Over a year ago

It works if I place the entire source code in one file. But if I place the function JSClass() in another file (I am using js/jsClass.js), it does nothing i.e. I don't think it is even being called.

Benjamin Gruenbaum Over a year ago

seperate the script calls to : <script src="js/jsClass.js"><script> and <script>/*your code here */</script> (like the link I suggested) and see if it helps, I have tested it locally and it works but I don't know how to simulate this in jsfiddle

Ashish Agarwal Over a year ago

Hmm, I am able to display an alert message. But I am not able to display the value on the console for some reason. I have var x = obj.getLanguage(); alert(x); console.log(x); That shows the alert as expected, but does not output to the console. Any idea why that might be happening ?

|

Collectives™ on Stack Overflow

Calling nested functions in javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related