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";
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"
};
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.
-
nameis the label,"Ragul"is what's inside -
ageis the label,21is what's inside -
cityis 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
};
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"
Option 2: Bracket notation
console.log(car["brand"]); // "Toyota"
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
Let's check what car looks like now:
console.log(car);
// { brand: "Toyota", color: "Blue", year: 2023 }
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"
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);
}
};
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"
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)