JavaScript objects are versatile and fundamental constructs used to store and manage data in key-value pairs.
They allow you to group related data and functionalities together.
An object is created using curly braces {} and consists of properties and methods.
Properties are key-value pairs where the key is a string (or a Symbol) and the value can be of any data type, including other objects or functions.
Methods are functions stored as object properties. Objects in JavaScript are useful for modeling real-world entities and their behaviors, as they enable encapsulation and organization of data.
You can access or modify object properties using dot notation (object.property) or bracket notation (object['property']).
JavaScript objects also support inheritance and prototypes, making them a powerful tool for object-oriented programming.
Example 1: Basic Object
const person = {
name: 'John',
age: 25,
greet: function() {
console.log('Hello!');
}
};
console.log(person.name); // Output: John
person.greet(); // Output: Hello!
Explanation: This basic object person has properties name and age, and a method greet. You can access the name property and call the greet method to see their outputs.
Example 2: Object with Nested Object
const user = {
username: 'alice42',
profile: {
age: 30,
city: 'Wonderland'
},
displayProfile: function() {
console.log(`Username: ${this.username}, City: ${this.profile.city}`);
}
};
user.displayProfile(); // Output: Username: alice42, City: Wonderland
Explanation: The user object contains a nested profile object. The displayProfile method demonstrates how to access properties within nested objects.
Example 3: Object with Method Using Arrow Function
const counter = {
count: 0,
increment: () => {
this.count++;
console.log(this.count);
}
};
counter.increment(); // Output: NaN (arrow functions don't have their own `this`)
Explanation: Arrow functions do not have their own this, which can cause issues when used as methods. In this case, this.count refers to the outer context, resulting in NaN.
Example 4: Object with Getter and Setter
const person = {
firstName: 'John',
lastName: 'Doe',
get fullName() {
return `${this.firstName} ${this.lastName}`;
},
set fullName(name) {
[this.firstName, this.lastName] = name.split(' ');
}
};
console.log(person.fullName); // Output: John Doe
person.fullName = 'Jane Smith';
console.log(person.firstName); // Output: Jane
console.log(person.lastName); // Output: Smith
Explanation: This object uses getter and setter methods to manage fullName. The getter returns the full name, and the setter splits a new full name into firstName and lastName.
Example 5: Object with Prototype Inheritance
const animal = {
type: 'Unknown',
speak: function() {
console.log('Animal makes a sound');
}
};
const dog = Object.create(animal);
dog.type = 'Dog';
dog.speak = function() {
console.log('Woof!');
};
dog.speak(); // Output: Woof!
Explanation: The dog object inherits from animal using Object.create. It overrides the speak method to provide specific behavior for dogs.
Example 6: Object with Computed Property Names
const key = 'age';
const person = {
name: 'Alice',
[key]: 30
};
console.log(person.age); // Output: 30
Explanation: This example uses a computed property name [key] to dynamically set the age property on the person object.
Example 7: Object with Dynamic Property Assignment
const car = {};
car.make = 'Toyota';
car['model'] = 'Corolla';
console.log(car.make); // Output: Toyota
console.log(car.model); // Output: Corolla
Explanation: Properties are added to the car object dynamically using both dot notation and bracket notation.
Example 8: Object with Method that Uses this
const rectangle = {
width: 10,
height: 5,
area: function() {
return this.width * this.height;
}
};
console.log(rectangle.area()); // Output: 50
Explanation: The rectangle object has a method area that calculates the area using this to refer to its properties.
Example 9: Object Destructuring
const user = {
id: 1,
name: 'Bob',
email: '[email protected]'
};
const { id, name } = user;
console.log(id); // Output: 1
console.log(name); // Output: Bob
Explanation: Object destructuring allows you to extract multiple properties from an object into variables in a concise way.
Example 10: Object with Symbol as Property Key
const uniqueKey = Symbol('key');
const obj = {
[uniqueKey]: 'value'
};
console.log(obj[uniqueKey]); // Output: value
Explanation: This object uses a Symbol as a unique property key, demonstrating how to create properties that are guaranteed to be unique.