7.1 Defining Objects - Video Tutorials & Practice Problems

<v Instructor>There are actually a bunch</v> of different ways to create objects in JavaScript. We're gonna go with the one that I feel is the most intuitive and it's also probably the one that's currently most commonly used. But it's quite possible that this will change. This is one of those situations where we just have to deal with JavaScript being an evolving language. But this will be more than enough to get us started. The result of defining a new object will be a so-called constructor function, which we've seen so far a few times in the context of dates and regular expressions. The constructor function new will let us create or instantiate a new object, also called an instance. More concretely, we'll start by defining a phrase object. Something that we'll use throughout the rest of this tutorial to continue developing our palindrome theme. In particular, eventually our phrase object will allow us to detect more complicated palindromes like a man, a plan, a canal, panama or madam, I'm Adam. That is to say, phrases that can qualify as a palindrome even though they're not literally the same forward and backward. To get started though, all we'll do is define a phrase constructor function that takes in an argument, which is the content, and then set a context property for the object. So what do I mean by this? Let's take a look in the REPL. All right, let's take a look at the creation of a new object. Perhaps surprisingly, it's actually just a function. There's a different convention though. Instead of an ordinary function that starts with a lowercase letter, we're going to signal that this is an object by using camel case with a capital letter, like this. It takes in an argument, which is the content, and then as usual, we have curly braces. And now we're going to assign a property, which we'll also call content. Now, this property belongs to the object, so we attach it to the object itself. And inside the object, we can reference the object itself using the keyword this. This.content equals content. Like that. So now, for example, we can bind a variable, say greeting. This let equals a new phrase. This is now the constructor function. New Phrase and then Hello, world! say. We can access the content property, as we've done before with things like string.length or array.length using the dot notation. Now, it's important to understand that this here is just a parameter, and this is the named property. It's conventional to use the same word for both of them but it doesn't have to be the case. So we could do something like this. And this would work just the same way. It would be a little less intuitive for someone reading the code but the computer doesn't care. Now that we've seen the basics of defining an object using a function, let's put it in our file, which we called palindrome.js. Function Phrase content. This.content equals content. Remember, this is the phrase object itself. In particular, this refers to a specific instance of phrase. Every time we'll use the new constructor, we create a new instance, and that creates a new object, and inside the object, this refers to the object itself. Let's run this in the REPL just to make sure this is basically working. Remember, we can use load, preceded by a dot. All right, now that we've added a property, let's add a method. We're gonna move this palindrome function into the Phrase object. We'll start by cutting and pasting this definition here. All right, so the way to make this a method is to bind this function to a variable inside the phrase object. We can do that using the same this notation that we used for the property. So in a sense, the method is really just a property that happens to be a function. In this case, we'll call it palindrome. So this.palindrome equals the function, which is also called palindrome but doesn't have to be. Now, note that the phrase in a sense knows its own content. So we no longer need the string argument. We can replace string with this.content. Thus changing palindrome from a function of one variable to a function of zero variables. So this is how we access a property inside an object. So let's save that and check it out in the REPL. So the way we should call this is the phrase dot the name of the method. That's how we've been calling things on the built-in JavaScript objects. So phrase.palindrome and it has no arguments. So this should return true because remember, we're down casing this. We're running toLowerCase, so racecar is a palindrome even with the capital R. Aha, and we got an error because I forgot to run load again. I'm gonna copy this because remember when we load it, it actually runs the command, so I can't just up arrow, so I wanna copy this here. All right, now .load. Paste in the thing and then, you can see palindrome is a function, it's working. There were no arguments and this should return true. Good. So you see we can think of a phrase as a self-contained object that knows its own content, and knows whether or not it's a palindrome. We can ask it hey, are you a palindrome? And the answer is yes, true, I am. We haven't actually improved the palindrome detector here but by attaching it to a phrase object, we can now think of it in more convenient terms. A phrase is an object that knows its own content and knows whether or not it's a palindrome. This is a good foundation for the more sophisticated palindrome detector we'll write in chapter eight.