Why does my function return undefined?

Question

With easeljs and box2d I have created several objects which collide with each other. Using the following code I create a box on the screen:

var b = new Box(400,0); // pass xPos and yPos
stage.addChild(b.view);

At a certain point in my script the box collides with a circle and when that happens a triangle has to Tween towards the box. So I need the position of the box! In my Box.js I have the following function:

function getX(){
    var xPos = this.body.GetPosition().x * SCALE;
    return xPos;
}

I have replaced the same function for the following function:

function getX(){
    return this.x;
}

Both functions return the same value when to the browser console I use console.log(b.getX);, which is undefined. Do I need to pass a parameter with my return function or is the structure of my function incorrect?

Answer 1

You are saying console.log(b.getX),

first, you are not executing the function but logging its content. Secondly, the function is not a property of var b.

// create the function.
b.getX = function()
{
 this.x;
};

// runs the command.
b.getX();

Edit:

Jsfiddle explaining what you did wrong: http://jsfiddle.net/kychan/zsWpN/

Edit 2:

First i'll explain what a 'property' is. An property is a 'thing' owned by a certain object. Let's define a var and instantiate it:

var x = {}; // this makes an object.

We can also add properties with it:

var y = {myProp1:'Hello', myProp2:'World'};

This creates an object (y) with two properties (myProp1 and myProp2).

Now, in your code (jsfiddle) you have the (global) function getX. This isn't set as a property, thus it must be called as a global statement:

getX(b); // should return this.x;

Fiddle with more thorough explanation: http://jsfiddle.net/kychan/WwxC9/

//    METHOD 1 (Your method); works, but you can do it more directly, see METHOD 2.
//    define the var, with 'var'.
//    let it hold a (global) function.
var getX = function(object){
    return object.x;
};

//    we make a test variable holding an object with property x:
var foo = {x:4};
console.log(getX(foo)); // this should return 4.

//    METHOD 2:
//    we will make a normal function (which has the same execution as METHOD 1).
function getX2(o)
{
    return o.x;
}

//    create a test variable.
var bar = {x:4};
console.log(getX2(bar)); // should print 4 as well.

//   METHOD 3:
//    now we create a CLASS which has a default property named getX:
function myObject()
{
    this.x     = 4;

    //    here, this is called a method (because it is a property owned by a class/object).
    this.getX  = function()
    {
        return this.x;
    };
}

//    we create a test variable holding the object from the class myObject.
var baz = new myObject();
console.log(baz.getX()); // now it ALSO should print 4!

Answer 2

Together with Kai's examples I finally got it working! So, thanks Kai! I used his 3rd method he showed in his final edit with a small work around by adding a variable in the tick function of my box function. Here's what I did:

In my Box.js I create a b2_staticBody with box2d and I gave it a getX function which returns the x position of the box.

this.getX = function(){
    return boxX;
}

My tick function (created with easeljs) updates the position of the box, so here I save the box.x into a var called boxX.

function tick(e){
    boX = this.body.GetPosition().x * SCALE;

    this.x = this.body.GetPosition().x * SCALE;
    this.y = this.body.GetPosition().y * SCALE;
    this.rotation = this.body.GetAngle() * (180/Math.PI);
}

Now I am able to call the b.getX(); function after I created the box.

b = new Box(350,450); // x and y position
stage.addChild(b.view);
var targetX = b.getX();
console.log(targetX);

Thanks again to Kai for helping me understand how to tackle my problem and understanding using properties, etc.