Question

I recently tried to create an object like this:

var carousel = {
      $slider: $('#carousel1 .slider'),
      panes: carousel.$slider.children().length
    };

My intentions were to improve jQuery’s selector performance by caching the results of $('#carousel1 .slider') in an object property, and to keep the code concise and relatively DRY.

However, this didn’t work. When the code executed, it threw an exception when trying to parse the value of panes, complaining that carousel was undefined.

This makes sense, since I’d assume that carousel isn’t fully declared until the assignment statement has been fully executed. However, I’d like to avoid resorting to this:

var carousel = {};
carousel.$slider = $('#carousel1 .slider');
carousel.panes = carousel.$slider.children().length;

That’s not too much worse, but the carousel object will have several more properties that rely on the values of other properties, so that could quickly become verbose.

I tried using this, but to no avail. I may well not have been using it correctly, or that may not be a valid approach anyway.

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?

---

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:

// 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');
})();

and

// 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;

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 this in there, which seems repetitive – although that may be just the price to pay.

Answer 1

Not with object literals (this has the same value during constructing of the literal that it did before-hand). But you can do

var carousel = new (function()
{
      this.$slider =  $('#carousel1 .slider');
      this.panes = this.$slider.children().length;
})();

This uses an object created from an anonymous function constructor.

Note that $slider and panes are public, so can be accessed as carousel.$slider, etc.