When I create objects in Javascript, and log them out to the console, I nearly always see a Javascript object in the console. For example

var myObj = {
 bla: "foo"
}
console.log(myObj);

will output as

{
  bla: "foo"
}

However, Date acts differently. When I create a Date, it somehow knows to print out a "String" representing the date of the Date object.

For example:

var myObj = {
     date: new Date()
    }
    console.log(myObj);

gets me

{
   date: Sun Oct 25 2020 18:36:19 GMT-0700 (GMT-04:00)
}

What is the underlying mechanism here? How can I do the same with my own objects ?

When I create objects in Javascript, and log them out to the console, I nearly always see a Javascript object in the console. For example

var myObj = {
 bla: "foo"
}
console.log(myObj);

will output as

{
  bla: "foo"
}

However, Date acts differently. When I create a Date, it somehow knows to print out a "String" representing the date of the Date object.

For example:

var myObj = {
     date: new Date()
    }
    console.log(myObj);

gets me

{
   date: Sun Oct 25 2020 18:36:19 GMT-0700 (GMT-04:00)
}

What is the underlying mechanism here? How can I do the same with my own objects ?

• javascript
• date
• object

• hmn, looks like you still see a javascript object ;) and the string is the actual output of new Date() whenever it gets toString like when using $('input').val(new Date()) you get the same result without console – john Smith Commented Oct 26, 2020 at 1:45
• 1 There is no standard covering console output, so you see whatever the implementation developers want you to see. For Dates, the SO console appears to call toISOString, browser consoles appear to call toString, other environments may do other things. – RobG Commented Oct 26, 2020 at 5:54

3 Answers 3

This is a special exception the browser has made for Date objects, to make them easy to examine when logged. Otherwise, if the default behavior was followed, you'd get an empty object with no own-properties and no useful information about what the object actually contains:

However, you can observe somewhat similar behavior and display an arbitrary string when something is logged if the thing that's logged gets coerced to a string, by putting a toString method on the object:

const obj = {
  toString() {
    return 'foobar';
  }
};

console.log(String(obj));

To get something that actually logs like Date objects do without any coercion on your part, you'd have to change the browser's internal code. It's not something doable from JS.

There are a few other sorts of built-in objects that have special logging behavior, including:

• Arrays
• Functions
• Errors

It means that Date object has toString method implemented under the hood.

More reading: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString

Actually, the new Date() constructor function does not print a string in the console. It looks like a string but run the typeof operator against it and you'll see it's an object:

const date = new Date()
console.log(date)
console.log(typeof date)

Also, if you are a React developer and will try to use the above date variable between curly brackets in order to output the dynamic content, you'll get an error. If it was a string it would work flawlessly. It is so because objects in the JSX expressions are invalid while strings are perfectly valid.

Again, the result of calling new Date() is an object. It does not look like one but it definitely is an object.

It is also possible to call Date() constructor function without the new keyword in front of it. And guess what? The result of such a call is a normal string that can be used inside of the JSX expression.

const date = Date()
console.log(date)
console.log(typeof date)