JavaScript: How browser consoles displays the object key values

Question

From the Chrome console :

> myParam = {"test": "test value"}    
> myFunc = function(x) { myParam[x] = x; }

> myFunc("func value")
> myParam
{test: "test value", func value: "func value"} // (a) question

> myFunc(2)
> myParam
{2: 2, test: "test value", func value: "func value"}

> myFunc()
> myParam
{2: 2, test: "test value", func value: "func value", undefined: undefined} // (b) question

this is the latest version of Chrome to day (69.0.3497.100)
Please explain how, in JavaScript

a) can be created an object member containing spaces ("myParam.func value")
b) can be created an "undefined" object member ("myParam.undefined")
c) for the (b) case, is the "undefined" really "undefined" or just a string "undefined" ?

---

PS. Thanks to the @ryanpcmcquen's remark, the following PS

---

PPS. Could you confirm my supposition that this is a Google Chrome v(69.0.3497.100) console display bug if the strings are not displayed like strings, "between brackets" and in red color?

---

PPS.
Only Firefox seems to correctly display the string keys:

Chrome, Opera

Firefox

Edge

MS IE

Answer 1

Considering object foo:

var foo = {};

a) can be created an object member containing spaces ("myParam.func value")

// You have to use square bracket notation when
// declaring properties with spaces.
foo['func value'] = 'Whatever you want.';

b) can be created an "undefined" object member ("myParam.undefined")

// Keyword undefined:
foo[undefined] = undefined;
// String 'undefined':
foo['undefined'] = 'undefined';

c) for the (b) case, is the "undefined" really "undefined" or just a string "undefined"?

Depends on how you define it. In your screenshot it is the keyword undefined for the property value, and the string 'undefined' for the key.

To verify the types inside your object you can run:

Object.keys(foo).map(key => typeof key);
Object.values(foo).map(value => typeof value);