JavaScript Objects

An object lets you group related data in one place using key-value pairs. Think of a product: it has a name, price, and category, and all of that can live inside one object.

You will use objects everywhere in JavaScript. Once this concept is clear, many other topics become much easier.

const car = {
  brand: "Toyota",
  color: "red",
  speed: 120
};

console.log(car); // { brand: 'Toyota', color: 'red', speed: 120 }

There are two common ways to create objects in JavaScript. The most common and recommended way is object literal syntax with curly braces {}.

Object Literal Syntax

You write the object directly using { key: value } pairs separated by commas. This is the simplest and most readable way to create objects.

// Object literal syntax
const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics"
};

Using the new Keyword

You can also create an object using new Object(). This is less common, but produces the same result as the literal syntax.

// Using new Object()
const product = new Object();
product.name = "Wireless Headphones";
product.price = 59.99;

console.log(product); // { name: 'Wireless Headphones', price: 59.99 }

In practice, the object literal syntax is preferred because it is shorter and easier to read.

Once an object is created, you can read its properties in two ways: dot notation and bracket notation.

Dot Notation

Dot notation is the most common way. You write the object name, a dot, and the property name.

const product = { name: "Wireless Headphones", price: 59.99 };

console.log(product.name);  // Wireless Headphones
console.log(product.price); // 59.99

Bracket Notation

Bracket notation uses square brackets with the property name as a string. It is useful when the property name is stored in a variable or contains special characters.

const product = { name: "Wireless Headphones", price: 59.99 };

console.log(product["name"]); // Wireless Headphones

// Useful when the key is in a variable
const key = "price";
console.log(product[key]); // 59.99

Each item inside an object is called a property. A property has two parts - a key and a value.

Key

The key is the name you use to identify the property. It is always a string (or Symbol), even if you write it without quotes.

Value

The value can be any valid JavaScript type - a string, number, boolean, array, another object, or even a function.

const product = {
  name: "Laptop",    // key: name,  value: "Laptop"
  price: 999,        // key: price, value: 999
  inStock: true      // key: inStock, value: true
};

// You can add or update a property at any time
product.discount = 10;
product.price = 899;

console.log(product.price);    // 899
console.log(product.discount); // 10

An object property can hold an array as its value. This is useful when one property represents a list of items.

const product = {
  name: "Laptop Stand",
  ratings: [5, 4, 5, 3]
};

console.log(product.ratings);     // [5, 4, 5, 3]
console.log(product.ratings[0]);  // 5 (first rating)

You access the array using dot notation, then use a numeric index inside square brackets to get a specific item from the array.

You can also store a function inside an object. When you do, it's called a method. Methods let your objects do things, not just hold data.

const product = {
  name: "Wireless Headphones",
  describe: function() {
    console.log("Product: Wireless Headphones - $59.99");
  }
};

product.describe(); // Product: Wireless Headphones - $59.99

You call a method the same way you access a property - using dot notation followed by parentheses ().

Inside a method, this is a shortcut that points back to the object the method belongs to. It lets you grab other properties of the same object without repeating its name.

const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics",
  describe: function() {
    console.log(this.name + " costs $" + this.price + " in " + this.category + ".");
  }
};

product.describe(); // Wireless Headphones costs $59.99 in Electronics.

Using this instead of the object name directly makes the method flexible. If you rename the object variable, the method still works correctly.

JavaScript gives you a few handy built-in helpers for working with objects. The three you'll use most often are Object.keys(), Object.values(), and Object.entries().

• Object.keys() - returns an array of all the property keys (names).
• Object.values() - returns an array of all the property values.
• Object.entries() - returns an array of [key, value] pairs.

These methods are very handy when you need to loop through an object or inspect its contents.

Pass an object to Object.keys() and you'll get back an array of all its property names.

const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics"
};

const keys = Object.keys(product);
console.log(keys); // ['name', 'price', 'category']

The returned array contains the keys in the order they were added to the object. You can use .length on the result to count how many properties an object has.

Object.values() works like Object.keys(), but instead of returning the keys, it returns an array of all the property values.

const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics"
};

const values = Object.values(product);
console.log(values); // ['Wireless Headphones', 59.99, 'Electronics']

This is handy when you need to work with just the data inside an object without caring about the property names.

Object.entries() gives you both sides at once. You get an array where each item is a small [key, value] pair.

const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics"
};

const entries = Object.entries(product);
console.log(entries);
// [['name', 'Wireless Headphones'], ['price', 59.99], ['category', 'Electronics']]

Object.entries() is especially useful when you want to loop over an object and need both the key and the value at the same time.

Objects are not directly iterable with a for...of loop, but you can combine it with Object.entries() to loop over all key-value pairs. You can use destructuring to unpack each pair neatly.

const product = {
  name: "Wireless Headphones",
  price: 59.99,
  category: "Electronics"
};

for (const [key, value] of Object.entries(product)) {
  console.log(key + ": " + value);
}
// name: Wireless Headphones
// price: 59.99
// category: Electronics

This pattern is clean and readable. You can also use Object.keys() or Object.values() with for...of if you only need one side of the pair.

Optional chaining (?.) lets you safely access deeply nested object properties without throwing an error if something in the chain is null or undefined. Instead of crashing, it returns undefined.

const user = {
  name: "Alice",
  address: {
    city: "London"
  }
};

// Without optional chaining (can throw error)
console.log(user.address.city);       // Output: London
console.log(user.contact.phone);      // TypeError: Cannot read properties of undefined

// With optional chaining (safe)
console.log(user.address?.city);      // Output: London
console.log(user.contact?.phone);     // Output: undefined (no error)

You can chain ?. at each level when you are unsure whether a nested property exists.

const order = {
  id: 101,
  shipping: null
};

console.log(order?.shipping?.address?.city);   // Output: undefined (no error)

Optional chaining also works when calling a method that might not exist, and when accessing array elements inside an object.

const player = {
  name: "Alex",
  greet() {
    return "Hello, I am " + this.name;
  }
};

const robot = { name: "R2D2" };

// Safe method call with ?.()
console.log(player.greet?.());   // Output: Hello, I am Alex
console.log(robot.greet?.());    // Output: undefined (no error)

// Safe array access with ?.[]
const store = { items: ["book", "pen"] };
const empty = {};

console.log(store.items?.[0]);   // Output: book
console.log(empty.items?.[0]);   // Output: undefined (no error)

Combine optional chaining with the nullish coalescing operator (??) to provide a fallback value when the result is null or undefined.

const settings = {
  theme: null
};

const theme = settings?.theme ?? "light";
console.log(theme);   // Output: light

const fontSize = settings?.font?.size ?? 16;
console.log(fontSize);   // Output: 16

• Object - a collection of key-value pairs used to group related data.
• Object literal - the most common way to create an object using {}.
• new Object() - an alternative way to create an object using the constructor.
• Dot notation - obj.key - the standard way to access a property.
• Bracket notation - obj["key"] - useful when the key is dynamic or contains special characters.
• Key - the name of a property; always a string internally.
• Value - the data stored in a property; can be any JavaScript type.
• Array in object - a property whose value is an array.
• Method - a function stored as a property of an object.
• this - inside a method, refers to the object the method belongs to.
• Object.keys() - returns an array of all property names.
• Object.values() - returns an array of all property values.
• Object.entries() - returns an array of [key, value] pairs.
• for...of with Object.entries() - a clean way to loop over all properties of an object.
• Optional chaining (?.) - safely access nested properties, call methods, and read array elements without errors when values might be null or undefined.

• What is an object in JavaScript and how do you create one?
• What is the difference between dot notation and bracket notation when accessing object properties?
• What does the this keyword refer to inside an object method?
• What is the difference between Object.keys(), Object.values(), and Object.entries()?

Videos for this topic will be added soon.