0

so here is my code below. I kind of expected the three functions to return the following in order, as that would make logical sense as the functions were invoked in this order:

  • [{First, false}]
  • [{First, false}, {Second, false}]
  • [{Change, false}, {Second, false}]

But that's not what happened...what ends up happening is I get the exact same return for all the functions!? Results as follows:

  • [{Change, false}, {Second, false}]
  • [{Change, false}, {Second, false}]
  • [{Change, false}, {Second, false}]

How is this possible? Can anyone please explain what is going on?

Here is the code:

var todolist = {
    todos: [],
    displayt: function(){
        console.log(this.todos);
    },
    addTodo: function(todoText){
        this.todos.push({
            todoText: todoText,
            completed: false
        });
        this.displayt();
    },
    changeTodo: function(pos, todoText) {
        //this.todos[pos] = val;
        this.todos[pos].todoText = todoText;
        this.displayt();
    }

}

todolist.addTodo('First');
todolist.addTodo('Second');
todolist.changeTodo(0, 'Change');

Here is my JSfiddle, and when I run it I open the console in Chrome to see the results.

THANKS!! THIS IS DRIVING ME INSANE

EDIT: OKAY! Looks like this is a chrome issue with console.log() and arrays/objects. If I modify the code (below) I can get the expected results, thanks u/jones1618

 var todolist = {

    todos: [],

    displayt: function(){
        for (var i = 0; i<this.todos.length; i++){
            console.log(this.todos[i].todoText);
        }
    },

    addTodo: function(todoText){
        this.todos.push({
            todoText: todoText,
            completed: false
        });
        this.displayt();
    },

    changeTodo: function(pos, todoText) {
        //this.todos[pos] = val;
        this.todos[pos].todoText = todoText;
        this.displayt();
    }

}

todolist.addTodo('First');
todolist.addTodo('Second');
todolist.changeTodo(0, 'Change');
Ryan L
  • 1
  • 2
  • 2
    Likely your console is merely giving you a late evaluated "live" version of the objects. The first call obviously ***cannot*** output "Second". – deceze Jul 20 '17 at 13:34
  • I don't see what you're seeing http://jsbin.com/cacidopube/edit?js,console,output – evolutionxbox Jul 20 '17 at 13:34
  • @evolutionxbox - open the console (dev tools in chrome) and run the fiddle, you'll see the output. – Ryan L Jul 20 '17 at 13:35
  • @deceze - is this a javascript quirk, I don't know why all the functions would have the same output... – Ryan L Jul 20 '17 at 13:36
  • @RyanL It's not a JS quirk, it's due to the console live evaluating the object when it's expanded. Instead log the `todoText` property. – evolutionxbox Jul 20 '17 at 13:38
  • @evolutionxbox - what do you mean 'log the todoText' property? – Ryan L Jul 20 '17 at 13:41
  • To test, you can replace console with alert. Then you can see that the values are coming correct – Jibin.Jay Jul 20 '17 at 13:42
  • @RyanL inside `displayt` console log the property `todoText` of each todo item, instead of the object. This way you'll see that your code is working fine. – evolutionxbox Jul 20 '17 at 13:44
  • You can also try changing `console.log` to `console.table` or `console.dir` - you'll see that not only do these change the structure of the output, but also the time of evaluation/display. – chazsolo Jul 20 '17 at 13:44
  • All please see my edit. Thanks everyone for the help. This was making me nuts. – Ryan L Jul 20 '17 at 14:53

0 Answers0