What are Objects in Javascript?

Objects are one of the data types in Javascript. It is used to store key-value pairs, as a collection where the key is a unique identifier of the pair. 

Javascript Objects are mutable which means that they can be modified however we like. This also indicates that Objects can be used as a Data Structure. Objects in Javascript are one of the most fundamental concepts because they are easy to grasp and a big yes to use throughout your code. Objects also play an important role in simplifying the complexity of code structure and helping to create concise logical code.

Let’s take an example to understand objects;

“Totoro lives in the forest and eats acorns.” We are going to store this data by creating an object which is easy to access and easy to manipulate.

In the above Object representation; Totoro is the object’s name, which has two key: value pairs with the keys place and food. If we convert this object into code, it looks like this;

How to create an Object?

You can create an object using Object() constructor or using Object literals {}. Let’s get practical and dig into an example.

Using Object constructor

You can create an object easily with an object constructor by using a new keyword, it returns a reference to the constructor. We can pass a value in the parentheses, otherwise, it returns an empty object.

Using literals

Creating an object with string literals is way more common than the constructor in day-to-day programming. You can assign some key: value pairs or initialize with an empty object to later modify it.

Here’s an example, where we created myCat Object using string literals and passed three key: value pairs;

Add/ Modify an Object

If you want to add a new property/ key: value pair to an object, the concept is somewhat like pushing an element to an array but in this case, we’ll be pushing a key: value pair to an object.

You can add/ modify in the same manner as if that property doesn’t exist Javascript will create a new one and add to your object, otherwise it’ll replace the value and hence modify it.

Method # 1 : Using the dot method

Method # 2 : Using the Index method

Remove in an Object

We can use the delete operator to remove a property in an object. To delete a specific property aka the key: value pair, we must already know the key.

Method # 1 : Using the dot method

Method # 2 : Using the Index method

Woopie... Now that we know what Javascript Objects are and how we create/modify or delete objects. Let’s dig deeper into looping through the objects, and filtering.

Looping through the Object

We’re taking myCat as an example;
First, we can loop through using a for … in loop, you can use any for loop and even while loop. myCat[key] is fetching the object’s value by using the unique identifier;

Another method is to use a map. I love using map to loop through my arrays even more so than for but an object is a different data structure than an array. Fortunately enough we have object method Object.entries() which takes an object and returns an array which then we can map through. Pretty cool I know, Right?

Filter in an Object

Using Filter, is nearly similar to how we used a map. Here are two examples to filter by key and filter by value. You might be confused by the use of two Object.entries(), I was too when I came across this some time ago( Yes I did not invent this solution) but the idea is that here we are returning from the filter and to maintain the DS as an object we wrap it twice.

Conclusion

Javascript Objects are a datatype that is smart enough to behave as a data structure so we can store, and modify our data. We can manipulate the objects and make our code cleaner by using them. You can play around and get comfortable with the concept, but I’m sure you’ll find them easy to understand.

And that is all my friend… I hope you guys enjoyed this short guide about Javascript objects for beginners. Please let me know your thoughts and if you have queries :)