Mar 8, 2021

8 min read

Javascript part 14

Today We talk about Objects and the simple ways to use them. OK, let's begin.

Objects: Objects in javascript are stand-alone entities with properties and types. (Whta?) The property of an object can be explained as a variable that is attached to the object. Properties of an object can be accessed through dot notation. (what? basically objects are like pokemon,take pikachu. It has attributes , like color: yellow, height: small, element: electric… etc.) example down below.

We first create a new object using the “new” keyword in front of an object() we set it to “myCar,” Then we call “myCar” with each of the properties that we want to be affiliated to that car. We set our “make” of “myCar” to “ford,” the model to “mustang,” and “numWheels” blank or undefined, just in case we decide to add a value later.

Lastly, we call “myCar,” and walla it returns an object to us. simple!

Another way to display objects is with the [Bracket notation]

You can also set properties and values using something called bracket notation. ( look below for example.)

We essentially do the same thing as the first example. Except we use brackets with the propertie names inside the bracket, and set the values equal to something after.

The reason you use this is for some reason, you used numbers or spaces in your property names.(myCar[123liftoff] = “fly” or “myCar[lets get this started] = “party” ………….This is not good convention either way” and probably the harder way to assign attributes to objects.)

Moving on!

Creating objects

We have three types of ways to create an object. The first one is the initializer, the second is a constructor function, and the third is “object.create”.

Let me go over it here.

Initializer- we actually did this at the beginning of this article. The example below is a repeat.

easier way to do it is like this.

We set up the whole thing in a single line, with make, model, wheels, and engine properties to the respected values of your choice. even assigning the engine another object. (Yes, you can set the value of a property to another object.)

Constructor, function-here we set up properties beforehand, Like saying we have a template for what we want our cars to have from the start (barebones).

As we see above, we create a function named “Car”. that takes in three arguments of our likings(usually the properties that we want these new objects to have.)

we then use this.make = make, this.model = model, and this.year = year

I'm going to go over “this” real quick. when you see “this” keyword, imagine it just being a replacement for “Car.” Then when we passed in “tesla,” when we initialized it with “MyNewCar” it got binded to that single object. read more here.

If you look at the example below, if we wanted to get one of those key elements out or values out, we would call the object and the property we want.

Also if we wanted to change or add a value we could do:

From above, all you have to do is call the object and the property you want to create and the value you want it to have. Then call the object and walla!

Last one!

Object.Create- here, we use the “object.create” method.

We also look at how to make a value of a property, a function, or a method.

Ok, here we set a variable to “animal,” and the value is an object with some properties. We set the “type” of animal to the value of “sea lion”; we also have a property that is a function, that is named “displayType”(which all it does is console.log() the ‘type” of an animal)

We set the new variable to “animl1," then call Object. create, which takes in the variable of “animal.” Now that “animl1" has all the property the original animal has. So we can change the values or add any property we want. Kinda like we just created a barebones animal out of scratch. We also have access to use the “displayType” function.

(I rarely use this one, so don't worry if it's too much.)

These next couple of sections are going to be simple ways to update, remove, or lookup objects.

Object lookup

Say you wanted to simply look up a certain letter in a huge database. all you would have to do is call the variable or object with a square bracket with the index number of whatever you want. (this is super simple data, but this comes in handy when there is more complex data) Example down below.

Remove Objects Properties

Here we have an object with different dishes. To remove a property from the dishes object all we have to do is use the “delete” keyword.

It returns “true”, when finishing, showing us that it actually deleted it. Then you call dishes object and now our cups are gone.

Testing Object’s for Specific Properties

Here we use the “hasOwnProperty” method to test if an object actually has that property in that object.

we use the same example as before with the dishes object and we run the “hasOwnProperty” method. (I also wanted to keep in the “error” because I passed in the argument without quotations) Its just something good to know. Anyways, it will turn “true” if the property is actually in the object or “false” if the property is not in the object.

Accessing and Modifying Nested Objects

Nested objects are very common in data. it's a good thing to know how to get this information out. we do this from dot notation, bracket notation, and chaining them together.

Here we have an object called “ourStorage” which holds two objects, “desk” and “cabinet”. within the desk, we have a single “drawer” .

In the cabinet, we have two more objects called “topDrawer” and “bottomDrawer” and Then they have information inside of them.

let's start simple, let's get the stapler from the desk.

We used a series of dot notations to get it out. First, go into the main object “ourStorage”, then we want to go into the “desk” and then into the “drawer”. whihc returns us “hooray we got the stapler”

Lets try getting the secret file out!

So here we hop into the “ourStorage”, then skip the desk object (since we don't want the desk we want the cabinet). We see the cabinet and then ask our self “top or bottom drawer?” We say “topDrawer” ok then what folder NOW? we choose “folder2” and there we have it, “secrets”!

side note: if for some reason any of the properties, had a property name like this “top Drawer” with a space. you would have to use bracket notation to get into it. Its not the same as “outStorage.cabinet.topDrawer.folder2” it would look more like this “outStorage.cabinet.[“top Drawer”].folder2”

Now, If we wanted to change the value of one of the embedded files, we would get into the data with “outStorage.cabinet.topDrawer.folder2” But, then set an equal sign, and then add a vlaue of our liking.

If you called “ourStorage” again you will see the secret is gone and “mr peanut” is therein replacement.

Moving on!

Generate an array of All Object keys or values.

Last part i swear.

How to generate an array with all the key (properties) from on object. we do this with Object.keys() method and then pass in the object that we want to look at. (simple i know.)