JavaScript - Computed properties - deep confusion

Question

Seems I am quite confused by computed properties in JavaScript.

When I define an object and I put [d] as a key (as a property key/name) what does this [d] actually do? Seems that for some values d it calculates s = d.toString() and uses that value s as the property key. But for other values d (e.g. when d is a symbol) it uses really the symbol's value as the key.

So this dual behavior of [d] (as a syntax construct) seems confusing. Could someone explain in depth how this works?

Are there other special cases btw? Or is it just when d is a Symbol when we have that special behavior?

Back to the basics: what things can be keys/names of properties of an object? Is it just strings or just strings and symbols or is there also something additional... ?

Example:

var symbol = Symbol("test");

function Animal(name){
	this.name = name;
}

Animal.prototype = {};
Animal.prototype.constructor = Animal;

function Dog(breed){
    this.breed = breed;
    this.name = "Dog";
    this.s = symbol;
}

Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

console.log("001");
var d = new Dog("Sharo");
for (let x in d){
    console.log(x, ":", d[x]);
}

console.log("002");
d = new Object();
for (let x in d){
    console.log(x, ":", d[x]);
}

console.log("003");
d = new Number(5);
for (let x in d){
    console.log(x, ":", d[x]);
}

var d1 = {};
var d2 = {};

var d = new Dog("Sharo");

var m = {[d1] : 5, [d2] : 10, [d] : 20, z : 100, symbol: 2000, [symbol] : 5000};

console.log("============================");
console.log(m);

for (let x in m){
    console.log(x, ":", m[x]);
}
console.log("============================");

Answer 1

Since no one seems interested in answering this question I will answer it myself based on the comments which I got above, and due to which I am not confused anymore.

Note that this answer here is ES6 based. I mean... who knows what else the JavaScript future will hold :)

When I define an object and I put [d] as a key (as a property key/name) what does this [d] actually do? Seems that for some objects d it calculates s = d.toString() and uses that value s as the property key. But for other objects d (e.g. when d is a Symbol) it uses really the Symbol's value as the key.

Yes, that's correct. When d is a Symbol its value is used directly. When d is anything but Symbol its value is coerced to a string and that string is used as the property name/key. The coercion is more like String(d) rather than d.toString().

So this dual behavior of [d] (as a syntax construct) seems confusing. Could someone explain in depth how this works?

Already explained above.

Are there other special cases btw? Or is it just when d is a Symbol when we have that special behavior?

There are no other "special cases". As of ES6 only strings and symbols can be property keys.

Back to the basics: what things can be keys/names of properties of an object? Is it just strings or just strings and symbols or is there also something additional... ?

As already said, as of ES6 only strings and symbols can be property keys.

References:

(1) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

"Property names are string or Symbol. Any other value, including a number, is coerced to a string."

(2) https://www.ecma-international.org/ecma-262/6.0/#sec-topropertykey