1

In the following code-snippet, the equation is manipulated right-to-left. typeof x returns undefiend (but in string format), which gets stored in var x. Now, we know "undefined" !== undefined, as they are 2 different data-types.

Don't you guys think, Chrome is acting weird or Not-upto-the-mark by showing both the 2 items in same format in console-window? Isn't it wrong behavior? Please, help explain if I am right saying, Chrome should depict "undefined" with double-quotes in console (To remove the confusion). Is this something that developers at Google missed out, or they did not care or they let this behavior (strings wihtout quotes in console) intentionaly?? I am confused. Pls, suggest your views.

var y = 1, x = y = typeof x;
console.log(x);
console.log(x === undefined);
console.log(x === "undefined");
console.log("undefined");

a = "Peter"; b = "Jacob";
console.log(a, b, "Ronald");
Deadpool
  • 6,416
  • 5
  • 32
  • 64
  • Yes, they look same, but one is a data-type (`undefined`), other one is data-type(`string`) whose value is undefined. So, by looking there is no way I can differentiate. I am saying shouldn't google improve showing string-with-undefined-value as `"undefined"` at console? Won't this be better and clear for users? – Deadpool May 29 '21 at 01:35

1 Answers1

3

That's how all logged strings render in Chrome: black, without delimiters.

The value undefined is distinguished by color, but it's kind of hard to see - unlike strings, undefined the value is slightly grey-ish instead of black:

console.log("undefined");
console.log(undefined);
<img src="https://i.stack.imgur.com/kBkAp.png">

Yeah, IMO it could definitely stand to be more obvious.

A weird hack you could implement to make it clearer would be to patch console.log and apply CSS of your own when the value is undefined.

const origConsoleLog = console.log;
console.log = (...args) => {
  if (args.length > 1) origConsoleLog(...args);
  const [arg] = args;
  
  // customize...
  if (arg === undefined) origConsoleLog('%cundefined', 'font-weight: bold; color: grey');
  else origConsoleLog(arg);
};

console.log("undefined");
console.log(undefined);
<img src="https://i.stack.imgur.com/qFFMC.png">

You could apply this to all sites with a userscript if you wanted, so you don't have to add it each time.

CertainPerformance
  • 260,466
  • 31
  • 181
  • 209
  • Vow! That level of detailing I was expecting. Thanks, ... it helps, but still for color-blinds or "Web-Accesibility", don't you think, Google should anyways attach double-quotes. Though now I understand, they did try to make some difference - to help end-user! Your suggest would help. – Deadpool May 29 '21 at 01:39
  • 1
    You can use `%o` to give it the same format as the console. e.g. `console.log('%o', yourval);` – MinusFour May 29 '21 at 01:51