JavaScript Object Properties
Properties are the most important part of JavaScript objects. They are the values associated with an object, stored as key-value pairs. JavaScript offers multiple ways to access, add, modify, delete, and check for properties.
Accessing Properties
You can access object properties using dot notation (obj.property) or bracket notation (obj['property']). Bracket notation is required when the property name contains spaces, special characters, or is stored in a variable.
let person = {
firstName: "John",
lastName: "Doe",
age: 30,
"favorite color": "blue"
};
// Dot notation
console.log(person.firstName);
console.log(person.age);
// Bracket notation
console.log(person["lastName"]);
console.log(person["favorite color"]);
// Using a variable as key
let key = "firstName";
console.log(person[key]);
// Non-existent property returns undefined
console.log(person.email);Adding and Modifying Properties
You can add new properties or change existing ones simply by assigning a value. Objects are mutable, so properties can be freely added, changed, or removed at any time.
let car = {
brand: "Toyota",
model: "Camry"
};
// Add new properties
car.year = 2024;
car["color"] = "red";
console.log(car);
// Modify existing property
car.model = "Corolla";
console.log(car.model);
// Add method as property
car.describe = function() {
return `${this.year} ${this.brand} ${this.model}`;
};
console.log(car.describe());Deleting Properties
The delete operator removes a property from an object. It returns true if successful. Deleting does not affect the prototype chain — it only removes own properties.
let user = {
name: "Alice",
age: 30,
email: "alice@example.com"
};
console.log("Before delete:", user);
delete user.email;
console.log("After delete:", user);
console.log(user.email);
// delete returns true
let result = delete user.age;
console.log("Delete returned:", result);
console.log(user);Checking Property Existence
Use the 'in' operator to check if a property exists in an object (including inherited properties). Use hasOwnProperty() to check only the object's own properties (not inherited ones).
let person = {
name: "Alice",
age: 30,
job: undefined
};
// 'in' operator (checks own + inherited)
console.log("name" in person);
console.log("email" in person);
console.log("toString" in person);
// hasOwnProperty() (own properties only)
console.log(person.hasOwnProperty("name"));
console.log(person.hasOwnProperty("toString"));
// Why not use === undefined?
console.log(person.job === undefined);
console.log(person.email === undefined);
// Both are undefined but 'job' exists, 'email' does not
console.log("job" in person);
console.log("email" in person);Computed and Shorthand Properties
ES6 introduced computed property names (using expressions in brackets as keys) and shorthand property syntax (when variable name matches property name). These make object creation more concise.
// Shorthand properties
let name = "Alice";
let age = 30;
let user = { name, age };
console.log(user);
// Computed property names
let prop = "score";
let obj = {
[prop]: 100,
["is" + "Valid"]: true,
[`key_${1 + 1}`]: "two"
};
console.log(obj);
console.log(obj.score);
console.log(obj.isValid);
console.log(obj.key_2);
// Dynamic keys from array
let keys = ["x", "y", "z"];
let point = {};
keys.forEach((k, i) => { point[k] = i * 10; });
console.log(point);| Operation | Syntax | Description |
|---|---|---|
| Access (dot) | obj.prop | Simple property access |
| Access (bracket) | obj['prop'] | Dynamic or special keys |
| Add/Modify | obj.prop = val | Set or update a property |
| Delete | delete obj.prop | Remove a property |
| Check (in) | 'prop' in obj | Checks own + inherited |
| Check (own) | obj.hasOwnProperty('p') | Own properties only |
| Computed key | { [expr]: val } | Expression as key |
| Shorthand | { name, age } | Variable name = key name |