Understanding JavaScript Objects A Practical Guide

Objects are one of the most important and useful data structures in JavaScript. This post walks through what objects are, why you need them, how to create and manipulate them, and how they differ from arrays. Examples are kept small and readable, and we use a real-world example (a person) throughout.

---

What is an object and why you need it

• An object is a collection of key-value pairs.

• Each key (also called a property name) maps to a value (which can be a number, string, boolean, array, function, or another object).

• Objects let you model real world entities (like a person, car, or student) with multiple related pieces of information grouped together.

• They’re ideal when you want to access values by name (e.g., person.name) instead of by position (like an array index).

Think of an object like a labeled box: each label (key) points to a value inside the box.

---

Creating objects

There are a few common ways to create objects in JavaScript.

1. Object literal (most common for simple objects)

const person = {
  name: "Alex",
  age: 30,
  city: "Seattle"
};

1. Using the Object constructor

const person = new Object();
person.name = "Alex";
person.age = 30;
person.city = "Seattle";

1. Creating an empty object and adding properties later

const person = {};
person.name = "Alex";
person.age = 30;

---

Accessing properties

Two main notations: dot notation and bracket notation.

• Dot notation

  • Easy and readable.

  • Use when the property name is a valid identifier.

console.log(person.name); // "Alex"
console.log(person.age);  // 30

• Bracket notation

  • Use when the property name is dynamic, stored in a variable, or not a valid identifier (contains spaces, starts with a number, etc.).

console.log(person["city"]); // "Seattle"

const key = "name";
console.log(person[key]); // "Alex"

const weird = { "favorite color": "blue" };
console.log(weird["favorite color"]); // "blue"

When to choose which:

• Use dot notation for fixed, simple property names.

• Use bracket notation when property names are dynamic or unusual.

---

Updating object properties

Assign to an existing key to update its value:

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

Using bracket notation:

const field = "city";
person[field] = "Portland";
console.log(person.city); // "Portland"

---

Adding and deleting properties

• Add by assigning to a new key:

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

• Delete with the delete operator:

delete person.city;
console.log(person.city); // undefined

Note: delete removes the property from the object entirely.

---

Looping through object keys and entries

1. for...in (iterates enumerable properties)

for (const key in person) {
  console.log(key, person[key]);
}
// Output (order not guaranteed): 
// "name" "Alex"
// "age" 31
// "job" "Engineer"

1. Object.keys() — array of keys

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

1. Object.values() — array of values

Object.values(person).forEach(value => {
  console.log(value);
});

1. Object.entries() — array of [key, value] pairs

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

Use these when you want to work with keys or values as arrays or use array methods.

---

Array vs Object clear differences

• Purpose

  • Array: ordered list of items (access by numeric index).

  • Object: collection of named properties (access by key).

• Syntax examples

const colors = ["red", "green", "blue"]; // array — index-based
const person = { name: "Alex", age: 31 }; // object — key-value

• Typical use cases

  • Array: list of things (todo items, numbers, results).

  • Object: describe an entity (user profile, config, record).

• Iteration differences

  • Array: use for loop, forEach, map, filter, reduce.

  • Object: use for...in, Object.keys/values/entries.

• Ordering

  • Arrays maintain order; objects do not guarantee numeric ordering of keys. Objects are best for keyed access, not ordered collections.

---

Real world example person object

Example definition:

const person = {
  name: "Maya",
  age: 22,
  city: "Austin"
};

Access:

console.log(person.name); // "Maya"
console.log(person["age"]); // 22

Update:

person.age = 23;         // update
person["favoriteFood"] = "sushi"; // add new property
delete person.city;      // delete property

Loop through:

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

---

Assignment

Create an object representing a student, then update and print:

1. Create the object

const student = {
  name: "Sam",
  age: 19,
  course: "Computer Science"
};

1. Update one property (e.g., age)

student.age = 20;

1. Add a new property (optional)

student.grade = "A";

1. Print all keys and values using a loop

for (const [key, value] of Object.entries(student)) {
  console.log(`\({key}: \){value}`);
}

Sample output:

name: Sam
age: 20
course: Computer Science
grade: A

Complete sample solution:

const student = {
  name: "Sam",
  age: 19,
  course: "Computer Science"
};

// Update
student.age = 20;

// Print all keys and values
Object.entries(student).forEach(([key, value]) => {
  console.log(`\({key}: \){value}`);
});

---

Conclusion

Objects are a fundamental tool in JavaScript for modeling data as named attributes. They let you group related values, access them by name, and update, add, or remove properties easily. With the examples above (person and student), you should be able to create and manipulate objects, choose between dot/bracket notation appropriately, and loop through properties when needed.