JavaScript 101 is a series of instructional videos given by DevMountain Web Development Instructors.Click here to see the entire video series.
Objects are a data type. They’re stored on a single variable, but underneath, you can attach multiple other pieces of data and information to access later. In this way, objects are acting like a collection of other data. In this video, we’ll dive deeper into what objects are and how to use them in your code.
Video Transcription
Objects are a data type. They’re stored on a single variable, but underneath, we can attach multiple other pieces of data and information to access later. In this way, objects are acting like a collection of other data. Let’s dive deeper into that.
Objects are Stored in Variables
Objects are stored in variables, meaning they’re a data type like strings or numbers. Well, strings or numbers are referred to as primitive data types. Objects are referred to as a collection data type. Collection data types and objects, in this case, have a purpose to store multiple points of information inside of them. It could be storing string, a number, and even another object.
You can put anything you want on an object. When you put data onto an object, it’s important to remember that that data type is preserved. A number will still be stored as a number, and a string will still be stored as a string.
The benefit of storing many things within the object is that we can use that one variable for the object and then dive down deeper into the object to access the sub data that’s stored within it.
Objects are Like a Box
If we were to talk about objects in their simplest form, they allow us to store multiple variables inside of a single variable. Objects, in this regard, are like a box. We put many things inside of them so we only have to hold one thing. In code, this could allow us to store tens or even hundreds of data points behind the same singular variable, allowing us to hand the box or the object off to another part of our code seamlessly.
If we were to continue our box analogy, we could put anything we want inside of the box. The only rule is that we have to tag each item with our trusty label maker before we put it in the box. This way, if we had 10 different packages of gummy bear inside of the box, we can be specific and tell our friend to get us the strawberry gummy bears instead of a different flavor.
A Common Construct
Objects are one of the more common constructs that we’re going to use in our code base, because often when we’re coding, we’re not going to be coding representations of something simple. We’re going to write code that works with users, and with the user, we’re likely going to have different points of information like a first name, a last name and address and so on. By grouping this information onto an object, we can refer to a single individual user and then be able to quickly and efficiently access all of the different points of data about that user.
The labels that we’re placing on items inside of our code, we often refer to as identifiers or keys. The key part of a key value pair, where the key is the label, and the value is the data that we’re attaching to our key, whether it’s a string, a number, an object, or an array.
Structuring and Organizing Code
One of the biggest benefits of objects is how it helps us structure and organize our code. Let’s go back to our user example. Let’s say I have five users within my website. I’m going to create five objects, one for each user. Each one of these copies for a user, we’re going to refer to as an instance. On these instances, I’m going to structure the objects the exact same way. I might track first name, last name, email, like we referenced earlier, but how did I spell email? Did I spell it with a capital Email? Did I spell it all lowercase email? Did I actually call the label or key electronic mail?
When we use objects properly, we’re going to use the same label for every object. This means if I’m working with user A, B, C, or D, I don’t have to try to guess or remember what I called the value for that user’s email. I simply know it’s lowercase email because of my consistent object structure.
Next up, we’ll discuss how exactly you can create and use objects. You need to understand that objects are really important part of JavaScript and many other programming languages. The more you work to understand and use objects, the better.
Objects Store Many Pieces of Data
Objects are used to store many pieces of data. Let’s see how that syntax goes. The basic structure of an object is to declare a variable and give it a name. I’m going to call this one, person, because I intend to make an object that represents a person. Just like any variable, we use the equal sign to a sign of value to the variable. Then we supply a pair of curly braces. When curly braces appear on the right-hand side of an equal sign, they are used to indicate that we are creating a new object. Within the curly braces, we are going to define the many pieces of data that we would like our object to track. Because this is a person, I would like to track a name. To do so, I provide a key or a label just like we’re giving a name to a var. The differences inside the object, we do not have to prefix our variable names with var. We know that they are variable names because they are contained within the curly braces.
The next difference is I do not use an equal sign. I use a colon. We’re doing a list, and this is the syntax, how we are specifying the different lists of values that we’re going to contain within our object. The name of our person is Joe Dirt. This is neat, but it’s just one value. The real strength of objects comes in tracking multiple pieces of data. Let’s say the state for Joe Dirt is Alabama, and let’s say the haircut for Joe Dirt is a mullet.
Inside of my object, I have declared three key value pairs. The first key is name, and the value associated with it is Joe Dirt. The second key is state. It was assigned a value of Alabama, and the third key is haircut with a value of mullet.
You’ll notice that if I am going to have a key value pair follow a previous key value pair, I must separate those with a comma. This is how JavaScript knows that the value was done, and we’re creating a new key or property to track on our object. This is really useful. We can create store … We can create objects and store related data together. One of the real values of this is passing it around and sharing it.
An example…
Before we look at an example of that, let’s look at the most basic way to go then interact with person. Let’s do a console log to console log a greeting for our person. Hello. I’m going to use string concatenation here to add on person.name. Let’s concatenate some more stuff here. Hello space, let’s do a period. You are from plus person dot state plus continuing on the string concatenation here. Person Dot state plus. I like your plus person dot haircut. If I hit F5, I will see console log. Hello, Joe Dirt. You are from Alabama. I like your mullet.
This worked in the following way. I created a string, hard coded, I used the plus sign to say I want to add onto the string. What do I want to add? I started quotes here, and ended quotes here. So we’re out of the string, and we are back in JavaScript. Within JavaScript, I accessed a variable called person that found this entire object. Then I used something called dot notation. Dot notation is used with objects to dictate that we want to go inside of the object itself to a value underneath it.
I walked into the object person, and then I walked inside of person to the key or label called name, and just like any other value in JavaScript, I am not getting name literally, I am getting the value that name is referencing. So, in this case, I am getting Joe Dirt.
I then repeated that pattern multiple times to add on another hard coded string, and we know that from the color again to access another variable. Once again, we know that from the color, but this one walked into person dot state.Then we continued on and added another string and finished off with person dot haircut.
Let’s add another property of what we can track about this person. Let’s do age. How could I console log Joe Dirt’s age? I would like you to pause for a minute and think about what you would type out to make this work.
I hope you gave that a solid attempt. Even if you got it wrong, you’re going to be learning something a lot more effectively by having tried. If you didn’t try, pause and really try.
Okay, let’s see what that answer would look like. Yours might not be identical. What’s gonna be important here is if you got some string concatenation and the dot notation. So, let’s say person dot name to pull in the name, plus is plus person dot age years old. Yours my look different. You didn’t have to have person dot name. If you got one dot notation and one string, call that a success. If you didn’t, call that an opportunity to learn, and you know how to do it now. I’m going to hit F5, and I should see both of those logged out.
I skipped ahead and added a second person object. You’ll notice I use the exact same keys: Name, state, haircut, and age. I want to do this to show the versatility of using objects with functions together. The two pair up really nicely.
Next, I’m going to make a function called say hello, and I am going to receive a parameter called greeted person. Now that I have this parameter, I can access it just like I would any other variable, and I happen to know that this is going to be an object because I’m writing the code, and that’s what I want it to be. So, if this is an object, I can access dot notation.
I’m actually just going to move our console log up in here since we typed that all out, and then I’m going to replace every copy of person with greeted person, and we’ll go ahead and put that console log in there as well. So now, if this function receives an object that has name, state, age, haircut, it knows how to greet them.
This makes using that function really reusable and flexible. I’m going to invoke say hello and pass in our first person. This is going to take our object, pass it into say person or say hello. Say hello, receives that object, and then uses dot notation to pull out the different smaller properties within that object.
In my opinion, this is a lot better than having to type out every parameter every time. I could have to take name, state, haircut and age, and I received those repeatedly, and then pass those in down here with person dot name, person dot state, person dot haircut, person dot age. They’re not doing the same thing, but you’ll notice I had to pass a lot more information around. This becomes extra tedious if I decide to track even more things about the person. Not only would I have to update this object and that object, but I have to update all of the different parameters and arguments as I’m passing them around.
I’m going to press commandZ, control Z on windows, repeatedly to undo what I typed. Very useful tool to get us back to where we were.
Another thing too, again, refresh. Person here is referring to the variable because we’re outside of the function. Greeted person is referring to what we’re receiving in. In this case, it’s going to be person, but if I invoke, say hello again and pass in person two, greeted person will represent our first object in our first invocation, and it will represent our second object in our second invocation as that is the parameters were passing in.
I’m going to go ahead and press F5, and now you can see I saw hello to both of our persons with their ages logged.
[cta id=”585″ vid=”0″]
