Question
Given the following JavaScript object:
let myObject = {
ircEvent: "PRIVMSG",
method: "newURI",
regex: "^http://.*"
};
How can I remove the regex property so that the object becomes:
let myObject = {
ircEvent: "PRIVMSG",
method: "newURI"
};
Short Answer
By the end of this page, you will understand how to remove properties from JavaScript objects, when to use the delete operator, and when to create a new object without a property using object destructuring and rest syntax. You will also see common mistakes, real-world use cases, and a small practice project.
Concept
In JavaScript, objects store data as key-value pairs. Sometimes you need to remove one of those keys.
There are two common ways to do this:
- Mutate the existing object using
delete - Create a new object without that property using destructuring with rest syntax
Using delete
The delete operator removes a property directly from an object.
delete myObject.regex;
After this runs, the regex key no longer exists on myObject.
Why this matters
Removing properties is useful when:
- cleaning data before sending it to an API
- hiding sensitive fields like passwords or tokens
- removing temporary configuration values
- preparing objects for logging or display
In real programming, choosing whether to change the original object or create a new one is important. Some codebases prefer immutability, meaning they avoid changing existing objects directly.
Mental Model
Think of a JavaScript object like a backpack with labeled pockets:
ircEventis one pocketmethodis another pocketregexis another pocket
Removing a property is like taking one labeled pocket out of the backpack.
deletemeans you remove the pocket from the same backpack- destructuring with rest means you pack a new backpack with everything except that one pocket
This helps you decide whether you want to edit the original thing or make a cleaned copy.
Syntax and Examples
Basic syntax with delete
delete objectName.propertyName;
Example:
let myObject = {
ircEvent: "PRIVMSG",
method: "newURI",
regex: "^http://.*"
};
delete myObject.regex;
console.log(myObject);
Output:
{ ircEvent: "PRIVMSG", method: "newURI" }
Removing a property with bracket notation
Bracket notation is useful when the property name is stored in a variable.
let keyToRemove = "regex";
delete myObject[keyToRemove];
Creating a new object without a property
If you do not want to change the original object, use destructuring:
myObject = {
: ,
: ,
:
};
{ regex, ...newObject } = myObject;
.(newObject);
Step by Step Execution
Consider this code:
let myObject = {
ircEvent: "PRIVMSG",
method: "newURI",
regex: "^http://.*"
};
delete myObject.regex;
console.log(myObject);
console.log(myObject.regex);
Step-by-step
- A variable named
myObjectis created. - It contains three properties:
ircEventmethodregex
delete myObject.regex;tells JavaScript to remove theregexproperty from the object.console.log(myObject);prints the updated object.console.log(myObject.regex);printsundefinedbecause that property no longer exists.
Expected result:
Real World Use Cases
Common practical uses
Removing sensitive data
Before returning user data from a server, you may want to remove fields like passwords.
delete user.password;
Cleaning API payloads
You might remove empty or temporary fields before sending data.
delete formData.tempId;
Hiding internal configuration
An app may use internal debug settings that should not be exposed.
delete config.debugToken;
Preparing data for display
You may want to show only relevant fields in a UI.
const { internalNotes, ...publicData } = order;
Removing optional filters
In search or query objects, you may remove filters that are no longer active.
delete query.regex;
Real Codebase Usage
In real projects, developers often think about mutability and code clarity when removing properties.
Common patterns
1. Validation cleanup
After validating input, extra fields may be removed.
if (!isAdmin) {
delete requestBody.adminOnlyField;
}
2. Guarded deletion
Developers sometimes check whether a key exists first for readability.
if ("regex" in myObject) {
delete myObject.regex;
}
3. Immutable updates
In React, Redux, and similar patterns, developers often avoid mutating objects directly.
const { regex, ...cleanedObject } = myObject;
4. Sanitizing logs
When logging objects, some keys are stripped out first.
const { token, password, ...safeLogData } = user;
console.log(safeLogData);
5. Dynamic property removal
Sometimes the property name is not known until runtime.
Common Mistakes
1. Setting a property to undefined instead of removing it
This does not actually remove the property.
Broken example:
let myObject = {
regex: "^http://.*"
};
myObject.regex = undefined;
console.log(myObject); // { regex: undefined }
Better:
delete myObject.regex;
2. Expecting delete to create a new object
delete changes the original object.
Broken expectation:
let original = { a: 1, b: 2 };
delete original.b;
console.log(original); // changed
If you want a new object instead:
Comparisons
| Approach | Changes original object? | Best for | Example |
|---|---|---|---|
delete obj.key | Yes | Directly removing a property from an existing object | delete myObject.regex |
delete obj[key] | Yes | Dynamic property names | delete myObject[keyToRemove] |
| Destructuring with rest | No | Creating a new object without a property | const { regex, ...newObject } = myObject |
Set to undefined | No removal | Rare cases where key should still exist | myObject.regex = undefined |
Cheat Sheet
Remove a property directly
delete obj.key;
delete obj["key"];
Remove a dynamic property
const key = "regex";
delete obj[key];
Create a new object without a property
const { regex, ...newObj } = obj;
Key differences
delete obj.keyremoves the propertyobj.key = undefinedkeeps the propertyobj.key = nullkeeps the property
Useful checks
"regex" in obj
obj.hasOwnProperty("regex")
Best practice guide
- Use
deletefor direct object mutation - Use rest syntax when you want immutability
- Use bracket notation for variable-based property names
FAQ
How do I delete a property from a JavaScript object?
Use the delete operator:
delete myObject.regex;
Does delete remove the property completely?
Yes. After deletion, the property no longer exists on the object.
What is the difference between delete obj.key and obj.key = undefined?
delete removes the property. Setting it to undefined keeps the property but gives it an undefined value.
Can I remove a property without changing the original object?
Yes. Use destructuring and rest syntax:
const { regex, ...newObject } = myObject;
Can I delete a property using a variable name?
Yes, with bracket notation:
const key = "regex";
delete myObject[key];
Is deleting a property that does not exist an error?
Usually no. JavaScript normally just does nothing.
Mini Project
Description
Create a small JavaScript utility that removes unwanted fields from a user profile object. This demonstrates both direct property deletion and creating a cleaned copy for safer data handling. This is useful in real applications when preparing API responses, sanitizing logs, or hiding private fields before displaying data.
Goal
Build a script that removes selected properties from an object and prints the cleaned result.
Requirements
- Create an object with at least four properties
- Remove one property using the
deleteoperator - Create a second cleaned object using destructuring and rest syntax
- Log both results to compare mutation and non-mutation
Keep learning
Related questions
Deep Cloning Objects in JavaScript: Methods, Trade-offs, and Best Practices
Learn how to deep clone objects in JavaScript, compare structuredClone, JSON methods, and recursive approaches with examples.
Get Screen, Page, and Browser Window Size in JavaScript
Learn how to get screen size, viewport size, page size, and scroll position in JavaScript across major browsers with clear examples.
How JavaScript Closures Work: A Beginner-Friendly Guide
Learn how JavaScript closures work with simple explanations, examples, common mistakes, and practical use cases for real code.