Understanding Objects

In the world of programming, objects play a crucial role, they are fundamental building blocks which assist in structuring and organizing code. Objects play a pivotal role in Javascript, enabling developers to create complex structures and manage information efficiently. In this article, we will explore the core concepts of Javascript objects, their properties, and various use cases.

What is a Javascript Object?

A Javascript object is a collection of key-value pairs, where each key is known as a property name and is associated with a value. These values can be of any data type, including strings, numbers, arrays, or even objects. Objects are versatile and provide a way to group related data and functionalities.

Here is a way of declaring a Javascript object:

const person = {
name: "Spiderman",
age: "30",
alias: "Peter parker",
occupation: "Super hero",
}

Accessing and modifying properties of Object -

You can access and modify the properties of a Javascript object using either a dot notation or bracket notation. Let’s take a look at both approaches:

Dot notation

console.log(person.name); // output will be Spiderman
// modifying the age of spider man, lets make him old
person.age = 40;
console.log(person.age) // output will be the age is 40

Bracket notation

console.log(person["occupation"]); // output will be Super hero
// let us change it to photographer
person["occupation"] = "Photographer";
console.log(person["occupation"]); // Out put will be Photographer

Adding and deleting properties

Javascript objects are dynamic, meaning you can add or delete properties even after the object has been created.

Adding a property

// lets add nemesis of spiderman to the list
person.nemesis = "Green goblin";
console.log(person.nemesis); // output: green goblin

Deleting a property:

// lets delete or terminate the nemesis
delete person.nemesis;
console.log(person.nemesis); // output: undefined

Methods in Javascript Objects

Methods are functions that are associated with objects. They allow objects to perform actions and manipulate their own data. You can define and use a method within an object:

const person = {
name: "Spiderman",
age: "30",
alias: "Peter parker",
occupation: "Super hero",
greet: function() {
console.log("Hello, my name is " + this.name);
},
league: {
avengers: "yes",
},
};

person.greet() // Output will be, Hellom my name is Spiderman

Iterating in objects

To iterate over the properties of an object, you can use a for...in loop. This will allow to access each key-value pair within the object.

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

Copying objects

There are several ways to copy Javascript objects, ranging from shallow to deep copies.

Shallow copy

A shallow copy of an object creates a new object that references the same memory locations as the original object for nested objects or arrays. This means that changes to nested objects or arrays in the copied object will also affect the original object and vice versa.

Example with Object.assign();

const newPerson = Object.assign({}, person);

// modifying the nest object in the shallow copy
newPerson.league.avengers = "No";
console.log(person.league.avengers); // No
console.log(newPerson.league.avengers); // No

Example with spread operator.

const newPerson = {...person}

// modifying the property in the shallow copy
newPerson.league.avengers = "Maybe";
console.log(person.league.avengers); // Maybe; 
console.log(newPerson.league.avengers); // Output will be Maybe

Deep copy

A deep copy of an object creates a new object with a completely separate memory location for all nested objects and arrays, this means that changes to the objects, nested objects and arrays in the copied object will not affect or change the original object and vice versa.

Example with JSON methods:

One common method to create a deep copy is by using JSON.stringify() and JSON.parse(). This method converts the object to a JSON string and then parses it back into a new object.

const deepCopy = JSON.parse(JSON.stringify(person));

// modifying the value of the object in the deep copy
deepCopy.league.avengers = "No";
console.log(person.league.avengers) // Maybe
console.log(deepCopy.league.avengers) // No

Understanding Objects is very important for writing robust and maintainable JS code, especially when you are working with large and complex data structures.