How can I assign initial data to some variables in literal object before use

Question

I have an literal object which do something, this object must assigns some initial data to variables before use any of its methods.

var slideshow = {

    slideshowBox: null,
    slideImages: null,
    slideImagesLen: 0,

    init: function(){
        this.slideshowBox = document.getElementById('slideshow');
        this.slideImages = document.getElementById('images');
        this.slideImagesLen = this.slideImages.children.length;
    },
    show: function(){
        return this.slideImagesLen;
    }

};

But the problem when use any of its method you must firstly use init method then use I can use any of other methods, but this behavior is not good.

slideshow.init()
console.log(slideshow.show());

Also I have tried to use the following way:

(function(){   
    var slideshow = {

        slideshowBox: null,
        slideImages: null,
        slideImagesLen: 0,

        init: function(){
            this.slideshowBox = document.getElementById('slideshow');
            this.slideImages = document.getElementById('images');
            this.slideImagesLen = this.slideImages.children.length;
        },
        show: function(){
            return this.slideImagesLen;
        }
    };
    slideshow.init();
})();

But, there are some errors like this.slideImages is null, slideshow.show is not a function

I want any way to call init method automatically before use any method and without need to calls it manually.

Answer 1

you should try to use prototypal inheritance with a constructor here.

(function(){
  var Slideshow = function () {
    this.slideshowBox = document.getElementById('slideshow');
    this.slideImages = document.getElementById('images');
    this.slideImagesLen = this.slideImages.children.length;
  };

  Slideshow.prototype.show = function () {
    return this.slideImagesLen;
  };

  var slideShowInstance = new Slideshow();
  slideShowInstance.show();

})();

I actually would go a bit further to make it more extendable

  var Slideshow = function (slideShowId, images) {
    this.slideshowBox = slideShowId;
    this.slideImages = images;
    this.slideImagesLen = this.slideImages.children.length;
  };


  var slideShowId = document.getElementById('slideshow'),
      images = document.getElementById('images');

  var slideShowInstance = new Slideshow(slideShowId, images);

Answer 2

Try returning Object _slideshow , after calling _slideshow.init within function slides

var slides = function(options) {
  return (function(opts) {
  var _slideshow = opts || {

    slideshowBox: null,
    slideImages: null,
    slideImagesLen: 0,

    init: function() {
      this.slideshowBox = document.getElementById('slideshow');
      this.slideImages = document.getElementById('images');
      this.slideImagesLen = this.slideImages.children.length;
    },
    show: function() {
      return this.slideImagesLen;
    }

  };
  _slideshow.init();
  return Object.create(_slideshow)
}(options))
};

var slideshow = slides();

console.log("slideImagesLen:", slideshow.show(), "slideshow:", slideshow);

<div id="slideshow">
  <div id="images">
    <img src="http://lorempixel.com/50/50/nature" />
  </div>
</div>

Answer 3

There are a couple of ways. For example:

var slideshow = {
        ...
    init: function () {
            ...
        return this;
    }
        ...
}.init();

Or if that's still too manual, you can simply use an IIFE within the object literal:

var slideshow = {
        ...
    init: (function init () {
            ...
        return init;
    }())
        ...
}

In both cases the referred HTML elements must exist before creating the object.