# destructuring for class fields

**URL:** <https://es.discourse.group/t/destructuring-for-class-fields/2149>\
**Category:** 💡 Ideas\
**Tags:** proposal\
**Created:** [September 19, 2024, 2:22am UTC](https://es.discourse.group/t/destructuring-for-class-fields/2149 "2024-09-19T02:22:03Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![trusktr](https://yyz2.discourse-cdn.com/free1/user_avatar/es.discourse.group/trusktr/32/183_2.png) [@trusktr](https://es.discourse.group/u/trusktr)\
**Post date:** [September 19, 2024, 2:22am UTC](https://es.discourse.group/t/destructuring-for-class-fields/2149/1 "2024-09-19T02:22:03Z")

</div>

I would love to destructor onto class fields. For example:

```js
function foo() {
  return [1, 2]
}

class MyClass {
  ;[one, two] = foo()
}

const o = new MyClass()

o.one // 1
o.two // 2

```

And similar with object destructuring.

This could go well with constructor args available in fields: [Proposal: access to constructor parameters in field initializers](https://es.discourse.group/t/proposal-access-to-constructor-parameters-in-field-initializers/1862)

## Real-world use case:

Solid.js, for example, provides a [`createSignal`](https://docs.solidjs.com/reference/basic-reactivity/create-signal#createsignal) function that returns a tuple:

- a function for reading a value (a "getter")
- a function for setting a value (a "setter")

```js
const [foo, setFoo] = createSignal(0)

// increment the value every second:
setInterval(() => setFoo(foo() + 1))

// log the value every second:
createEffect(() => console.log(foo()))

```

With destructuring we could easily do this:

```js
class MyClass {
  ;[foo, setFoo] = createSignal(0)
}

const o = new MyClass

o.foo() // read
o.setFoo(123) // write

```

This is expecially nice in lieu of decorators which will allow us to make reactive properties easily. Plus some people prefer less magic, and assigning a getter and setter from `createSignal` to two properties is less to explain than a decorator may be.

Plus not everything is about reactivity, there might just be something that returns a tuple of distince things, or an object:

```js
class MyClass {
  ;{value, abort, interval} = someProcess() // syntax? 
}

```