JavaScript "Static Object" or Library

Question

I'm not sure if I'm using the right terminology as I'm fairly new to Object Oriented Programming. I can make "traditional objects" in the following way:

(New File: Person.js)

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

And then to use it in the main file I have to type:

var myFriend = new Person();
myFriend.setName("Bob");

in order to use it. You have to create an instance of the object to use its functions.

What I want to create is something I believe is called a "static object" at least in Java or perhaps a libary. I'm thinking of something similar to use the built in Math functions. I can type

Math.sin(3.14);

without having to do something like:

var myMath = new Math();
myMath.sin(3.14);

Effectively, I want a library, but I don't know how to set it up

(File: mathlib.js)

//mathlib.js
function mathlib() {
    this.printStuff = function printStuff(){
        alert("mathlib print");
    }
}

and then in the main file:

mathlib.printStuff();

This gives an error of: TypeError: mathlib.printStuff is not a function

Not sure of where I'm going wrong.. (I am including the file, in the same way as before)

cutmancometh · Accepted Answer · 2015-09-10 18:44:01Z

5

What you're looking for is called the Module Pattern in javascript. It's the js equivalent of a utility class in Java. It looks like this in javascript.

Utilities.js

var Utilities = (function(){
    return {  

        addTwoNumbers : function(num1, num2){
            return num1 + num2;
        },

        greatestCommonFactor : function(num1, num2){
            while(num1 != num2){
                if(num1 > num2)
                    num1 -= num2;
                else
                    num2 -= num1;
            }
            return num1;
        }
    }
}());

Then somewhere else in your code you can do the following:

var sum = Utilities.addTwoNumbers(11, 17);
var gcf = Utilities.greatestCommonFactor(21, 35);

You just have to make sure to include the file in the html, typically before the script that uses it.

<script src="js/Utilities.js"></script>
<script src="js/main.js"></script>

There are ways to extend a module and/or make the code more readable. Just search for "javascript module pattern", but the above code should get you off to a good start.

edited Sep 10, 2015 at 18:44

answered Sep 10, 2015 at 18:27

cutmancometh

1,7673 gold badges21 silver badges32 bronze badges

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

1 Comment

Jan Over a year ago

What this pattern facilitates is the ability to have private variables (or inject variables). But since that's not showcased in this example, the resulting object would be the same as just declaring the object directly. And for declaring a class with static methods (where the methods should hold no state) the functionality is exactly the same, and might even be a little confusing to someone reading the code as to why it "pretends" to hold state. Just an FYI.

Jan · Accepted Answer · 2015-09-10 17:25:14Z

3

Just create a regular object and put the properties on there

var mathlib = {
    printStuff: function() {
        alert("mathlib print");
    }
}

or

var mathlib = {};
mathlib.printStuff = function() {
    alert("mathlib print");
}

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

answered Sep 10, 2015 at 17:25

Jan

5,8573 gold badges29 silver badges44 bronze badges

4 Comments

ryanmattscott Over a year ago

That still doesn't work, unless I put in the main file. Is there a way to put it in a separate file?

Jan Over a year ago

It will have to be either a global variable (or declared on a globally available variable), declared in the same scope as the code that wants to use it, or somehow passed into the scope that wants to use it. Wherever you'll want to use it, you'll need access to it. But yes, that could be from a separate file. As long as the executing code has access to it through any of those three methods (if it's a separate file, just the first or last method).

ryanmattscott Over a year ago

Thanks got it to work outside. Is there actually a difference in the names of these objects, since the way I originally defined it was different and behaves differently?

Jan Over a year ago

The one using new FunctionName() is usually referred to as an instance of an object and the one you're after now is just an object. developer.mozilla.org/en-US/docs/Web/JavaScript/…

Collectives™ on Stack Overflow

JavaScript "Static Object" or Library

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related