How can I select only a few fields when destructuring a JavaScript object? [duplicate]

Question

I can't seem to remember how to write this destructuring pattern, could you please help me?

Let's say I have an object like this:

{
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}

(this is actually an object from the Stripe API).

I would like to push this object in my custom array, but only keeping 5 fields from it.

I can do:

arr.push({
  id: myObject.id,
  object: myObject.object,
  amount: myObject.amount,
  arrival_date: myObject.arrival_date,
  created: myObject.created
})

But I would like to know if there is any syntax that would help me achieve the same thing in a shorter way.

Basically I'm pretty sure there is a syntax to do it that requires writing the word 'myObject' only once, writing each key name once, and without creating temporary variables, but I can't remember how.

I'm not asking about writing a specific function, I don't need help for that. I'm just asking if there is a built-in destructuring syntax for doing this, because I'm pretty sure there is but I can't find it, despite searching for quite some time just before.

Edit:

The answer I was looking for exists here: Elegant way to copy only a part of an object

Answer 1

I'm not sure if you can do this just using es6 object destructuring. But you could make use of some es6 functionalities to implement the lodash's pick function.

Object.assign(
  {},
  ...['id', 'object', 'amount', 'arrival_date', 'created'].map(key => ({
    [key]: myObject[key]
  }))
);

    const myObject = {
      id: 'po_495743057439095',
      object: 'payout',
      amount: 18560,
      arrival_date: 1576195200,
      automatic: true,
      balance_transaction: 'txn_32472309478903284',
      created: 1575774863,
      currency: 'eur',
      description: 'STRIPE PAYOUT',
      destination: 'ba_329047329048323',
      failure_balance_transaction: null,
      failure_code: null,
      failure_message: null,
      livemode: true,
      metadata: {},
      method: 'standard',
      source_type: 'card',
      statement_descriptor: null,
      status: 'in_transit',
      type: 'bank_account',
    };

    const newObject = Object.assign(
      {},
      ...['id', 'object', 'amount', 'arrival_date', 'created'].map(key => ({
        [key]: myObject[key]
      }))
    );
    console.log(newObject);

Answer 2

let myObject = {
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}

const {id, object, amount} = myObject; 

Now instead of using myObject.id you will use id.

Answer 3

I think the closest thing what you can achieve is using ... operator called spread syntax.

Please find the example here:

const oldArray = [{
  id: 'po_495743057439095',
  object: 'payout',
  amount: 18560,
  arrival_date: 1576195200,
  automatic: true,
  balance_transaction: 'txn_32472309478903284',
  created: 1575774863,
  currency: 'eur',
  description: 'STRIPE PAYOUT',
  destination: 'ba_329047329048323',
  failure_balance_transaction: null,
  failure_code: null,
  failure_message: null,
  livemode: true,
  metadata: {},
  method: 'standard',
  source_type: 'card',
  statement_descriptor: null,
  status: 'in_transit',
  type: 'bank_account',
}];

const newArray = [...oldArray.map(({id, object, amount, arrival_date, created}) => {
  return {id, object, amount, arrival_date, created};
})];

console.log(newArray);

Read further here: Spread syntax

I hope that helps!