Skip to main content

Command Palette

Search for a command to run...

Understanding Objects in JavaScript

Updated
•13 min read•View as Markdown
Understanding Objects in JavaScript

Why Do We Need Objects? (The Problem Statement)

Until now, we have been storing data in variables in memory.
We mostly used primitive data types like strings, numbers, and booleans.

For a very simple program, this approach works perfectly.

But as programs become more complex, storing related information in separate variables becomes difficult to manage as the program grows.

For example, imagine you want to store information about a student.
You might write something like this:

// before objects
let name = "Smita"
let course = "Web Dev Cohort"

This works, but there is a problem.

The data belongs to the same entity (a student), yet we are storing it in separate variables. As the program grows, managing many variables like this becomes messy.

To solve this problem, JavaScript provides a non-primitive data type called an Object.

Objects allow us to group related data together using key–value pairs.

For example:

// after objects
let studentData = {
  name: "Smita",
  course: "Web Dev Cohort"
}

Now the information about the student is organised in a single structure, making the code easier to manage and understand.

In simple terms, an object allows us to store multiple related pieces of information about something in a single place.


What is an Object?

In programming, an object is a way to store related data together.

Instead of keeping multiple pieces of information in separate variables, an object allows us to group them into a single structure.

Objects store data using key–value pairs, where each key represents a property and the value represents the data stored for that property.

  • Key → describes the property

  • Value → the actual data stored for that property

You can think of it like a label and its value.

For example, if we want to represent a student, we might store information like:

  • name

  • age

  • course

All these pieces of information belong to the same entity, so it makes sense to store them together.


Example (Using JavaScript)

In JavaScript, we can represent this data using an object.

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
}

Here:

Key Value
name "Smita"
age 22
course "Web Development"

So this object stores three related properties about a student.


Understanding the Structure

Objects follow a simple structure:

key : value

Example:

let product = {
  name: "Laptop",
  price: 65000,
  brand: "Dell"
}

Explanation:

  • name → key

  • "Laptop" → value

  • price → key

  • 65000 → value

  • brand → key

  • "Dell" → value

Each key helps identify what the data represents, while the value stores the actual information.


Why Objects Are Useful

Objects are useful because they allow us to:

• organise related data together

• make code easier to understand

• manage complex data structures

Without objects, we would need to create many separate variables.

With objects, we can store all related information in a single structure.


Creating Objects

Now that we understand what an object is, the next question is, how do we create one?

In most programming languages, objects are created by defining a structure that contains properties in the form of key–value pairs.

In JavaScript, objects can be created using object literal syntax {} or the Object() constructor.

Inside the braces, we define properties in the form of:

Creating an object using {}

key : value

Each property represents a piece of information about the object.

Example

Suppose we want to store information about a student.

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
}

Here:

  • student is the object

  • name, age, and course are keys (properties)

  • "Smita", 22, and "Web Development" are the values

So this object stores multiple related pieces of data in one place.


Rules When Creating Objects

There are a few simple rules when defining objects:

Objects are written inside curly braces

{}

Each property is written as

key : value

Properties are separated using commas

Example:

let car = {
  brand: "Toyota",
  model: "Fortuner",
  year: 2023
}

Creating Objects Using the Object() Constructor

In the previous example, we created an object using curly braces {}. This is the most common and simple way.

However, in JavaScript, objects can also be created using the Object constructor.

Example:

let student = new Object();

student.name = "Smita";
student.age = 22;
student.course = "Web Development";

Here:

  • new Object() creates an empty object.

  • After creating the object, we add properties to it.

So the final object becomes:

{
  name: "Smita",
  age: 22,
  course: "Web Development"
}

Comparing Both Methods

Using Object Literal (Most Common)

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
}

Using Object Constructor

let student = new Object();

student.name = "Smita";
student.age = 22;
student.course = "Web Development";

Both create the same type of object, but the object literal {} syntax is shorter and preferred in modern JavaScript.


Accessing Object Properties

After creating an object, the next thing we usually want to do is read the data stored inside it.

To do this, we need to access the object's properties.

In JavaScript, there are two ways to access object properties:

  1. Dot Notation

  2. Bracket Notation


1. Dot Notation

Dot notation is the most common and simplest way to access object properties.

We write the object name, followed by a dot (.), and then the property name.

Example:

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
};

console.log(student.name); //Output: Smita

Here:

  • student → object

  • name → property

So student.name means access the value stored in the "name" property.


2. Bracket Notation

The second way to access properties is bracket notation.

In this method, we write the property name inside square brackets.

Example:

console.log(student["age"]); //Output: 22

Here:

  • "age" is written as a string inside brackets

When Do We Use Bracket Notation?

In most cases, developers use dot notation because it is simple and easy to read.

However, bracket notation becomes useful in some situations where dot notation cannot work properly.


When the Key Contains Spaces

If an object property contains spaces, dot notation will not work.

Example:

let student = {
  "first name": "Smita",
  age: 22
};

Trying to access it using dot notation will cause an error:

student.first name   // invalid

Instead, we use bracket notation:

console.log(student["first name"]); //Output : Smita

When the Property Name is Stored in a Variable

Bracket notation is also useful when the key is stored in a variable.

Example:

let student = {
  name: "Smita",
  age: 22
};

let key = "name";

console.log(student[key]); //Output : Smita

Here, JavaScript looks at the value of the variable key and accesses that property.


Updating Object Properties

Objects are not fixed. After creating an object, we can change the value of its properties whenever needed.

To update a property, we simply access the property and assign a new value to it.


Example

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
};

student.age = 23;

console.log(student);

Output

{
  name: "Smita",
  age: 23,
  course: "Web Development"
}

Here:

  • The object was first created with age equal to 22.

  • Then we updated it to 23.


Updating Using Bracket Notation

We can also update properties using bracket notation.

student["course"] = "Full Stack Development";

console.log(student);

Output

{
  name: "Smita",
  age: 23,
  course: "Full Stack Development"
}

Both dot notation and bracket notation can be used to update values.


Deleting Object Properties

Sometimes we may need to remove a property from an object if that information is no longer needed.

In JavaScript, we can remove a property using the delete keyword.

The syntax is simple:

delete object.property

Example

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
};

delete student.course;

console.log(student);

Output

{
  name: "Smita",
  age: 22
}

Here:

  • The object originally had three properties.

  • Using delete student.course removed the course property from the object.


Using Bracket Notation

We can also delete a property using bracket notation.

delete student["age"];

After this operation, the object becomes:

{
  name: "Smita"
}

Useful Object Methods

JavaScript provides some built-in methods to work with objects. These methods help us get keys, values, or both from an object.


1. Object.keys()

Object.keys() returns all the keys (property names) of an object as an array.

Example:

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
};

console.log(Object.keys(student)); // Output:["name", "age", "course"]

This is useful when we want to see all the property names inside an object.


2. Object.values()

Object.values() returns all the values of an object.

Example:

console.log(Object.values(student)); // Output:["Smita", 22, "Web Development"]

This helps when we only need the data stored in the object.


3. Object.entries()

Object.entries() returns both keys and values in the form of arrays.

Example:

console.log(Object.entries(student));

Output

[
  ["name", "Smita"],
  ["age", 22],
  ["course", "Web Development"]
]

Each item represents a key–value pair.

There are many methods available on the Object in JavaScript, but these are some of the most commonly used ones.

If you want to explore more object methods, you can refer to the official documentation on MDN:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object


Looping Through Objects

Sometimes we want to read every property of an object. There are multiple ways to loop through objects.

1. Using for...in

This loop goes through every key in the object.

let student = {
  name: "Smita",
  age: 22,
  course: "Web Development"
};

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

Output

student
 ├── name  → "Smita"
 ├── age   → 22
 └── course → "Web Development"

Here:

  • key → property name

  • student[key] → value of that property


2. Looping Using Object.keys()

Since Object.keys() returns an array, we can loop through it.

Example:

Object.keys(student).forEach(function(key) {
  console.log(key, student[key]);
});

Output

name Smita
age 22
course Web Development

Quick Summary

Objects can be explored using these methods:

Method Purpose
Object.keys() returns all keys
Object.values() returns all values
Object.entries() returns key-value pairs in form of arrays

These methods make it easier to work with object data in programs.


Array vs Object

Both arrays and objects are used to store data, but they organize that data in different ways.

An array stores values using indexes, while an object stores values using keys.


Array Example

let allKhans= ["Salman Khan", "Sharuk Khan", "Amir Khan"];

Here the values are accessed using index numbers.

Example:

console.log(allKhans[0]); // Output: Salman Khan

Explanation:

fruits
0 → "Salman Khan"
1 → "Sharuk Khan"
2 → "Amir Khan"

The position of the value is important in arrays.In arrays, values are stored in order using indexes.
Arrays can store multiple values of any data type.


Object Example

let salmonBhai= {
  name: "Salman Khan",
  home: "Bandra",
  film: "Hum Apke Hai Kon" // in hindi
};

Here the values are accessed using keys instead of index numbers.

Example:

console.log(salmonBhai.name); //Output: Salman Khan

Structure:

salmonBhai
 name: "Salman Khan",
 home: "Bandra",
 film: "Hum Apke Hai Kon" // in hindi

Key Difference

Array Object
Stores data in order Stores data using keys
Uses index numbers Uses property names
Best for lists Best for structured data

When to Use Each

Use arrays when you have a list of values.

Example:

let colors = ["red", "blue", "green"];

Use objects when you want to store details about something.

Example:

let car = {
  brand: "Toyota",
  model: "Fortuner",
  year: 2023
};

Assignment for Readers

Now that you understand how objects work, try solving this small exercise to practice.

Task

Create an object representing a book.

The object should contain the following properties:

  • title

  • author

  • price

Steps

  1. Create the object.

  2. Update the price property.

  3. Add a new property called publisher.

  4. Print all keys and values using a loop.

Example

let book = {
  title: "Clean Code",
  author: "Robert C. Martin",
  price: 500
};

// update property
book.price = 550;

// add new property
book.publisher = "Prentice Hall";

// loop through object
for (let key in book) {
  console.log(key, book[key]);
}

Try adding more properties like pages, language, or edition and observe how the object changes.

Practising small exercises like this will help you become more comfortable working with objects.


Conclusion

Objects are one of the most useful data structures in programming because they allow us to organise related information in a structured way.

Instead of storing data in many separate variables, objects let us group everything together using key–value pairs.

In this article, we explored:

  • What objects are

  • How to create objects

  • How to access their properties

  • How to update and delete properties

  • How to loop through object data

  • some useful object methods

Understanding objects is an important step because they are widely used in real applications, APIs, and data handling.

Once you become comfortable with objects, working with complex data structures becomes much easier.

If you found this article helpful, feel free to follow me for more beginner-friendly programming content.

More from this blog

BuildWithSmita

30 posts

A space dedicated to simplifying hard topics. Here, complicated ideas are explained step by step in a clear and approachable way, making learning less overwhelming and more enjoyable.