Contradictory values when logging object and object.key side by side

Question

I have two console.log statements, one after the other. The first logs an entire object, elem , and the second logs the elem.hero . This is the result I get:

//console.dir(elem)
{ 
    project: {}, 
    hero: {
        path: "569f9dcbe4b0ea7fccac85b4/569f9dd5e4b060eb54c0dd7c",
        fileType:"png"
    }
}

//console.dir(elem.hero)
{ 
    path: "default",
    fileType:"jpg"        
}

Image of it here:

In other words, inspecting the elem object's hero property gives me what I expect, but logging it's value directly to the console gives me an old value. What's going on here? Here's my relevant code.

 var projects = [] function getProjects() { return new Promise(function(resolve, reject){ var url = "http://example.com/api/v2/projects" utils.sendAPIRequest(url, utils.generateToken(), function(err, data, xhr){ if(err) { reject(Error(err)) } else { for(var i in data) { projects.push({project: data[i], hero: { path: "default", fileType: "jpg"}}) } resolve() } }) }) } function constructHeroURL(elem){ return new Promise(function(resolve, reject){ var url = 'http://example.com/api/v2/files?size=1&query=meta.image.ExecPortalArtistImage_1445947066011:Yes+AND+project._id:' + elem.project.id utils.sendAPIRequest(url, utils.generateToken(), function(err, data, xhr){ if(err) { reject(Error(err)) } else { for(var i in data) { var id = data[i].id var fileID = data[i].revisions[0].preview[0].fileID var fileType = data[i].revisions[0].preview[0].name.split('.') elem.hero.path = id + '/' + fileID elem.hero.fileType = fileType[fileType.length-1] } resolve() } }) }) } function getHeroImages(elem){ return new Promise(function(resolve, reject){ console.dir(elem) // logs in question console.dir(elem.hero) // on these lines var url = 'http://localhost:3000/media/' + elem.hero.path $.get(url) .done(function(data, status, xhr){ resolve(data) }) .fail(function(xhr, status, err){ reject(Error(err)) }) }) } getProjects() .then(function(){ return projects.map(constructHeroURL) }) .then(function(){ return projects.map(getHeroImages) .reduce(function(sequence, imagePromise) { // Use reduce to chain the promises together, // adding content to the page for each chapter return sequence.then(function() { // Wait for everything in the sequence so far, // then wait for this chapter to arrive. return imagePromise }).then(function(image) { console.log(image) }) }, Promise.resolve()) }) 

Answer 1

I think it is cause properties of elem.hero have primitive types but property hero of elem has reference type .

So result of console.log(elem.hero); shows its property value (primitives) and console.log(elem); shows reference to its property hero , which is updated after successful request.