Printing out javascript objects

Viewed 195

In the example below I have two console.log's, and I'm getting different answers each time (despite my expecting to get the same answer).

class Dog {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return this.name;
  }
}

let maxi = new Dog('john', 'male');
console.log(maxi) // Dog { name: 'john', gender: 'male' }
console.log(`${maxi}`); // john

In the first example, it seems like I'm logging the object's type and its properties. In the second example, however, it seems like my custom toString() method is being used to convert the object into a string.

Why the difference? And is there a place in the documentation that explains why string literals use the toString() method to convert objects into a string whereas console.log() doesn't. In addition, where does console.log() even pull this string representation of the object?

Thanks!

3 Answers

If you log objects in the last versions of chrome or firefox what you get logged is a reference to the object, and probably not the 'value' at the moment when you call the console.log(). but it's the value of the object at that time. Reference : Mozilla

So what does fix this problem, convert your object into a string(your log 2), for example:

class Dog {
    constructor(name, gender) {
      this.name = name;
      this.gender = gender;
    }
    toString() {
      return this.name;
    }
  }
  
  let maxi = new Dog('john', 'male');
  console.log('Dog: ' + maxi) // Dog { name: 'john', gender: 'male' }
  console.log(`${maxi}`); // {"name":"john","gender":"male"}

this works because I use the + operator instead of the , operator, so he will stick it into the string instead of making a reference to your object.

Summary A variable does not store the value of the object, but a reference (the address in memory) for the value. So your copies that reference instead of the object.

As I think your requirement is to print object in string form so I have this solution below.

Oh I used arrow function here. you can use normal es5 function. Thank you.

class Dog {
  constructor(name, gender) {
    this.name = name;
    this.gender = gender;
  }
  toString() {
    return JSON.stringify(this);
  }
}

let maxi = new Dog('john', 'male');
console.log(`${maxi}`); // {"name":"john","gender":"male"}

I think that Console.log uses internaly a method toJSON in order to transport an object in to string. So you must write your own toJSON...

    class Dog {
      constructor(name, gender) {
        this.name = name;
        this.gender = gender;
      }
      toJSON() {
        return this.name;
      }
    }
    let maxi = new Dog('john', 'male');
    console.log(maxi) // Dog { name: 'john', gender: 'male' }
    console.log(`${maxi}`); // john

This really don't work... as Bergi tell me and he was right. I tried the code without remove the original: toString() { ... } and adding the toJSON() {...} and '>>>' like this: console.log('>>>'+maxi) and take output //>>>john. So, i thought that the toJSON() give the //>>>john, but it was the toString(). Thank you Bergi.

Related