DEV Community

Cover image for JavaScript Objects Basics Explained
Kathirvel S
Kathirvel S

Posted on

JavaScript Objects Basics Explained

#javascript #webdev #programming #csk

If you’ve started learning JavaScript, you’ll hear one sentence again and again:

“Everything in JavaScript is an object.”

But what does that actually mean?

let’s understand

What is an Object in JavaScript?

A JavaScript object is a collection of related data and functions stored as key–value pairs.

Think of it like a digital profile card.

Example: A food delivery order.

Instead of storing everything in separate variables:

let customerName = "Rahul";
let foodItem = "Paneer Pizza";
let price = 299;
let isDelivered = false;
Enter fullscreen mode Exit fullscreen mode

We group them into one object.

let order = {
  customerName: "Rahul",
  foodItem: "Paneer Pizza",
  price: 299,
  isDelivered: false
};
Enter fullscreen mode Exit fullscreen mode

Now all related information stays in one structure.

Creating a JavaScript Object

Let's say we are building a cricket statistics system for IPL 2026.

We want to store details about the Chennai Super Kings (CSK) team.

Instead of creating many separate variables, we can group all related information inside an object.

const team = {
  teamName: "Chennai Super Kings",
  captain: "Ruturaj Gaikwad",
  coach: "Stephen Fleming",
  homeGround: "MA Chidambaram Stadium",
  trophies: 5,
  season: 2026
}

console.log(team)
Enter fullscreen mode Exit fullscreen mode

Output

{
  teamName: "Chennai Super Kings",
  captain: "Ruturaj Gaikwad",
  coach: "Stephen Fleming",
  homeGround: "MA Chidambaram Stadium",
  trophies: 5,
  season: 2026
}
Enter fullscreen mode Exit fullscreen mode

This object now represents one team record in our IPL system.

Cricket analytics platforms and sports apps internally manage thousands of such objects.

Accessing Object Properties

We can read the data stored inside the object.

Using Dot Notation

console.log(team.captain)
Enter fullscreen mode Exit fullscreen mode

Output

Ruturaj Gaikwad
Enter fullscreen mode Exit fullscreen mode

Another example:

console.log(team.trophies)
Enter fullscreen mode Exit fullscreen mode

Output

5
Enter fullscreen mode Exit fullscreen mode

Dot notation is the most commonly used way to access object properties in JavaScript.

Before reading further, try predicting the output.

console.log(team.teamName)
Enter fullscreen mode Exit fullscreen mode

What will be printed?

Take a moment to think.

Adding New Information to the Object

Sometimes we need to store more information later.

For example, adding the stadium capacity.

team.stadiumCapacity = 50000

console.log(team)
Enter fullscreen mode Exit fullscreen mode

Output

{
  teamName: "Chennai Super Kings",
  captain: "Ruturaj Gaikwad",
  coach: "Stephen Fleming",
  homeGround: "MA Chidambaram Stadium",
  trophies: 5,
  season: 2026,
  stadiumCapacity: 50000
}
Enter fullscreen mode Exit fullscreen mode

Objects are flexible, which means we can extend them anytime.

Updating Object Data

Suppose CSK wins another trophy in the future.

We can update the value.

team.trophies = 6

console.log(team.trophies)
Enter fullscreen mode Exit fullscreen mode

Output

6
Enter fullscreen mode Exit fullscreen mode

Look at this code.

team.captain = "MS Dhoni"
console.log(team.captain)
Enter fullscreen mode Exit fullscreen mode

What do you think the output will be?

Objects Can Also Contain Functions

Objects can also store functions, which are called methods.

Let’s add a method that prints team information.

const team = {
  teamName: "Chennai Super Kings",
  captain: "Ruturaj Gaikwad",
  trophies: 5,

  teamInfo: function () {
    console.log(this.teamName + " has won " + this.trophies + " IPL trophies")
  }
}

team.teamInfo()
Enter fullscreen mode Exit fullscreen mode

Output

Chennai Super Kings has won 5 IPL trophies
Enter fullscreen mode Exit fullscreen mode

Here:

teamInfo() → method

this → refers to the current object

What will this code print?

console.log(team.captain)
Enter fullscreen mode Exit fullscreen mode

Why Do Developers Use const for Objects?

This is a very common JavaScript interview question.

Example:

const team = {
  teamName: "Chennai Super Kings"
}

team.teamName = "CSK"

console.log(team.teamName)
Enter fullscreen mode Exit fullscreen mode

Output

CSK
Enter fullscreen mode Exit fullscreen mode

Even though we used const, the value changed.

Why?

Because:

const prevents reassignment of the object reference, not modification of its properties.

This means:

Allowed

team.teamName = "CSK"
Enter fullscreen mode Exit fullscreen mode

Not Allowed

team = { teamName: "Mumbai Indians" }
Enter fullscreen mode Exit fullscreen mode

This will throw an error.

Try completing the code below.

Print the coach name.

const team = {
  teamName: "Chennai Super Kings",
  captain: "Ruturaj Gaikwad",
  coach: "Stephen Fleming"
}

console.log( _____ )
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

Think of JavaScript objects as your very own CSK squad — every player (property) has a role, stats, and can even perform special moves (methods)!

Just like a cricket team can’t win without its captain, star players, and coach, your code won’t shine without objects to organize, update, and perform actions on real-world data.

Here’s the playbook:

  • Each IPL team in your app → an object
  • Players inside the team → nested objects or arrays
  • Stats like runs, wickets, trophies → properties
  • Special moves like showing team info → methods

Pro Tip: Be the captain of your code! Experiment like a cricket coach: tweak properties, add new players, try methods, and watch your “team” perform. Every small practice session makes your JavaScript squad stronger.

Remember: objects are your secret weapon. Master them, and you can build anything — a live IPL score tracker, a social media app, an e-commerce site, or even your own fantasy league simulator.

So, next time someone asks about JavaScript objects in an interview, imagine your CSK squad winning IPL 2026— organized, flexible, unstoppable. That’s how your code scores sixes every time!

Top comments (0)