HiveBrain v1.2.0
Get Started
← Back to all entries
snippetjavascriptMinor

Helper function to format-output any type of variable

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
formathelperanyfunctionoutputtypevariable

Problem

This question has already got some reviews, so I could partially improve my code: please look at my self-answer below, which also contains comments about the review.

I'm frequently interested to answer SO questions regarding (JS) objects and/or arrays manipulation.

When providing a snippet, and if the actual result looks somewhat complex, it's not enough to merely console.log() it, because it's rendered as a compacted (and often even reduced) single line where it's not easy to directly retrieve each piece of data.

Then I was tired to have to either spend time to arrange the output a bit (but generally not completely) or let the result appear unclear, so I decided to write a helper function for that:

```
/**
* @param src: any variable of any type
* @param html: output format (true|false); default = false
* @param level: (internal, don't use)
*
* @return string: formatted output
*/
function showObj(src, html, level) {
level |= 0;
const tabCount = 4,
edges = '{[}]';
var tab = (!!html ? ' ' : ' ').repeat(tabCount),
br = !!html ? '' : '\n',
offset = tab.repeat(level);
switch (typeof src) {
case 'boolean':
case 'number': return src.valueOf();
case 'string': return '"' + src.toString() + '"';
case 'symbol': return src.toString();
case 'undefined': return 'undefined';
case 'function': return (src.name || 'function') + '()';
case 'object':
if (src === null) {return 'null';}
if (src === this) {return src.valueOf();}
if (!!src.jquery) {return 'jQuery ' + src.jquery + ' object';}
if (!Object.keys(src).length) {return src;}
var output = [],
isArr = Array.isArray(src);
for (let key in src) {
output.push(
br + offset + tab + (isArr ? '' : ('"' + key + '": ')) +
showObj(src[key], html, level + 1)
);
}
return edges[+isArr] + output.join(', ') + br + offset + edges[+isArr + 2];
default:
return '(unexpected!) ' + typeof s

Solution

Your code could do with some formatting. As it stands, it sure is short, but we have minifiers for that sort of thing. I have to spend a lot of effort to read certain parts because it is filled with clever tricks.

var one = {};
var two = {'one':one};
one.two = two;


If I now pass either of one or two into showObj, it produces an error:

Uncaught RangeError: Maximum call stack size exceeded


Which is worse than using the console, given that console.log(one) would have given me a nice expandable object, in chrome at least. You might want to handle circular references like this. Printing any sort of doubly linked-list will kill your showObj.

Code Snippets

var one = {};
var two = {'one':one};
one.two = two;
Uncaught RangeError: Maximum call stack size exceeded

Context

StackExchange Code Review Q#123283, answer score: 5

Revisions (0)

No revisions yet.