`console.log({ '"\'': 0 })` gives syntactically invalid JS

[lionel-rowe]

Version

23.3.0

Platform

Linux DESKTOP-3S4OV0F 5.15.167.4-microsoft-standard-WSL2 #1 SMP Tue Nov 5 00:21:55 UTC 2024 x86_64 x86_64 x86_64 GNU/Linux

Subsystem

No response

What steps will reproduce the bug?

console.log({ '"\'': 0 })
// logs { `"'`: 0 }

However, { `"'`: 0 } is not syntactically valid in JS:

let x
x = { `"'`: 0 }
// parse error: Unexpected token ```. Expected identifier, string literal, numeric literal or [ for the computed key at 2:7
x = { '"\'': 0 }
// ok
x = { [`"'`]: 0 }
// ok

While there's no hard requirement for console.log to always yield syntactically invalid JS (e.g. objects such as File { name: "", size: 0, type: "" }, truncation with ..., etc.) I'd generally expect small JSON-compatible objects to be displayed in a way I can directly copy-paste into my code.

For comparison, Deno has the same issue, while Bun doesn't.

How often does it reproduce? Is there a required condition?

Always, given an object with a key that contains both single ' and double " quotes.

What is the expected behavior? Why is that the expected behavior?

Either { '"\'': 0 }, { "\"'": 0 }, or { [`"'`]: 0 }

What do you see instead?

{ `"'`: 0 }

Additional information

No response

[BridgeAR]

This is intentional for readability reasons in the default case.

I do believe it would be valuable to have a option to generate JSON compatible output (a lot of things generate invalid output). It is just tricky to do that without slowing down the default case and it requires a substaintial change. Not slowing down the average case would for example be possible with a unique implementation, while that has the downside of otherwise not using the same feature set.

Would you be up to try to implement such option? I can't guarantee it would land though.

[alexsch01]

It's also allowed in Chrome DevTools

[aduh95]

Why would you expect the output to be valid JS? That seems like a weird expectation, which is broken by many other inputs (e.g. console.log({ fetch }) outputs { fetch: [Function: fetch] }, which is also not valid JS). If you want something that outputs valid JS, why not use JSON.stringify?

[alexsch01]

It's also allowed in Chrome DevTools

It's not, it throws the same syntax error as reported in the OP.

Google Chrome 133.0.6943.99 (Official Build) (64-bit) (cohort: Stable)

[aduh95]

@alexsch01 console.log({ '"\'': 0 }) is valid JS, no one is disputing that, it's not surprising it "works everywhere". The issue is about ({ "': 0 }), which is what Node.js outputs, and is not valid JS, hence works nowhere.
Anyway, it's just a misunderstanding, so I've hidden our comments to keep the issue focused on the original point.

[lionel-rowe]

Why would you expect the output to be valid JS? That seems like a weird expectation, which is broken by many other inputs (e.g. console.log({ fetch }) outputs { fetch: [Function: fetch] }, which is also not valid JS). If you want something that outputs valid JS, why not use JSON.stringify?

It's not a hard expectation, more a quality-of-life thing. I wouldn't expect it to hold for functions, instances of classes, etc., just things that can losslessly round-trip JSON.parse(JSON.stringify(obj)) (plus maybe bigints), and even then only if the object is small-ish (i.e. doesn't need truncation). Further, I don't expect the output for such inputs to be valid JSON, only valid JS.

Would you be up to try to implement such option? I can't guarantee it would land though.

Afraid not, I'm just raising this issue for completeness as I raised an equivalent issue against Deno and noticed Node suffers from the same problem. Feel free to close if this is considered out of scope.

[BridgeAR]

I am going to close it since we have many inputs that would not be valid JS.