19

I would like to delete a property and return a new object without mutating the original object.

I know we can do this easily with Lodash like this:

const profile = { name: 'Maria', age: 30 }
_.omit(profile, name) // it returns a new object without the property name {age: 30}

However, I would like to know if it's possible to do it with vanilla JavaScript without assigning that value to undefined or using a filter?

BinaryButterfly
  • 18,137
  • 13
  • 50
  • 91
Chumpocomon
  • 661
  • 1
  • 6
  • 12
  • 2
    Does this answer your question? [How do I remove a key from a JavaScript object?](https://stackoverflow.com/questions/3455405/how-do-i-remove-a-key-from-a-javascript-object) – 23k Dec 22 '19 at 19:29
  • Thank so much you but as I said I don't want to change the current object, neither use `undefined` – Chumpocomon Dec 23 '19 at 10:29

6 Answers6

32

For a single key you can destructure the object, and use computed property with rest to create an object without the property:

const omitSingle = (key, { [key]: _, ...obj }) => obj
const profile = { name: 'Maria', age: 30 }

const result = omitSingle('name', profile)

console.log(result)

To omit multiple properties, you can convert the object to [key, value] pairs, filter the pairs according to the listed keys array, and then convert back to an object via Object.fromEntries():

const omit = (keys, obj) => 
  Object.fromEntries(
    Object.entries(obj)
      .filter(([k]) => !keys.includes(k))
  )
  
const profile = { name: 'Maria', gender: 'Female', age: 30 }

const result = omit(['name', 'gender'], profile)

console.log(result)
Ori Drori
  • 183,571
  • 29
  • 224
  • 209
  • Thank you so much your first option was exactly what I was looking for, a perfect vanilla alternative to `_.omit` even though that syntax is totally new for me. – Chumpocomon Dec 23 '19 at 10:35
  • 2
    You're welcome. I've added some links that might give you more info. – Ori Drori Dec 23 '19 at 10:39
10
 const obj = { 
   prop0: 0, 
   prop1: 1, 
   prop2: 2, 
   prop3: 3, 
 };
   
 const prunedObj = (({ prop1, prop2, ...rest }) => rest)(obj);

 // prunedObj => { prop0: 0, prop3: 3}
4b0
  • 21,981
  • 30
  • 95
  • 142
js_god_63552
  • 101
  • 1
  • 2
3

you can try this.

export const flattenKeys = (s) =>
  s
    .replace(/\[(\w+)\]/g, '.$1')
    .replace(/^\./, '')
    .split('.');

export const omit = (object, path) => {
  const obj = object;

  let keys = path;

  if (typeof keys === 'string') {
    keys = flattenKeys(keys);
  }

  if (keys.length === 1) {
    delete obj[keys];

    return undefined;
  }

  return omit(obj[keys[0]], keys.slice(1).join('.'));
};

Example:

const data = {
  user: {
    name: 'Khoa',
    age: 24
  },
  company: {
    name: 'Test',
  }
}

omit(data, 'company.name')

// output:
// { user: { name: 'Khoa', age: 24 }, company: {} }
Dang Khoa
  • 31
  • 1
  • 3
1

If you don't have a nested object, try to clone as follows:

const profile = { name: 'Maria', age: 30 }

function deleteProperty(object, property){
  var clonedObject = JSON.parse(JSON.stringify(object));
  delete clonedObject[property];
  return clonedObject;
}

var newProfile = deleteProperty(profile, "name");

console.log(profile);
console.log(newProfile);
Ahed Kabalan
  • 815
  • 6
  • 8
0

wrote a package just to solve this issue

https://www.npmjs.com/package/fp-omit

it doesn't mutate or uses delete under the hood, but pure functional rambda function

ahhmarr
  • 2,296
  • 4
  • 27
  • 30
0

Slight variation of the accepted answer that just uses rest params:

const omit = (o, ...paths) => 
 Object.fromEntries(Object.entries(o).filter(([k]) => !paths.includes(k)))
aremay
  • 113
  • 6