Understanding Objects in JavaScript

Imagine you are building an ed-tech platform. All the users here are student. Now you need to store some details of each students like name, age, city etc. You can store this informations like this:

let name = "Sanghita";
let age = 21;
let city = "Kolkata";

Now this is not a good way because the variables here are related but not grouped together. So we need a kind of a data structure which stores related informations together inside one single variable. That's why to organize related data in a structured way, we need Objects.

What is an object?

Objects are variables that can store both values and functions.

Values are stored as key:value pairs called properties.

Functions are stored as key:function() pairs called methods.

Example:

const student= {
  name: "Sanghita",
  age: 21,
  city: "Kolkata"
};

Here:

• student → object name

• name, age, city → keys (properties)

• "Sanghita", 21, "Kolkata" → values

  

How to create a JavaScript Object?

Way 1: Using Object Literal.

 {
  name: "Sanghita",
  age: 21,
  city: "Kolkata"
};

Way 2: Create empty objects and add the properties.

 //create empty object
const student={};

//Add Properties
student.name="Sanghita";
student.age=21;
student.city="Kolkata"

Way 3: Using new keyword.

 const student= new Object({
  name: "Sanghita",
  age: 21,
  city: "Kolkata"
});

NOTE:

1. You should declare objects with the const keyword.

2. For readability, simplicity and speed, use an object literal instead.

---

Accessing Object Properties

Way 1: Dot Notation

 // objectName.property
let age = student.age;
console.log(age); //21

Way 2: Using Bracket notation

//objectName["property"]
let age = student["age"];
console.log(age); //21

NOTE:

Dot Notation should be preffered.

---

Modifying Object Properties

Objects are mutable, which means their values can be changed.

student.age = 22;

console.log(student.age); // 22

---

Adding New Properties

You can add a new property by simply giving it a value:

Example

student.nationality = "English";
console.log(student.nationality); //English

---

Deleting Properties

The delete keyword deletes a property from an object:

Way 1: Dot Notation

delete student.age;
console.log(age); //undefined

Way 2: Using Bracket notation

delete person["age"];
console.log(age); //undefined

NOTE:

1. The delete keyword deletes both the value and the property.

2. After deleting, the property is removed. Accessing it will return undefined.

---

Check if a Property Exists

Use the in operator to check if a property exists in an object: returns true / false

let result = ("phone" in student);
console.log(result); //false

---

Looping Through Object Keys

Using for...in Loop , to print both key and value

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

// key-> current Property name.
//student[key]-> Current property value.

/*Output:

name Sanghita
age 21
city Kolkata
*/

Quick Revision by an Example:

//Create an object representing a student
//Add properties like name, age, course
Print all keys and values using a loop
const student = {
  name: "Sanghita",
  age: 21,
  course: "Computer Science"
};

//Update one property
student.age = 22;

console.log(student); //{ name: 'Sanghita', age: 22, course: 'Computer Science' }


//Print all keys and values using a loop
for (let key in student) {
  console.log(key, student[key]);
}

/*
name Sanghita
age 22
course Computer Science */