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.

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.

• javascript
• typescript

Share Improve this question Follow asked Feb 9, 2018 at 15:56 Explosion PillsExplosion Pills 192k5555 gold badges340340 silver badges416416 bronze badges 10

• 1 Is there a reason not to just use [obj.a, obj.b] ? – Titian Cernicova-Dragomir Commented Feb 9, 2018 at 15:59
• @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 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 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 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 Commented Feb 9, 2018 at 16:10

 |  Show 5 more ments

4 Answers 4

Sorted by: Reset to default 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!

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);

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);

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.