# Understanding Objects in JavaScript

### Overview

In this article, we are trying to understand the Object in JavaScript, how it help use to store real word entity into program.

### Why do we need Objects?

To understand the need of Object, let's take an example. Assume there is a librarian and they want to store some books, so in the traditional method try to do it

```javascript
let book1Title = "Harry Potter";
let book1Author = "J.K. Rowling";
let book1Pages = 309;

let book2Title = "The Hobbit";
let book2Author = "J.R.R. Tolkien";
let book2Pages = 310;
```

As you can see, to store 2 books, we need to declare 6 variables. Now you may ask what the problem is.

The key problem here is the creation of multiple variables and verbose code. To fix that, we can use objects in JavaScript.

### What is Object

An object is a way to store values with their corresponding keys. That value may be anything; it may be any data type. But the key is only a string or a symbol. Object is non-primitive, and it is stored and copied by reference.

### Syntax

```javascript
let obj_name={
    key1: "value",
    key2: 167,
    key3:[1,2,3,4],
    key4:{
        another_key:"value45"
    }
}
console.log(obj_name)
console.log(obj_name.key1) // It return of value of key1
console.log(obj_name["key1"] // Another method to see the value of key1 
console.log(obj_name.key4.another_key) // Nested values 
```

> Note: If you want more knowledge about data types, read this article.

```javascript
let book1 = {
  title: "Harry Potter",
  author: "J.K. Rowling",
  pages: 309
};
let book2 = {
  title: "The Hobbit",
  author: "J.R.R. Tolkien",
  pages: 310
};
```

![](https://cdn.hashnode.com/uploads/covers/6953c37709349c47ab7f5fc0/0be6be46-f8a1-4e7e-b7ef-6c2766225553.png align="center")

As we can see, we just need 2 variables to store 2 books, and objects are easy to understand and less verbose.

Now, let's take a few examples to understand how to insert and read values from an object.

### Example 1

```javascript
// Example 1: Adding a new key-value pair
let student = {
    name: "John",
    age: 20
};
// Add new key
student.grade = "A"; // or: student["grade"] = "A";

// Example 2: Modifying a value
student.age = 21; // change age from 20 to 21

// Example 3: Deleting a key
delete student.grade; // removes "grade" property from student
```

### Example 2

```javascript
// Example 4: Input value from user (prompt - works in browser environment)
let car = {};
car.brand = "Toyota"; 
car.model = "Corolla"; 
car.year = 2022; 

// Example 5: Access and modify using bracket notation
car["color"] = "Red";
car["year"] = 2023;

// Example 6: Deleting key with bracket notation
delete car["color"];

// Example 7: Looping through object keys and showing values
for (let key in car) {
    console.log(key + ": " + car[key]);
}

// Example 8: Check if a key exists
if ("brand" in car) {
    console.log("Brand exists in car object");
}

// Example 9: Get all keys and values
let keys = Object.keys(student); // ["name", "age"]
let values = Object.values(student); // ["John", 21]
```

### Example 3: For in Loop

We can run a `for in` loop for an object which run for all

```javascript
// Example: Using for...in loop with a fresh object
let book = {
    title: "Atomic Habits",
    author: "James Clear",
    year: 2018,
    price: 350
};

for (let key in book) {
    console.log(key + ": " + book[key]);
}
// Output 
// title: Atomic Habits
// author: James Clear
// year: 2018
// price: 350
```

### Some Important Methods of Object

1\. HashOwnProperty / Object.hasOwn()

When working with objects in JavaScript, sometimes we need to check whether a property **actually belongs to that object** or if it is coming from the **prototype chain**.

To understand this, let’s look at a simple example.

```javascript
const user = {
  name: "Pallab",
};

console.log(user.name); // Pallab
```

Now, suppose we try to access something like this:

```javascript
console.log(user.toString());
```

Even though `toString` It is not inside our object; JavaScript still finds it.

That is because `toString` it comes from `Object.prototype`.

So if we want to check whether a property **really belongs to the object itself**, we can use `hasOwnProperty`.

```javascript
const user = {
  name: "Pallab",
};

console.log(user.hasOwnProperty("name")); // true
console.log(user.hasOwnProperty("toString")); // false
```

This method returns **true only if the property exists directly inside the object**.

However, modern JavaScript introduced a safer alternative:

```javascript
Object.hasOwn(user, "name");
```

### Why is this safer?

Because sometimes an object may **override** `hasOwnProperty`.

Example:

```javascript
const obj = {
  hasOwnProperty: () => false,
  name: "JS",
};

console.log(obj.hasOwnProperty("name")); // false wrong
```

To avoid this issue, we use:

```javascript
Object.hasOwn(obj, "name"); // true
```

So the key idea is:

`Object.hasOwn()` safely checks if a property exists directly on an object.

## 2\. Structured Clone

In JavaScript, sometimes we need to **create a completely independent copy of complex data**, including nested objects, arrays, maps, sets, etc.

For this purpose, modern JavaScript provides a built-in function called **structured cloning**.

```javascript
const original = {
  name: "Pallab",
  skills: ["JS", "Node"],
};

const copy = structuredClone(original);

copy.skills.push("React");

console.log(original.skills); // ["JS", "Node"]
console.log(copy.skills); // ["JS", "Node", "React"]
```

Here, both objects are completely independent.

Structured clone creates a **deep clone automatically**.

## Difference Between Object and Array in JavaScript

Many beginners think that **Array and Object are completely different data types**.  
But in JavaScript, the reality is slightly different.

An **Array is actually a special implementation of an Object**.

That means internally, arrays behave like objects, but they have **additional behavior designed for ordered data**.

### An array is internally an Object

Consider the following example:

```javascript
let arr = [10, 20, 30];
console.log(typeof arr);
// Output 
// Object
```

As we can see, JavaScript returns `"object"` instead of `"array"`.

This happens because **arrays are implemented using objects internally**.

JavaScript internally stores it similarly to this structure:

```javascript
{
  0: 10,
  1: 20,
  2: 30,
  length: 3
}
```

![](https://cdn.hashnode.com/uploads/covers/6953c37709349c47ab7f5fc0/5e5bdc87-5eca-4bd0-8aa2-c21342829c82.png align="center")

But JavaScript also gives some extra methods like map(), push(), pop(), etc., with arrays. So we can clearly see that an array is an advanced implementation of an array.

> If you want to know whether a data is an array or an object instead of using the typeof keyword, you should use the Array.isArray(PassYourArrayHere) for the final answer.

### **Conclusion**

We can use objects to organize related data using key-value pairs, making the code look cleaner and easier to manage compared to using multiple variables to hold related data. To effectively use objects in JavaScript programming, we need to understand object operations such as Object.hasOwn(), as well as concepts such as shallow copy, deep copy, and structured cloning.