DEV Community

Cover image for Everything You Need to Know About JavaScript Objects
Vinayagam
Vinayagam

Posted on

Everything You Need to Know About JavaScript Objects

JavaScript Objects

Objects are one of the most important parts of JavaScript. They help us store and organize related data together.

1️⃣Object

Definition
An Object in JavaScript is a collection of related data stored as key–value pairs, where each key represents a property and each value stores the information.

Example

let person = {
  name: "Vinayagam",
  age: 21,
  city: "Chennai"
};
Enter fullscreen mode Exit fullscreen mode

Real Life Example:
A student record in a college database contains name, roll number, and department.
All these details belong to one student, so they can be stored in an object.

2️⃣Property

Definition
A property is a key inside an object that stores a value.

Example

let car = {
  brand: "Toyota"
};

Here:

brand → property (key)

"Toyota" → value
Enter fullscreen mode Exit fullscreen mode

Real Life Example
In a mobile phone description, properties could be:

  • brand
  • price
  • storage

3️⃣ Key–Value Pair

Definition
A key–value pair is the combination of a property name (key) and its corresponding data (value) inside an object.

Example

let book = {
  title: "JavaScript Basics"
};
Enter fullscreen mode Exit fullscreen mode
  • key → title
  • value → "JavaScript Basics"

4️⃣ Creating an Object

Definition
Creating an object means defining a new object using curly braces {} and adding properties inside it.

Example

let student = {
  name: "Arun",
  age: 21
};
Enter fullscreen mode Exit fullscreen mode

Real Life Example
When a website stores user profile information, it creates an object with the user's details.

5️⃣ Accessing Object Properties

Definition
Accessing object properties means retrieving the value stored in an object using its key.

There are two methods:

Dot Notation

console.log(student.name);
Enter fullscreen mode Exit fullscreen mode

Bracket Notation

console.log(student["age"]);
Enter fullscreen mode Exit fullscreen mode

Real Life Example
When a website shows your username after login, it is accessing the username property from the user object.

6️⃣ Adding Properties to an Object

Definition
Adding a property means inserting a new key–value pair into an existing object.

Example

let person = {
  name: "Rahul"
};
person.age = 25;
Enter fullscreen mode Exit fullscreen mode

Now the object contains a new property age.

Real Life Example
When a user adds their phone number later in a profile, the system adds a new property to the user object.

7️⃣ Updating Object Properties

Definition
Updating a property means changing the value of an existing property in an object.

Example

let product = {
  price: 500
};
product.price = 450;
Enter fullscreen mode Exit fullscreen mode

Real Life Example
An e-commerce website updating product price after discount.

8️⃣ Deleting Object Properties

Definition
Deleting a property means removing a key–value pair from an object using the delete keyword.

Example

let user = {
  name: "Vinayagam",
  password: "1234"
};
delete user.password;
Enter fullscreen mode Exit fullscreen mode

Real Life Example
A website removing temporary login tokens after logout.

9️⃣ Object Methods

Definition
A method is a function stored inside an object.

Example

let calculator = {
  add: function(a, b) {
    return a + b;
  }
};

calculator.add(5,3);
Enter fullscreen mode Exit fullscreen mode

Real Life Example
A car object may have methods like:

  • start()
  • stop() These represent actions.

🔟 Nested Objects

Definition
A nested object is an object that is stored inside another object.

Example

let student = {
  name: "Vinay",
  marks: {
    math: 90,
    science: 85
  }
};
Enter fullscreen mode Exit fullscreen mode

Real Life Example
An online order contains customer details and address, which are stored as objects inside the main order object.

1️⃣1️⃣ Looping Through Objects

Definition
Looping through objects means iterating over each property of an object using loops like for...in.

Example

let person = {
  name: "Vinay",
  age: 22
};

for(let key in person){
  console.log(key, person[key]);
}
Enter fullscreen mode Exit fullscreen mode

Real Life Example
A program displaying all user profile details by looping through the object.

Top comments (0)