In an array of named objects in javascript - are the names accessible?

Question

If we create some objects, and fill an array with those objects, are the names stored within the array, or only the properties of the object? I guess this may be trivial, but I haven't been able to find an answer.

var boxA = {color: "red", width: 100};
var boxB = {color: "yellow", width: 200};
var boxC = {color: "blue", width: 300};

boxArray = [boxA, boxB, boxC];

for (var i = 0; i < boxArray.length; i++) {

    //****
    // What code do we insert here to log
    // boxA
    // boxB
    // boxC
    //****

}

Of course, it is a trivial workaround to add

boxA.box = boxA; 

etc and then call

console.log(boxArray[i].box);

But is that really necessary?

Answer 1

To answer your question directly - no, you can't do what you're asking. I've run into the same scenario a few times. Here's what I've done. Instead of using an array, you could just add your objects to an object literal instead, and map the object to some unique key, such as an id.

var boxes = {
  'boxA': {color: 'red', width: 100},
  'boxB': {color: 'blue', width: 200}, 
  'boxC': {color: 'yellow', width: 300}
}

for(var boxKey in boxes) {
    console.log(boxKey);
}

// to use
boxes.boxA; // do something with boxA

Answer 2

No, that does not work like that.

The variable name is a reference to an object in a heap area of memory managed by JS automatically for you.

In details it means that:

var boxA = {color: "red", width: 100};

this statement:

1. Creates an object in the heap
2. Associates a local symbol boxA with that object.

So the object is referenced by one variable yet.

var boxArray = [boxA];

here:

1. An array with one element is created. That element contains a reference to an object. A copy of the reference to be precise. So, the same original object is referenced twice now.
2. A boxArray is assigned a reference to the array, which is also placed in the heap.

To summarize: the variable names exist only in code listing for developers to easier reason about some objects in memory, instead of operating with memory addresses (which would be horrible).

Answer 3

Well the boxArray is filled with values of variables you are putting in it. Example: If you would save three integer variables not the names of variables. So your new boxArray is equal to:

boxArray = [{color: "red", width: 100},{color: "yellow", width: 200},{color: "blue", width: 300}];

Answer 4

如果要获取对象的键，请尝试Object.keys（object）

Object.keys(boxA)

 ["color", "width"] 

Answer 5

Your variable names are not accessible to the executing code, but if you need to be able to do this you can nest the objects:

 var boxes = { boxA: { color: "red", width: 100 }, boxB: { color: "yellow", width: 200 }, boxC: { color: "blue", width: 300 } }; Object.keys(boxes).forEach(function(key) { console.log(key) // boxA, boxB, boxC console.log(boxes[key]) // {color: "red", width: 100}, etc. }); 

Answer 6

Late to the Party but... Since ES6 javascript introduced classes. If classes is an option you could do:

class boxA { constructor() { this.color = "red"; this.width = 100; } };
class boxB { constructor() { this.color = "yellow"; this.width = 200; } };
class boxC { constructor() { this.color = "blue"; this.width = 300; } };

let boxArray = [new boxA(), new boxB(), new boxC()];

for (var i = 0; i < boxArray.length; i++) {
  console.log(boxArray[i].constructor.name);
}