JavaScript Object Properties
Properties are the named slots that hold an object's data, and JavaScript gives you fine control over how you add, read, remove, and inspect them.
Adding and deleting properties
Objects in JavaScript are dynamic: you can add properties after creation just by assigning to a new key, and you can remove one with the delete operator. There is no fixed shape you must declare in advance, which makes objects flexible containers that grow and shrink as your program runs.
Add, update, and delete
<!DOCTYPE html>
<html>
<body>
<h2>Add, update, and delete</h2>
<script>
const book = { title: "Deep Work" };
book.author = "Cal Newport"; // add
book.year = 2016; // add
book.year = 2017; // update
delete book.author; // remove
console.log(book); // { title: "Deep Work", year: 2017 }
</script>
</body>
</html>Checking whether a property exists
Reading a missing property returns undefined rather than throwing an error, so a bare check can be ambiguous when a property legitimately holds undefined. Two reliable tests are the in operator, which returns true when the key exists, and Object.hasOwn, which additionally ignores properties inherited from the prototype chain.
Testing for a key
<!DOCTYPE html>
<html>
<body>
<h2>Testing for a key</h2>
<script>
const user = { name: "Priya", active: false };
console.log("name" in user); // true
console.log("email" in user); // false
console.log(Object.hasOwn(user, "active")); // true
// Careful: a value of false or undefined is still present
console.log(user.active); // false (exists)
console.log(user.email); // undefined (missing)
</script>
</body>
</html>Enumerating and destructuring
To visit every own property you can loop with for...in or, more safely, iterate Object.keys. Destructuring offers a compact way to pull several properties into their own variables in one statement, and it can supply default values for keys that are missing.
Looping and destructuring
<!DOCTYPE html>
<html>
<body>
<h2>Looping and destructuring</h2>
<script>
const config = { host: "localhost", port: 8080 };
for (const key of Object.keys(config)) {
console.log(key, "=", config[key]);
}
// Pull properties into variables, with a default
const { host, port, protocol = "http" } = config;
console.log(`${protocol}://${host}:${port}`);
// "http://localhost:8080"
</script>
</body>
</html>Property descriptors and computed keys
Every property has hidden attributes such as writable and enumerable that you can inspect with Object.getOwnPropertyDescriptor or set with Object.defineProperty. You can also build a key from an expression at creation time by wrapping it in square brackets, which is called a computed property name.
Computed keys
<!DOCTYPE html>
<html>
<body>
<h2>Computed keys</h2>
<script>
const field = "score";
const level = 3;
const record = {
[field]: 95,
[`level_${level}`]: true
};
console.log(record); // { score: 95, level_3: true }
</script>
</body>
</html>- Assign to a new key to add a property; use delete to remove one.
- Use in or Object.hasOwn to test existence rather than comparing to undefined.
- Object.keys plus destructuring are the everyday tools for reading many properties.
- Computed property names let you build keys dynamically inside an object literal.
