Javascript variable values changing between two console.log() lines

Question

I'm using Fancytree, and I'm creating a new node using the ExtEdit extension. The title (main text) of the node appears to be set correctly, but the value consistently changes between two console.log() statements and the wrong value is being sent to the server.

What's going on here? This is boggling my mind.

Here's the FancytreeNode API.

This is the full function I'm using:

function createNode(data) {
    console.log('this is the data object');
    console.log(data);
    console.log('this is data.node.title');
    console.log(data.node.title);
    $.ajax({
        method: 'post',
        data: {
            name: data.node.title,
            parentId: data.node.parent !== undefined ? data.node.parent.key : null
        },
        url: '/my/url'
    }).success(function (thisData, status, jqXHR) {
        data.node.key = thisData.id;
    });
}

This is the output. Notice how data.node.title is different.

Console.log takes a reference as data is an object while data.node.title is a string . To know the value at an exact time, clone it (you can do it with toJSON(stringify)) — Nevosis, Jun 05 '17 at 12:46
@Nevosis I'm sorry, I don't quite understand. I've never had an issue in the past where the two values were different like this. I thought console.log simply output the object/string as it currently exists. I don't understand why `JSON.stringify(data)` would return a different value. — vaindil, Jun 05 '17 at 14:06
@Nevosis Ultimately, I don't understand how I would send the value to the server. — vaindil, Jun 05 '17 at 14:17

score 0 · Accepted Answer · answered Jun 05 '17 at 19:42

I was able to figure it out from the comment by Nevosis. When an object is logged using console.log(), it is not actually evaluated--it's only a reference. The Fancytree event that causes the function to fire acts a little strangely; data.node.title isn't set to the new value until the event finishes, but I wasn't expanding the object in the console until after that point. data.node.title when logged directly is evaluated (because it has to be), which is why the value was different. I was able to see the correct data object by setting a breakpoint immediately after that console.log().

Javascript variable values changing between two console.log() lines

1 Answers1