What are Objects in JavaScript?

• Definition: Objects store keyed collections of data and more complex entities.
• Creation:
  • Object Constructor Syntax: let user = new Object();
  • Object Literal Syntax: let user = {}; (preferred and widely used).

---

Literals and Properties

• Objects are collections of properties. A property is a key: value pair.

  let user = {
    name: 'John',
    age: 30,
  }

• Accessing Properties:
  • Dot Notation: user.name returns "John".
  • Square Bracket Notation: user["name"] also returns "John".
• Adding/Removing Properties:

  user.isAdmin = true // Adding
  delete user.age // Removing

---

Special Cases with Keys

• Multiword Keys: Use quotes and square brackets.

  user['likes birds'] = true
  alert(user['likes birds']) // true

• Dynamic Keys (Computed Properties):
  • You can use variables or expressions as keys.

  let fruit = 'apple'
  let bag = { [fruit]: 5 } // Equivalent to { "apple": 5 }

---

Shorthand Properties

• When a variable name matches the property name:

  function makeUser(name, age) {
    return { name, age } // Same as name: name, age: age
  }

---

Property Name Rules

• Object properties can use reserved words or special characters.
• Non-string keys (e.g., numbers) are converted to strings:

  let obj = { 0: 'test' }
  alert(obj[0]) // "test"

---

Testing and Iterating Properties

1. Property Existence:
   • Use "key" in obj to check if a key exists.

   let user = { age: undefined }
   alert('age' in user) // true

1. Iterating with for..in:

   let user = { name: 'John', age: 30 }
   for (let key in user) {
     alert(key) // Outputs: "name", "age"
     alert(user[key]) // Outputs: "John", 30
   }

---

Property Order

• Integer keys: Sorted in ascending order.
• Non-integer keys: Retain their creation order.

---

Realistic Code Sample: A User Profile

let userProfile = {
  firstName: 'Jane',
  lastName: 'Smith',
  email: 'jane.smith@example.com',
  isVerified: true,
  address: {
    street: '123 Elm Street',
    city: 'Metropolis',
    postalCode: '12345',
  },
  interests: ['reading', 'hiking', 'coding'],

  // Method inside an object
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  },

  // Dynamically updating properties
  updateEmail(newEmail) {
    this.email = newEmail
    console.log(`Email updated to ${this.email}`)
  },
}

// Accessing properties
console.log(userProfile.getFullName()) // Output: Jane Smith

// Updating email using the method
userProfile.updateEmail('jane.doe@example.com') // Output: Email updated to jane.doe@example.com

// Accessing nested properties
console.log(userProfile.address.city) // Output: Metropolis

// Iterating over interests
console.log('User Interests:')
userProfile.interests.forEach((interest) => console.log(interest))

---

Adding and Deleting Properties

Properties can be added or removed dynamically after an object is created.

// Adding a new property
userProfile.phoneNumber = '555-1234'
console.log(userProfile.phoneNumber) // Output: 555-1234

// Deleting a property
delete userProfile.isVerified
console.log(userProfile.isVerified) // Output: undefined

---

Computed Properties

When creating objects, the property name can be dynamically computed using square brackets.

let key = 'favoriteColor'
let userPreferences = {
  [key]: 'blue',
  [key + 'Secondary']: 'green',
}

console.log(userPreferences.favoriteColor) // Output: blue
console.log(userPreferences.favoriteColorSecondary) // Output: green

---

Iterating Over Object Properties

Using for...in, you can loop through all keys in an object.

for (let key in userProfile) {
  console.log(`${key}: ${userProfile[key]}`)
}

---

Realistic Example: Product Inventory

Here’s how objects can be used in a practical scenario, such as managing a product inventory:

  let user = {
    name: 'John',
    age: 30,
  }

---

Using in Operator

The in operator checks if a property exists in an object. It’s particularly useful when verifying optional or dynamically added properties.

  user.isAdmin = true // Adding
  delete user.age // Removing

---

Summary

Objects are central to JavaScript, offering flexibility and functionality:

• Keys can be strings or symbols.
• Access properties using dot or bracket notation.
• Use for..in to iterate over keys.
• Understand integer vs. non-integer property ordering.

The above is the detailed content of What are Objects in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!