snippetjavascriptMinor
Helper function to format-output any type of variable
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
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
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.
If I now pass either of
Which is worse than using the console, given that
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 exceededWhich 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 exceededContext
StackExchange Code Review Q#123283, answer score: 5
Revisions (0)
No revisions yet.