Databases
StackOverflow2013
Postsdbo
POCan a JavaScript object property refer to another property of the same object?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCan a JavaScript object property refer to another property of the same object?
    text
    copied!<p>I recently tried to create an object like this:</p> <pre><code>var carousel = { $slider: $('#carousel1 .slider'), panes: carousel.$slider.children().length }; </code></pre> <p>My intentions were to improve jQuery's selector performance by caching the results of <code>$('#carousel1 .slider')</code> in an object property, and to keep the code concise and relatively DRY.</p> <p>However, this didn't work. When the code executed, it threw an exception when trying to parse the value of <code>panes</code>, complaining that <code>carousel</code> was undefined.</p> <p>This makes sense, since I'd assume that <code>carousel</code> isn't fully declared until the assignment statement has been fully executed. However, I'd like to avoid resorting to this:</p> <pre><code>var carousel = {}; carousel.$slider = $('#carousel1 .slider'); carousel.panes = carousel.$slider.children().length; </code></pre> <p>That's not too much worse, but the <code>carousel</code> object will have several more properties that rely on the values of other properties, so that could quickly become verbose.</p> <p>I tried using <code>this</code>, but to no avail. I may well not have been using it correctly, or that may not be a valid approach anyway.</p> <p>Is there a way for properties of an object to refer to other properties of the same object, while that object is still being declared?</p> <hr /> <p>Based on Matthew Flaschen and casablanca's answers (thanks, guys!), I think these are the versions of my actual code that I'd end up with, based on each approach:</p> <pre><code>// Matthew Flaschen var carousel = new (function() { this.$carousel = $('.carousel'); this.$carousel_window = this.$carousel.find('.window'); this.$carousel_slider = this.$carousel.find('.slider'); this.$first_pane = this.$carousel.find('.slider').children(':first-child'); this.panes = this.$carousel_slider.children().length; this.pane_gap = this.$first_pane.css('margin-right'); })(); </code></pre> <p>and</p> <pre><code>// casablanca var $carousel = $('.carousel'), $carousel_slider = $carousel.find('.slider'), $first_pane: $carousel.find('.slider').children(':first-child'); var properties = { $carousel_window: $carousel.find('.window'), panes: $carousel_slider.children().length, pane_gap: $first_pane.css('margin-right') }; properties.$carousel = $carousel; properties.$carousel_slider = $carousel_slider; properties.$first_pane = $first_pane; </code></pre> <p>Assuming those are both correct (I haven't tested them), it's kind of a tough call. I think I slightly prefer Matthew Flaschen's approach, since the code is contained to a structure that more closely resembles an object declaration. There's also ultimately only one variable created. However, there's a lot of <code>this</code> in there, which seems repetitive - although that may be just the price to pay.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload