Understanding Objects in JavaScript for Beginners (Key-Value Pairs Explained)
When writing JavaScript programs, we often need to store multiple related pieces of information together.
For example, information about a person: name, age, and city.
Instead of creating separate variables, JavaScript allows us to store them inside an object.
You can think of an object like a profile card that stores information about something.
Example:
let person = {
name: "Alice",
age: 25,
city: "New York"
};
Here, all related data about the person is stored in one object.
What Are Objects?
An object is a collection of key-value pairs.
Key → property name
Value → data stored in that property
Example:
let student = {
name: "Alice",
age: 25,
isStudent: true
};
Here:
The diagram above shows how keys connect to their values.
For example:
name → "Alice"
age → 25
isStudent → true
This is the basic structure of objects in JavaScript.
Creating Objects in JS
Objects are created using curly braces {}.
Example:
let car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
Now the object car stores three properties.
Accessing Object Properties
There are two ways to access object values.
1. Dot Notation
console.log(student.name);
Output:
Alice
Dot notation is the most commonly used method.
2. Bracket Notation
console.log(student["age"]);
Output:
25
Bracket notation is useful when property names are dynamic.
Updating Object Properties
We can easily change values inside objects.
Example:
student.age = 26;
Now:
age → 26
Objects are mutable, meaning their values can be changed.
Adding New Properties
We can add new properties anytime.
Example:
student.course = "Computer Science";
Now the object becomes:
{
name: "Alice",
age: 26,
isStudent: true,
course: "Computer Science"
}
Deleting Properties
JavaScript provides the delete keyword.
Example:
delete student.isStudent;
Now the property is removed from the object.
Looping Through Object Keys
We can loop through an object using for...in.
Example:
for (let key in student) {
console.log(key, student[key]);
}
Output example:
name Alice
age 26
course Computer Science
This loop prints all keys and values in the object.
Array vs Object
It is important to understand the difference between arrays and objects.
The diagram above clearly shows the difference between an Array and an Object. Arrays are best for lists, while objects are best for structured data.
Practice Assignment
Try this in your JavaScript console.
1. Create a student object
let student = {
name: "John",
age: 20,
course: "Web Development"
};
2. Update one property
student.age = 21;
3. Loop through object
for (let key in student) {
console.log(key, student[key]);
}
Conclusion
Objects are one of the most powerful features in JavaScript. They allow us to store structured data in a clean and organized way. In real-world applications, objects are used to represent users, products, orders, settings, and API responses
Understanding objects is an important step toward becoming a strong JavaScript developer.
