One-liner to take some properties from object in ES 6

Question

How one can write a function, which takes only few attributes in most-compact way in ES6?

I've came up with solution using destructuring + simplified object literal, but I don't like that list of fields is repeated in the code.

Is there an even slimmer solution?

(v) => {
    let { id, title } = v;
    return { id, title };
}

Arlina

Answer 1

Here's something slimmer, although it doesn't avoid repeating the list of fields. It uses "parameter destructuring" to avoid the need for the v parameter.

({id, title}) => ({id, title})

(See a runnable example in this other answer).

@EthanBrown's solution is more general. Here is a more idiomatic version of it which uses Object.assign, and computed properties (the [p] part):

function pick(o, ...props) {
    return Object.assign({}, ...props.map(prop => ({[prop]: o[prop]})));
}

If we want to preserve the properties' attributes, such as configurable and getters and setters, while also omitting non-enumerable properties, then:

function pick(o, ...props) {
    var has = p => o.propertyIsEnumerable(p),
        get = p => Object.getOwnPropertyDescriptor(o, p);

    return Object.defineProperties({},
        Object.assign({}, ...props
            .filter(prop => has(prop))
            .map(prop => ({prop: get(props)})))
    );
}

Laue

+1 nice answer, torazaburo; thanks for making me aware of Object.assign; es6 is like a Christmas tree with so many presents under it I'm still finding gifts months after the holiday – Cale

Got an error: Property description must be an object: undefined. Shouldn't it be filter(...).map(prop => ({[prop]: get(prop)})))? – Befuddle

For your first pick() implementation you could also do something like return props.reduce((r, prop) => (r[prop] = o[prop], r), {}) – Patchy

unfortunately that version of pick won't be type safe in flow or typescript. if you want type safety, there's no way around destructure assignment of original object, then assigning each into a new object. – Coulson

When a property doesn't exist in an object, you get undefined. Sometimes it matters. Other than that, nice idea. – Tightfisted

lodash doesn't have this peculiarity. I think I'll go with it. – Tightfisted

FYI a typescript variant of this is: export function pick<T, D extends keyof T>(o: T, ...props: D[]) { return Object.assign({}, ...props.map(prop => ({[prop]: o[prop]}))); } – Supernova

Added a typescript compliant version below: https://mcmap.net/q/24585/-one-liner-to-take-some-properties-from-object-in-es-6 – Jumpy

Answer 2

I don't think there's any way to make it much more compact than your answer (or torazburo's), but essentially what you're trying to do is emulate Underscore's pick operation. It would be easy enough to re-implement that in ES6:

function pick(o, ...fields) {
    return fields.reduce((a, x) => {
        if(o.hasOwnProperty(x)) a[x] = o[x];
        return a;
    }, {});
}

Then you have a handy re-usable function:

var stuff = { name: 'Thing', color: 'blue', age: 17 };
var picked = pick(stuff, 'name', 'age');

Cale

Thanks. This is not an answer for my question, but very nice addition. – Arlina

(shrug) I feel like it is an answer for your solution; there is no slimmer general solution (torazaburo's solution removes from extra verbage, but the essential problem -- that all property names have to be written twice -- means it doesn't scale any better than your solution). My solution at least scales well...right the pick function once, and you can pick as many properties you want and it won't double them. – Cale

Why do you use hasOwnProperty? If the fields are hand-selected, even in seems to be more appropriate; although I'd go for omitting the check completely and just let them default to undefined. – Hispidulous

Bergi, it's a reasonable point...I just consider properties (not methods) on a prototype chain to be weird and "smelly" (as in they are a code smell), and I prefer to filter them out by default. If there's an application that needs prototype properties, well...there can be an option for that. – Cale

Is it going to handle Array in the object as well? – Venusian

Great stuff, I updated it for typescript handling here: https://mcmap.net/q/24585/-one-liner-to-take-some-properties-from-object-in-es-6 – Jumpy

Answer 3

The trick to solving this as a one-liner is to flip the approach taken: Instead of starting from original object orig, one can start from the keys they want to extract.

Using Array#reduce one can then store each needed key on the empty object which is passed in as the initialValue for said function.

Like so:

const orig = {
  id: 123456789,
  name: 'test',
  description: '…',
  url: 'https://…',
};

const filtered = ['id', 'name'].reduce((result, key) => { result[key] = orig[key]; return result; }, {});

console.log(filtered); // Object {id: 123456789, name: "test"}

alternatively...

const filtered = ['id', 'name'].reduce((result, key) => ({
    ...result, 
    [key]: orig[key] 
}), {});

console.log(filtered); // Object {id: 123456789, name: "test"}

Musicology

Answer 4

A tiny bit shorter solution using the comma operator:

const pick = (O, ...K) => K.reduce((o, k) => (o[k]=O[k], o), {})

console.log(
  pick({ name: 'John', age: 29, height: 198 }, 'name', 'age')
)  

Jardine

how to use this? Can you provide an example? – Maximin

It works just like the other pick functions in this thread: pick({ name: 'John', age: 29, height: 198 }, 'name', 'age') – Jardine

This is a good one. If anyone is trying to use this approach for an express js project to destructure properties from req. body and assign them to a new object, they can do like, const payload = pick(req.body, 'name', 'age') – Pettiford

Answer 5

ES6 was the latest spec at the time when the question was written. As explained in this answer, key picking is significantly shorter in ES2019 than in ES6:

Object.fromEntries(
  Object.entries(obj)
  .filter(([key]) => ['foo', 'bar'].includes(key))
)

Toomer

Answer 6

TC39's object rest/spread properties proposal will make this pretty slick:

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
z; // { a: 3, b: 4 }

(It does have the downside of creating the x and y variables which you may not need.)

Bassett

This is a convenient form of omit, but not pick – Arlina

I would love to see a variant that does the exact opposite of this as an ES proposal: let { a, b } as z = { x: 1, y: 2, a: 3, b: 4 } – Bernicebernie

Answer 7

You can use object destructuring to unpack properties from the existing object and assign them to variables with different names - fields of a new, initially empty object.

const person = {
  fname: 'tom',
  lname: 'jerry',
  aage: 100,
}

let newPerson = {};

({fname: newPerson.fname, lname: newPerson.lname} = person);

console.log(newPerson);

Versieversification

(index):36 Uncaught SyntaxError: Invalid destructuring assignment target – Brandy

@Brandy dont know where and how you are executing this but it works well in SO code editor and in chrome developer tools. – Versieversification

I used jsfiddle – Brandy

I've improved your answer a bit, but it's still too verbose, vs. what the OP asked for. It repeats not just the field names, but also the new object's name. – Exterminate

Answer 8

There's currently a strawman proposal for improving JavaScript's object shorthand syntax, which would enable "picking" of named properties without repetition:

const source = {id: "68646", genre: "crime", title: "Scarface"};
const target = {};
Object.assign(target, {source.title, source.id});

console.log(picked);
// {id: "68646", title: "Scarface"}

Unfortunately, the proposal doesn't seem to be going anywhere any time soon. Last edited in July 2017 and still a draft at Stage 0, suggesting the author may have ditched or forgotten about it.

ES5 and earlier (non-strict mode)

The concisest possible shorthand I can think of involves an ancient language feature nobody uses anymore:

Object.assign(target, {...(o => {
    with(o) return { id, title };
})(source)});

with statements are forbidden in strict mode, making this approach useless for 99.999% of modern JavaScript. Bit of a shame, because this is the only halfway-decent use I've found for the with feature. 😀

Tulle

Answer 9

I have similar to Ethan Brown's solution, but even shorter - pick function. Another function pick2 is a bit longer (and slower), but allows to rename properties in the similar to ES6 manner.

const pick = (o, ...props) => props.reduce((r, p) => p in o ? {...r, [p]: o[p]} : r, {})

const pick2 = (o, ...props) => props.reduce((r, expr) => {
  const [p, np] = expr.split(":").map( e => e.trim() )
  return p in o ? {...r, [np || p]: o[p]} : r
}, {}) 

Here is the usage example:

const d = { a: "1", c: "2" }

console.log(pick(d, "a", "b", "c"))        // -> { a: "1", c: "2" }
console.log(pick2(d, "a: x", "b: y", "c")) // -> { x: "1", c: "2" }

Discombobulate

What is the reason for downvote? Doesn't it work for you? – Discombobulate

Answer 10

I required this sollution but I didn't knew if the proposed keys were available. So, I took @torazaburo answer and improved for my use case:

function pick(o, ...props) {
  return Object.assign({}, ...props.map(prop => {
    if (o[prop]) return {[prop]: o[prop]};
  }));
}

// Example:
var person = { name: 'John', age: 29 };
var myObj = pick(person, 'name', 'sex'); // { name: 'John' }

Giesser

Answer 11

Some great solutions above, didn't see one for Typescript fleshed out, so here it goes. Based on @Ethan Browns solution above

const pick = < T extends object, K extends keyof T >(
    obj: T,
    ...keys: K[]
): Pick< T, K > =>
    keys.reduce< any >( ( r, key ) => {
        r[ key ] = obj[ key ];

        return r;
    }, {} );

And for bonus, here is TS friendly es6 omit, and one that is much more performant below, but less es6.

const omit = < T extends object, K extends keyof T >(
    obj: T,
    ...keys: K[]
): Omit< T, K > =>
    keys.reduce( ( r, key ) => ( delete r[ key ], r ), {
        ...obj,
    } );

Way more performant omit: http://jsben.ch/g6QCK

const omit = < T extends object, K extends keyof T >(
    obj: T,
    ...keys: K[]
): Omit< T, K > => {
    let r: any = {};
    let length = keys.length;

    while ( length-- ) {
        const key = keys[ length ];

        r[ key ] = obj[ key ];
    }

    return r;
};

Jumpy

Answer 12

Here's my solution:

originalObject = {a:1, b:2, c:3, d:4, e:5}
picks = ["b", "d"]
Object.fromEntries(Object.entries(originalObject).filter(entry => picks.includes(entry[0])))

which results in

{b: 2, d: 4}

Hathorn

Answer 13

inspired by the reduce approach of https://stackoverflow.com/users/865693/shesek:

const pick = (orig, keys) => keys.reduce((acc, key) => ({...acc, [key]: orig[key]}), {})

or even slightly shorter using the comma operator (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator)

const pick = (obj, keys) => keys.reduce((acc, key) => ((acc[key] = obj[key]), acc), {});

usage:

pick({ model : 'F40', manufacturer: 'Ferrari', productionYear: 1987 }, 'model', 'productionYear') results in: {model: "F40", productionYear: 1987}

Hetero