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?

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?

• javascript
• arrays
• javascript-objects

• I don't know about anyone else, but I personally cannot work out what you are actually trying to do. could you please elaborate your explanation? – Dendromaniac Commented May 27, 2015 at 22:41
• I know that some libraries have helper functions to make them accessible. Like D3 has a function called keys that does this. github./mbostock/d3/wiki/Arrays – canyon289 Commented May 27, 2015 at 22:42
• Your variable names are not accessible to any of the executing code. You could, of course, do { boxA: {color: 'red', width: 100}, boxB: {color: 'yellow', width: 200} } and then iterate the keys of the nested object. – ray Commented May 27, 2015 at 22:42
• 1 @Dendromaniac sorry if not clear. To rephrase, Is there some property of the array boxArray which contains the string "boxA", "boxB", "boxC", given that boxArray was built from those objects? – SauceCode Commented May 27, 2015 at 22:43
• @Ben Philipp that doesn't mater, it's an Array of Objects. Only primitive variables don't get affected when you are accessing Array Elements, so you are affecting the original Object if you make changes to Array variable properties or those Array variables. console.log(boxArray[i]) should work in your test Browser. You may want to use Object.create() and its backward patible counterpart, to create a new instance of your Objects, if you don't want to affect the original Object. – StackSlave Commented May 27, 2015 at 22:59

6 Answers 6

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

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

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}];

If you're looking to get the keys of an object try Object.keys(object)

Object.keys(boxA)

["color", "width"]

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

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