Not able to understand static methods in JavaScript

Question

I am reading a book "Pro JavaScript Technics" where there is part explaining how to implement static variables in JavaScript Objects,

following that explanation I wrote one code.

The code is that there should be an Employee class out of which we should be able to create employee objects. Employee class should have static methods as setter and getter for setting the value for "Firm" in which the employee works.

If the static Firm name is changed to some other name, that change has to be seen across all the Employee objects,

the code is as follows,

    var fn46 = function(){

    var Employee = (function(){

        var fn = function(employeeName){
            var name = undefined;

            this.setName = function(employeeName){
                name = employeeName;
            };

            this.getName = function(){
                return name;
            }

            this.setName(employeeName);
        };

        var FIRM = "";

        this.setFIRM = function(firmName){
            FIRM = firmName;
        };

        this.getFIRM = function(){
            return FIRM;
        };

        return fn;

    })();

    Employee.prototype.display = function(){
        return "Employee "+this.getName()+" works in "+Employee.getFIRM();      
    };

    var empArray = [    new Employee("Sudarshan Thakur"), 
                        new Employee("Pritesh Shah")
                    ];

    Employee.setFIRM("DropBox Inc.");

    for(var x=0; x < empArray.length; x++){
        print(empArray[x].display());
    }

    Employee.setFIRM("Yahoo Inc.");

    for(var x=0; x < empArray.length; x++){
        print(empArray[x].display());
    }   
};

fn46();

But when i run the above code I get the error in the output as

js: uncaught JavaScript runtime exception: TypeError: Cannot find function setFIRM in object 

function (employeeName) {...}.

Now if I change the code to as

    var fn46 = function(){

    var Employee = (function(){

        var fn = function(employeeName){
            var name = undefined;

            this.setName = function(employeeName){
                name = employeeName;
            };

            this.getName = function(){
                return name;
            }

            this.setName(employeeName);
        };

        var FIRM = "";

        fn.setFIRM = function(firmName){
            FIRM = firmName;
        };

        fn.getFIRM = function(){
            return FIRM;
        };

        return fn;

    })();

    Employee.prototype.display = function(){
        return "Employee "+this.getName()+" works in "+Employee.getFIRM();      
    };

    var empArray = [    new Employee("Sudarshan Thakur"), 
                        new Employee("Pritesh Shah")
                    ];

    Employee.setFIRM("DropBox Inc.");

    for(var x=0; x < empArray.length; x++){
        print(empArray[x].display());
    }

    Employee.setFIRM("Yahoo Inc.");

    for(var x=0; x < empArray.length; x++){
        print(empArray[x].display());
    }   
};

fn46();

I get the desired output

Employee Sudarshan Thakur works in DropBox Inc.
Employee Pritesh Shah works in DropBox Inc.
Employee Sudarshan Thakur works in Yahoo Inc.
Employee Pritesh Shah works in Yahoo Inc.

So why I was getting an error,

and the fix for this which i figured out is correct i,e "fn.setFIRM" and "fn.getFIRM" for making it static methods, or there is some different way to achieve this

Waiting for some good explanation

Answer 1

If you checked the global object (window) of your first try, you'd see that setFIRM and getFIRM methods are defined there.

Why?

Because you defined:

this.setFIRM = function...

and this points to the global object when used in the global context, and not to the Employee as you would intuitively expect it to. (Unless you're in use strict in which case this is evaluated to null/undefined )

That's why you had the error, and that's why changing to fn.setFIRM fixes it.