How to pass an object as an argument and reference it inside a constructor

Question

I have created a class for my custom slider and currently I am just passing one argument to the constructor which is the slider element. Everything is working at the moment nicely, I have managed to get 2 instances of the slider running without any issues.

What i would like to achieve is to be able to pass a second argument to the constructor which will be an object containing so custom properties to add to the slider slide i.e transition speed, transition duration and whatever other things i decide on.

An example object to pass

animation {
 transition-duration: 1s,
 transition-property: transform
}

let mySlider1 = new Slider('.slider--1', {
  animation {
   transition-duration: 1s,
   transition-property: transform
}
});

Im just not too sure how to go about referencing this in my constructor. This is just a custom project for myself learning object oriented programming.

This is my current constructor

class Slider {
    constructor(slider, myNewCustomObject) {
        this.slider = document.querySelector(slider);
        this.slide = this.slider.querySelectorAll('.slider--slide');
        this.prevSlide = this.slider.querySelector('.slider--btn--prev');
        this.nextSlide = this.slider.querySelector('.slider--btn--next');
        this.isAnimating = false;
        this.currentSlide = 0;
        this.prevSlide.addEventListener('click', () => {
            this.slidePrev();
        });
        this.nextSlide.addEventListener('click', () => {
            this.slideNext();
        });
    }
    resetSlides() {
        this.slide.forEach(venue => {
            venue.style.zIndex = '';
            this.slide[this.currentSlide].style.zIndex = '1';
        });
        this.slide[this.currentSlide].classList.remove('active');
        this.slide[this.currentSlide].classList.remove('slideLeft');
        this.slide[this.currentSlide].classList.remove('slideRight');
    }
    slidePrev() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === 0) {
                this.currentSlide = this.slide.length - 1;
            } else {
                this.currentSlide--;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideLeft');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
    slideNext() {
        if (this.isAnimating) {
            return;
        } else {
            this.resetSlides();
            if (this.currentSlide === this.slide.length - 1) {
                this.currentSlide = 0;
            } else {
                this.currentSlide++;
            }
            this.slide[this.currentSlide].classList.add('active');
            this.slide[this.currentSlide].classList.add('slideRight');

            setTimeout(function () {
                this.isAnimating = false;
            }, 1100);
        }
    }
}

let mySlider1 = new Slider('.slider--1');
let mySlider2 = new Slider('.slider--2');


        
          
            Woodhall Manor
            View this venue
          
        
        
          
            Parklands Lodge
            View this venue
          
        
        
          
            Northbrook Hall
            View this venue
          
        
        
          
            Goodward House
            View this venue
          
        
        
          
            Buxted Park
            View this venue
          
        
        
        
      

 
            
              
                Woodhall Manor
                View this venue
              
            
            
              
                Parklands Lodge
                View this venue
              
            
            
              
                Northbrook Hall
                View this venue
              
            
            
              
                Goodward House
                View this venue
              
            
            
              
                Buxted Park
                View this venue

user_11619647 · Answer

Create a new property just like you did with this.slider.

class Slider {
    constructor(slider, myNewCustomObject) {
      this.slider = document.querySelector(slider);
      ...
      this.myNewCustomObject = myNewCustomObject;
    }
    ...
}

Make sure your object has the correct syntax. Prevent from using hyphens as keys of properties unless you don't have any choice.

Now pass your object as the second parameter of the constructor.

const slider = new Slider('.slider', {
  animation: {
    transitionDuration: '1s',
    transitionProperty: 'transform'
  }
});

And access them with the following property keys outside of your instance, or with this inside of your instance.

slider.myNewCustomObject.animation.transitionDuration;
slider.myNewCustomObject.animation.transitionProperty;

user_7908073 · Answer

In order to access the properties of other object you just do it normally using either Object.property or Object['property'].

This is what you are looking for I believe:

constructor(slider, myNewCustomObject) {
   // Initialisation code

  this.speed = myNewCustomObject.transitionSpeed

  //This is also fine
  this.speed = myNewCustomObject['transitionSpeed']

}

How to pass an object as an argument and reference it inside a constructor

2 Answers