How to Clone JavaScript Object Except for One Key (in 4 Ways)

By

There are several ways to clone a JavaScript object except for one key. The easiest way is to use Object.assign() method to clone an object and then delete the desired key.

For example:

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const clone = Object.assign({}, originalObject);
delete clone.key2;

console.log(clone); // { key1: 'value1', key3: 'value3' }

This guide shows you 4 different ways to clone a JavaScript object by leaving one (or more) keys out.

1. Using the Object.assign() Method

Object.assign method clones an object and delete statement deletes a key from it

In JavaScript, the Object.assign() method clones properties from one or more source objects to a target object. It then returns the target object.

A straightforward way to clone an object and leave a key out is by cloning the object with Object.assign() and removing the key from the cloned object using the delete statement.

Here’s an example of cloning an object and leaving key2 out from the clone:

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const clone = Object.assign({}, originalObject);
delete clone.key2;

console.log(clone);

Output:

{ key1: 'value1', key3: 'value3' }

2. Using the Spread Operator (…)

The spread operator clones the rest of the object while the key2 variable captures the key you want to omit

Another way to clone all except for one key in JavaScript is by utilizing the spread operator (…), also called the destructuring operator or “the rest” operator.

The following example code uses object destructuring and the spread operator to create a shallow clone of the originalObject object:

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const { key2, ...clone } = originalObject;

console.log(clone);

Output:

{ key1: 'value1', key3: 'value3' }

The object destructuring syntax const { key2, …clone } = originalObject; allows you to extract the values of key2 and the rest of the keys in the originalObject object and store them in separate variables.

The triple-dot operator (also known as the spread operator) is used to spread out the keys and values of an object into another object. In this case, the spread operator is used to spread out the keys and values of the originalObject object into a new object called clone.

Therefore, the clone object will contain all the keys and values of the originalObject object except for the key2 key and value, which were extracted and stored in a separate variable using object destructuring.

Notice that this approach might result in warnings in your code editor that warn for “Unused variable key2”.

To suppress this warning, you can for example assign an underscore as the omitted key like this:

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const { key2: _, ...clone } = originalObject;

console.log(clone);

Output:

{ key1: 'value1', key3: 'value3' }

3. Using the Object.keys() and for…in Loops

A for loop adds the key-value pairs to new object except for the one key you want to skip

Of course, you can always use a for loop to re-construct the cloned object and skip adding the one key you want to leave out. This is the most “work-intensive” approach to solving the problem.

For instance, let’s clone an object with three keys and leave the key2 out:

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const clone = {};

for (const key in originalObject) {
  if (key !== 'key2') {
    clone[key] = originalObject[key];
  }
}

console.log(clone);

Output:

{ key1: 'value1', key3: 'value3' }

In JavaScript, the for...in loop iterates over the object’s properties. In this case, we’re using the loop to copy all the properties of originalObject to clone, except for the key2 property which we leave out by performing a simple if-check.

Make sure to also read for…in vs for…of in JavaScript.

4. The lodash omit() Function

The lodash omit function clones an object and omits a specific key.

The lodash library is a popular utility library for JavaScript that provides many utility functions, including the omit() function. The omit() function creates a new object by picking all the properties of an object except for the ones specified.

If you’re using lodash in your project to begin with, or if you don’t have access to ES6 and the above approaches, using the omit() function can be useful to remove a key from a clone.

Here’s an example:

const _ = require('lodash');

const originalObject = {
  key1: 'value1',
  key2: 'value2',
  key3: 'value3'
};

const clone = _.omit(originalObject, 'key2');

console.log(clone);

Output:

{ key1: 'value1', key3: 'value3' }

The lodash library is a popular utility library for JavaScript that provides many utility functions, including the omit() function. The omit() function creates a new object by picking all the properties of an object except for the ones specified. In this case, we’re using it to create a new object with all the properties of originalObject except for the key2 property.

Thanks for reading. Happy coding!

Read Also

How to Clone an Object in JavaScript