14. Understanding Objects in JavaScript

JavaScript objects are fundamental building blocks for organizing and manipulating data. Unlike primitive data types, objects allow us to store multiple related values together. In this article, we will explore JavaScript objects, how they work, and different ways to loop over them using relatable examples.

---

What is an Object in JavaScript?

An object in JavaScript is a collection of key-value pairs, where each key (also called a property) is a unique identifier mapped to a value.

Example: Representing a Person as an Object

let person = {
    name: "Alice",
    age: 30,
    city: "New York"
};
console.log(person.name); // Output: Alice

In this example:

• name, age, and city are keys.

• "Alice", 30, and "New York" are values.

---

Accessing Object Properties

We can access object properties in two ways:

Dot Notation

console.log(person.name); // Output: Alice

Bracket Notation

console.log(person["city"]); // Output: New York

This method is useful when the property name is dynamic or stored in a variable.

---

Adding and Modifying Properties

We can add new properties or update existing ones dynamically.

Adding a New Property

person.job = "Engineer";
console.log(person);

Modifying an Existing Property

person.age = 31;
console.log(person.age); // Output: 31

---

Looping Over Objects

We often need to iterate over an object’s properties. Here are different ways to do it:

Using for...in

for (let key in person) {
    console.log(key + ": " + person[key]);
}

Using Object.keys()

Object.keys(person).forEach(key => {
    console.log(key + ": " + person[key]);
});

Using Object.entries()

Object.entries(person).forEach(([key, value]) => {
    console.log(key + ": " + value);
});

---

Understanding Arrays vs. Objects

Both arrays and objects store collections of data, but they have different use cases.

Example: An Array of Fruits

let fruits = ["Apple", "Banana", "Cherry"];

---

Looping Over Arrays

Using forEach

fruits.forEach(fruit => console.log(fruit));

Using for...of

for (let fruit of fruits) {
    console.log(fruit);
}

---

Conclusion

JavaScript objects allow us to group related data using key-value pairs. We can access, modify, and iterate over object properties efficiently. Understanding how to work with objects and arrays is essential for effective JavaScript programming.