Destructure object properties into array values

Question

Is there any way to destructure an object and assign its properties into an array rather than as variables? For example:

const obj = { a: 1, b: 2 };

const { a, b } = obj;
const arr = [a, b];

This works, but it requires restating the variables as the array values.

I have tried:

const arr = [(const { a, b } = obj)];

but this is a syntax error.

I had a similar idea with Object.values as in

const arr = Object.values((const { red } = chalk));`

...but this has the same issue of not being able to do destructuring in expressions.

@TitianCernicova-Dragomir yes that will work fine, but then I have to type obj. a lot if I have a lot of properties to destructure. — Explosion Pills
– Explosion Pills, Commented Feb 9, 2018 at 16:05
In the second example you only have one property const arr = Object.values((const { red } = chalk)); why not const arr = Object.values(chalk.red)? — Yury Tarabanko
– Yury Tarabanko, Commented Feb 9, 2018 at 16:07
but, do you want to add every property alone the object or like [{a: 1, b : 2}] — Kenry Sanchez
– Kenry Sanchez, Commented Feb 9, 2018 at 16:08
FWIW you can make your original code a little more terse: const { a, b } = obj, arr = [ a, b ];. You still have to type the names twice, though, and it still introduces two new variables into the local scope. — Jordan Running
– Jordan Running, Commented Feb 9, 2018 at 16:10

jcalz · Accepted Answer · 2018-02-09 16:45:38Z

4

Really the answer you want is to go back in time and use the with statement before it was (rightly) recognized as evil:

var obj = { a: 1, b: 2 };
var arr;
with (obj) {
   arr = [a, b];
}

Any modern answer is going to require more typing than you'd like. A relatively type-safe answer that gets you closer is to use string literals. Stick this in a library:

function arrayDestruct<T, K extends keyof T>(obj:T, ...keys: K[]): T[K][] {
  return keys.map(k => obj[k]);
}

And then use it:

const arr = arrayDestruct(obj, 'a', 'b'); // recognized as number[]

You have to type some quotation marks but it works. It could even be overloaded to produce tuples, but I don't know if you really care enough. Anyway, good luck!

edited Feb 9, 2018 at 16:45

answered Feb 9, 2018 at 16:25

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergi · Accepted Answer · 2018-02-09 16:34:37Z

3

Is there any way to destructure an object and assign its properties into an array rather than as variables?

You can do

const arr = [];
const { a: arr[0], b: arr[1] } = obj;

but I think what you are really looking for is the equivalent to One-liner to take some properties from object in ES 6 which with an array literal would be

const arr = (({a, b}) => [a, b])(obj);

answered Feb 9, 2018 at 16:34

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Comments

Fenton · Accepted Answer · 2018-02-09 16:17:35Z

0

You can't achieve that in one hit with destructuring. You have to have one extra line of code.

You can use Object.values, but not without losing type fidelity (i.e. you end up with an Array<any>.

interface ObjectConstructor {
    values(obj: {}): any[];
}

const obj = { a: 1, b: 2 };

// Array<any>
const arr = Object.values(obj);

// [1, 2]
console.log(arr);

So you have a trade off. One line of code in exchange for correct type information seems like the economic win.

const obj = { a: 1, b: 2 };
const { a, b } = obj;

// Array<number>
const arr = [a, b];

// [1, 2]
console.log(arr);

answered Feb 9, 2018 at 16:17

Fenton

253k74 gold badges404 silver badges414 bronze badges

Comments

Pavlo · Accepted Answer · 2018-02-09 16:18:44Z

-1

You can desconstruct the object like this

const [a, b] = Object.values(obj);

console.log(a); // 1
console.log(b); // 2

Remember that the keys of the object is not alphabetical, so its perhaps better to create a function which returns the sorted keys, so that you know that the values are set correctly.

function deconstructObject(obj){
    const arr = [];  
    const keys = Object.keys(obj);
    const sortedKeys = keys.sort();
        for(const key of sortedKeys){
            arr.push(obj[key]);
        }
        return arr;
}

const [a, b] = deconstructObject({b: 2, a: 1 });

console.log(a); // 1
console.log(b); // 2

const newArray = deconstructObject({b: 2, a: 1 });
console.log(newArray); //[1,2]

Now the object will be sorted, so you can predict its behaviour.

edited Feb 9, 2018 at 16:18

answered Feb 9, 2018 at 16:15

Pavlo

1,2078 silver badges13 bronze badges

1 Comment

Kenry Sanchez Over a year ago

he wants to use the destructing assignment as a single process. you're not using it. you are using a loop and give it an increase in the complexity... O(n^2)

Collectives™ on Stack Overflow

Destructure object properties into array values

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related