JavaScript Object

Introduction:

As one of the most popular programming languages in the world, JavaScript is widely used to create interactive and dynamic web pages. One of the key concepts in JavaScript is the use of objects, which allow developers to create complex data structures and represent them in a way that is easy to manipulate.

What is an Object?

When an object is created in JavaScript, it is represented internally as a collection of key-value pairs stored in a data structure called a hash table. This data structure is also known as an associative array, dictionary, or map.

Hash tables are used to store data in a way that allows for fast lookup and retrieval of values. In JavaScript, the hash table is implemented using an object prototype, which is a template for creating objects.

When you create a new object in JavaScript, it is created based on the prototype, which defines the structure and behavior of the object. This means that objects in JavaScript are not just a collection of properties, but also have their own internal representation that defines how they behave and interact with other objects.

One of the benefits of using objects in JavaScript is that they can be easily modified and updated. You can add or remove properties from an object, change the value of existing properties, or even nest objects within other objects.

Javascript object creation:

In JavaScript, an object is a collection of properties, which can be thought of as key-value pairs. Each property has a name (or key) and a value, which can be any data type, including strings, numbers, arrays, or even other objects. Here's an example of how an object can be created in JavaScript:

Creating Objects in JavaScript

1. const person = {
2.     name :  'John Doe',
3.     age : 30,
4.     email :  'johndoe@example.com',
5. };

In this example, we've created an object called person with three properties: name, age, and email. The value of each property is a string or a number.

Adding a property:

We can add any number of properties as a key-value pair to an object in javascript. Here's an example of how an property can be added to an existing object in JavaScript:

Adding a property to an object in JavaScript

1. person.id = 1234567890;
2. console.log(person);
4. output:
5. {
6.     name: 'John Doe',
7.     age: 30,
8.     email: 'johndoe@example.com',
9.     id: 1234567890
10. }

Deleting a property:

We can delete any existing property of an object in javascript. Here's an example of how an property can be deleted from an object in JavaScript:

Deleting a property from an object in JavaScript

1. delete person.id;
2. console.log(person);
4. output:
5. {
6.     name: 'John Doe',
7.     age: 30,
8.     email: 'johndoe@example.com',
9. }

Nesting Objects:

We can also add one object as property of another object. Here's an example of how an object can be added to another object in JavaScript:

Nesting objects in JavaScript

1. person.address = {
2.     street :  '123 Main St',
3.     city :  'Anytown',
4.     state :  'CA',
5.     zip :  '12345'
6. };
8. output:
9. {
10.     name: 'John Doe',
11.     age: 30,
12.     email: 'johndoe@example.com',
13.     address: {
14.         street: '123 Main St',
15.         city: 'Anytown',
16.         state: 'CA',
17.         zip: '12345',
18.     }
19. }

In this example, we've created an object and added it to the person object with address as a key. Now to access state property of address object we can use the dot notation, person.address.state

Convert object to array

To convert an object to an array we use one of three methods: Object.keys(), Object.values(), and Object.entries(). The keys method gives all the keys of an object as an one dimensional array. The values method gives all the values of an object as an one dimensional array. The entries method gives all key-value pairs of an object as a two dimensional array. Here's an example of how an object can be converted to arrays using different methods:

Converting Objects to array in JavaScript

1. console.log(Object.keys(person));
2. Output:
3. [ 'name', 'age', 'email' ]
5. console.log(Object.values(person));
6. Output:
7. [ 'John Doe', 30, 'johndoe@example.com' ]
9. console.log(Object.entries(person));
10. Output:
11. [
12.     [ 'name', 'John Doe' ],
13.     [ 'age', 30 ],
14.     [ 'email', 'johndoe@example.com' ]
15. ]

Conclusion:

In conclusion, objects are a fundamental concept in JavaScript, providing a powerful way to organize and manipulate data in complex ways. Understanding how objects are represented internally in JavaScript can help you write more efficient and effective code, and enable you to create more complex and sophisticated web applications.