Understanding of Object in javascript

In this article, we are going to cover up the Object of javascript in depth and we are also going to explore all the methods, iterator on the Object etc...

Object

Javascript's Object are the non primitive data type in javascript which is used to hold key - value type data in memory, database etc .. They are fundamental to JavaScript’s object-based paradigm and are used to represent real-world entities, like a car with properties such as color, model, and year.

// Syntax

// Method 1

// this method of create an object is called object literal
let data = {
    // key : value 
}

// Object are declared in many ways, but this is the most easiest way to declare an object in javascript

let userDate = {
    name: "Captain Jack Sparrow",
    age: 30,
    isCaptain: true,
}

// Method 2
// creation of object with the help of new keyword
let obj2 = new Object()

obj2.name =  "iron man"

In Object, you can declare even non-primitive data type like array, object, array of object, nested object, etc...

userData.collectionShip = ["Black Pearl"]
userData.shipMember = [
    {memberName: "spider man", role: "manage the ship"}
]

console.log(userData)

In object, every data is a value which is associated with a special and unique key. In other sense when i write userDate.shipMember i usually concern with the value and what is the data on userDate.shipMember.
Arrays and object are two different types of data type which is used to store data. In javascript Array store the element in a heterogeneous manager which mean it store data like string, number, boolean, non primitive and primitive data at a time.

---

Delete In Object

In javascript, some time and some condition arise when we need to delete some values inside the object. for delete any value from an object javascript provide a delete keyword which delete the value of the object.

delete userData.collectionShip 

---

Accessing the element in Object

In Object we can access data in two ways i) By dot notation ii) By square bracket notation

Dot notation

Dot notation is used to access any key of the Object which return it respected value and if not it result in the undefined .

Syntax:- objectVariable.nameOfProperty which you want to access the data.

console.log(userData.whoIsCaptain)

Square Bracket Notation

square bracket notation is also used to access the value of the object which is only present in the Object variable.

Syntax: ObjectVariable["nameOfKey"]

console.log(userData["name"])

In square bracket notation you need to sure that the key must be present in the objectVariable otherwise it result in the error

---

Iteration over the Object

Before jumping to the iterator of the object we need to understand some of the methods of the object.

Object.keys()

In javascript, keys is a method present in the Object of the javascript programming language used to return an array of the keys present in the objectVariable.

const key = Object.keys(objectVariable)

console.log(key)

---

Object.values()

In javascript, values is a methods which return the arrays of the values present in the objectVariable.

const values = Object.values(objectVariable)

console.log(values) 

---

Object.entries()

In javascript, entries is a methods which is return an array of the key, value of the objectVariable present in it.

const result = Object.entries(objectVariable)

console.log(result)

Now, we have an idea how we can get the key and value. so far so good but we have to understand the iteration over object.

1. for loop

let studentData = {
name: "John",
rollNo: 30,
"class": 5,
isPassed: true
} 

const keys = Object.keys(studentData)

for (let i = 0; i<keys.length; i++){
    console.log(`student data values: ${studentData[keys[i]]}`)
}

1. for..in loop

this iterator is the alternative of for method in javascript. Used to iterate over the element easily.

for (const key in studentData){
    console.log(`\({key} : \){studentData[key]}`)
}

1. for..of loop

this iterator method is especially designed for the object. and this method of iteration is usually preferred for the object. By default objectVariable are not iterator.

for (const [keys, values] of Object.entries(studentData)){
    console.log(`\({key}: \){values}`)
}

---

Final words

• Prefer object literal syntax {} over new Object() for simplicity and performance.

• Avoid modifying Object.prototype to prevent unintended side effects.

• Use Object.hasOwn(obj, key) instead of obj.hasOwnProperty() for safety.

References

MDN website:- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

w3schools: - https://www.w3schools.com/js/js_objects.asp