An abbreviated way to initialize a class in ECMAScript 6

Question

An abbreviated way to initialize a class in ECMAScript 6

Tired of going through the monotonous process every time I create a new class:

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

Looking for a more streamlined and concise solution. Utilizing Babel with the flexibility of ES7 experimental features. Could decorators offer assistance?

javascript ecmascript-6 babeljs

Answer 1

Answer №1

If you want a concise way to assign properties in JavaScript, consider using Object.assign:

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop2, prop3});
  }
}

This ES2015 (also known as ES6) feature allows you to transfer the own enumerable properties from one or more source objects to a target object.

While it may require repetition of argument names, this method is significantly shorter. Establishing it as your standard approach handles instances where certain arguments should be kept on the instance while others should not be, such as:

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop3});
    // Deal with prop2 separately if needed 
  }
}

For example, see the code snippet below (live copy on Babel's REPL):

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop2, prop3});
  }
}
let t = new Thing('x', 'y', 'z');
console.log(t.prop1);
console.log(t.prop2);
console.log(t.prop3);

Output:

x
y
z

Answer 2

If you want a concise way to assign properties in JavaScript, consider using Object.assign:

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop2, prop3});
  }
}

This ES2015 (also known as ES6) feature allows you to transfer the own enumerable properties from one or more source objects to a target object.

While it may require repetition of argument names, this method is significantly shorter. Establishing it as your standard approach handles instances where certain arguments should be kept on the instance while others should not be, such as:

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop3});
    // Deal with prop2 separately if needed 
  }
}

For example, see the code snippet below (live copy on Babel's REPL):

class Thing {
  constructor(prop1, prop2, prop3) {
    Object.assign(this, {prop1, prop2, prop3});
  }
}
let t = new Thing('x', 'y', 'z');
console.log(t.prop1);
console.log(t.prop2);
console.log(t.prop3);

Output:

x
y
z

Answer 3

Answer №2

Regrettably, the only options available to you are basic methods like Object.assign. If your goal is to eliminate the repetition of entering parameters twice (in both the constructor signature and assignment), there isn't much more you can do.

However, you could implement a workaround like this example below. Although, the complexity and slight obfuscation it introduces may not be worthwhile in the end.

var dependencies = ['param1', 'param2', 'param3'];

class Something {
  constructor(...params) {
    params.forEach((param, index) => this[dependencies[index]] = param);
  }
}

var something = new Something('foo', 'bar', 'baz');
// something.param1 === 'foo'

In this approach, you utilize a single array containing argument names, then reference that same array when setting the properties on your instance of Something. This method could be particularly useful in an Angular application where preserving dependency names during minification is important by utilizing the $inject property.

Something.$inject = dependencies;

PS - Welcome to the redundant labyrinth of traditional languages that I assumed I had escaped when transitioning to JS development :P

Realistically, using a classic object literal might be a simpler solution unless the formal structure of a true class is essential.

Edit: Alternatively, if you prefer the simplicity of an object literal combined with the formality of a class, you could consider accepting an object literal in your constructor.

class Something {
  constructor(params) {
    Object.keys(params).forEach((name) => this[name] = params[name]);
  }
}

var something = new Something({
  param1: 'foo',
  param2: 'bar',
  param3: 'baz'
});

Although, now your class has essentially transformed into a dynamic entity that can be instantiated with any properties, resembling an object literal :P

Typically, the choice to use a class is rooted in the desire to formalize the object and provide a consistent, rigorously testable API.

Answer 4

Regrettably, the only options available to you are basic methods like Object.assign. If your goal is to eliminate the repetition of entering parameters twice (in both the constructor signature and assignment), there isn't much more you can do.

However, you could implement a workaround like this example below. Although, the complexity and slight obfuscation it introduces may not be worthwhile in the end.

var dependencies = ['param1', 'param2', 'param3'];

class Something {
  constructor(...params) {
    params.forEach((param, index) => this[dependencies[index]] = param);
  }
}

var something = new Something('foo', 'bar', 'baz');
// something.param1 === 'foo'

In this approach, you utilize a single array containing argument names, then reference that same array when setting the properties on your instance of Something. This method could be particularly useful in an Angular application where preserving dependency names during minification is important by utilizing the $inject property.

Something.$inject = dependencies;

PS - Welcome to the redundant labyrinth of traditional languages that I assumed I had escaped when transitioning to JS development :P

Realistically, using a classic object literal might be a simpler solution unless the formal structure of a true class is essential.

Edit: Alternatively, if you prefer the simplicity of an object literal combined with the formality of a class, you could consider accepting an object literal in your constructor.

class Something {
  constructor(params) {
    Object.keys(params).forEach((name) => this[name] = params[name]);
  }
}

var something = new Something({
  param1: 'foo',
  param2: 'bar',
  param3: 'baz'
});

Although, now your class has essentially transformed into a dynamic entity that can be instantiated with any properties, resembling an object literal :P

Typically, the choice to use a class is rooted in the desire to formalize the object and provide a consistent, rigorously testable API.

Answer 5

Answer №3

To streamline the process, we can implement a static method within each class that accepts the arguments object and an array of names. This method will then generate an object that can be easily assigned to a new instance using Object.assign.

For a practical demonstration, refer to the Babel REPL.

class Something {
  static buildArgs (ctx, args, paramNames) {
    let obj = {}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i] || i
      obj[name] = args[i]
    })
    Object.assign(ctx, obj)
  }

  constructor () {
    Something.buildArgs(this, arguments, [
      'param1',
      'param2'
    ]);
    console.log(this)
  }
}

new Something('one', 'two')

The introduction of the buildArgs method might not necessarily decrease the code length, but it does offer several advantages:

You only need to specify the parameter names once.
Your code is protected from minification issues.

If necessary, the code provided above can handle extra arguments (i >= paramNames.length). However, if you prefer to skip assigning these extra arguments to the instance:

class Something {
  static buildArgs (ctx, args, paramNames) {
    let obj = {instance: {}, extra: {}}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i] || i
      if (name) {
          obj.instance[name] = args[i]
      } else {
          obj.extra[i] = args[i]
      }
    })
    Object.assign(ctx, obj)
  }

  constructor () {
    let args = Something.buildArgs(this, arguments, ['param1', 'param2']);
    // Handle `args.extra` separately
  }
}

Alternatively, you can choose to completely ignore the extra arguments:

  static buildArgs (args, paramNames) {
    let obj = {}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i]
      if (name) obj[name] = args[i]
    })
    return obj
  }

Answer 6

To streamline the process, we can implement a static method within each class that accepts the arguments object and an array of names. This method will then generate an object that can be easily assigned to a new instance using Object.assign.

For a practical demonstration, refer to the Babel REPL.

class Something {
  static buildArgs (ctx, args, paramNames) {
    let obj = {}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i] || i
      obj[name] = args[i]
    })
    Object.assign(ctx, obj)
  }

  constructor () {
    Something.buildArgs(this, arguments, [
      'param1',
      'param2'
    ]);
    console.log(this)
  }
}

new Something('one', 'two')

The introduction of the buildArgs method might not necessarily decrease the code length, but it does offer several advantages:

You only need to specify the parameter names once.
Your code is protected from minification issues.

If necessary, the code provided above can handle extra arguments (i >= paramNames.length). However, if you prefer to skip assigning these extra arguments to the instance:

class Something {
  static buildArgs (ctx, args, paramNames) {
    let obj = {instance: {}, extra: {}}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i] || i
      if (name) {
          obj.instance[name] = args[i]
      } else {
          obj.extra[i] = args[i]
      }
    })
    Object.assign(ctx, obj)
  }

  constructor () {
    let args = Something.buildArgs(this, arguments, ['param1', 'param2']);
    // Handle `args.extra` separately
  }
}

Alternatively, you can choose to completely ignore the extra arguments:

  static buildArgs (args, paramNames) {
    let obj = {}
    Array.from(args).forEach(function (arg, i) {
      let name = paramNames[i]
      if (name) obj[name] = args[i]
    })
    return obj
  }

An abbreviated way to initialize a class in ECMAScript 6

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason that the <script> tag cannot be directly inserted into the .html() method?

Identifying when the mouse cursor changes on a website

I seem to be having trouble locating the correct file location

Ensure that the jQuery Accordion always displays a table within every div

Converting a string to an array in JavaScript/TypeScript: Tips and Tricks

Implement a function within a class

Retrieving the value of an input tag within dynamically created table rows using JSP

Extracting a substring using JavaScript within a PHP environment

Basic click event triggered every second click in JavaScript and HTML

Loading animation reminiscent of a whirlpool, similar to the movement

What is the best way to set a limit depending on whether a user is currently logged in or not?

Ways to conceal ng repeat using ng if

On the completion of jQuery Ajax when the results have been exhausted

Utilizing ng-if in AngularJS for displaying JSON data

Encountering issues with scope: Unable to retrieve value and receiving an error message stating 'Cannot assign value to undefined property'

Error in AngularJS: Failed to retrieve data using $http.post()

the value contained in a variable can be accessed using the keyword "THIS"

Implement a loader in AngularJS to display when transitioning between pages

Create a JavaScript variable that is initialized with a value from an AngularJS scope

Display properly formatted JSON data in a Rails view without any escaping needed