Objects in JavaScript: A Comprehensive Look
Tags: javascript, newbie, webdev, beginners
Published: 2023-08-31 18:29:24

Objects are everywhere in JavaScript. They are super-important and there is so much you can do with them.
Objects are core data structures in JavaScript. 
An object is a super important data structure because it is used to reflect real-world entities. They allow us to apply real-world logic to coding. They are data structures that are made up of properties(key: value) and methods.

##Examples of real-world Objects with properties and methods

An example of a real-life object is a bank account. A bank account has properties like balance and methods like withdrawal and deposit.
Another example is a car, which has properties like car color, make, model, and methods like car start, car brake, and car drive.

##Differences Between Properties and Methods in JavaScript

###Properties
1. They are variables in an object
2. Data are stored in a property

###Methods
1. They are functions in an object
2. Actions are stored in methods

You can store, operate with, and send data across a network with JavaScript objects. You can store comprehensive, composite, and sophisticated data in objects.



##Creating New Objects

###1. Using Object Initializers
Creating an object is relatively easy. To create an object, all you need is a set of curly braces `{ }` and within that, you have to write `key: value` pairs separated with a comma `,`. 


![Creating an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xltlugdns38st4u8wrj.png)

###2. Using the constructor function

Alternatively, you can create an object by writing a constructor function and then creating an instance of the object with the 'new' keyword.


![constructor function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wqi5k9b9xp219dsfyuc.png)

Notice the use of the 'this' keyword to assign values to the object property based on the value of the object passed to the function.

This statement creates Mydetails and assigns it the specified values for its properties. Then the value of
 Mydetails.Surname is the string "Akinnimi", 
 Mydetails.FirstName is the string "Stefan", 
 Mydetails.Age is the integer 20. 
 My.details.FavouriteColor is the string “blue”

NOTE: Arguments and parameters should be given in the same sequence.

Output:

![console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4x2uqurt515qny8h2zt4.png)

##Adding Items to an Object 
To add items to an object in JavaScript, you select the properties of the object and then assign a value to it using the equal sign.


![Adding Items to an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmlhfju29dij155ho4dr.png)

Output:

![console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w22ktofu77f13l9tsu9b.png)


##Deleting Items in an Object 

To delete an item in an object, you will use the delete keyword, followed by the object name and properties. This will remove the selected object properties and values from the object.


![Deleting an item from an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4k4krfa3wa69lv86clbe.png)

Output:
Surname and Age have been removed from the object.

![console output of the deleted object items](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5gwgo9lcknhxrny5au0.png)

##Accessing Items In an Object

Should you require access to any of the object's properties? A property's 'key' can be used to gain access to its value. The properties of the object can be accessed in one of two ways:

###Dot Notation
The name of the object and the name of the property are separated with a dot sign.

![Dot notation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fwfdq8c6z8794sx4qa8.png)

###The bracket notation 
You can use bracket notation to replace the dot(`.`) with square brackets `[ ]` and then convert the `key` name to a `string`. 


![Bracket Notation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zg2oklvogpb71tjxiu1.png)



##Nested objects or Arrays
A nested object is one that is contained within another object. An Array can also be nested inside an object.

![Nesting an array and object inside of another object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slqpfhgox3oop5vak7yt.png)

In the example above, you will notice we have an array called ‘Hobbies’ and another object called ‘Networth’ nested in the ‘Myobject’ object.


##Copying an Object Using the Spread Operator 

Objects can also be deep copied to another variable by using the spread operator.
After copying an object, you can proceed to add or delete the items inside the copied objects; the items won't be deleted from the object where they were copied.


![Copying an Object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utcg8pmakk8nlamv14un.png)

##Object methods 
Creating functions inside of objects is referred to as creating methods in JavaScript.

![Object methods](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pxi3derjowpi021x47u.png)

NOTE: The 'this' keyword used in the method is a way of calling the parent object.
The ‘this’ keyword is referring to the MyObject in this case. Is just like saying,
MyObject.Surname + ' ' + MyObject.FirstName for the first method
OR
Myobject.Networth.assets  -  Myobject.Networth.Liability for the second method

You can invoke or call a function (method) in an object after creating it by using the dot notation and an empty parenthesis.

![calling a method in an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op8aa7eq62gh4wllator.png)


##Object destructuring (ES6)

Object destructuring, a useful feature of JavaScript, allows you to extract properties from objects and bind them to variables. The order in which you arrange the properties does not matter, but the key matters. 

It is capable of extracting many properties in one statement, accessing properties from nested objects, and setting a default value in the absence of a property. 

```
//Syntax
const { property } = object; 
```

![Object Destruturing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fa0gzgkldc13opr0arof.png)

In the above example, Line 14 will throw an error because FavoriteColor is not part of the properties of MyObjects, which were destructured, i.e., FavoriteColor was not destructured.

##Conclusion

Objects serve as a building block for structuring and organizing data in JavaScript.
An object is very powerful, it enables a developer to create real-life scenarios with code. As you continue your journey in JavaScript, the insights gained from this introduction to objects will serve as a solid foundation upon which you can build more complex and innovative applications.