JavaScript Object Properties

Welcome to TheCodingCollege.com! Understanding object properties is essential for effectively working with JavaScript objects. Properties store values that describe an object, and mastering them allows you to handle data in a structured and efficient way.

In this guide, we’ll explore the concept of JavaScript object properties, their types, and how to work with them in your code.

What Are Object Properties?

Object properties are key-value pairs associated with an object.

  • Key: The property name, which must be a string or symbol.
  • Value: Any valid JavaScript value, including strings, numbers, arrays, functions, or even other objects.

Example:

const car = {
  brand: "Tesla",
  model: "Model 3",
  year: 2023
};
console.log(car.brand); // Output: Tesla

Types of Properties

JavaScript object properties can be classified into two main types:

1. Data Properties

These store a value.

Example:

const user = {
  name: "Alice",
  age: 25
};
console.log(user.name); // Output: Alice

2. Accessor Properties

These are functions that act as getters and setters for other properties.

Example:

const user = {
  firstName: "Alice",
  lastName: "Smith",
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(" ");
  }
};
console.log(user.fullName); // Output: Alice Smith
user.fullName = "Bob Brown";
console.log(user.firstName); // Output: Bob

Defining Properties

1. Using Dot Notation

const book = {};
book.title = "JavaScript Basics";
console.log(book.title); // Output: JavaScript Basics

2. Using Bracket Notation

const book = {};
book["author"] = "John Doe";
console.log(book["author"]); // Output: John Doe

3. Using Object.defineProperty()

Allows you to define properties with more control, such as setting properties to be read-only or non-enumerable.

Example:

const person = {};
Object.defineProperty(person, "name", {
  value: "Alice",
  writable: false, // Cannot modify
  enumerable: true, // Will show up in loops
  configurable: false // Cannot delete
});
console.log(person.name); // Output: Alice
person.name = "Bob"; // No effect
console.log(person.name); // Output: Alice

Property Attributes

JavaScript properties have internal attributes that determine their behavior:

  1. Writable: Whether the property can be modified.
  2. Enumerable: Whether the property appears in loops.
  3. Configurable: Whether the property can be deleted or redefined.

Accessing Object Properties

You can access object properties in two main ways:

Dot Notation

console.log(car.brand); // Output: Tesla

Bracket Notation

Useful when the property name is dynamic or contains special characters.

const car = { "car-brand": "Tesla" };
console.log(car["car-brand"]); // Output: Tesla

Adding and Modifying Properties

Properties can be added or updated dynamically.

Example:

const laptop = {
  brand: "Dell"
};
laptop.model = "XPS 13"; // Add a new property
laptop.brand = "HP";     // Modify an existing property
console.log(laptop); 
// Output: { brand: 'HP', model: 'XPS 13' }

Deleting Properties

Use the delete operator to remove a property.

Example:

const user = {
  name: "Alice",
  age: 25
};
delete user.age;
console.log(user); // Output: { name: 'Alice' }

Checking for Properties

You can check if a property exists using:

  • in Operator 
console.log("brand" in car); // Output: true
console.log("color" in car); // Output: false
  • hasOwnProperty() Method 
console.log(car.hasOwnProperty("brand")); // Output: true

Iterating Over Properties

Using for...in Loop

Iterates over all enumerable properties.

const car = {
  brand: "Tesla",
  model: "Model 3"
};
for (let key in car) {
  console.log(`${key}: ${car[key]}`);
}
// Output:
// brand: Tesla
// model: Model 3

Using Object.keys()

Returns an array of property keys.

console.log(Object.keys(car)); // Output: ['brand', 'model']

Using Object.values()

Returns an array of property values.

console.log(Object.values(car)); // Output: ['Tesla', 'Model 3']

Using Object.entries()

Returns an array of key-value pairs.

console.log(Object.entries(car)); 
// Output: [['brand', 'Tesla'], ['model', 'Model 3']]

Property Shorthand

When the key and variable name are the same, you can use shorthand notation.

Example:

const name = "Alice";
const age = 25;
const user = { name, age };
console.log(user); 
// Output: { name: 'Alice', age: 25 }

Computed Property Names

You can use expressions to dynamically create property names.

Example:

const key = "color";
const car = {
  [key]: "red"
};
console.log(car.color); // Output: red

Freezing and Sealing Objects

  • Object.freeze(): Prevents modifications to an object. 
const car = { brand: "Tesla" };
Object.freeze(car);
car.brand = "BMW"; // No effect
console.log(car.brand); // Output: Tesla
  • Object.seal(): Allows modifying existing properties but prevents adding or deleting properties. 
const car = { brand: "Tesla" };
Object.seal(car);
car.brand = "BMW";  // Allowed
car.model = "X";    // Not allowed
console.log(car);   // Output: { brand: 'BMW' }

Practical Examples

Example 1: Storing User Data

const user = {
  id: 101,
  name: "John Doe",
  email: "[email protected]"
};
console.log(user.name); // Output: John Doe

Example 2: Modeling a Product

const product = {
  name: "Laptop",
  price: 799,
  getDiscountedPrice(discount) {
    return this.price * (1 - discount);
  }
};
console.log(product.getDiscountedPrice(0.1)); // Output: 719.1

Why Learn JavaScript Object Properties on TheCodingCollege.com?

At TheCodingCollege.com, we help you:

  • Understand JavaScript concepts with clear explanations.
  • Build real-world projects with practical examples.
  • Test your knowledge with interactive exercises and quizzes.

Conclusion

JavaScript object properties are fundamental to working with structured data. By mastering their creation, manipulation, and behavior, you’ll be equipped to handle even the most complex coding tasks.

Leave a Comment