Create JavaScript Objects

[00:00:00]
>> Will Sentance: Objects store our functions with their associated data. This is the principle of encapsulation. We'll see it does extend, meaning we don't get access elsewhere, but for now, it's putting them in one place and it's going to transform how we can reason about code. It's going to enable us, hopefully, to not have to go search for the functionality that we want to run on our data, but instead, our dream is to be able to do that line at the bottom there.

[00:00:28]
Call the functionality, run the functionality right there, to the right-hand side of a dot on the data in the user object. That's our dream. It may seem trivial people, but that is our dream. I mean it doesn't seem trivial, it seems profound. That is our dream, to have our functionality available to the right-hand side of a dot on our user one data. So here we go, let's do it and jump into our code.

[00:01:03]
In our line one, we, as always, have our memory, we have our thread of execution, we are going to get walking through our code. We're going to create what I hope is stage one of an object-oriented paradigm, an object with data and functionality bundled up, so I'm not hunting off in my 100,000 lines of code for what function can be used on this, because I don't want to be able to run off and accidentally use my increment function on my Quiz League board object of data, so that I'm accidentally maybe increasing everybody's score.

[00:01:38]
I only want to be able to run it on my user data. So, we have an object. Chris, walk me through our first bit of code here, creating our first object. What are we storing in memory? Um, user one. User one, and it's what? It's an object. Big old object with what properties? Um, name, score and increment. Yep, name, score, and the value of name is what? The string RE. Amazing. Should be in honor of our favorite online viewer, Ali, but unfortunately Ali, you didn't make it in, and the score is what?

[00:02:17]
3. And increment is what? A function, what do we call a function, oh, it's your, my lovely Chris, it's your chance for your big comeback from yesterday. What do we call a function stored on an object? We call that a method. We call it a method. For those of you who are following along, our brilliant engineer in the audience, Chris, is right. We call it a method. We're not running it right now, we're just saving it.

[00:02:50]
There it is, but can we do our all important thing? Can we run to the right hand side of the dot on our data, that increment function? Do we have access? Let's do our lookup. What do we do, Chris, where do we look for, what do we do first? We look for user one. Do we find it? Yes, yes. And we look for what on it? Uh, increment. Do we find it? Yes. You bet we do, and so we create a brand new everybody. Execution, execution context, and we execute it.

[00:03:24]
Beautiful. We're happy. Object oriented paradigm is finished. Yes, no. Let's create some more objects. Uh, what alternative techniques do we have here for creating objects? So this was called an object literal. We are literally defining it right there, making it live. What other techniques do we have? Yes, please, Joe. We could use bracket notation. Yes, we could use bracket notation. What's our more standard way, just day to day?

[00:03:48]
To create the object or to add things, so you could just do dot increment equals. We could do our dot notation. I think that's what I'm going to do next. Yes, creating user 2 using dot notation, declare an empty object. Uh, there it is, Michael, you did so well there. Help me out, what do we add as we assign the property to that object, one by one, using our dot notation. Uh, so yeah, we initialize an empty object, yep.

[00:04:18]
Then next line, name is equal to J. Yes, beautiful. Next line score is equal to 5. Yeah, beautiful. And next line we add an increment function, yep, definition. Beautiful, there it is. Can we still do our user 2, it's not on the code there, but can we do our user 2 dot increment, our dream, our only goal is, can I use my function on my data by the dot notation? Yes, yes, I definitely can, there's my increment function, I can use it.

[00:04:51]
Amazing. What's another way, we didn't hear it, but what's another way that I could create an object? Object.create. Who said that? Matt, well done, Matt. Matt's here to my rescue, creating user 3 using Object.create. It's going to give us fine-grained control later on over this object and what it can do, but for now, people, our user 3 here, which is going to be the output of running Object.create, passing in null, is going to create what?

[00:05:34]
Well, it's going to create a big old empty object as well. To which we can add the properties. Matt, keep walking me through the properties. Uh, name, which is Tam, yep, score, which is 9. Tam is our expert in this game and increment and function definition. Beautiful, can we do user 3 dot increment? You bet that we can, yay, yay, yay. OK. Uh, I promise you, these different ways, this last way is going to turn out to be very, very useful for us later on, giving us fine-grained control over, so hold onto it in your memory, giving us fine-grained control over certain characteristics of our object.