JavaScript: duplicate object with only specified fields

Viewed 58

Is there a way to duplicate an object with only specified fields? For example:

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
}

// Duplicate of a with only foo and baz properties
const b = { foo: 'bar', baz: 'foo' }

I know I could do

b = {
  foo: a.foo,
  baz: a.baz,
}

but this seems like a long walk for a short drink of water. What's the quickest way to clone an object as a partial with specified fields?

EDIT: April 8th

I would also like to be able to do this inline, as follows:

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
}

const obj = {
  b: { foo: 'bar', baz: 'foo' }
}
2 Answers

One option is to destructure the property you want to exclude out, and use rest syntax:

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
};
const { bar, ...b } = a;
console.log(b);

If you want to put it into an object, destructure on the line above where you declare the object:

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
};
const { bar, ...b } = a;
const obj = { b };
console.log(obj);

If you have a large number of properties you want to exclude, use Object.entries to get an array of entries, filter them, then use Object.fromEntries to turn it back into an object:

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
};
const propsToRemove = ['foo', 'bar'];
const obj = {
  b: Object.fromEntries(
    Object.entries(a).filter(([key]) => !propsToRemove.includes(key))
  )
};
console.log(obj);

Make the destructuring a function and call it with the original object a.

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
}

const b = (({ foo, baz }) => ({ foo, baz }))(a);

console.log(b);

You can also pass it into an object.

const a = {
  foo: 'bar',
  bar: 'baz',
  baz: 'foo',
}

const obj = {
    b: (({ foo, baz }) => ({ foo, baz }))(a),
};

console.log(obj);

More about destructuring: MDN Docs

Related