Objects in Javascript

Introduction

Objects are the heart and soul of javascript, objects though they look simple and easy to understand, have a lot of nuances. Here I will be trying to break down objects in a very simplified way by covering, the basics of objects, the property of an object, adding and deleting a property, computed property, and checking the existence of a property. So gear up for fully loaded object learning.

What are Objects?🤓

Objects are nothing but a non-primitive type of data and are created by using curly braces {}. An object like any other data type is used to store data, but the way objects store data is different from the traditional string and numbers data type.

Objects store data in the form of a property, where every property is represented by a key and value pair, something like this, {key: value}. Let's have a look at an example, where we declare a const variable and assign an object to it.

const personDetails = { 
    name: "Prakash Sakari", 
    age: 101, 
    likes: "Only Food" 
};

In the above example name, age and likes are the key and "Prakash Sakari", 101, "Only food" are their respective value.

Note: The key of an object property must be a string, even though in the above example we have not enclosed our key within quotes " ", javascript internally converts the key into a string

Accessing a single value from an object.💥

Let's say we want to log the age of the person given in the above object, to do this we use the dot notation also called as dot operator. Let's see it in action.👇

const personDetails = { 
    name: "Prakash Sakari", 
    age: 101, 
    likes: "Only Food" 
};
console.log(personDetails.age);

// Output: 101

Wooah, that's good right now we can access any value present in an object by simply writing Objectname.key

Let's see how we can add a property to an existing object. ⭐

We will be using our personDetails objects and add a property with the key city and value Mumbai. Let's see it in action.👇

const personDetails = { 
    name: "Prakash Sakari", 
    age: 101, 
    likes: "Only Food" 
};
personDetails.city: "Mumbai";
console.log(personDetails);

// Output: { name: "Prakash Sakari", age: 101, likes: "Only Food", city: "Mumbai" }

That means in order to add a new property to the existing object we need to write Objectname.newKey = value

But what if a key has multiple words, for example

const personDetails = {
    name: "Prakash",
    age: 111,
    state: "Maharashtra",
    pincode and city: "400029, Mumbai"
};

Running the above example will result in an error, that's because when a key has multiple words it must be wrapped within quotes as seen below.

const personDetails = {
    name: "Prakash",
    age: 111,
    state: "Maharashtra",
    "pincode and city": "400029, Mumbai"
};

Now to access the value of a key with multiple words we cannot use dot notation, so to our rescue, we have square brackets [ ]. Let's see this in action.👇

console.log(personDetails["pincode and city"])

// Output: 400029 and Mumbai

Delete a property from an object

Javascript has a delete operator that removes a given property from an object. Let's see it in action.👇

delete personDetail.state
console.log(personDetail)

// Output: { name: "Prakash", age: 111, "pincode and city": "400029, Mumbai" }

Computed Properties 🚀

A computed property is where a key of a property is taken from a variable. Let's understand this with a code.👇

let key = prompt("What do you want to know about the user? (name/age)");
let personDetail = {
    name: "Prakash",
    age: 121,
}

console.log(personDetail[key]);

//Output: "Prakash" if key is name or 121 if key is age or undefined if key doesn't match with the one in the object

Bonus: Existence of a property in object. ❤️

let obj = {
    name: "Prakash",
    age: 121,
}

console.log("name" in obj) // Output: true

console.log("city" in obj) // Output: false

To check if a property exists in an object we use the in operator, with this knowledge we can loop over an object and check the different keys present in an object.

Conclusion

We covered objects and properties
Adding and deleting a property
Using computed property
Checking the existence of a property

Reference - developer.mozilla.org/en-US/docs/Web/JavaSc..

Thank you for reading the blog, if you understood and learned something new let me know in the comments, I will be happy to read what you have understood. Moreover you can connect with me on Twiiter and LinkedIn. Cheers 🍻

Objects the Beginning