When we write programs, we often need to store related pieces of information together.

For example imagine we want to store details about a person like their name, age and city.

We could store them in separate variables, but that quickly becomes messy.

const name = "Bruce Wayne"
const age = 35
const city = "Gotham"

These values belong together, but they are scattered.

To organize related data in a better way, JavaScript provides objects.

An object lets us store multiple values inside a single structure.

You can think of an object as a collection of key value pairs.

What an Object Looks Like

Here is a simple example.

const hero = {
  name: "Bruce Wayne",
  heroName: "Batman",
  city: "Gotham"
}

Here:

• name, heroName, and city are keys

• "Bruce Wayne", "Batman", "Gotham" are values

So the object stores information like this:

name → Bruce Wayne
heroName → Batman
city → Gotham

Creating Objects

Objects are created using curly braces {}.

Example:

const hero = {
  name: "Clark Kent",
  heroName: "Superman",
  city: "Metropolis"
}

Each property is written as:

key: value

Accessing Object Properties

There are two ways to access values inside an object.

Dot Notation

This is the most common way.

console.log(hero.name)
console.log(hero.heroName)

Output

Clark Kent
Superman

Bracket Notation

Another way is using square brackets.

console.log(hero["city"])

Output

Metropolis

Both ways work the same, but bracket notation can be useful when property names are dynamic.

Updating Object Properties

We can update values inside an object easily.

hero.city = "Smallville"

console.log(hero.city)

Output

Smallville

The value simply changes.

Adding New Properties

Objects are flexible, so we can add new properties anytime.

hero.power = "Flight"

console.log(hero)

Now the object contains a new property.

Deleting Properties

If we want to remove a property, we can use the delete keyword.

delete hero.city

console.log(hero)

The city property will be removed from the object.

Looping Through Object Keys

Sometimes we want to go through all properties inside an object.

JavaScript provides a simple loop for this.

for (const key in hero) {
  console.log(key, hero[key])
}

Example output

name Clark Kent
heroName Superman
power Flight

The loop goes through every key and prints the value.

Array vs Object

Sometimes beginners confuse arrays and objects.

Arrays store values using index numbers.

Example:

const heroes = ["Batman", "Superman", "Wonder Woman"]

Accessing array values:

heroes[0]
heroes[1]

Objects store values using keys instead of indexes.

Example:

const hero = {
  name: "Diana Prince",
  heroName: "Wonder Woman"
}

Accessing object values:

hero.name
hero.heroName

Array vs Object

Array
["Batman", "Superman", "Wonder Woman"]
   0          1           2

Object
name → Diana Prince
heroName → Wonder Woman

Example: Student Object

Let’s create an object representing a student.

const student = {
  name: "Barry Allen",
  age: 24,
  course: "Forensic Science"
}

Update a property.

student.age = 25

Now print all keys and values.

for (const key in student) {
  console.log(key, student[key])
}

Output

name Barry Allen
age 25
course Forensic Science

Objects are one of the most important data structures in JavaScript.

They allow us to group related information together using key value pairs.

With objects we can store data, update values, add new properties, delete properties and loop through them easily.