1

I have an object with an array (of class objects) as one of its values. I have a function that, in part, runs a class method on one of the objects inside that array (within the object).

When I run my code, printing the array before and after the function, the change is both present before AND after the function runs.

Why is this happening? Hoisting?

As a test, I created another key:value pair in the object such that the value is an integer, and changed my function to just bump that integer up 1. Here, it works fine - the print of my object before the function has that integer as 1, and then afterward has the integer as 2.

I also tried NOT using a class method on the object to make the adjustment, and it still failed.

class Book{
constructor (color, title, pagecount){
    this.color = color;
    this.title = title;
    this.pagecount = pagecount;
}

changePages() {
    this.pagecount += 50;
}
}

let book1 = new Book("Red", "Book1", 100);
let book2 = new Book("Blue", "Book2", 200);
let book3 = new Book("Green", "Book3", 300);

var myBookArr = [book1, book2, book3]

var myObj = {arr: myBookArr, integerTest: 0}


function thisDoesStuff(){
    //other operations not related to myObj
    myObj.arr[0].changePages();
}

When I run the below, in BOTH console.logs, it shows that arr[0] (which is book1) has 150 pages.

console.log(myObj);
changePages();
console.log(myObj);

I am expecting the first console.log to show book1 as its original value, then the function changes it.

Jonathan
  • 191
  • 2
  • 7
  • 1
    Is `changePages();` supposed to be `thisDoesStuff();`? – UnholySheep Apr 24 '19 at 20:00
  • 1
    actually, that code will throw an error because `changePages` is undefined in that scope – Adelin Apr 24 '19 at 20:00
  • 2
    Does chrome show you a tiny exclamation mark telling you that the value was evaluated just now? – Salman A Apr 24 '19 at 20:03
  • This is a simplified version of what i'm working on (a game). thisDoesStuff() is another function that, well, does stuff, and part of that function is to run the class method on that object. @Adelin changePages is currently not throwing an error. – Jonathan Apr 24 '19 at 20:03
  • @SalmanA hits the point. I'm pretty sure that is what is happening – Adelin Apr 24 '19 at 20:03
  • If you are using Chrome dev tools to see the console logs, the dev tool **keeps updating the value logged**. – Anis R. Apr 24 '19 at 20:03
  • @SalmanA I don't see an exclamation point anywhere. I actually just added console.log("start") to my class method to see where it's being run, and it actually isn't being run until the thisDoesStuff() function is running EDIT The comment below here helped out with that as well. Thanks everyone. – Jonathan Apr 24 '19 at 20:04

2 Answers2

5

Please, hover on the icon with i letter on it near your log.

enter image description here

You will see, that Chrome (if you using Chrome, of course) will say:

Value below was evaluated just now

It happens because objects and other complex entities are being passed by reference, not by value. So, when you are expanding you log, browser getting up-to-date value of the reference.

Try to console.log copy of your value (e.g. console.log({...myObj})), or use JSON.stringify or other string-like representation of your object.

Note, that it is not error in your code. It is just a feature of the console.log, so (if I interpreted it correctly) your code works just fine :)

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Limbo
  • 2,123
  • 21
  • 41
  • 1
    Thank you, this is a helpful explanation. My biggest concern was that somehow the operation of the function was happening before I'd want it - I was using the before/after console.log to test to make sure it was working right. It seems like it IS working right, but my browser was updating when I went to check to see the status of the "before." – Jonathan Apr 24 '19 at 20:08
  • @Jonathan you are absolutely right) – Limbo Apr 24 '19 at 20:09
0

Your code is correct, it's all based off when the browser decides to evaluate the object for console.log output.

See post here that another user was having a similar question:

Weird behavior with objects & console.log

Daniel McIntyre
  • 54
  • 11