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"→ valueprice→ key65000→ valuebrand→ 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:
studentis the objectname,age, andcourseare 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:
Dot Notation
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→ objectname→ 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
ageequal 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.courseremoved 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
Objectin 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 namestudent[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:
titleauthorprice
Steps
Create the object.
Update the
priceproperty.Add a new property called
publisher.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.




