DEV Community

Ragul
Ragul

Posted on

Objects in JavaScript

If you're just starting out with JavaScript, you've probably heard the word "object" a lot. It might sound intimidating, but it's actually a simple and friendly idea once you see it in action. Let's break it down from scratch.

What Is an Object, Really?

Imagine you want to describe a person in code — their name, age, and city. You could make three separate variables:

let name = "Ragul";
let age = 21;
let city = "Thanjavur";
Enter fullscreen mode Exit fullscreen mode

That works, but it's messy. What if you had 10 people? You'd need 30 variables! Instead, JavaScript lets you group related information together in one thing called an object:

let person = {
  name: "Ragul",
  age: 21,
  city: "Thanjavur"
};
Enter fullscreen mode Exit fullscreen mode

Now all the information about Ragul lives in one neat package. Much better!

Think of an object like a labeled box. Inside the box, you store different items, and each item has a label (called a key) and a value.

  • name is the label, "Ragul" is what's inside
  • age is the label, 21 is what's inside
  • city is the label, "Thanjavur" is what's inside

How Do You Create an Object?

The easiest way (and the one you'll use most often as a beginner) looks like this:

let car = {
  brand: "Toyota",
  color: "Red",
  isRunning: false
};
Enter fullscreen mode Exit fullscreen mode

A few rules to notice:

  • Curly braces { } wrap the whole object
  • Each key and value is separated by a colon :
  • Commas separate each pair
  • The whole thing can be saved in a variable (car, in this case)

Reading Values From an Object

To look inside the box and grab a value, you have two options.

Option 1: Dot notation (most common, easiest to read)

console.log(car.brand); // "Toyota"
console.log(car.color); // "Red"
Enter fullscreen mode Exit fullscreen mode

Option 2: Bracket notation

console.log(car["brand"]); // "Toyota"
Enter fullscreen mode Exit fullscreen mode

As a beginner, stick with dot notation — it's simpler. You'll learn when bracket notation is useful later on.

Changing Values in an Object

Objects aren't locked once you create them. You can add, change, or remove information anytime.

car.color = "Blue";       // change an existing value
car.year = 2023;          // add a brand-new value
delete car.isRunning;     // remove a value completely
Enter fullscreen mode Exit fullscreen mode

Let's check what car looks like now:

console.log(car);
// { brand: "Toyota", color: "Blue", year: 2023 }
Enter fullscreen mode Exit fullscreen mode

Objects Can Hold Functions Too

So far our objects have only held simple values like text and numbers. But objects can also hold functions. When a function lives inside an object, we call it a method.

let person = {
  name: "Ragul",
  sayHello: function () {
    console.log("Hello, my name is " + person.name);
  }
};

person.sayHello(); // "Hello, my name is Ragul"
Enter fullscreen mode Exit fullscreen mode

This is powerful — it means an object can describe both what something is (its data) and what it can do (its actions).

A Quick Word on this

You'll often see the keyword this used inside methods:

let person = {
  name: "Ragul",
  sayHello: function () {
    console.log("Hello, my name is " + this.name);
  }
};
Enter fullscreen mode Exit fullscreen mode

this simply means "the object I'm currently inside of." So this.name means "the name property of whichever object called this method." It looks a little strange at first, but the more you use it, the more natural it feels.

Objects Inside Objects

Objects can even contain other objects. This is handy for grouping related details together:

let student = {
  name: "Ragul",
  age: 21,
  address: {
    city: "Thanjavur",
    state: "Tamil Nadu"
  }
};

console.log(student.address.city); // "Thanjavur"
Enter fullscreen mode Exit fullscreen mode

Here, address is itself an object living inside student. To reach city, you just chain the dots together: first go into student, then into address, then grab city.

You can nest objects as deep as you need, but it's best to keep things simple — if you find yourself chaining . many times in a row, it's often a sign the data could be organized more simply.

Top comments (0)