By Steve K


2010-07-25 19:28:17 8 Comments

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/

2 comments

@CMS 2010-07-25 19:42:43

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.

@Steve K 2010-07-26 01:14:06

Thanks! Excellent answer. How would you then modify the array persistently?

@CMS 2010-07-26 01:48:33

@Stephan, Thank you!. With my second example, you can simply use the picArray property, e.g. closure.picArray.push("foo");

@Anurag 2010-07-25 19:40:26

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.

Related Questions

Sponsored Content

96 Answered Questions

[SOLVED] How can I remove a specific item from an array?

  • 2011-04-23 22:17:18
  • Walker
  • 6837230 View
  • 8413 Score
  • 96 Answer
  • Tags:   javascript arrays

47 Answered Questions

[SOLVED] Sort array of objects by string property value

53 Answered Questions

42 Answered Questions

[SOLVED] How do I remove a property from a JavaScript object?

49 Answered Questions

[SOLVED] How to check if an object is an array?

39 Answered Questions

[SOLVED] Loop through an array in JavaScript

18 Answered Questions

[SOLVED] How to insert an item into an array at a specific index (JavaScript)?

40 Answered Questions

[SOLVED] For-each over an array in JavaScript

21 Answered Questions

[SOLVED] Storing Objects in HTML5 localStorage

67 Answered Questions

[SOLVED] What is the most efficient way to deep clone an object in JavaScript?

Sponsored Content