Question 379524 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Is it possible to add a property and setter to a class in one go, e.g. via destructuring (like react useState)?

Is there something like an array destructuring assignment, but for class definitions?

The code could look like:

class Foo {
  [value, setValue] = createField("someString");
}
Tags:

2

Answers


  1. 0

    Not in a field definition, but in a constructor you can use a destructuring assignment with properties as the targets:

    class Foo {
  value: string;
  setValue: (x: string) => void;
  constructor() {
    ([this.value, this.setValue] = createField("someString"));
  }
}
    Login or Signup to reply.
  2. 0

    It’s unclear to me what the usefulness of that approach would be.

    About Getters and Setters

    Getters and setters are a pattern which provide an external interfaces (external all access outside of the class, e.g. the rest of the code) to access variables internal to classes. Getters and setters provide a future-proof access method – if the internal data structure of a class changes, the getters and setters can be modified to apply a translation without having to refactor any code.

    Why creating your classes like this adds no value

    It looks like you’re looking for a shortcut/code golf to apply a pattern you’re used to implementing. Not only is this less readable, but you’ll still have to refactor the class code if you ever have to add a translation layer to the getter or setter — you’ll have to provide an actual function definition.
    You might be sure that the getters and setters will never change, so it makes sense to use a shortcut, but in that case, don’t use getters and setters at all:

    class Point {
  x = 0;
  y = 0;
}

let a: Point = new Point();

a.x = 5;

console.log(a); //prints 5

    In short, the approach you describe feels like the worst kind of compromise — you can’t easily change the implementation of a getter/setter created this way, and you it’s also less readable.

    About the React approach

    The React team has moved away from classes, as they’ve found that it makes it harder to create reuseable components, and to test. This is why class components are not used in the documentation anymore, and why Hooks were created. You can listen to Dan Abramov’s talk The WET Codebase on that topic.

    Attempting to take React methodologies and applying them to Object-Oriented code will never provide the advantages that the React approach has: simplicity of logic, reuseability.

    Some alternatives

    You haven’t explained what problem you are hoping to solve, but if you’re just looking to easy wrap variable access in a simple operation (i.e. Aspect-Oriented Programming), e.g. get/set logging, there are a few approaches that might work.

    React HOC

    A React approach that would work is Higher-Order Components. You could code a function that returns a class which wraps all of your getters/setters in a logging function

    Javascript Proxy

    Javascript’s Proxy/Handler functionality can intercept function calls and variable access on another function, and allows implementing getters/setters around the latter.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search