~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/js/14js-objects-basics

# JavaScript Objects Basics

Objects are collections of key-value pairs that store related data.

## What Are Objects?

```javascript
// Without objects
let name = "John";
let age = 25;

// With objects — organized
let person = { name: "John", age: 25 };
```

## Creating Objects

```javascript
let person = { name: "John", age: 25, city: "NYC" };
let empty = {};
```

## Accessing Properties

```javascript
let person = { name: "John", age: 25 };

person.name;     // dot notation — "John"
person["age"];   // bracket notation — 25
```

**Tip:** Use dot notation for static keys. Use bracket notation when the key is dynamic.

## Adding and Modifying

```javascript
let person = { name: "John" };

person.age = 25;     // add
person.name = "Jane"; // modify
```

## Deleting Properties

```javascript
let person = { name: "John", age: 25 };
delete person.age;
console.log(person); // { name: "John" }
```

## Checking Properties

```javascript
let person = { name: "John", age: 25 };

"name" in person;              // true
person.hasOwnProperty("name"); // true
```

## Iterating Over Objects

```javascript
let person = { name: "John", age: 25 };

Object.keys(person);    // ["name", "age"]
Object.values(person);  // ["John", 25]
Object.entries(person); // [["name", "John"], ["age", 25]]

for (let [key, val] of Object.entries(person)) {
  console.log(`${key}: ${val}`);
}
```

## Nested Objects

```javascript
let person = {
  name: "John",
  address: { street: "123 Main St", city: "NYC" },
  hobbies: ["reading", "gaming"]
};

person.address.city; // "NYC"
```

**Remember:** Keep nesting shallow — deep structures are hard to maintain.

## Complete Example: User Profile

```javascript
let userProfile = {
  username: "john_doe",
  age: 25,
  address: { city: "NYC", state: "NY" },
  settings: { theme: "dark", notifications: true }
};

console.log(`City: ${userProfile.address.city}`);     // "NYC"
console.log(`Theme: ${userProfile.settings.theme}`);   // "dark"
```

## Best Practices

1. **Use descriptive keys** — meaningful property names
2. **Use `const`** — if the object won't be reassigned
3. **Keep it flat** — avoid deep nesting
4. **Validate data** — check for required properties

## Common Mistakes

1. **Forgetting quotes on keys** — keys with spaces need quotes
2. **Accessing non-existent properties** — returns undefined
3. **Modifying `const` objects** — you can change properties, just not reassign
4. **Using `for...in` on arrays** — use `for...of` instead

No changes yet

cancel