How to remove a property from an object in JavaScript

1The delete operatorRecommended

delete removes the property itself, key and value together, from the object you give it. Use dot notation for a fixed name and bracket notation when the name is in a variable or isn't a valid identifier (delete headers["x-api-key"]). After the delete, Object.hasOwn reports the key as gone.

const user = { name: "Ada", role: "admin", tempToken: "abc123" };

delete user.tempToken;
console.log(user);
console.log(Object.hasOwn(user, "tempToken"));

// Bracket notation for keys held in a variable or with odd characters
const key = "role";
delete user[key];
console.log(user);

// delete returns true even when the property was never there
console.log(delete user.nickname);

Output: { name: 'Ada', role: 'admin' }, false, { name: 'Ada' }, then true. That last line matters: unlike Python's del, deleting a missing key is not an error, and the true it returns only means "the key is not there now", not "I removed something". If you need to know, check Object.hasOwn(obj, key) first.

2Rest destructuring: a copy without the key

When the object came from somewhere else (a function argument, React state, a shared config), mutating it can surprise the caller. Object rest destructuring pulls the unwanted key out into its own variable and collects everything else into a brand-new object. The original is never touched. For a key held in a variable, use a computed name and bind the value to a throwaway variable.

const user = { id: 7, name: "Ada", password: "hunter2", role: "admin" };

// Pull password out, collect everything else into a new object
const { password, ...publicUser } = user;

console.log(publicUser);
console.log(password);
console.log(user); // the original is untouched

// A key held in a variable needs a computed name and a throwaway binding
const key = "role";
const { [key]: _removed, ...withoutRole } = publicUser;
console.log(withoutRole);

Prints { id: 7, name: 'Ada', role: 'admin' }, then hunter2, then the original user with password still in it, and finally { id: 7, name: 'Ada' }. The copy is shallow: nested objects are shared between user and publicUser, so editing a nested value through one shows up in the other.

3Removing several keys at once

Destructuring gets clumsy past two or three keys, and it can't take a list you only know at runtime. For that, turn the object into entries, filter them and turn them back with Object.fromEntries. That builds a new object. To edit the original instead, loop over the keys and delete each one; missing keys cost nothing. The same filter also handles the other common request, dropping every property whose value is null or undefined.

const record = { id: 7, name: "Ada", password: "hunter2", session: "x91", role: "admin" };
const drop = new Set(["password", "session"]);

// New object: keep only the entries whose key is not in drop
const safe = Object.fromEntries(
  Object.entries(record).filter(([key]) => !drop.has(key))
);
console.log(safe);

// In place: delete each key (missing ones are harmless)
for (const key of drop) {
  delete record[key];
}
console.log(record);

// Remove every property whose value is null or undefined
const form = { name: "Ada", email: null, phone: undefined, city: "London" };
const filled = Object.fromEntries(
  Object.entries(form).filter(([, value]) => value != null)
);
console.log(filled);

Both approaches print { id: 7, name: 'Ada', role: 'admin' }, and the last line prints { name: 'Ada', city: 'London' }. value != null is the one place loose equality is idiomatic: it is true for everything except null and undefined, so 0, "" and false survive. Object.entries only sees own, enumerable, string-keyed properties, so the copy drops symbol keys and the prototype.

4Setting a key to undefined is not removing it

obj.key = undefined looks like a removal because reading the key afterwards gives undefined either way. But the key is still on the object: in, Object.keys, for...in and spreading into another object all still see it. Only delete (or building a copy without it) makes the key disappear.

const a = { name: "Ada", email: "[email protected]" };
const b = { name: "Ada", email: "[email protected]" };

a.email = undefined; // the key is still there
delete b.email;      // the key is gone

console.log(a, b);
console.log("email" in a, "email" in b);
console.log(Object.keys(a), Object.keys(b));
console.log(a.email === b.email);

// JSON.stringify skips undefined values, which hides the difference
console.log(JSON.stringify(a), JSON.stringify(b));

Prints { name: 'Ada', email: undefined } { name: 'Ada' }, then true false, then [ 'name', 'email' ] [ 'name' ]. Reading the value can't tell them apart (true), and neither can JSON: both serialize to {"name":"Ada"}. So if the object is only ever sent as JSON, setting undefined works in practice, but anything that walks the keys will still find it.

5Which should you use?

6When delete does nothing: frozen objects, prototypes and Maps

A few cases trip people up. A Map is not a plain object, so delete doesn't apply; it has its own .delete(key) method, which, unlike the operator, tells you whether it actually removed something. A frozen (or sealed) object refuses deletes: a plain script fails silently, while strict code throws a TypeError. And delete only removes an object's own property, so a property with the same name on the prototype shows through afterwards.

// Maps have their own delete method, which reports whether anything was removed
const ports = new Map([["http", 80], ["ftp", 21]]);
console.log(ports.delete("ftp"), ports.delete("smtp"));
console.log(ports);

// A frozen object's properties can't be deleted
const config = Object.freeze({ mode: "prod", debug: false });
console.log(delete config.debug); // sloppy-mode script: fails quietly

function strictDelete(obj, key) {
  "use strict"; // modules and classes are always strict
  delete obj[key];
}
try {
  strictDelete(config, "debug");
} catch (err) {
  console.log(err.name + ": " + err.message);
}
console.log(config);

// delete only removes own properties: an inherited one shows through again
const base = { greeting: "hello" };
const child = Object.create(base);
child.greeting = "hi";
delete child.greeting;
console.log(child.greeting, Object.hasOwn(child, "greeting"));

ports.delete prints true false and leaves Map(1) { 'http' => 80 }. The frozen object returns false in the plain script and throws TypeError: Cannot delete property 'debug' of #<Object> inside the strict function; either way config is unchanged. The last line prints hello false: the own greeting is gone, and the inherited one answers instead. Code in ES modules and class bodies is always strict, so there a failed delete always throws.