Is this irregular behavior caused by Javascript running asynchronously?

Question

  Snake.prototype.move = function() {
    var head = this.head();
    var newCoord = new Coord(head.pos);

    console.log(head, newCoord);
    console.log(head.pos, newCoord.pos);

    this.segments.push(newCoord);
    head.plus(this.dir);

    if (this.growingCount > 0) {
      this.growingCount -= 1;
    } else {
      this.segments.pop();
    }
  };

Coord() Constructor and plus function:

var Coord = SnakeGame.Coord = function(pos) {
    this.pos = pos;
  };

  Coord.prototype.plus = function(dir) {
    if (dir === "U") {
      this.pos[0] -= 1;
    } else if (dir === "D") {
      this.pos[0] += 1;
    } else if (dir === "R") {
      this.pos[1] += 1;
    } else if (dir === "L") {
      this.pos[1] -= 1;
    }
  };

head() returns the first segment in the segments property on the Snake instance.

The problem I'm seeing is that it seems like the two console.log's are showing different results. The first line shows the Coord objects with a pos value of [3, 2] (which shouldn't be the case since head hasn't been updated yet). The next console line, outputs [3, 3] and [3, 3] (which should be the case).

What's going on? I feel like the error is staring at me in the face and I can't see it.

Clarification: Basically the head and newCoord when they're first instantiated, to have the same positions (unchanged). After the head.plus(this.dir); line, head should be one position further than newCoord.

One execution of the method should have head.pos be [3, 2] and newCoord to have [3, 3]. Next execution, head.pos should be [3, 1], another newCoord should be [3, 2]. Does this make sense?

There's nothing async in that code, unless the functions you're calling are somehow async. — adeneo, Dec 13 '14 at 23:35
So I'm checking this out through node instead of running it through the browser. Node shows them correctly, but, i don't get why the browser is showing [3, 2] as the values for `Coord` still. — Dennis Shy, Dec 13 '14 at 23:43

score 4 · Accepted Answer · edited May 23 '17 at 11:57

4

console.log can be async. Take a look:

So, in the line

console.log(head, newCoord);

You are passing a reference to head. At the time the reference is evaluated to print its position, the position has already been changed. In the other line, instead:

console.log(head.pos, newCoord.pos);

You are passing a reference to the object that is currently stored at head.pos. You can then assign another value to head.pos, but the process triggered by console.log (which can happen later than that) will still have the reference to the original object, so it will actually print the value of the position at the time the console.log time was made.

edited May 23 '17 at 11:57

Community

1
1

answered Dec 13 '14 at 23:53

abl

5,970
4
25
44

Right, that would explain it. Is there any reason why this occurs only in Chrome, as opposed to running the program through node? – Dennis Shy Dec 14 '14 at 00:11
@DennisShy as one of the answers in the links says, the behavior of `console.log` is not standardized. So there isn't any reason why this should be the same in Chrome and in node. – abl Dec 14 '14 at 00:20
@DennisShy Chrome is really terrible in that regard; its implementation of the `console` function is completely hostile to developer needs. I like Chrome as a *user*, but for development I use Firefox and Firebug (not perfect either, but way less weird). – Pointy Dec 14 '14 at 00:38

Is this irregular behavior caused by Javascript running asynchronously?

1 Answers1