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);

Answer 2

Answer for c "undefined" usually towards to "null" value, you can console.log(null) and you can find the undefined

Answer 3

This is the one of the beauties of JavaScript.

a) We can create object keys with spaces, since object keys can be strings. when you want to see the value of object whose keys are String you need to do that in the following manner

var a = {
  'my key': 'my key'
  yourKey: 'your key'
}
a['my key'];
a.yourKey

b) In JavaScript undefined is a type of data, so that is perfectly legal to have variable whose value is undefined

c) It really is undefined. See more here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined

Answer 4

Lets answer your questions.

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

const myParam = {}
myParam["func value"] = 'serge';
console.log(myParam)

Yes, but a property name that has a space or a hyphen, or that starts with a number can only be accessed using the square bracket notation

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

Yes. An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string

const myParam = {};
myParam.undefiend = 'serge';
console.log(myParam)

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

I guess it's string "undefined"