Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to dynamically map javascript class constructor arguments to instance properties

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" }
like image 913
Ma Kobi Avatar asked Jul 11 '26 01:07

Ma Kobi


1 Answers

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.)

like image 131
T.J. Crowder Avatar answered Jul 13 '26 16:07

T.J. Crowder