How to set up constructor functions so that it doesn't have too many parameters?

user_11727181 0
Viewed 938

I've been working in javascript for a little over a year, one thing that I've never liked is when my constructor functions have 3+ parameters and I have to stack them vertically for readability, especially when using angular, I view constructors as functions (which may be wrong, I have no formal education) I'd like to keep my functions and constructors using the same format for consistency. This makes me use very short variable names to avoid stacking them (which is terrible for maintainability) EX:

    constructor(public fb: FormBuilder, private db: DatabaseService){

    }

VS:

constructor(
    private fs: AngularFirestore,
    public fb: FormBuilder,
    private db: DatabaseService
) {}

As you can see above; 3 parameters and it is now the ugliest thing I've ever seen in my life LoL. What is the correct way of doing this?

TL;DR
How can I refactor my constructor functions so that they are more maintainable?

Edit
Based on some of the comments I think this merits a response: If I view this in an objective manner (my own opinions aside) conventional wisdom states that when writing functions the less parameters the better. If we assume that constructors are functions then that logic must then extend to dependency injection.

angular typescript class constructor
2 Answers

just put each field on it's own line. Being on their own lines means there is no reason to be terse with variable names and you can easily put documentation strings for each:

class Example {
    constructor(
        /** fire store */
        private long_and_verbose_name: AngularFirestore,
        /** form builder */
        public form_builder: FormBuilder,
        /** service for database */
        private db: DatabaseService
    ) {}
}

This isn't any uglier than declaring each field outside the constructor:

class Example {
    /** fire store */
    private fs: AngularFirestore,
    /** form builder */
    public fb: FormBuilder,
    /** service for database */
    private db: DatabaseService

    constructor(.......){
        this.fs = ...
        ...
    }
}

then if you have Intellisense you should be able to see the documentation string when hovering over a field:

enter image description here

My recommendation is to just let yourself use more lines and use documentation.

user_58272150

Lets have a broad over-view on the questioned topic - CODE-FORMATTING

Having a coding experience of 14+ years(since 2006), working on a couple of languages/technologies ( C, Java/android, JS, TS/angular etc ) and being with some really cool devs as team mates. I would like to share just one advice that I learnt regarding code-formatting

Bad Code is what machine can understand, good code is what you can understand, Great code is what others can understand.

Some salient points that we can take from above statement:-

  1. Follow community driven code-style guidelines https://angular.io/guide/styleguide
  2. Use automation tools like linters (TsLint, Jslint)
  3. Follow conventions, dont get Fooled by your own eyes.

Remember - You will write it only once but others(including your future-self) might read it many times.

user_43139570
Related