JavaScript Objects Don’t Have to Be Complicated

7 min readOct 1, 2025

Introduction

If you’re learning JavaScript, you’ve probably heard that “everything is an object” in JavaScript. While that’s not entirely true, objects are indeed fundamental to the language. Think of objects as containers that hold related data and functionality together — like a digital backpack that carries everything you need.

Get Murat H. Oncu’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

In this guide, we’ll explore JavaScript objects from the ground up with practical examples you can use in real applications. By the end, you’ll be comfortable creating, manipulating, and working with objects in your projects.

What is an Object?

An object is a collection of key-value pairs. Think of it like a contact in your phone: it has a name, phone number, email, and maybe a profile picture. Each piece of information is labeled (the key) and has a value.

const person = {
  name: "Murat",
  age: 30,
  email: "murat@example.com"
};

In this example, name, age, and email are properties (or keys), and their corresponding values are "Murat", 30, and "murat@example.com".

Creating Objects

There are several ways to create objects in JavaScript. Let’s explore the most common ones.

1. Object Literal (Most Common)

This is the simplest and most popular way:

const car = {
  brand: "Toyota",
  model: "Auris",
  year: 2023,
  color: "blue"
};

2. Using the `new Object()` Syntax

const car = new Object();
car.brand = "Toyota";
car.model = "Auris";
car.year = 2023;

Best Practice: Use object literals — they’re cleaner and more readable.

3. Using a Constructor Function

function Car(brand, model, year) {
  this.brand = brand;
  this.model = model;
  this.year = year;
}

const myCar = new Car("Toyota", "Auris", 2023);

Accessing Object Properties

There are two main ways to access properties:

Dot Notation

const user = {
  username: "johndoe",
  email: "john@example.com"
};

console.log(user.username); // "johndoe"
console.log(user.email);    // "john@example.com"

Bracket Notation

console.log(user["username"]); // "johndoe"
console.log(user["email"]);    // "john@example.com"

When to use bracket notation:

When the property name has spaces or special characters
When the property name is stored in a variable
When you need to access properties dynamically

const product = {
  "product name": "Laptop",
  "product-price": 999
};

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

const propertyName = "product-price";
console.log(product[propertyName]); // 999

Adding, Updating, and Deleting Properties

Objects in JavaScript are dynamic — you can modify them after creation.

const user = {
  name: "Alex"
};

// Adding a new property
user.age = 25;
user.city = "New York";

// Updating an existing property
user.name = "Alexander";

// Deleting a property
delete user.city;

console.log(user); 
// { name: "Alexander", age: 25 }

Objects with Methods

Objects can contain functions, which we call methods. Methods are actions that an object can perform.

const calculator = {
  value: 0,
  
  add: function(num) {
    this.value += num;
    return this.value;
  },
  
  subtract: function(num) {
    this.value -= num;
    return this.value;
  },
  
  reset: function() {
    this.value = 0;
    return this.value;
  }
};

calculator.add(10);      // 10
calculator.add(5);       // 15
calculator.subtract(3);  // 12
calculator.reset();      // 0

ES6 Shorthand Method Syntax

Modern JavaScript allows a cleaner syntax for methods:

const calculator = {
  value: 0,
  
  add(num) {
    this.value += num;
    return this.value;
  },
  
  subtract(num) {
    this.value -= num;
    return this.value;
  }
};

The `”this”` Keyword

The this keyword refers to the object that is executing the current function. It's like saying "this object right here."

const user = {
  firstName: "Emma",
  lastName: "Watson",
  
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  }
};

console.log(user.getFullName()); // "Emma Watson"

Real-World Example: Shopping Cart

Let’s build a simple shopping cart to see how objects work in practice:

const shoppingCart = {
  items: [],
  total: 0,
  
  addItem(name, price, quantity) {
    const item = {
      name: name,
      price: price,
      quantity: quantity
    };
    
    this.items.push(item);
    this.calculateTotal();
    console.log(`${name} added to cart!`);
  },
  
  removeItem(name) {
    this.items = this.items.filter(item => item.name !== name);
    this.calculateTotal();
    console.log(`${name} removed from cart!`);
  },
  
  calculateTotal() {
    this.total = this.items.reduce((sum, item) => {
      return sum + (item.price * item.quantity);
    }, 0);
  },
  
  displayCart() {
    console.log("Shopping Cart:");
    this.items.forEach(item => {
      console.log(`- ${item.name}: $${item.price} x ${item.quantity}`);
    });
    console.log(`Total: $${this.total.toFixed(2)}`);
  }
};

// Using the shopping cart
shoppingCart.addItem("T-Shirt", 19.99, 2);
shoppingCart.addItem("Jeans", 49.99, 1);
shoppingCart.displayCart();

Object Destructuring (ES6)

Destructuring allows you to extract properties from objects into variables quickly.

const user = {
  name: "Messi",
  age: 38,
  city: "Barcelona"
};

// Traditional way
const name = user.name;
const age = user.age;

// Using destructuring
const { name, age, city } = user;

console.log(name); // "Messi"
console.log(age);  // 38
console.log(city); // "Barcelona"

You can also rename variables while destructuring:

const { name: userName, age: userAge } = user;
console.log(userName); // "Messi"

Useful Object Methods

JavaScript provides built-in methods to work with objects:

Object.keys()

Returns an array of an object’s property names:

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

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

Object.values()

Returns an array of an object’s values:

const values = Object.values(product);
console.log(values); // ["Laptop", 999, true]

Object.entries()

Returns an array of key-value pairs:

const entries = Object.entries(product);
console.log(entries);
// [["name", "Laptop"], ["price", 999], ["inStock", true]]

These methods are particularly useful for looping through objects:

const user = {
  username: "murat_dev",
  followers: 1250,
  posts: 89
};

// Loop through keys
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// Loop through entries
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Nested Objects

Objects can contain other objects, which is common in real applications:

const company = {
  name: "Tech Corp",
  founded: 2010,
  address: {
    street: "123 Main St",
    city: "San Francisco",
    state: "CA",
    zipCode: "94102"
  },
  employees: [
    { name: "John", role: "Developer" },
    { name: "Sarah", role: "Designer" }
  ]
};

console.log(company.address.city); // "San Francisco"
console.log(company.employees[0].name); // "John"

Copying Objects

When you assign an object to another variable, you’re creating a reference, not a copy:

const original = { name: "Alice" };
const reference = original;

reference.name = "Bob";
console.log(original.name); // "Bob" - original changed too!

To create a true copy, use the spread operator or Object.assign():

// Using spread operator (ES6) - Recommended
const original = { name: "Alice", age: 25 };
const copy = { ...original };

copy.name = "Bob";
console.log(original.name); // "Alice" - original unchanged
console.log(copy.name);     // "Bob"

// Using Object.assign()
const anotherCopy = Object.assign({}, original);

Note: These methods create shallow copies. For nested objects, you’ll need deep cloning techniques.

Best Practices

Here are some tips to write better code with objects:

Use meaningful property names: Choose clear, descriptive names for your properties.

// Bad
const u = { n: "John", a: 25 };

// Good
const user = { name: "John", age: 25 };

2. Use object destructuring to make your code cleaner:

// Instead of this
function greet(user) {
  console.log(`Hello, ${user.name}! You are ${user.age} years old.`);
}

// Do this
function greet({ name, age }) {
  console.log(`Hello, ${name}! You are ${age} years old.`);
}

3. Group related data: If variables are related, put them in an object.

// Instead of separate variables
const userName = "John";
const userAge = 25;
const userEmail = "john@example.com";

// Use an object
const user = {
  name: "John",
  age: 25,
  email: "john@example.com"
};

4. Use methods for object behavior: If a function operates on an object’s data, make it a method.

const bankAccount = {
  balance: 1000,
  
  deposit(amount) {
    this.balance += amount;
    return this.balance;
  },
  
  withdraw(amount) {
    if (amount <= this.balance) {
      this.balance -= amount;
      return this.balance;
    }
    return "Insufficient funds";
  }
};

Real-World Example: User Profile Manager

Let’s put everything together in a practical example:

const userProfile = {
  // Basic info
  firstName: "Arjen",
  lastName: "Robben",
  email: "arjen.robben@example.nl",
  age: 39,
  
  // Nested objects
  address: {
    street: "Keizersgracht 221",
    city: "Amsterdam",
    state: "Noord-Holland"
  },
  
  preferences: {
    theme: "dark",
    notifications: true,
    language: "nl"
  },
  
  // Methods
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  
  updateEmail(newEmail) {
    this.email = newEmail;
    console.log(`Email updated to ${newEmail}`);
  },
  
  toggleNotifications() {
    this.preferences.notifications = !this.preferences.notifications;
    const status = this.preferences.notifications ? "enabled" : "disabled";
    console.log(`Notifications ${status}`);
  },
  
  getProfileSummary() {
    return {
      name: this.getFullName(),
      email: this.email,
      location: `${this.address.city}, ${this.address.state}`,
      age: this.age
    };
  }
};

// Using the profile
console.log(userProfile.getFullName()); // "Arjen Robben"
userProfile.updateEmail("a.robben@newdomain.nl");
userProfile.toggleNotifications();

const summary = userProfile.getProfileSummary();
console.log(summary);

Conclusion

JavaScript objects are incredibly powerful and versatile. They allow you to organize your code in a logical, maintainable way. Here’s what we covered:

Creating objects using different methods
Accessing and modifying properties
Adding methods to objects
Understanding the this keyword
Working with nested objects
Using modern ES6 features like destructuring
Applying best practices in real-world scenarios

As you continue your JavaScript journey, you’ll find objects everywhere — from simple data structures to complex application state management. Practice building objects for real-world scenarios, and you’ll soon find them becoming second nature.

What’s Next?

Now that you understand objects, you’re ready to explore:

Object prototypes and inheritance
Classes (which are syntactic sugar over objects)
Object-oriented programming patterns
Advanced object manipulation techniques

Keep coding, keep learning, and don’t be afraid to experiment with objects in your projects!

Happy coding! If you found this guide helpful, feel free to share it with other developers on their JavaScript journey.

A message from our Founder

Hey, Sunil here. I wanted to take a moment to thank you for reading until the end and for being a part of this community.

Did you know that our team run these publications as a volunteer effort to over 3.5m monthly readers? We don’t receive any funding, we do this to support the community. ❤️

If you want to show some love, please take a moment to follow me on LinkedIn, TikTok, Instagram. You can also subscribe to our weekly newsletter.

And before you go, don’t forget to clap and follow the writer️!

JavaScript in Plain English

JavaScript Objects Don’t Have to Be Complicated

Introduction

Get Murat H. Oncu’s stories in your inbox

What is an Object?

Creating Objects

1. Object Literal (Most Common)

2. Using the new Object() Syntax

3. Using a Constructor Function

Accessing Object Properties

Dot Notation

Bracket Notation

Adding, Updating, and Deleting Properties

Objects with Methods

ES6 Shorthand Method Syntax

The ”this” Keyword

Real-World Example: Shopping Cart

Object Destructuring (ES6)

Useful Object Methods

Object.keys()

Object.values()

Object.entries()

Nested Objects

Copying Objects

Best Practices

Real-World Example: User Profile Manager

Conclusion

What’s Next?

A message from our Founder

Written by Murat H. Oncu

Published in JavaScript in Plain English

No responses yet

More from Murat H. Oncu and JavaScript in Plain English

Connecting Django Views to Models: Building Data-Driven Web Applications

Empowering Your Django Project with Data Management

Instead of JSON, Try These 5 API Response Formats to Speed Up Your API

Binary formats are not a magic switch. But for an endpoint that gets hit thousands of times a minute, the format you choose can matter.

REST Is a Lie We All Agreed to Believe. I Proved It in 300 Lines.

I rebuilt tRPC from scratch in one weekend — no framework, no codegen, no React. What I found broke how I think about APIs forever.

Getting Started with Responsive Web Design

In today’s digital age, users access websites from a myriad of devices, ranging from large desktop monitors to small smartphones. This…

Recommended from Medium

What Should Programmers Do While the AI Writes Code?

Hint: not start another AI coding loop

Chrome DevTools Can Already Do This. You’re Still Editing the Backend.

Change an API response, reproduce the awkward state, and debug the interface without changing the server.

JavaScript Mistakes That Make Your Code Harder to Debug

Common problems with references, async code, coercion, and mutation.

AI Can Do More Than Ever. The Hardest Problems Are Still Ours

AI is getting remarkably good at execution. But requirements, judgment, verification, tradeoffs, and responsibility are becoming a larger…

Ladybird and a Pound of Raw Bacon

A Cautionary Tale of Gluttony

Interviewer asked me why 127 == 127 return true but 128 == 128 return false?

The java interview trap