Objects - Part 1

There are eight data types in Javascript, we have already discussed about the primitive data types in our previous lectures ( I would highly recommend reading them first if you haven't already ), and now we will discuss about the non-primitive data type - "Objects"
Objects store data in a key-value pair format, where a value can be of any data type again and nested to "n" levels. What? Don't worry; I will make everything clear in just a few moments.
Objects penetrate every concept of the language in Javascript, that is to say, whether you work with classes or functions, you will need to work with objects, also they themselves are objects under the hood in JavaScript.
Understanding Objects is extremely important in Javascript, Objects in Javascript are as important as breathing is to us, so let's focus!
Creating an Object
To create an object in javascript we use the flower brackets, open and close like {...}
, and all the key-value pairs that hold the data go inside of that.
That was simple, right?
Imagine an object to be like a shelf, a shelf with files. Say a whole bunch of records from a long time, perhaps.
Each of these files has a unique name inside the shelf so that we can find the item easily.
An empty shelf( object) can be created in two ways:
const person = { };
const person = new Object();
Both these essentially achieve the same goal - that is to create an object. Now, before we move on ensure to run and check this code in your browser console.
Among the two ways though, the {...}
notation is more common and is the one you will use more often than not. This way of creating an object is called Object literal.
Object Properties
An object can have "n" numbers of properties, the properties is the "identifier" before the :
mark.
Let's create a person object with my name here (Shrikanth)
const person = {
name: "Shrikanth",
age: 28
}
Now, we have filled our shelf with some stuff, right?
Here we have created our first object called as "person", imagine it to be a shelft that is named person.
Now we added two properties to it
- The first property here is called "name", which has a value of "Shrikanth" assigned to it.
- The second property is called "age" and has a value of 28 assigned to it.
Let me help you image this a bit better. Remember back in school we had pencil boxes we used to take to school? It had multiple smaller boxes inside of the main box, correct? Here imagine the person is like the main box and the smaller boxes are the smaller containers that hold the properties inside the main box, got it? But the only difference is the box can have any number of smaller boxes inside, that is an object can have "n" number of properties in it.
Although we can add many properties it is recommended to add only keep the required properties and not bloat it with every required and not required information in one object.
If you keep coding with me I'm sure you will learn it by the end of this reading series.
Accessing the Object properties
This is similar to checking an item inside of the box, like, in which small box did we keep that sharpener, or the eraser, etc.
Here we can access the object properties like the below:
console.log(person.name); // Shrikanth
console.log(person.age); // 28
You can also access the value of an object using the square bracket notation like:
console.log(person["name"]); // Shrikanth
console.log(person["age"]); // 28
Adding new values
You got a new pencil and want to keep it safe inside your most loved box, what do you do? We find the right space for it and keep it there right?
Same thing here as well, we can add new values to an object using either the dot notation or the square bracket notation.
person.city = "Bengaluru";
person.isAdmin = true;
Here we have added two properties city
and isAdmin
, now our object person
has four items, name, age, city and isAdmin.
We can also add properties using the bracket notation like we used while accessing the values, I bet you guessed how to do that by now, right? Before you continue reading, may be give it a try yourself?
person["city"] = "Bengaluru";
person["isAdmin"] = true;
Removing Object properties
Anything added needs to be removed, right, that was Newton's 7th law of motion? No? okay cool!
But that is surely true in the case of objects
delete person.isAdmin;
Here we have deleted the property isAdmin from the object.
We can also add multi-word property names
let person = {
name: "Shrikanth",
"is amazing": "absolutely true";
}
That is enough of self-flattering for a day ( for a week!!)
But in all seriousness, you get the point, right? To add a multi-word property, you wrap it with quotation marks and then assign any value as required. Note that this is very uncommon and you should not need to do this, but hey, good to know right?
Also, the last property in the list can end with a comma, it is not erroneous and is totally valid code.
let person = {
name: "Shrikanth",
age: 28,
}
You see how I left the second line which has the age with a trailing comma?
For multi-word properties we cannot use the dot notation and can only use the square notation.
Let's quicky revise what we learnt, with the square notation.
- Add a property to an object
let person = {
name: "Shrikanth",
age: 28,
}
person["city"] = "Bengaluru";
To access any property
let person = {
name: "Shrikanth",
age: 28,
}
console.log(person["age"]); // 28 - Getting old :-(
To add multi-word properties
let person = {
name: "Shrikanth",
age: 28,
"he is from": "Bengaluru"
}
Perfect!
Oh, wait, delete? No, I did not forget that!
let person = {
name: "Shrikanth",
age: 28,
}
delete person["he is from"];
And that is it!
Dynamic properties
What if I did not know what the value would be in the object, say the backend is providing some values and we do not know while we code about what value can come there? More like a variable that will have the variable key, I mean the property key that is to be added to the object during run time, you know that "some" value would arrive but do not know what yet.
let person = {
name: "Shrikanth",
age: 28,
}
let key = "from";
Say, the above example that the key
property is dynamic and any value can be present in the variable key.
We could do something like
let key = "from";
let person = {
name: "Shrikanth",
age: 28,
[key]: "Bengaluru"
}
Now the object would look like
let person = {
name: "Shrikanth",
age: 28,
from: "Bengaluru"
}
This way when the value of key
changes during run time, The object would also modify itself accordingly, this comes in handy more often than not. In fact, this would be the most useful case while coding in a real-time application.
Great, with that understanding of Objects, let's continue learning about objects in the part of this article named "Objects - Part 2"!