JavaScript Objects for Beginners: A Simple Guide

What is an object in JavaScript? In plain words: an object is a way to group related values together under one name, using labels called "keys" to describe each value. If you have already learned about variables and arrays, objects are the next natural step - they let you model real things, like a person, a product, or a blog post, in a single, organized package.

In this guide you will learn what objects are, how to create them, how to read and change their values, how to add functions inside them, and how they compare to arrays. Every example is small and copy-pasteable, with a plain-English explanation right after it.

What is a JavaScript object?

A JavaScript object is a collection of key-value pairs, wrapped in curly braces { }. Each "key" (also called a property name) points to a "value", which can be text, a number, true/false, an array, another object, or even a function.

const student = {
  name: "Maria",
  age: 21,
  isEnrolled: true
};

console.log(student);

Line by line: const student = { ... } creates a variable called student and stores an object inside it. name: "Maria" is a key-value pair - the key is name, and the value is the text "Maria". The next two lines add more key-value pairs, separated by commas. console.log(student) prints the whole object to the console so you can see it.

Creating an object: the object literal

The curly-brace syntax you just saw is called an object literal, and it is the most common way to create an object in JavaScript. You do not need any special keyword - just write the keys and values inside { }.

const product = {
  title: "Wireless Mouse",
  price: 19.99,
  inStock: true
};

title, price, and inStock are the keys. "Wireless Mouse", 19.99, and true are their matching values. Notice that text values need quotes, but numbers and true/false do not. This object now represents one product, with all of its details grouped in one place instead of scattered across separate variables.

Reading values: dot notation and bracket notation

Once you have an object, you can read its values in two ways: dot notation (object.key) or bracket notation (object["key"]). Dot notation is shorter and is used most of the time.

console.log(product.title);      // "Wireless Mouse"
console.log(product["price"]);   // 19.99

product.title reads the value stored at the title key using dot notation. product["price"] does the same thing using bracket notation, with the key written as a text string inside square brackets. Bracket notation is useful when the key name is stored in a variable, or when the key has spaces in it (like "first name").

Adding, updating, and deleting properties

Objects are not fixed once you create them. You can add new key-value pairs, change existing ones, or remove them completely.

product.discount = 5;        // add a new property
product.price = 17.99;       // update an existing property
delete product.inStock;      // remove a property

console.log(product);
// { title: "Wireless Mouse", price: 17.99, discount: 5 }

product.discount = 5 creates a brand new key called discount because it did not exist before. product.price = 17.99 overwrites the old price value with a new one. delete product.inStock removes the inStock key and its value entirely from the object. This flexibility is one of the main reasons objects are so useful.

Objects can hold functions too (called methods)

A value inside an object can be a function. When a function lives inside an object, it is called a method. Methods let an object do something, not just store data.

const person = {
  name: "Sam",
  greet: function () {
    return "Hello, my name is " + this.name;
  }
};

console.log(person.greet()); // "Hello, my name is Sam"

greet: function () { ... } stores a function as the value of the greet key. Inside the method, this.name refers to the name property of the same object - this always points back to the object the method belongs to. person.greet() calls the method, using parentheses just like calling any other function.

Looping through an object with for...in

Sometimes you want to look at every key and value in an object without writing them out by hand. The for...in loop does exactly that.

const car = { brand: "Toyota", model: "Corolla", year: 2024 };

for (const key in car) {
  console.log(key + ": " + car[key]);
}
// brand: Toyota
// model: Corolla
// year: 2024

for (const key in car) runs the loop once for every key in the car object, storing the current key name in the key variable each time. car[key] uses bracket notation to look up the value that belongs to that key. This pattern is the standard way to inspect an object you did not build by hand, such as data returned from a server.

Objects vs. arrays: when to use each

Beginners often mix up objects and arrays because both can hold multiple values. The difference comes down to how you look things up: arrays use numbered positions, objects use named keys.

As a rule of thumb: if you are storing a list of similar items, use an array. If you are describing one thing with several different properties, use an object. In real projects you will often combine them - for example, an array of user objects.

Nested objects: objects inside objects

A property's value can be another object. This lets you model more detailed, real-world data, like an address that lives inside a user.

const user = {
  name: "Aisha",
  address: {
    city: "Nairobi",
    country: "Kenya"
  }
};

console.log(user.address.city); // "Nairobi"

The address key holds its own object, with city and country inside it. To reach a value that is nested two levels deep, chain the dots together: user.address.city first goes into address, then reads city from there.

Common mistakes beginners make with objects

• Forgetting the comma between key-value pairs, which causes a syntax error.
• Using dot notation with a key that has a space or starts with a number - bracket notation is required in that case, like obj["first name"].
• Trying to read a key that does not exist, which returns undefined instead of an error.
• Confusing an array of values [1, 2, 3] with an object of key-value pairs { a: 1, b: 2 }.
• Forgetting that changing an object also changes it everywhere else that object is used, since objects are shared by reference, not copied.