1

Is it possible to use a destructuring assignment inside an object?

This works

        const test = {a: 'hey', b: 'hello'}
        const {a,b} = test;
        const destruct = {
            a,
            b
        };

Would like to do this

    const test = {a: 'hey', b: 'hello'}
    // something like this
    const destruct = {
        {a,b}: test
    };

    const destruct = {
        {a}: test,
        {b}: test
    };
Juanito
  • 35
  • 5
  • If you want a shallow copy, `{ ...obj }` will do that. If you want a subset of the properties, you have to de- and re-structure (or just do `{ a: test.a, b: test.b }`). – jonrsharpe Jun 25 '19 at 22:19
  • @LawrenceCherone yes you can, using computed properties like `const k = "foo"; const o = { [k]: "bar" };` results in `o = { foo: "bar" }` – Mulan Jun 25 '19 at 22:20

3 Answers3

2

If I understand correctly, it seems the spread syntax is a good fit for what you need.

The spread syntax "..." allows you to "spread" the key/value pairs from a source object (ie test) to a target object (ie destruct):

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
}

const destruct = {
  // {a,b}: test <-- invalid syntax
  ...test // equivalent using the "spread" syntax
};

console.log(destruct)

Additionally, if you wanted to select a subset of keys from a source object and spread those into a target object then this can be achieved by the following:

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
}

/* Spread subset of keys from source object to target object */
const welcomeOnly = {
  ...({ a, b } = test, { a, b })
}

console.log('exclude goodbye, show welcomes only:', welcomeOnly);

The second example works by destructing the source object (ie test) into an object, with the subset of keys that we want (a and b).

In the scope of that expression (ie everything between the ( and )), these keys are accessible as local variables. We take advantage of this, and pass those to a new object (ie { a, b }). Because the new object is declared after the ,, it is returned as the result of the expression.

Dacre Denny
  • 29,664
  • 5
  • 45
  • 65
  • I think the OP is after your second version, which is very neat/cool btw – Lawrence Cherone Jun 25 '19 at 22:26
  • Upon test, why does just `...({ a, b } = test)` work the same, whats the second part for? – Lawrence Cherone Jun 25 '19 at 22:27
  • 1
    @LawrenceCherone thanks for the feedback - I've just detailed the answer a little more. That second part (ie after the `,`) is a new object locally defined which basically gets returned as the result of the expression due to it being the last part of the expression - hope that makes sense :\ – Dacre Denny Jun 25 '19 at 22:32
  • [`...` is not an operator!](https://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) – Felix Kling Jun 26 '19 at 04:29
  • @FelixKling doh ... :\ thanks for that. Correction made :) – Dacre Denny Jun 26 '19 at 04:39
  • Yes, second version is exactly what I was looking to do. Not sure how practical it is vs { a: test.a} but still good to know. – Juanito Jun 26 '19 at 15:49
0

If you are trying to take a subset of properties you can use the rest operator

const test = {
  a: 'hey',
  b: 'hello',
  c: 'goodbye'
};

const { c, ...destruct } = test;

console.log(destruct);

This assigns c to a const and the the left over properties are assigned to the const destruct. List all the unwanted properties first and then the left over properties are caught with the rest operator.

Works with arrays as well.

const test = ['hey', 'hello', 'goodbye'];

const [ first, ...rest ] = test;

console.log(rest);
Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
0

You can try to work like this for destructuring arrays!

    let abc = {
      a: 'hello',
      b: 'hey',
      c: 'hi, there!'
    }


    let {a: x, b:y, c:z} = abc;

    console.log(x,y,z)  

// "hello"
   "hey"
   "hi, there!"
Nilesh Maharjan
  • 65
  • 10