Adding and removing properties in Javascript - Deep Dive

Overview - Adding and removing properties

What is it?

Adding and removing properties means changing the pieces of information stored inside an object. In JavaScript, objects hold data as properties, which are like labels with values. You can add new properties to store more information or remove properties to clean up or change the object. This helps keep your data organized and flexible.

Why it matters

Without the ability to add or remove properties, objects would be fixed and unchangeable, making it hard to update or manage data dynamically. This would limit how programs respond to new information or user actions. Being able to change properties lets programs adapt, save memory, and keep data relevant.

Where it fits

Before learning this, you should understand what JavaScript objects are and how to access their properties. After this, you can learn about object methods, property descriptors, and advanced object manipulation techniques.

Mental Model

Core Idea

Objects are like boxes with labeled slots, and adding or removing properties means putting new labels in or taking them out to change what the box holds.

Think of it like...

Imagine a filing cabinet where each drawer has a label and contains documents. Adding a property is like adding a new labeled drawer to hold more documents. Removing a property is like taking out a drawer you no longer need.

Object {
  ├─ property1: value1
  ├─ property2: value2
  └─ property3: value3
}

Add property4: value4 →
Object {
  ├─ property1: value1
  ├─ property2: value2
  ├─ property3: value3
  └─ property4: value4
}

Remove property2 →
Object {
  ├─ property1: value1
  ├─ property3: value3
  └─ property4: value4
}

Build-Up - 7 Steps

1

Foundation

Understanding JavaScript objects

Concept: Learn what objects are and how properties store data inside them.

In JavaScript, an object is a collection of properties. Each property has a name (key) and a value. For example: const person = { name: 'Alice', age: 25 }; Here, 'name' and 'age' are properties with values 'Alice' and 25.

Result

You can access person.name to get 'Alice' and person.age to get 25.

Knowing that objects hold data as named properties is the base for adding or removing those properties.

2

Foundation

Accessing and modifying properties

Concept: Learn how to read and change existing properties in an object.

You can get or set properties using dot notation or bracket notation: person.name; // 'Alice' person.age = 26; // changes age to 26 person['name'] = 'Bob'; // changes name to 'Bob' This changes the data inside the object.

Result

After modification, person.name is 'Bob' and person.age is 26.

Understanding property access and modification is essential before adding or removing properties.

3

Intermediate

Adding new properties dynamically

🤔Before reading on: do you think you can add a property to an object just by assigning a new name? Commit to yes or no.

Concept: You can add new properties by assigning a value to a new property name on the object.

To add a property, just assign a value to a new property name: person.city = 'New York'; or person['country'] = 'USA'; Now the object has these new properties.

Result

person.city is 'New York' and person.country is 'USA'.

Knowing that objects are flexible containers lets you expand them anytime by adding new properties.

4

Intermediate

Removing properties with delete operator

🤔Before reading on: does setting a property to undefined remove it from the object? Commit to yes or no.

Concept: The delete operator removes a property completely from an object, unlike setting it to undefined.

Use delete to remove a property: delete person.age; This removes the 'age' property entirely. Setting person.age = undefined only changes its value but keeps the property. Check with 'age' in person to see if it exists.

Result

'age' in person is false after delete, true if set to undefined.

Understanding the difference between removing a property and just changing its value prevents bugs and keeps objects clean.

5

Intermediate

Checking property existence

🤔Before reading on: does accessing a missing property cause an error or return undefined? Commit to your answer.

Concept: You can check if a property exists using the 'in' operator or hasOwnProperty method.

To check if a property exists: 'name' in person; // true person.hasOwnProperty('city'); // true Accessing a missing property returns undefined but does not cause an error.

Result

You can safely check properties before using them.

Knowing how to check existence helps avoid mistakes when adding or removing properties.

6

Advanced

Property descriptors and non-configurable properties

🤔Before reading on: can you delete all properties from any object? Commit to yes or no.

Concept: Some properties have special settings that prevent deletion or modification, controlled by property descriptors.

Properties can be non-configurable, meaning delete won't remove them: Object.defineProperty(person, 'id', { value: 123, configurable: false }); delete person.id; // fails silently or returns false You must understand descriptors to manage such properties.

Result

Some properties stay even after delete attempts.

Knowing property descriptors explains why some properties resist removal and how to control object behavior.

7

Expert

Performance and memory impact of property changes

🤔Before reading on: does adding and deleting properties frequently affect JavaScript engine performance? Commit to yes or no.

Concept: Adding and removing properties dynamically can affect how JavaScript engines optimize objects, impacting performance.

JavaScript engines optimize objects with stable shapes (fixed sets of properties). Adding or deleting properties changes the shape, causing de-optimization. For performance-critical code, minimize dynamic property changes or use patterns like object pools. Example: const obj = {}; obj.a = 1; // shape 1 obj.b = 2; // shape 2 Deleting properties also changes shape and can slow down code.

Result

Frequent property changes can slow down JavaScript execution.

Understanding engine optimizations helps write faster, more efficient code by managing property changes wisely.

Under the Hood

JavaScript objects are implemented as hash tables or hidden classes internally. When you add a property, the engine updates the object's shape or hidden class to include the new property. Removing a property changes this shape again. These shapes help the engine optimize property access by knowing the layout in memory. Deleting properties or adding new ones forces the engine to create new shapes, which can slow down performance.

Why designed this way?

This design balances flexibility and speed. Objects need to be dynamic to support JavaScript's flexible nature, but engines use hidden classes to optimize access. The tradeoff is that changing properties affects optimization, but this allows both dynamic behavior and fast access in most cases.

Object Creation and Modification Flow:

[Create Object] --> [Hidden Class Shape 1]
       |
       v
[Add Property] --> [Hidden Class Shape 2]
       |
       v
[Delete Property] --> [Hidden Class Shape 3]

Each shape represents a layout version the engine uses for fast property lookup.

Myth Busters - 3 Common Misconceptions

Quick: Does setting a property to null or undefined remove it from the object? Commit to yes or no.

Common Belief: Setting a property to null or undefined removes it from the object.

Reality: Setting a property to null or undefined only changes its value; the property still exists on the object.

Why it matters: This misconception can cause bugs where code expects a property to be gone but it still exists, leading to unexpected behavior.

Quick: Can you delete properties from all objects regardless of how they were created? Commit to yes or no.

Common Belief: You can delete any property from any object using the delete operator.

Reality: Some properties are non-configurable and cannot be deleted, especially those defined with Object.defineProperty or built-in properties.

Why it matters: Trying to delete non-configurable properties silently fails or causes errors, confusing developers and causing bugs.

Quick: Does deleting a property always improve memory usage? Commit to yes or no.

Common Belief: Deleting properties always frees memory and improves performance.

Reality: Deleting properties can cause de-optimization in JavaScript engines, sometimes making code slower and not necessarily freeing memory immediately.

Why it matters: Misusing delete for memory management can backfire, causing slower code and unexpected performance issues.

Expert Zone

1

Objects with many dynamic property changes lose hidden class optimizations, so stable property sets improve performance.

2

Using Map or WeakMap can be better than objects for dynamic key-value pairs when keys are unknown or frequently changing.

3

Non-enumerable properties added via descriptors do not show up in loops but still exist and affect object shape.

When NOT to use

Avoid adding and removing properties frequently in performance-critical code; instead, use fixed-shape objects or specialized data structures like Maps. For immutable data patterns, use libraries that create new objects rather than mutating existing ones.

Production Patterns

In real-world apps, objects often start with fixed properties and only add optional properties when needed. Deleting properties is rare; instead, properties are set to null or undefined to keep object shapes stable. For dynamic data, Maps or classes with private fields are preferred.

Connections

Hash Tables

JavaScript objects use hash tables internally to store properties.

Understanding hash tables explains why property access is fast and how adding/removing properties affects performance.

Memory Management

Adding and removing properties impacts how memory is used and freed in JavaScript engines.

Knowing memory management helps avoid performance pitfalls when changing object structures dynamically.

Database Schema Evolution

Adding/removing properties in objects is like changing columns in a database table over time.

This connection shows how data structures evolve and the challenges of maintaining consistency and performance.

Common Pitfalls

#1 Trying to remove a property by setting it to undefined.

Wrong approach:

const obj = { a: 1 };
obj.a = undefined;
console.log('a' in obj); // true

Correct approach:

const obj = { a: 1 };
delete obj.a;
console.log('a' in obj); // false

Root cause:

Confusing property value assignment with property removal.

#2 Deleting a non-configurable property expecting it to be removed.

Wrong approach:

Object.defineProperty(obj, 'id', { value: 10, configurable: false });
delete obj.id;
console.log(obj.id); // 10

Correct approach:

Define properties as configurable if you want to delete them:
Object.defineProperty(obj, 'id', { value: 10, configurable: true });
delete obj.id;
console.log(obj.id); // undefined

Root cause:

Not understanding property descriptor settings.

#3 Frequently adding and deleting properties in performance-critical loops.

Wrong approach:

for (let i = 0; i < 10000; i++) {
obj['prop' + i] = i;
delete obj['prop' + i];
}

Correct approach:

Use a Map for dynamic keys:
const map = new Map();
for (let i = 0; i < 10000; i++) {
map.set('prop' + i, i);
map.delete('prop' + i);
}

Root cause:

Ignoring JavaScript engine optimizations and object shape stability.

Key Takeaways

JavaScript objects store data as properties that can be added or removed dynamically.

Adding a property is as simple as assigning a value to a new property name on the object.

Removing a property requires the delete operator; setting a property to undefined does not remove it.

Some properties cannot be deleted if they are non-configurable, controlled by property descriptors.

Frequent adding and removing of properties can hurt performance due to JavaScript engine optimizations.