I'm new to JavaScript objects. I want to create an object like the JavaScript Math object. But it is not working (it returns nothing).

I want to create an object called Area and give it the methods square and rectangle. I want to use it the same way the Math object is used. To find the area of a square I would do:

var squareArea = Area.square(10); // 100

I chose areas for the example because it's simple.

My script is as follows:

<script>
window.onload = function() {


    function Area() {

        function square(a) {
            area = a * a;
            return area;
        }

        function rectangle(a, b) {
            area = a * b;
            return area;    
        }

    }

    rectangleArea = Area.rectangle(10, 20);

    alert(rectangleArea);

}
</script>

I'm new to JavaScript objects. I want to create an object like the JavaScript Math object. But it is not working (it returns nothing).

I want to create an object called Area and give it the methods square and rectangle. I want to use it the same way the Math object is used. To find the area of a square I would do:

var squareArea = Area.square(10); // 100

I chose areas for the example because it's simple.

My script is as follows:

<script>
window.onload = function() {


    function Area() {

        function square(a) {
            area = a * a;
            return area;
        }

        function rectangle(a, b) {
            area = a * b;
            return area;    
        }

    }

    rectangleArea = Area.rectangle(10, 20);

    alert(rectangleArea);

}
</script>

• javascript

• 1 Learn more about objects: developer.mozilla/en-US/docs/JavaScript/Guide/…. – Felix Kling Commented Jan 18, 2013 at 1:36

5 Answers 5

This will create an object called Area with methods on it.

var Area = {
    staticMethod: function() { }
};

Unless you want Area callable, don't make it a function.

What you want to do here is make an object named Area with the methods you described assigned to it. The easiest and cleanest way to do this would be like so:

var Area = {

    square: function(a)
    {
        return a * a;
    },

    rectangle: function(a, b)
    {
        return a * b;  
    }

};

You can now use Area.square() and Area.rectangle() as you described.

Your functions are only in scope inside the containing function, Area. To make them accessible through the Area object set the function as properties of Area:

var Area = {
    square: function(a) {
        area = a * a;
        return area;
    },
    rectangle: function(a, b) {
        area = a * b;
        return area;    
    }
}

rectangleArea = Area.rectangle(10, 20);
alert(rectangleArea);

It looks like you are trying to use "classes" since you made Area a function. You don't need to do that because you don't need multiple instances of Area, but if you want it do this:

function AreaClass(){
     // just an empty constructor
}
AreaClass.prototype.square = function(a) {
    area = a * a;
    return area;
}
AreaClass.prototype.rectangle = function(a, b) {
    area = a * b;
    return area;    
}
var Area = new AreaClass();

Ok, so there's lots of answers with code, but little explanation:

By making Area a function, you make the first mistake - it should be an object with functions attached.

Then, in the body of your Area function you are declaring more functions, but since they're inside the Area function they just get deleted straight away - there not actually callable form outside.

What you want is to make an object:

var Area = {};

Then attach functions to it:

Area.square = function(var a) {
    area = a * a;
    return area;
};

And so on.

That way the functions that you want to call are properties of the Area object.

Or you can do it inline:

var Area = {
    square: function(var a) {
        area = a * a;
        return area;
    }
}

As an alternative to simply creating a namespace for your methods (eg, var Area = { ... }), you can add static methods to existing classes, for example

function Area() { ... };

Area.square = function(a) {
    return a * a;
};