This is more a matter of curiosity than a serious problem but in the MDN documentation for console.log about string substitutions it says:

%o or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

Is there any difference between %o and %O? I haven't noticed anything obvious in chrome. If not why do both exist? Just some old patibility thing or is there a reason we have both?

This is more a matter of curiosity than a serious problem but in the MDN documentation for console.log about string substitutions it says:

%o or %O Outputs a JavaScript object. Clicking the object name opens more information about it in the inspector.

Is there any difference between %o and %O? I haven't noticed anything obvious in chrome. If not why do both exist? Just some old patibility thing or is there a reason we have both?

• javascript
• ecmascript-6
• console.log

• I hope this isn't a duplicate but I tried searching multiple times and even with quotes all the results for %o and %O seemed to ignore the percent and just give me results about big O notation. – Peter Gerdes Commented Jul 20, 2021 at 4:18
• 3 The only difference I seem to have found was this post which states %o displays Element is displayed with optimally useful formatting while %O displays Element is displayed with generic JavaScript object formatting. – Sherif Commented Jul 20, 2021 at 4:36
• @Nick Parson's excellent answer below explains what the difference is. – Peter Gerdes Commented Aug 17, 2021 at 10:51

1 Answer 1

There are some slight differences between the two. From the console standard:

4. If specifier is %o, optionally let converted be current with optimally useful formatting applied.

5. If specifier is %O, optionally let converted be current with generic JavaScript object formatting applied.

The standard then describes the difference between optimally useful formatting and generic JavaScript object formatting here:

An object with generic JavaScript object formatting is a potentially expandable representation of a generic JavaScript object. An object with optimally useful formatting is an implementation-specific, potentially-interactive representation of an object judged to be maximally useful and informative

One way to think about the difference between the two is %O is like using console.dir() as this will log the object's generic JavaScript object formatting, showing you specific properties of the object, whereas using %o is like using console.dirxml() or regular console.log() as this will log the object in its optimally useful formatting, which can be a developer-friendly/simplified representation of the object. As a result, %o will usually give you what you're after, but %O can give you further details such as the object's properties.

You can see the difference in certain objects, below are some of these objects:

const regex = /abc/;
console.group("Regex object");
console.log("optimally useful formatting (%%o): %o", regex);
console.log("generic JavaScript object formatting (%%O): %O", regex);
console.groupEnd();

const fn = () => "foo";
console.group("Function object");
console.log("optimally useful formatting (%%o): %o", fn);
console.log("generic JavaScript object formatting (%%O): %O", fn);
console.groupEnd();

const ul = document.querySelector("ul");
console.group("DOM node");
console.log("optimally useful formatting (%%o): %o", ul);
console.log("generic JavaScript object formatting (%%O): %O", ul);
console.groupEnd();

<ul><li>1</li><li>2</li><li>3</li></ul>

Output in Chrome console: