Javascript object strange behavior

Question

I executed this javascript code:

var motorbike = {
    "Wheel" : move(),
    "Motor" : start()
}; // CREATE MOTORBIKE OBJECT

document.write(motorbike.Wheel); // MOVE MY MOTORBIKE
document.write(motorbike.Motor); // START MY MOTORBIKE

function move(){
    return "-I'm moving<br/>";
}

function start(){
    document.write("-Starting<br/>");
   return "-Broom broom...";
}

In the screen should appear:

-I'm moving
-Starting
-Broom broom...

But when I execute it...

-Starting
-I'm moving
-Broom broom...

Javascript prints first the "direct" document.write (that which has a string directly written) and then prints the ones which work with a return. Why javascript does that?

Answer 1

Looking at :

var motorbike = {
    "Wheel" : move(),
    "Motor" : start()
}; 

Those methods run , not when you call the property but when the object is built !

This is why the document.write of start is invoked and hence you see the string from : document.write("-Starting<br/>"); first.

Try run this :

var motorbike = {
    "Wheel" : alert('1')
};

You will immediately see the alert immediately !

You're probably after :

var motorbike = {
    "Wheel" : move,
    "Motor" : start
}; // CREATE MOTORBIKE OBJECT

document.write(motorbike.Wheel()); // MOVE MY MOTORBIKE
document.write(motorbike.Motor()); // START MY MOTORBIKE

Answer 2

When you write:

var motorbike = {
    "Wheel" : move(),
    "Motor" : start()
};

the start function is executed, and -Starting printed.

-I'm moving and -Broom broom... are printed after because the document.write() function is called after the motorbike object declaration.

Answer 3

If you want to assign the functionality to the object, you have to assign the name only, without the parenthesis:

var motorbike = {
    "Wheel" : move,
    "Motor" : start
};

If you say Wheel: move() , move is executed immediately and the result is assigned to the property Wheel. Therefore move and start are both executed during initalization, and start writes starting. The results (as in the strings returned by the function) are written thereafter when writing document.write(motorbike.Wheel); and document.write(motorbike.Motor);

PS If the functions are assigned, when using them afterwards, you do need the parenthesis, to call the function : document.write(motorbike.Wheel());

Answer 4

Javascript executes your code from top to down.

So the function move() gets executed and returns -I'm moving<br/> which gets set as value of Wheel. Then start() gets executed and it immediately writes -Starting<br/> to the document . After that the lines

document.write(motorbike.Wheel); // MOVE MY MOTORBIKE
document.write(motorbike.Motor); // START MY MOTORBIKE

are executed and append the value of Wheel and Moter to the document.

If your start() would return the whole text, it would work as you expect.

function start(){
   return "-Starting<br/>-Broom broom...";
}