How to dynamically map javascript class constructor arguments to instance properties

Question

I'm building a Node.js app (Node v10.11.0) and want to do it in a OOP-way without using Typescript. So I've built some classes like this:

class Component {
  constructor(param1, param2, param3) {
    this.param1= param1;
    this.param2 = param2;
    this.param3 = param3;
  }
}

I wondered if there is a way in javascript to map the arguments of the constructor automatically without writing this.param1 = param1 for every single constructor argument.

I already tried running over arguments object with somthing like this:

constructor(param1, param2, param3) {
  Array.from(arguments).forEach(arg => {
    this[arg] = arg;
  }
}

but this doesn't work. The result of this approach is:

console.log(new Component("arg1", "arg3", "arg3"))

// Component { arg1: "arg1", arg2: "arg2", arg3: "arg3" }
// I want to have this:
// Component { param1: "arg1", param2: "arg2", param3: "arg3" }

There is nothing to be gained from this. It will not make any difference performance wise and it will make it way harder to read. — adiga
– adiga, Commented Jan 14, 2020 at 12:39

T.J. Crowder · Accepted Answer · 2020-01-15 15:56:16Z

12

If you want the constructor to accept discrete arguments, there's nothing much better than the individual assignment you're already doing, at least for now.

You could have the constructor accept an object instead, which would let you do this:

constructor(args) {
    Object.assign(this, args);
}

which you call like this:

new Component({param1: "arg1", param2: "arg2", param3: "arg3"});

but if it's just one to three parameters, that's creating extra work at every call site rather than once in the constructor code, and the constructor code is less clear.

A third option is to accept a rest parameter:

constructor(...args) {
    ["param1", "param2", "param3"].forEach((name, index) => {
        this[name] = args[index];
    });
}

which you call in the normal way, but again while it's subjective, to me readability is impaired.

Just as a side note, as I think you probably know, TypeScript has this feature. It's increasingly common now to use TypeScript (which compiles to JavaScript for use on browsers). TypeScript isn't tied to Angular, you can use it with just about any framework (or none).

In TypeScript, for instance:

// TypeScript
class Component {
    constructor(
        public param1: string,
        public param2: string,
        public param3: string
    ) {
    }
}

There's no code necessary in the constructor at all, TypeScript automatically assigns those parameter values to those public properties. (You can also use private or protected.)

edited Jan 15, 2020 at 15:56

answered Jan 14, 2020 at 12:37

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

Ma Kobi Over a year ago

Since there is apparently no way to do this like I wanted to I thank you for your detailed suggestion. The constructors I need to write need to accept between 8 to 10 arguments. Therefore I wondered if there is a way like in Angular constructor(private param1, public param2, ...) {}which assignes all arguments to attributes.

T.J. Crowder Over a year ago

@MaKobi - Yeah, sadly that's a TypeScript feature, not a JavaScript feature. Of course, you could use TypeScript... (TypeScript isn't tied to Angular.)

T.J. Crowder Over a year ago

@MaKobi - I should note that conventionally, once you've exceeded three parameters (or maybe as many as four or five), it's time to switch to an options object instead as in the first example above. Not primarily to reduce code in the constructor, but rather to make it possible to keep things straight at call sites.

Beginner · Accepted Answer · 2020-01-14 12:45:33Z

1

Since you are passing an object as param, you can use the Object.keys

Sample snippet code

class Component {
  constructor(args) {
    Object.keys(args).forEach(argKey => this[argKey] = args[argKey])
  }
}

let a = new Component({param1: "arg1", param2: "arg2", param3: "arg3"})


console.log(a)

edited Jan 14, 2020 at 12:45

answered Jan 14, 2020 at 12:43

Beginner

9,20011 gold badges50 silver badges94 bronze badges

1 Comment

adiga Over a year ago

Or just Object.assign(this, args) as already mentioned in T.J.'s answer

Collectives™ on Stack Overflow

How to dynamically map javascript class constructor arguments to instance properties

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related