JavaScript: Access own Object Property inside Array Literal

Question

Given an Array Literal inside a JavaScript Object, accessing its own object's properties does not seem to work:

 var closure =  {

         myPic : document.getElementById('pic1'),
         picArray: [this.myPic]
 }    

 alert(closure.picArray[0]); // alerts [undefined]

Whereas declaring an Array Item by accessing an other JavaScript Object seem to work

 var closure1 = {
     
      myPic : document.getElementById('pic1')
 }
     
 var closure2 =  {
   
         picArray: [closure1.myPic]
 }    
     
 alert(closure2.picArray[0]); // alerts [object HTMLDivElement]

Example: http://jsfiddle.net/5pmDG/

possible duplicate of [Self-references in object literal declarations](http://stackoverflow.com/questions/4616202/self-references-in-object-literal-declarations) — Bergi, Feb 05 '13 at 07:58

score 10 · Accepted Answer · edited May 23 '17 at 10:27

The this value will not work like that, it refers to a value determined by the actual execution context, not to your object literal.

If you declare a function member of your object for example, you could get the desired result:

var closure =  {
  myPic: document.getElementById('pic1'),
  getPicArray: function () {
    return [this.myPic];
  }
};
//...
closure.getPicArray();

Since the this value, inside the getPicArray function, will refer to your closure object.

See this answer to another question, where I explain the behavior of the this keyword.

Edit: In response to your comment, in the example that I've provided, the getPicArray method will generate a new Array object each time it is invoked, and since you are wanting to store the array and make changes to it, I would recommend you something like this, construct your object in two steps:

var closure =  {
  myPic: document.getElementById('pic1')
};
closure.picArray = [closure.myPic];

Then you can modify the closure.picArray member without problems.

Thanks! Excellent answer. How would you then modify the array persistently? — Stephan Kristyn, Jul 26 '10 at 01:14
@Stephan, Thank you!. With my second example, you can simply use the `picArray` property, e.g. `closure.picArray.push("foo");` — Christian C. Salvadó, Jul 26 '10 at 01:48

Anurag · Answer 2 · 2010-07-25T19:48:40.333

The this property does not point to the closure object. If we were to define the myPic property on the global scope, then you will see picArray initialized with that value. Consider this example:

<script>
window.myPic = "Global myPic";

var closure =  {
    myPic : document.getElementById('pic1'),
    picArray: [this.myPic] // this refers to the global object
};

console.log(closure.picArray); // ["Global myPic"];
</script>

this is one of the hardest concepts in JavaScript. You might like this article on the topic.

JavaScript: Access own Object Property inside Array Literal

2 Answers2

Linked

Related