JavaScript Objects

Objects in JavaScript allow you to group related data and functionality together. They are one of the most important and flexible structures in the language.

You can think of an object as a collection of properties, where each property is a key-value pair.

Here are some common uses of objects in JavaScript:

  • Store Data: Use objects to store structured data.
  • Organize Code: Group related variables and functions.
  • Access Flexibly: Retrieve or update data using dot or bracket notation.

Understanding Objects in JavaScript

In JavaScript, an object is a way to store related information together in one place. Instead of using separate variables for each piece of data, you can put them all into one object.

You can think of an object like a real-world item — such as a person or a car. Each object has properties (also called key-value pairs) that describe it.

Here's what an object looks like:

javascript
const person = {
  name: "Alice",
  age: 30,
  isStudent: true
};
  • const: Declares a variable that holds the object.
  • person: The name of the object — you choose this.
  • name, age, isStudent: These are the keys (or property names).
  • "Alice", 30, true: These are the values for each key.

You can access values inside the object in two ways:

javascript
console.log(person.name);       // Accessing the "name" property using dot notation
console.log(person["age"]);     // Accessing the "age" property using bracket notation

Both lines do the same thing — they read values from the object. Use dot notation when you know the name of the property, and bracket notation if you're using a variable or dynamic key.

Objects help keep your code clean, organized, and easy to work with. You’ll use them a lot in JavaScript — in websites, apps, and just about everything.

Example 1: Creating and Accessing an Object

Let’s start with a simple object that stores information about a car. This object has three properties: brand, model, and year.

javascript
const car = {
  brand: "abc_brand",
  model: "abc_model",
  year: 2022
};

console.log(car.brand);  // Dot notation
console.log(car.model);  // Dot notation

What’s Happening Here:

  • const car = { ... }: This creates a new object called car with three key-value pairs.
  • brand, model, year: These are the property names (keys) of the object.
  • "abc_brand", "abc_model", 2022: These are the values assigned to each key.
  • console.log(car.brand): This prints the value of the brand property to the console using dot notation.
  • console.log(car.model): This prints the value of the model property using dot notation.

You can add more properties or update them later. Objects grow with your needs.

Output:

abc_brand
abc_model

You can also create objects in JavaScript using different ways like Object() or new Object(), and constructor functions.

javascript
// Creating object using Object() function

const car2 = Object();
car2.brand = "xyz_brand";
car2.model = "xyz_model";
car2.year = 2023;

console.log(car2.brand);       // Output: xyz_brand 
console.log(car2["model"]);    // Output: xyz_model 


// Creating object using new Object() constructor
const car3 = new Object();
car3.brand = "def_brand";
car3.model = "def_model";
car3.year = 2024;

console.log(car3.brand);       // Output: def_brand
console.log(car3["model"]);    // Output: def_model


// Creating object using a constructor function
function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

const car4 = new Car("ghi_brand", "ghi_model", 2025);

console.log(car4.brand);       // Output: ghi_brand
console.log(car4["model"]);    // Output: ghi_model

Example 2: Adding and Updating Properties

Now let’s see how to add new properties to an object or change the values of existing ones. JavaScript makes this very easy!

javascript
const car = {
  brand: "abc_brand",
  model: "abc_model",
  year: 2022
};

// Add a new property
car.color = "blue";

// Update an existing property
car.year = 2023;

console.log(car.color);
console.log(car.year);

What’s Happening Here:

  • car.color = "blue": This adds a new property called color with the value "blue".
  • car.year = 2023: This updates the value of the existing year property from 2022 to 2023.
  • console.log(car.color): This prints the new color property.
  • console.log(car.year): This prints the updated year.

Objects are dynamic — you can modify them anytime after they’re created.

Output:

blue
2023

Example 3: Adding a Method to an Object

You can add functions to objects as properties. These are called methods. They let your object do something — like an action or behavior.

javascript
const car = {
  brand: "abc_brand",
  model: "abc_model",
  year: 2023,
  startEngine: function() {
    console.log("Engine started!");
  }
};

car.startEngine();

What’s Happening Here:

  • startEngine: function() { ... }: This adds a function as a property. It's now a method of the car object.
  • console.log("Engine started!"): This prints a message when the method is called.
  • car.startEngine(): This runs the method — like telling the car to start its engine.

Methods are a great way to connect behavior with data inside your objects.

Output:

Engine started!

Example 4: Nested Objects

An object can contain another object as a property. This is called a nested object. It’s useful for organizing related data in a structured way.

javascript
const car = {
  brand: "abc_brand",
  model: "abc_model",
  year: 2023,
  owner: {
    name: "John Doe",
    age: 35
  }
};

console.log(car.owner.name);
console.log(car.owner.age);

What’s Happening Here:

  • owner: This is a property of the car object that holds another object.
  • name, age: These are properties of the nested owner object.
  • car.owner.name: This accesses the name inside the nested owner object.
  • car.owner.age: This accesses the age inside the nested object.

You can nest objects as deeply as needed, but be careful — too much nesting can make your code harder to read.

Output:

John Doe
35

Example 5: Deleting Properties from an Object

You can remove properties from an object using the delete keyword. This deletes the property and its value from the object.

javascript
const car = {
  brand: "abc_brand",
  model: "abc_model",
  year: 2023,
  color: "blue"
};

delete car.color;

console.log(car.color); // undefined
console.log(car);

What’s Happening Here:

  • delete car.color: This removes the color property from the car object.
  • console.log(car.color): Since the property is deleted, this prints undefined.
  • console.log(car): This prints the remaining properties of the car object without color.

Output:

undefined
{ brand: 'abc_brand', model: 'abc_model', year: 2023 }

Use delete carefully — once removed, the property and its data are gone from the object.

Exercises

1. Create an object for a user with name and email.
javascript
const user = {
  name: "John Doe",
  email: "john@example.com"
};

console.log(user.name);
2. Add a new property to the user object: age = 30
javascript
user.age = 30;
console.log(user.age);
3. Create a method in the object that prints "Hello, [name]!"
javascript
user.greet = function() {
  console.log("Hello, " + this.name + "!");
};

user.greet();

Frequently Asked Questions

What is an object in JavaScript?

An object in JavaScript is a collection of key-value pairs that represent structured data. It's useful for grouping related information and behavior together.

How do you access properties in a JavaScript object?

You can use either dot notation (object.property) or bracket notation (object["property"]) to access values stored in an object.

Can objects contain functions in JavaScript?

Yes! You can define a function as a property in an object — this is called a method. It allows the object to perform actions.

What is a nested object in JavaScript?

A nested object is an object placed inside another object as a property value. It's useful for representing related data in a hierarchy.

How do you loop through properties of a JavaScript object?

Use a for...in loop to iterate through all enumerable property names in an object and access their values.

What’s Next?

You are going to learn about object methods and how they make objects more powerful by adding behavior.