- 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).
-
Object Constructor Syntax:
Literals and Properties
- Objects are collections of properties. A property is a
key: valuepair.
let user = {
name: 'John',
age: 30,
}
-
Accessing Properties:
- Dot Notation:
user.namereturns"John". - Square Bracket Notation:
user["name"]also returns"John".
- Dot Notation:
- 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
-
Property Existence:
- Use
"key" in objto check if a key exists.
- Use
let user = { age: undefined }
alert('age' in user) // true
-
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 inventory = {
products: [
{
id: 1,
name: 'Laptop',
price: 1200,
stock: 25,
},
{
id: 2,
name: 'Smartphone',
price: 800,
stock: 50,
},
{
id: 3,
name: 'Tablet',
price: 400,
stock: 30,
},
],
// Method to display all products
listProducts() {
console.log('Product Inventory:')
this.products.forEach((product) => {
console.log(
`${product.name} - $${product.price} (Stock: ${product.stock})`
)
})
},
// Method to update stock
updateStock(productId, quantity) {
let product = this.products.find((p) => p.id === productId)
if (product) {
product.stock += quantity
console.log(`${product.name} stock updated to ${product.stock}`)
} else {
console.log('Product not found!')
}
},
}
// List products
inventory.listProducts()
// Update stock
inventory.updateStock(2, -5) // Decrease stock for Smartphone
inventory.listProducts()
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.
if ('phoneNumber' in userProfile) {
console.log('Phone number exists:', userProfile.phoneNumber)
} else {
console.log('Phone number not available.')
}
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..into iterate over keys. - Understand integer vs. non-integer property ordering.
Top comments (0)