JavaScript objects are one of the language's most powerful and flexible features. They allow us to store and organize data in key-value pairs, enabling dynamic interactions in our programs. In this blog, we'll explore how to work with objects, create them, and manipulate their properties effectively.
Key Characteristics of Objects
Dynamic: We can add, modify, or delete properties at runtime.
Non-Primitive: Objects store complex data and can include methods (functions).
Reference Type: Objects are stored in memory by reference, not by value.
1. Creating an Object
Using Object Literal Syntax
This is the most common and simplest way to create an object.
const person = {
name: "Hridoy",
age: 20,
isStudent: true,
greet: function () {
console.log(`Hello, my name is ${this.name}`);
}
};
// Accessing properties
console.log(person.name); // Hridoy
console.log(person["age"]); // 20
// Calling a method
person.greet(); // Hello, my name is Hridoy
Using the new Object() Syntax
We can also create an object using the new Object() constructor.
const car = new Object();
car.brand = "Toyota";
car.model = "Corolla";
car.year = 2022;
console.log(car.brand); // Toyota
console.log(car); // { brand: 'Toyota', model: 'Corolla', year: 2022 }
Using a Constructor Function
Constructor functions are useful when creating objects with similar structures.
function Person(name, age, isStudent) {
this.name = name;
this.age = age;
this.isStudent = isStudent;
this.greet = function () {
console.log(`Hello, my name is ${this.name}`);
};
}
const student1 = new Person("Hridoy", 20, true);
student1.greet(); // Hello, my name is Hridoy
Using Classes
Classes provide a more modern way to define constructor functions.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, I am ${this.name}`);
}
}
const teacher = new Person("Hridoy", 20);
teacher.greet(); // Hello, I am Hridoy
2. Manipulating Object Properties
Adding a Property
We can easily add a new property to an existing object.
person.gender = "Male";
console.log(person.gender); // Male
Modifying a Property
Update an existing property by assigning a new value.
person.age = 21;
console.log(person.age); // 21
Deleting a Property
We can delete a property from an object using the delete keyword.
delete person.isStudent;
console.log(person.isStudent); // undefined
Checking for a Property
Check if a property exists in an object using the in keyword.
console.log("name" in person); // true
Iterating Over an Object
We can iterate over the properties of an object using a for...in loop.
for (let key in person) {
console.log(`${key}: ${person[key]}`);
}
// Output:
// name: Hridoy
// age: 21
// gender: Male
3. Nested Objects
Objects can contain other objects as properties, allowing for complex data structures.
const company = {
name: "TechCorp",
location: {
city: "New York",
country: "USA"
},
employees: ["Alice", "Bob", "Charlie"]
};
console.log(company.location.city); // New York
console.log(company.employees[1]); // Bob
4. Using Object Methods
JavaScript provides several built-in methods to interact with objects.
Object.keys()
Returns an array of the object's keys.
console.log(Object.keys(person)); // ["name", "age", "gender"]
Object.values()
Returns an array of the object's values.
console.log(Object.values(person)); // ["Hridoy", 21, "Male"]
Object.entries()
Returns an array of key-value pairs.
console.log(Object.entries(person));
// [["name", "Hridoy"], ["age", 21], ["gender", "Male"]]
Object.assign()
Copies properties from one object to another.
const target = { a: 1 };
const source = { b: 2 };
// This will modify the target object
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }
// To avoid modifying the target object, we can follow these steps:
const baseObject = { a: 1 };
const additionalProperties = { b: 2 };
// Use case: Merging multiple objects into a single new object
const mergedObject = Object.assign({}, baseObject, additionalProperties);
console.log(mergedObject); // { a: 1, b: 2 }
Object.freeze()
Prevents modification of the object.
Object.freeze(person);
person.age = 22; // No effect
console.log(person.age); // 21
Object.seal()
Prevents adding or removing properties but allows modification of existing ones.
Object.seal(person);
person.age = 23; // Allowed
delete person.name; // Not allowed
console.log(person.age); // 23
5. Practical Example: Library Management
Let's put all these concepts together in a real-world scenario. Here's a simple object representing a library:
const library = {
name: "City Library",
books: [
{ title: "Book A", author: "Author A" },
{ title: "Book B", author: "Author B" }
],
addBook(book) {
this.books.push(book);
},
listBooks() {
this.books.forEach((book, index) => {
console.log(`${index + 1}. ${book.title} by ${book.author}`);
});
}
};
library.addBook({ title: "Book C", author: "Author C" });
library.listBooks();
// Output:
// 1. Book A by Author A
// 2. Book B by Author B
// 3. Book C by Author C
Conclusion
JavaScript objects are essential to structuring and organizing data effectively. Understanding how to work with them, modify properties, and use built-in methods will help us build more efficient and maintainable code. Experiment with the examples in this blog, and explore how objects can help us model real-world data in our projects.