Javascript code execution order strangeness

Question

I have a section of Javascript/Coffeescript that seems to be executing out of order.

console.log list
console.log list[card_number]
if list[card_number]
  console.log "MATCHES"
  new_card = list[card_number]
else
  console.log "NO MATCHES"
  new_card = create_new_card(card_number)

create_new_card: (card_number) ->
  new_card =
    card_number: card_number
  list[new_card.card_number] = new_card
  return new_card

Every time I run this, the first console.log shows a list of cards that includes the new_card, Even if the card hasn't been created yet. Then it ALWAYS hits the else, no matter how many times it is run.

If I attempt to run list[<card_number>] in the Javascript console after this code runs, I receive the proper object, but each time the code runs on it's own, the same event happens.

Have you inspected the javascript it outputs? You're giving us (and yourself apparently) an unnecessary level of abstraction here... — jondavidjohn, Feb 03 '12 at 22:33
Chrome has some [quirks](http://stackoverflow.com/questions/4198912/bizarre-console-log-behaviour-in-chrome-developer-tools) on this subject indeed, but it should not influence the code flow (i.e. making the `else` branch get executed). — pimvdb, Feb 03 '12 at 22:40

score 5 · Accepted Answer · answered Feb 03 '12 at 22:42

5

In google chrome, if you want to log objects with the state they had at the time of logging, you need to log a clone object or just stringify it.

var a = [];
console.log(a);
a[0] = 3;

Will log [3] because it logs a live object, while this will log []:

var a = [];
console.log(JSON.parse(JSON.stringify(a)));
a[0] = 3;

It is also a live object logging but it is a throwaway clone that was cloned at the point in time when a didn't have any items.

This is not related to the possible logical errors in your code that @CallumRogers pointed out.

answered Feb 03 '12 at 22:42

Esailija

138,174
23
272
326

@CallumRogers: That's because you gave Chrome time to log. When you do it in one go, i.e. `foo = []; console.log(foo); foo[0] = 1;`, you see `[1]`. – pimvdb Feb 03 '12 at 22:50
1

I realised my mistake, deleted the comment. For posterity: http://i.imgur.com/vSwEF.png – Callum Rogers Feb 03 '12 at 22:51
@CallumRogers the code needs to be run as a single script, not separate scripts as in your screenshot. – Esailija Feb 03 '12 at 22:51
@Callum: There is a timing/async issue with `console.log`. Compare http://jsfiddle.net/ambiguous/XfxhM/ and http://jsfiddle.net/ambiguous/CufTA/ and you should see it. – mu is too short Feb 03 '12 at 22:52
@Esailija: might be this is because of updated chrome version, now when i try your examples, both print '' and none of the case prints value '3' `var a = []; console.log('1st='+a); a[0] = 3; var a = []; console.log('2nd='+JSON.parse(JSON.stringify(a))); a[0] = 3; 1st= 2nd= ` – saurabh Aug 21 '14 at 19:35

score 1 · Answer 2 · answered Feb 03 '12 at 22:39

1

Your create_new_card function is wrong - you call new_card.number instead of new_card.card_number which always results in undefined being added to the list resulting the behaviour that you have observed. The correct version is:

create_new_card: (card_number) ->
  new_card =
    card_number: card_number
  list[new_card.card_number] = new_card
  return new_card

answered Feb 03 '12 at 22:39

Callum Rogers

15,630
17
67
90

Sorry that was just a typo. That part is correct in the code I'm using, and I corrected it in the question, thanks. – Pumpinglemma Feb 03 '12 at 22:43

score 1 · Answer 3 · answered Feb 03 '12 at 22:51

1

Are you using Chrome? console.log does not execute immediately. Its a shame, but too bad for us.

answered Feb 03 '12 at 22:51

caleb

1,579
12
12

Javascript code execution order strangeness

3 Answers3

Linked