Overriding object's toString in javascript

Question

I was playing around with the toString method and when I tried to override a function's toString method, I could see the effect when I tried console.log-ging it. http://jsbin.com/bigocijuqo/1/edit?js,console.

function greet(){
  console.log("Hello!");
}
console.log(greet);

greet.toString = function () {
   return "Overridden toString";
};
console.log(greet);

produces

function greet(){
window.runnerWindow.proxyConsole.log("Hello!");
}
Overridden toString

However, when I tried the same with objects, it doesn't seem to be taking effect. http://jsbin.com/jebunakibi/1/edit?js,console

var ray = {
  'name': 'Ray',
  'fav_food': 'Carrots'
};

console.log(ray);

ray.toString = function () {
  return "My name is " + this.name + " and I loooove " + this.fav_food;
};

console.log(ray);

produces

[object Object] {
  fav_food: "Carrots",
  name: "Ray"
}
[object Object] {
  fav_food: "Carrots",
  name: "Ray",
  toString: function () {
  return "My name is " + this.name + " and I loooove " + this.fav_food;
}
}

I expected the second console.log would print

My name is Ray and I loooove Carrots

I even tried changing the toString method in Object.prototype, but it's still not taking any effect. Can somebody explain what is wrong with this code?

Rick Hitchcock · Accepted Answer · 2015-05-05 19:39:21Z

1

Interesting. Chrome ignores the toString() method in console.log() output.

If you did alert(ray) instead, you would see "My name is Ray and I loooove Carrots."

To see the same thing in the console, do this:

console.log(ray.toString());

… or this:

console.log(ray + '');

You could create a new console function for just this purpose:

console.say= function(s) {
  console.log(s + '');
}

Example:

console.say= function(s) {
  console.log(s + '');
}

var ray = {
  'name': 'Ray',
  'fav_food': 'Carrots'
};

ray.toString = function () {
  return "My name is " + this.name + " and I loooove " + this.fav_food;
};

console.say(ray); //My name is Ray and I loooove Carrots

edited May 5, 2015 at 19:39

answered May 5, 2015 at 19:17

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arun Kumar Nagarajan Over a year ago

Thanks, however, I'm a little confused why it's not the same for functions? With greet, when I said console.log(greet); the toString function gets called and whatever that returns is what we see in the console.

Rick Hitchcock Over a year ago

Now that's a good question, why it works for functions but not other objects.

user2864740 Over a year ago

I would imagine Chrome uses some internal representation-construction. This allows it to 'browse' objects and to maintain an accurate object graph view, even in the light of modified prototypes. Other browsers like FF and IE will implictly perform a toString, and they require console.dir to get behavior similar to that in Chrome's console.log. Developer tools are developer tools; the behavior is implementation-defined and quirks/differences observed with such should be dismissed from other JavaScript behavior.

Rick Hitchcock Over a year ago

@user2864740, I agree, and it's probably a good thing that Chrome acts that way. When debugging, it's often best to see actual data structures. Interesting that Chrome doesn't apply that behavior to functions, however.

Arun Kumar Nagarajan Over a year ago

@user2864740, I see that in chrome, your example, indeed results in "hi!"!

|

Collectives™ on Stack Overflow

Overriding object's toString in javascript

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related