5.3 Objects

JavaScript is an object oriented language. Basically that means that we can write our software with a mindset of working with objects. And if you're new to this concept or you've heard the term but not necessarily know what it means, basically we just work with objects. And it's very easy at least it was for me, to wrap my head around because we live in an object oriented world. Everything that we come in contact with or interact with, is an object. Now the computer in front of me, the keyboard, the mouse, my cup of coffee, everything else that's on my desk, they are all individual objects. They have properties, which basically describe that object. For example, my coffee mug is a navy blue, so it would have a color property to describe that coffee cup. But then they can also have their own functions, things that would execute, or they would have a certain purpose. For another example, I have a little container that has all of my guitar picks in it, and It's just a simple container, you open it up, and you close it. So there would be two functions, one for opening, and one for closing. So what we do then is take all of this information and group them together, to form individual objects. For example, let's say that we want some variables that are going to represent individual people, so we will have a first name variable, and a last name variable. And the values here don't matter, but we have two variables then that can represent an individual person. We have first name and last name, but let's say that we want another set of variables to refer to somebody else. So we can't have two first name variables that reference different values, that's just not possible. Because what we end up with is just a single first name variable, and it will contain whatever we assign it. So instead what we could do is have a first name one, and a last name one, and then a first name two, and then a last name two. And that would be set to Doe. Now that's not very descriptive so maybe we could do something like this, where we could have Jeremy first name, and then Jeremy last name. I mean, there's a lot of different ways that we can approach this. But as you can guess, this will be rather cumbersome, especially if we need to refer to multiple people. So instead what we can do, is kind of group all of this stuff into their own individual objects, so that we have a single object that represents a single person. And that would look something like this, we would have a variable called Jeremy, and then we would assign it a pair of curly braces. Now in JavaScript, what we are doing is creating an object whenever we do this. And it's not the only way that we can create an object, we can also call the object constructor. A constructor is just a special function that creates an object. So here we have a function called object. We are using it in conjunction with this new, so we are essentially creating a new object. But that's quite a few characters, and instead we just use the shorthand version which is just a couple of curly braces. So here we've just created an object called Jeremy, and we can have properties on this object, and a property is really nothing more than a variable. So if we want it to have a first name variable for this Jeremy object, we can do that. And we can assign it the value that we want. Now notice the syntax here, we are not using an equal sign, we are using a colon. And that's just the syntax of what we have whenever we create an object in this way, this is called an object literal. Basically, what that means is that we literally have an object defined within our code. These strings that we are writing are string literals, because they literally exist within the code. So if we have a first name property, then we can have a last name property, and that would be Jeremy McPeak. So that whenever we want to refer to this individual person, this Jeremy person, we can have Jeremy.first name, that would give us the value of Jeremy. And then Jeremy.last name, that would give us the value of McPeak. And this way, all of that information is just grouped together in this single object, so that it logically makes sense. We can essentially do the same thing for our John Doe's. So let's go ahead and just copy and paste here. So, this will be John, the first name, will be John and the last name will be Doe. And we essentially have that same functionality, so that if we want to get the first name of John, then we would have John first name, and then we would access the last name in the same way. Now a method is something that would execute or do something with the data of that object, for example, we have different people here. And one thing that people do is they greet other people. So we could have a method called greet, and a method is nothing more than a function that is attached to an object. So this is going to look a little funny because we have this greet property, that we are assigning a function to. And this is very different from defining a function like what we did in the previous lesson, the same information is here, it's just displayed a little bit differently. We start with the name of the method or the function, and then we have the function body that comes after it. And so this greet method could accept a person object, and then it could simply greet that person, it could say Hello, and then it would include the name of the person. Now, what we want to do here is called string concatenation. We wanted to take multiple strings and essentially add them into a larger string. And we do that with a plus sign, it makes total sense because we are adding strings together. So what we start off with is Hello, and then we have our plus sign, to then essentially add the first name of whatever person we passed to it. And to use that method, it would look like this, we will have Jeremy dot and then greet. And we want to greet John, so whenever we save over on the right hand side, we see Hello, John. Now the reason why this is important, is first of all JavaScript is an object oriented language, and we work with objects. You don't have to, but when it comes to the browser while we kind of do. If we open up the developer tools inside of our browser, which it's just F12, there's a variety of things that we can use within the browser for working with our code here. But what I want to focus on is this element, because this breaks down the elements that are rendered within the HTML. Now of course, we don't really have a whole lot here. But each one of these elements is an object. And using JavaScript we can access these elements and we can manipulate them. And we manipulate them by accessing the properties on those objects and changing their values. And that is something that we will look at in the next lesson.