Constructor function with multiple parameters?

Question

The constructor example I see a lot is

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
    this.nationality = "English";
}

But what if you want many parameters, like 20+. This seems like it would be inefficient. What would be the correct and efficient way of declaring a constructor function that takes in many parameters?

My end goal is to create an image slider with a lot of user settings (slidesToShow, slidesToScroll, slideClass, etc). So I am looking to have the user initialize it like and provide options. The way I have it now is kind of weird lol. example:

function Slider(options) {
 const slideClass = options.slideClass
}

and then it is initialized like so:

const demoSlider = new Slider({
 slideClass: 'image-slider'
})

But I am not using the this keyword like a normal constructor function and yet it is not a object literal either. So my code must just be built wrong? Just switched from mainly jQuery trying to learn/write vanilla JS the right way.

Thanks for any help in advance!

Having 20+ parameters is a sign of bad design. If you really need to do that, you should make them named parameters (as you're doing now). — SLaks
– SLaks, Commented Apr 16, 2018 at 14:05
What's stopping you from doing this.slideClass = options.slideClass? — Frank Modica
– Frank Modica, Commented Apr 16, 2018 at 14:07
You can (should?) still use this with an options object: this.slideClass = options.slideClass. You can also set a default by using the short circuiting properties of the 'or' operator: this.slideClass = options.slideClass || 'myClass' — Joe Clay
– Joe Clay, Commented Apr 16, 2018 at 14:07
I was going to edit because I re-read it and was like hmm maybe THAT is the issue lol. But I'm not sure any other way to allow the user to set multiple options... — Kevin Marmet
– Kevin Marmet, Commented Apr 16, 2018 at 14:07
You could also copy all the properties at once like Object.assign(this, options). But be aware that it is a shallow copy. Or you could just do this.options = options. — Frank Modica
– Frank Modica, Commented Apr 16, 2018 at 14:07

Jonas Wilms · Accepted Answer · 2018-04-16 14:10:24Z

3

Either just store an object under this.options :

 function Slider(options) {
    this.options = options;
 }

Or if you want it directly under this, just use Object assign:

 function Slider(options) {
   Object.assign(this, options);
    console.log(this.name);
 }

 new Slider({ name: "test" });

answered Apr 16, 2018 at 14:10

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kevin Marmet Over a year ago

So really what I am doing now is fine? I guess the only difference is that I have put the options into variable names. Is that even necessary or should I just be using it like "options.slidesToShow" in my code instead of putting options.slidesToShow into a variable?

Timothy Lee · Accepted Answer · 2018-04-16 14:33:43Z

0

I think you better set them one by one, because they might have default value, ex:

this.height = (options.height)?options.height:100;

Also I think you're not quite understand the meaning of new.

You didn't use this which means all variables are in your function,

maybe in this case you only need to execute that function once to init your slider's event.

so you only need to call Slider(options) .

new Slider() will create a Object that can be reuse,

but you didn't even assign to a var like var mySlider = new Slider()...

You should consider in this case whether you need to design your function as a function or a constructor?

edited Apr 16, 2018 at 14:33

answered Apr 16, 2018 at 14:26

Timothy Lee

8281 gold badge5 silver badges15 bronze badges

Collectives™ on Stack Overflow

Constructor function with multiple parameters?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related