Introduction

In javascript, an object is the collection of elements as key-value pairs. Now after reading "collection of elements", you might think that arrays are already used for storing elements, so why do we need another data structure like objects?

The reason is very simple and accurate which you would be introduced in few minutes but before that let's understand what exactly is an object and how to create it.

Object

An object is the collection of elements as key-value pairs.

Syntax:

const objectName = {
  key: value,
  key: value,
  key: value
};

Example:

// Without object - too messy
const name = "Mohit";
const age = 21;
const cource = "Btech";

// With object - arranged code
const student = {
    name: "Mohit",
    age: 21,
    cource: "Btech"
};

Object VS Array:

Arrays store elements in a single place, but how do they differ from objects? We'll discuss when to use arrays and objects based on specific requirements.

Let's have an example: We have to store a student information and we use array the it would look like:

const student = ["Mohit", 21, "BTech"];

Ahh, it's not bad but here are fewer problem while using array:

Problem 1: We have no knowledge of property of every element like what the hell is "21" ? Is it Mohit's age or his marks or anything else... It's too confusing, right? So storing different kind of elements in an array may create problem.

Problem 2: When you want to access his age then you have to console student[1], which is again confusing, unrealistic and unprofessional.

	Array	Object
Data access	index se [0]	via dot operator objName.name
Order	ordered	unordered
Use when	list of same items	related data with labels

---

Comman Properties of Object

Accessing properties:

We can access object propert by using . operator.

Syntax: objName.key

console.log(student.name);      //Mohit
console.log(student.age);       //21
console.log(student.cource);    //Btech

Updating properties:

We can update property by overwriting existing one.

Syntax: objName.key = updated value

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

Adding properties:

Syntax: objName.newKey = value

const student = {
    name: "Mohit",
    age: 21,
    cource: "Btech"
};

//adding a property
student.city = "Jaipur";

console.log(student);

//Output: { name: 'Mohit', age: 21, cource: 'Btech', city: 'Jaipur' }

Deleting properties:

We just have to use delete keyword to delete a property.

Syntax: delete objName.key;

delete student.cource;
console.log(student);
// { name: 'Mohit', age: 21, city: 'Jaipur' }

Looping in Object

We can't use for and other loops directly on objects. The only loop that can be directly applied on this is for...in loop.

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

// name : Mohit
// age : 21
// city : Jaipur

What's key and student[key] ?

for (let key in student) {
//       ^^^
//       key = har baar ek property ka naam aata hai
//       student[key] = us property ki value
}

But if we want only keys or values then we can get this in form of array by using Object.keys(objName) & Object.values(objName)

console.log(Object.keys(student));
// [ 'name', 'age', 'city' ]

console.log(Object.values(student));
// [ 'Mohit', 21, 'Jaipur' ]