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?

Kai · Accepted Answer · 2014-04-22T12:24:41.460

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!

I thought I understand it but I clearly don't, because I keep getting the same console log over and over again 'undefined'. I currently have the following in my Main file: b.getX(); bX = b.getX(); console.log(bX); And in my Box.js this.getX = function(){ return this.x;}; — Tomjesch, Apr 22 '14 at 10:03
It's okay. I think everyone had a similar "doh!" moment sometime :). If you see your code the whole time it gets harder to debug. Did I solve your problem? If so, can you set it to "solved". It could help others as well. — Kai, Apr 22 '14 at 11:30
No sorry that I wasn't clear :P It didn't work unfortunately, I still don't understand what I am doing wrong. If I understand you correctly this should be my Main.js http://jsfiddle.net/s9gGW/1/ because this still returns undefined. — Tomjesch, Apr 22 '14 at 12:08
I've edited my answer again. I hope it helps. In your new jsfiddle there are two mistakes: (1) you forgot var, but it should still work without it. (2) you have not created object m (var m={x:'bla'};). Then your fiddle works. My new fiddle explains what all this 'property', 'method', etc is. I suggest to look into w3schools pages as well: http://www.w3schools.com/js/js_obj_intro.asp — Kai, Apr 22 '14 at 12:28
I know and understand what properties are too an object. As you said without adding var should've worked. I removed some of my stuff that may cause confusion becuase I use box2dWeb, but here's the fiddle of all code involving the GetX() problem. http://jsfiddle.net/Tomjesch/jCjMh/1/ — Tomjesch, Apr 22 '14 at 13:35
Did some fiddling myself and now I got it in a way that my console logs the entire return function! — Tomjesch, Apr 22 '14 at 16:38

score 1 · Answer 2 · answered Apr 22 '14 at 20:36

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.

Why does my function return undefined?

2 Answers2

Edit:

Edit 2: