Transcripts
1. Class introduction: All right, welcome to yet another class my skill share students. I'm super Antinous class because this class is all about objects. Why objects are important? Well, they are so important because they form the basis of pretty much everything we do in programming. In fact, is a whole facet of programming called object oriented programming, or 2P for short. So Clyde, cool, they're important, but what exactly is an object? Well, an object can be anything. And in fact, when it comes to programming, it's often easier to ask what is not an object? And the answer to that is not much. In fact, in one of the previous classes we fall what variables were in JavaScript? And you can kind of think as an object like a variable. But on steroids, because an object can hold not just one piece of dots or one piece of information. An object can hold many different types of name value pairs. If this is going over your head, don't worry, this clause is going to deal with it in detail. Now, in this class we're going to be covering the basics. What is an object heart works have looks. We're going to be then getting a bit more advanced as well. You know, as programmers, we often have a lot of flexibility in how we code in many ways to skin a cat, in other words. But sometimes that can lead to confusion. For example, the many ways to create an object in JavaScript. And we're gonna be talking about those different ways. We're gonna discuss when we should use one over the other. We're going to have a lot of fun. We gonna see practical examples. So this class is going to be really, really full of fun and useful information. In fact, it's pretty much one of the most important lectures because objects like a seed form the basis of most things we do in programming. So with that said, let's jump into us, grab a coffee, Gregory Boyle, whatever motivates you. And I'll see you in the next lecture. C naught.
2. What are objects: who we are getting into objects. This is a mess of section very, very important for you to understand. So I'm excited. Let's start getting through it. Remember a while ago we see that there are two daughter types in Java simple and completes . And because the programming community one intimidate all of us, they term it primitive and objects. So what is objects? This is the whole point of this section. Let's step back and Google JavaScript. Yes, What comes up on the front page sees JavaScript is an object oriented computer programming language, and this brings us onto objects. Programming is obsessed with objects. Professional programming languages use a style of programming known as boop or object oriented programming. So what is an object and object could be a garden house, a brick. A car could be a button on your Web page. Sometimes it's actually easier to ask what is not an object, and the answer is not much
3. Name and value pairs: and I mentioned that objects or a whole bunch of name value piers. I just want to stress this point again and drive it home and name an adventure and the name and the value of separated by colon. You've got your name on the left colon and your value on the right. Let me give you an example. And I remember lives at 100 Main Unit 31 on the third floor. Well, the address is the name, and the actual occasione is the value and again and separated by colon. But we can represent us in another way. You might want to separate it out. What? I mean, let me show you. It's take their dress. Let's open up a new object. And now in the JavaScript engine sees those curly braces. It's not an operator. It's gonna assume that there is an object. So the address is gonna be the name, and the value is going to be their entire object. So that's it. Breath it up. The street is main again. That's a name in a very now we just put a comment. Then we've got number, which is the name Coal on a name the value, which in this case is 100 we can keep going on. But now we've got a unit. This is another point. I went to the streets. We can actually have nested objects and name value peers within an object. Yeah, we've got the floor, third floor, and then number 301 again. Unit. His name. And then entire object is the value. I heard. This is starting to make sense. It's just name, very paid. Let's move on.
4. Objects store data: So objects are a whole bunch of name and very pigs. We were just discussing a minute ago about what an object is and we concluded an object. This just about everything. So does this. Me? Well, let me give you an example. Before we start coating, you might be thinking on men, you know, we went through variables. Why do we even need objects? Well, you illustrate by example. So he has one week what? His details. And remember how he had his details. Invariable named ballons favorites loaded. All is well. But what happened when you got thousands of users on your website? And if you randomly pick a container from your pantry, how do you know who that belongs to? And even if we look at the variable name, it could be multiple warnings on your website. So how do you know that that money is actually the one related to these containers? Well, this week objects come into it. And what I mean by that is you almost have to ring fence all these variables and put a label on it and say this is the general look and feel for every person on our website Once you've done that, you can assign variables, and you can create multiple instances off this person. So for our one e. Example here, this is a real person on our side. You can ring things him and you condone, say that he's an instance off a person object. And in the hitting, its season object is just a whole bunch off name value Piers. That's all that this means. So his balance of fans is and name and the values 34 is he logged onto the site that's the name of the variable and then knows the value so you can see objects and variables are kind of related. You can actually say objects are a whole bunch of variables within it. And how do we create this new one? Object? Well, if we define the structure being a person object, all we need to use is the new keyword, and we're going to be getting into the nuclear later. But just understand when you do that, you literally created a new object, a new instance off that, and here we've defined it into variable one. Don't worry. If you don't understand too much off, I'm losing you a little bit you're getting. It's so familiar with this. By the end of the sixties, just take a step back, take a deep breath and just remember all an object is is it's a way to store your daughter . And because we can store daughter an easy way, it makes it easy for us to access the daughter as well. On object is, don't get lost in all the detail. Let's move on.
5. Objects vs Variables: Okay. Okay. So why have objects? Why not just have variables? Me quickly show You should say why objects? Let's assume we have a motorbike. It's blue. Two wheels and it's a Yamaha. We can represent this in an object way. Object oriented. Well, we can just use variables. Let me show you the bike make equals Yemma lead back. Color equals there and the black wheels was to. So this is possible. We can do this. But now you got to start thinking in the future. How do we attachable these to one specific user and in the user wants to change just one of these. It's gonna become very cumbersome, which is? We objects come into the picture. This is variables. Now we can use Jakes. Willing to do with an object is used the curly braces. We've actually created an object right now, even though nothing's in it and I'll prove it to you if we just console looked back out, you can see is an empty object and we can go type off. It's just Consul. Low time off, Like we could see, black is an object. How cool is this? Easy to create one right Okay, so say is Emma, Come on. Wheels to This is an object you can really start feeling and getting a scenes as to how much easier it is to work with objects. And it is variables, but they kind of similar variables. We have named very piers as well. Bike make very black color. Really bike wheels. Same with objects. Name value names. So they are very closely related. But it is just much easier working with an object, and it is a variable, as you can see in this example. But before we get into even more detail, let's continue their few other points we need to discuss.
6. Properties and Methods: we've seen that objects consists of a whole bunch of name value pays. But what? All these names and what all these values well again, take a step back and object can only contain two things. That's it. It's not complicated properties and methods. What do I mean by that? Well, let's just take a simple HTML. But what are the properties of that battle properties or things like width and kind? What methods I like to think of methods is doing words. So, for example, when we're talking about a button that could be on kick of its or even on your keyboards when you click, enter or even when you take your mouse and you hover over that html batter. Those events on meat that's attached to the object cool. So we've seen objects consists of properties and methods. What do we mean? Let's start typing card and it's a We have a bike. One of the ways to create an object is to you. What would a sneeze coming for men? One more? No, I'm sorry. So let's create an object and let's just call our object back. Think about object is a big content, and that said the make about Bach is Yeah, Uh huh. Color is it's got wheels, but two of them. So we've done properties now. But remember, objects consists off properties, and minute method is more for doing words, something that happens. So this defining method. Let's call it sound and all this myth it does create some and let's say we just console log . Do you have it? An object consists of properties, the properties. Here's the make the color, the wheels and methods. Yeah, we just created a sound method. But how do we exercise properties and methods? What do we do to extract it? Let's have a look.
7. Accessing properties: a lot. Objects have properties associated with that object. How do we access a property off? The object is two ways with ones by using the dot notation. And then you just stayed the property name after the doctor and the other one square brackets. And then you can write the property name in between it. Let me tell you what I mean. Let's start accessing some properties. Remember how we said not all square brackets? It's trying. So let's access the object. In our case, it's bike. Let's say we want to access to make and here we just have to console log it. You go Is the name of the bike? What about using square bracket notation? It's console look like open scream records and its type in the property Name that say we want in color niego both flu. What about a miss it the same thing. This execute the method by accessing bike using the DOT notation. We've called it sound and not to execute omitted and we're gonna be getting into functions later on and scores. But you have to follow it by parentheses. You go console logs room. Now The other thing, I didn't mention in the nature is that we can use the dot and square notation not only to excess properties admitted, but also sit new problems and to set new minutes on the object. What I mean for trade. Six new properties. The jade we cannot say bike And what property do you want to end? Let's just say top and we want the type to display the type of fuel consumption, petrol or diesel that say this is picture and let's do the same thing. But using Brexit notation. And let's say this is the yeah, we have to impose it in a strength. It's a It's a 2019 model. We have literally now ended these properties to the bike object. I approve it. We just console bike out. You can see we've included type and the year with this notation. And what about if we attach a property to object? But we don't define a value, we don't assign it value. Well, in this case, it's not gonna be No, it'll be undefined. Let me show you what I mean. Let's say we want to put the model onto this, but we leave it like this. We don't actually assign a value to model on their back. What do you think's gonna happen if I try and console? Log this console bike? No, you have it. I'm defined. It's not know so these are some cool nuances with objects, but dream on the previously Charles has said that all objects have properties or you get some very weird results. On the back of that, let me show you a few examples. Let's delete all of this. Kind of feels weird because I write all this stuff and then just delete it. It's like digging a hole. I need to fill it up again. But anyway, we're learning surprise. We pay. Let me give you a few examples of what I mean when I say all objects have properties and we can attach properties to any object. So let me say, Yeah, uh, let me say you can ed properties to just about anything in job script. And let's just go with example one. For now, it's just create an empty object. Let empty cleaning t object. Now let's attach properly called a T, and we cancel out empty. We get our property and just bear in mind that empty got a mean nothing until we assigned a value high to their property. A. But this is an object, and we know we can add properties to objects. What about if we create an array? Let's give you another example. Let's look at the example. Number two, it's coming. Told us off Did say we created in T All right. And again, we can put a property on you into don't pay equals. All right. And if we cancel love that out, it's an array of the property. Hi. But you gotta be careful with stuff like this because although we can add properties to anything in jobs, capital, just about anything doesn't mean we should. In this instance, it might makes up four loops, but it gets weirder. Look at this. Me coming this Arctic in. Let's look at the third example weaken. Define a function called empty. Nothing in it. We can also touch a property to that. And if we look, get out, get a function with a property off. Well, let's make it high to be consistent with everything else. How weird is this? You just put properties on anything in Jarvis coat, just about anything. It's continue
8. Creating objects - intro: so we've already been seeing examples off objects playing around with him, but I want to be more specific now. How do we create object? Well, in other programming languages, you need a Kloss to create an object. But in Java scripts, an object as a stand alone entity is no needful classes. And if you actually take a step back and you look under the hood, Java script doesn't have a true class. Everything in JavaScript is pretty much object. So the question is, will in How do we create an object? We've really seen some ways that we've created objects, but I want to stress this. There is no right way to create an object. That's right. You can choose. And that's what makes Javascript very dynamic and awesome. It's very flexible. You must just use whatever method suits your situation. At that point in time, I want all the different ways we can create an object in JavaScript. Well, I can break it down into four. You put object, literal object constructor object that creates, and you've got this New Year's class, and I guess it's only natural. Let's start with the very 1st 1 on object literal, an object literal is also known as an object, and Michelle Isar, the reason they call it an initialize is to be consistent with other terminology. Using other programming languages like C Plus plus and creating an object fire object. Literal is one of the easiest ways to create a variable in Java script. All you need to do is to find property values inside could embraces. We've seen this. We've done examples where we said, Let bike equal and we had these curly braces and all we do within the curly braces, we use a common to separate multiple key value pits. Let's have a look at another example of how to create an object by object, literal syntax.
9. Creating objects: 1. Object literal: for example, Number one. Let's just make it the most simple. It's great and Inti object. Remember how to define an object literal. All you need isn't opening, closing, curly brand. So we've done. And that is literally now an object. If I console, load that up, we get an empty object, which is what? The blue showing? Okay, what about creating an object with one property? So let's create mistress Go object one property. The dog equal opening and closing curly brackets to find an object. It's a has a name and it's a the name is We'll see. So now we've defined an object, an object with one property. And remember, properties are well, they're just key value paid here the keys, name and the very was goofy. Constantly we get our object. But let me emphasize something here. You do have to specify a key and a value in order for this to work. Otherwise you will get thrown in. Eric, let me give you an example. So you have to specify birth key and Betty. Yeah, If I go lead animal, he calls type and I just leave it. I get an era because it's his type is not defined, so I have to assign it value. So let me say memo now. I don't get any errors and even making it more simple in that it also a quick if I go let animal too. And I go just type. The same thing happens. It's This type is not defined. So you see, I have to specify both in order for this code to be very this. Just delete these quickly. What about methods using object? Literal Syntex? Let's just create an object with one minute. Let's just call it Welcome, Mrs Say you want to give a welcome message to user Welcome message. I've been in close curly brackets, defines an object. JavaScript knows this is now an object. Now it's a tetra method and it's cool. The method say hi And this myth it will be a function and make It just means a function, by the way a function is outside of an object and omitted is inside of an object. But the same thing and let's say we have to pass takes to this function as an argument, and we're gonna be getting into functions in one of the upcoming section So don't panic if you don't know what I mean. And it's just console log that takes up to the screen. And to make it more clear, just wanna come into Yes, we understand what we're doing. This is and object with one method. Now that's excesses. Method Welcome message dot remember? That's how we excess meters and properties say hi is what we've called it and it needs to be passed a stream so that say hello. And there you have it. Its consulate log Hello to the screen. OK, but up until now we've just been dealing with properties or we've just been dealing with methods. What about if we combine properties and methods? No problem, says his object with properties and methods. So it's define a person object in this person has a first name. This person has a properly called age, and it's a There's a message. Miss it And it said this may just console mugs. This first names that we plied is this Age is old, so they haven't We have a person object with properties and those properties of key value peas, and we've also included a message method that's trying to access that a person we execute and as soon as we do that executes a function. I hope you're starting to get a bit more comfortable with objects and how we create them in Jarvis Coat. That's don't get too complacent yet because this was only one way to create an object. Now let's discuss another.
10. Creating objects: 2. Constructor: We're getting very familiar now with creating objects. Fire the literal syntax. And like I mentioned, it's the most easy way to create objects in JavaScript. But the second type is known as an object constructor, and this is an alternative way to create an object. But don't worry, the constructor means making or constructing something to don't get intimidated by the word constructor function. Because all it is is that it's a normal function that just creates an object. I don't know why we have to have all this job. I guess it does just simplify things instead of calling it a function that creating object , you just call it a constructive function. Okay, so how does this work? Well, in order to use the object, construction have to go through two states. One you have to define your object kind of makes sense. You have to define what it is you wanting to create and to you've got to actually construct it. You've got to call it and you do this with the new key would let's have a look at a quick example
11. Constructor function example: construct their functions that see a few examples. Let's just schoolers construct er functions. Next order. For an example. Remember what the first step is in creating a constructive function that it's to define your actual object. So let's define the object. That's six. You go here, stick one, find the object, and to define the object we need to name it. Let's call it a motorbike object, and you noticed that I included a capital M Capital later. That's two standard convention so in you and I are going through code and we see a capital letter. We know immediately that it's an object and it was constructed via the constructor function . And, let's say the motorbike, his color and you when it was made, it's actually also set of year. Let's just let's just put name, name and color, name and color. And what we're gonna do is that when we create an object where you want to define properties on it immediately when we create, so that's why we want to make this name. And this name will be the name of the object we actually create later, and we want to make that equal to what we pause in the function in the construct, which in this case, his name. So we also want this color to be coming. That's Steve one. Remember what stick to us stick to was to call the function. Listen, you he with. So let's do that. That's define a variable. Let's call the variable my mark And let's say that equals mute motive. And we've seen above that it requires two arguments and name and color. So let's say the bikers a Yamaha and it's black and just take a step back. Just understand what it is we've done you. The first tip was to define object, and you can kind of think of it as a blueprint. And we've said in our blueprint when this is called, it's gonna be called with two arguments and name and a color. We want the new variables name to be equal to the name were forced to it, and the new variables color to be the color with pasta. And then on Step two, we've actually instead created that object. We've called it with the new keyword. Now, if we console log on my like we've got a name properly name called Yamaha and color called Black. How awesome is that? It's just automatically done it for us because we've used a constructor country. And what do you think will happen if we console log the time off my life? Well, it's an object. Of course it's an object we dealing with the creation of objects here. But now, before we move on, there's another way we can create an object using a constructor function that is using Java scripts in bolt object constructed. But I'll just be open and honest. Now it's a bit more cumbersome, takes longer to write, and I much prefer something like this. But for the sake of completeness, let me show you how it works. So this is now using Java scripts in bolt object constructed. Let's do that now and for sake of being exciting, let's don't use a motorbike. We board of that. Now let's do a person object. You just zoom in a bit like person. Equal new object. That's what that object is. A method bolt into job script itself. That's an object constructor, and I'll prove it to you by console looking person. You can tear to object, and if we go type off person. You see that it is an object. The object has been created. But now the pain with this is that to ed meters and properties, we have stood manually so it's better name. We would go person Dr Name girls money Listen, don't age equals 35 Now when you counsel log it, the object is getting meat but it's a pain that's a painted were to do that manually. So if it's such a pain doing it manually, how would we do this exact same thing using the constructive function we did above with motorbike? Why don't you pause a video have ago? Sieving Okay, let's do this using a construct the function Same is above but with a structure function and you'll see how much more intuitive and easy it is. What's the first step for the constructor function? That's right. You got it defined the object. So let's define it is person and person's gonna take a name in an age and its name will be name in this age will be a change. Now we want to create a user. In the above example, we call that use of person, So let's say this person to that comes along and all we need to do now and this is a sick and stick to the constructive function. Do you remember what it waas? That's right. Just calling that definition with the new keyword. So we say this is a new person and that requires two arguments on name. Cool it and an age, say 35 and console log person to It's a community already assigned the property names, name and age to this object. Hucles US. Hope you're having as much fun as I am, but we are not done yet. That is the good news, so
12. Take a break: do. I meant And you know the son. That was sweet. Sweet success Well done for getting this for seriously. I'm just one of the pools. Take a stick back from whatever it is we learning about, which is objects. And I just wanted dissecting Thank you for getting this far and well done for getting this far. You know, most people have lived in life. Don't put in that extra hard work. Don't go that extra mile to get a hip on. So, Well, then I'm very, very impressed. Okay? Enjoying the course. And I just wanted to say you might even getting but frustrated in the sense that, you know, we're learning about projects learning mother from waste. Great objects struck the functions debt. And you might be thinking yards all good and well, like we've created people objects. We've created motorbike objects. But how do we actually extract this value and put it in the top? How do we work with daughter from a user interface uses on our lives? And let me just say you'll get there. I need to learn to walk before you run. You need to understand objects, how they work, exits, properties, six properties I work with, and I just want to say we're going to get there. We're gonna understand how everything fits in. But for now, just enjoy sit back. And I just wanted this video to be a bit of a and video. Get going. Go get a coffee. Going to cook whatever suits your fancy, and I'll see you in the next lecture.
13. Constructor Function vs Object Literal: great we're getting into us. But now you're probably wondering what is the difference between an object constructor versus an object literal? We know that an object constructor has distorted the findings object, and we do this with the function keyword and then an object literal just needs that I've been in closing curly brackets. Both methods about created JavaScript variable called person. A main difference, though, is what you can do with that variable. With a constructor function, you can create multiple instances with the new keyword. But with the literal notation, you only get a single object. No, this is just theory. Enough of it. Now let's go code. I'll show you what I mean.
14. Instantiation vs Singleton: I want us to look at in Stan Shih ation versus the singleton, approaching a bit more detail and in a way that you can understand we've really seen. One of the main difference is is that with a constructive function, you can instant yet as many objects as you like, and each object will be independent. It'll be a brand new object, however, with the object. Little Syntex. When you go and create an object, it always references the same original object. And this is known in the programming industry, and you can Google it singled object literal Syntex, you literally creating a singleton. All that means is that an object can only be in stand created once, and that any references to that object in the future, even if you create a new one, still refers to the same object. Let me show you what I mean. So here we're going to be creating a constructor versus the and let's first look at a constructive function. Okay, cool. Let's get into it. It's create a person object, and let's assume we want to give certain people venues to this person object, for example. Let's say that we want the membership status to be false and then only once the user goes through the whole sign up process doesn't actually become true. It's also give it a default name, and it's even put in a method in the Let me show you what I mean. So let's create a fire, the constructive function. And remember what the two steps all What's the first? It's right. The first step is to define object. Using the function key would. The second step is to call that object. So let's do the first tip, and that is to define object. Let's just call our object person. Let's say this membership status is false and will say this name. Let's just give a default name off, honey. And now let's just put in a message as well to make it more interesting. And let's call this method talk. And in this method, let's just console log and will use template neutrals. We've been through this before. We know what these are, and we'll just say the membership status off this person's name is this membership status. So there we have it. We have our constructive function object all set up, ready to go you're in what the second step was. How do we How do we access us? How do we create a new object that strike Winstanley? Yet you need Teoh Instant here, the object before you can use it. And let's say User comes on our site. And for lack of a better word, let's just call in person one who calls from you who's and now what's cool is we have access to all these objects. We've seen this before in our example. If I just cancel along person when we exits the talk meted, there we go console logs. The membership status of one is false, and this is straight out of the bosses. What's really cool about constructive functions? But let me show you. The difference is now, because that's what this election's all about. Let's say a second person comes along. Person two equals new person. And let's say this person to go through the registration process and he changes his name and his name isn't Wally. It's John. When you get through this, each person will be, and this is the crux of it unique. So if we got person one, don't talk. We've got the membership status of what is false. But now if we got person to dot talk, what do you expect would happen? That's right. The membership status off John is false. So now we've literally created two different objects. There are independent from it. I can even go person to and I could go person to membership status. Say they go through the whole membership that pay the membership fees. And now the membership status is true. You got two distinct objects. How calls us and now you're probably wondering, OK, call constructive functions. You've got it like it's making sense. But how? As object, literal Syntex work. Let me show you. And let me show you what I mean by the fact that object little Syntex creates. Singleton kept its great now literal syntax approach. And let's start defining our object. We got a person but membership status and we're gonna set that to false as initial value. We've got name which we're gonna sit to. Wally is the initial value and we've got our talk function. We'll talk me and all that does is console logs the membership status off this name Is this in Michigan status. So they haven't. These are object literal object that we've just created. But how is this different to the first time? We just did. Well, it's comment. All of this answer. We don't get confused. I was just coming everything out and it stopped. Looking at this house is different. Well, the first difference is that we can use this object straight off the bat. We don't have to stand here first. Let me show you what I mean. So this person, we can access the talk method directly. We don't have to go big person. One equals new person with the object. Little Syntex. We can use it straightaway. And what I mean by this is a singleton. Let me show you. Say we want to create Tom. It uses this object construct how we do it. Well, you can't just call person the same way we did with constructive function. We can't just say let Tom equals new person. That's gonna thrown era. And yeah, we seek person is not a constructive literally told us. We know a lot doing it, But what about just saying Well, let tom equals person. Okay, so it looks like we can do that that's console log Tom. And then heads exist. All those properties and methods call. It's all good, But let's try changed Tom's name. Let's say Tom his name and you guessed it is Tom. And now let's create a second person. Second person comes along. Call Cindy and Cindy says, Okay, cool. Cindy's name is Cindy. What do you think's gonna happen up when we access the talk method on Tom and talk me out on Cindy? Well, let me first do the talk meter on Cindy. It's more to talk. Let me just Consul locus Answer. Confused Vega. So Cindy says the membership status of Cindy is false. It makes sense. What about if I access that? Talk me, Tom, come tour? No, it says the membership status of Cindy is false, so it's so referring to Cindy. And this is the point I'm trying make with object. Little sentence is that it's always working with the original object, so any change you do here will affect that original object. Let me just drive this point time by giving you one more quick, quick example. With the literal notation, you're always dealing with the same object. Ding ding, ding Singleton. It's create an original object. Was name original. Simple. Now let's create a clone and Neck just equals original object. And this clone we want to give a name off. So we've done now is we've taken the original object. We've created a new variable. Let me just comment all these art so we don't get confused. Original you got. That's all we're trying to do. You just take a stick. Becker's We've created original object called Original, and we've given it a name of original. We've thing to find a new variable that is that object. So you'd almost think intuitively What should happen is you've created a brand new object in memory space that references a brand new object. Then, on that brand new object that we think has been created, we give it a new name off. So now you would think that the two objects in memory one with the name turned one of the name original, but with object literal syntax. This is a point. It doesn't happen this way. It references the same object. So if I want to access the original object and council that won't look at that, it's name has now been changed to clone who? This has been very important nature. Few tickets on very few people understand the differences between its continue because I do want to show you one more.
15. Constructor function vs Object Literal - final comments: it's clear that with the object that role Syntex, you don't have access to a constructor. Remember, with a constructive function, we could actually pass through parameters into their construct and sit up object the way we want to. So I actually want to show you what that means. Let's have a look. Let's say, with a construction function, we can construct our Jake with perimeters. We've boss into it. Let me give you an example that say, we've got object and it's just call it website euro and we pause in our euro off the Web. Sunt we say this your old equals the euro. We've passed into it and let's say we want to create a method. We want to show the euro and what this does. Is it just console logs? This Europe? Very simple. Nothing. Nothing too complicated. Now we've defined our object. What's the second step when using the constructive function? That's right. We need to call it with the new keyword. Let's define a variable, and it's called at my weak side, and it's just say that's a new website and it's costing the euro and say, This is my weeps, i dot com and we done. We've literally constructed this whole function. We've got a method economic call This new website and the constructor function allows us to poss variables. If we go on my website and we go show your all this should console, this is my website dot com to the screen. Let me just start quicker and they have it now with an object literal, we don't have this amount of flexibility. So what people team to do to work around is that you have to Boldin in its function and you don't have to call it in it. But it's just convention in the programming jobs pulled. Let me show you what I mean. So how would we create this? Maybe you can even give it a bit of a think before I show you the answer. But how would you create the same Syria with an object? Literal syntax way? You're gonna be a bit creative because you're gonna have to create a function that you can call them passing a perimeter 321 Let's look at this now. So, with a object literal, you're unable have a constructor, which means you are unable to initialize. You're I love Jake unless and this is important. At least you end your own innit function. This is what I'm gonna go through. Not so how we do this. Well, let's start creating this object. It's late, Waits on equals. It's created in it function. This function takes a parameter and you guessed that it takes a year old and then all we wanting to do is we wanting to sit this objects. You're all to the euro with Boston. That seems weird. But this is a way to get around the whole constructor, pausing in variables and initializing your object when you create it. Remember, with object neutrals, we've got a secret. Each key value pay with a common and the second property we want on this is actually a method we want. The same method has lost up. Show your and that is just a function where we console log this your own. So there you have it. We've just created an object with a bolt in and function, and this is getting quite complicated. So don't worry if you're not fully understanding it, but you will, you'll get So now how do we use this now? Well, we can access the inner function so we can go website and we can access the inner function and have our own Our custom you're on. Don't come. So now we've ran function which seat that this euro equal to our custom euro. So when we excessive method show your own, it's done our own custom. Your own gets console. Look to the screen, but you can see it's not as intrude of using the constructive function, which is why you must use the constructive function. If you're gonna be passing in a lot of parameters and you got a lot of bolting methods and complicated things within your object, it's better to use that constructive function. But if you want to trade a simple object, if you property, keep any peas. That is perfectly fine to use. Object. Literal Syntex. You must just use whatever you want to use is what I'm getting. It doesn't matter. Remember, there's no one right way to do something. Hope this has been informant For now. We still have to other ways we can create an object. Let's go over. Look at them now
16. Creating objects: 3. object.create(): yet another way to create an object is with the object got create method. Using object that creates creates a new object, but it uses another object as its prototype. Hey, what do I mean? We will not getting into prototypes now because I want us to keep focused. We're gonna have a whole section, a bonus section on prototypes, and I'm gonna be taking you through it just in case you've got the itch you can think of. A prototype is an object from which other objects can borrow properties and methods they need. I just want to quickly show you what a prototype is before we move on. Because otherwise I know it's like me. I'm gonna be teaching, not understanding. And I'm gonna want to know. So I thought, Let me just quickly show. So let's create a constructive function and it's cool it person. And it's just say this name equals Wadi and remember the sick and stick to a constructive function. That's right. We define a new variable and we instant it. That object said it's created user and it said that equals new person. So look at this user name is one we know that because it's used the constructive function that's already set it up for it. If I just log user to the screen, who could we get? We get this person object with property value, name value, pay, make scenes. But if I open up this object Julius, we get a product property and I opened it up. We get a constructive function that points to this person object that we've defined. That is all constructive function, and then it's got this other protect property. That's what I mean by prototypes. This object user is inherited certain methods and problems because we have to find a constructive function. Don't get too confused yet. Like I said, we're gonna have a whole bonus section. Just wanted to quickly show you kind of what I mean. When we talk about prototypes, let's get back into the lecture. The cool thing with object off creators that you can create an object without having to define constructive function. This means you don't need the new keyword. So how do we create it? Well, it takes two arguments. It takes a prototype argument, which is mandatory. Have to put in something because you have to tell your newly created object way to inherit its prototype from, and the second argument is optional. Where you can define properties, let's have a look at a few examples.
17. Example #1 of using object.create(): I've got the console open again, and I want to go through some examples about objects. Create our works, what the product up means. The first thing you need to know is that the object doc create method has to take a prototype. Remember, took two arguments. You have to include a prototype. What happens if we don't? Well, let's have a look. It's defined a dog Variable objects don't create what happens now. Begin era type Air Object Prototype may only be an object or now, okay, what's the most simple object we can create? Let's do one to kill a console. It's great, another dog object. But this time they'd say Objective, create. And it's just past. No, remember, we can either Pasta. Now one object. We re person now and we look a dog. It's literally created an empty object. But now we're not open this object. We shouldn't have any prototype because we've defined its prototype as nothing And open it up. We've got no properties on this object. No predator we had right, Okay, but it doesn't mean we can't work with it. We can work with that. We can go. Dog name equals fluffy announced name is Fluffy's. When a console loga dog it's only property and values its name just strength fluffy. It would be cool if we could get even more complicated here. How do we add prototypes? Let me show you again. That's clear the console. Okay, first things first. Remember, with object up create. The first argument do you can pass is the prototype, and that prototype, we've learned, has to be either an object or no. So let's create an object. Let's just do it with an object literal way. So let's a dog proto equals, and it's to find a method called Wolf and Wolf just Needs to unsold milk. This some we haven't defined sounded, but we will. You'll see how well done the ego. So we have to find our dog proto object that we want to be accessible from any object we use with this prototype. So let's create a dog that dog equal RG dot create, and it's passing this prototype that we've just created, and we know it's gonna be valid because it is an object. What's gonna happen? No. Well, it's no guard dog. You can see it's an empty object and it's empty because we haven't defined any name value peas. But if we open this up, we now have a prototype object. And if we open that up, part of that is this function wolf that we've defined. How awesome is this cool, right? You've got a lot more flexibility because you can literally decide where you want prototypes to belong to, which objects? It's awesome, and I'll let start accessing this wolf method. Obviously, if you just wolf now, it's gonna come back under find because we haven't defined this dot sound. We haven't got a sound property on the dog. That's a dog. Sound equals wolf. Now we should be able to make the call dog look and it goes, Wolf bats. Have you really noticed it would have been cool if we could have passed in that sound value when we actually created the dog object? Yeah, we had to first create a thing. We had to go dog dot sound and see the property off the dog to be the sound we cool. If we could have just done that straight off the bed, let's see how to do that. It's not that difficult. Remember what the object create me that we've got the optional parameter and you can pass in its value. Well, let's do it. Let me show you how it works. It's a dog to comes. Let's say cash comes along and but we've called a dog protest. So let's a dog to comes along. Dog Two comes along. We're gonna create an object. The prototype We wanted to be the dog protest, but the second argument we want to pass in a property value and you have to do it in the form of an object. Open up the curly braces. Now we want the property name to be sound and the syntax might look weird, but you just gotta learn how to complied with the rules of Java script. And that is we need another object now because you can see there's a few different properties on this, But we wanted to value to be bow Wow, not Wolf Wolf. This is a strong dog, Bow wow name. You can close off the whole object, which is a second argument. Close the brackets to finish it off and we are done. We've literally in our past in sounded dog to dog to immediately has access to off. Sorry. That was dog wolf dog to Wolf should get power. And it has. So this is object don't create you. Just learned a whole new way to credit. Object where you've got the flexibility to create your own prototypes that you pass through into the object.
18. Example #2 of using object.create(): one more example of objects creates. I just want to drive this point home. The more we work with it, the war will start to feel familiar with it. The more comfortable you gonna be And the more these you're gonna be with the fact that is no right way we can create objects in a plethora ways. Cool. Let's look at an example. This is object. Create the first thing I want you to remember. So that should say example. One is you have to pass an object. Oh, no, as the prototype and we've seen that. So if we go person equals object create and we don't passing your arguments, we're gonna get ERA because of prototype May only me an object. Or now we know that we just one example what's not the practical example off how we can use , object or create practical employees. The example. Let's say this is a private equity company that has multiple companies under its ownership and when it employees moost off it once its product up to be based on wherever that employee is employed in which company. So we need a few different prototypes. Let's say this private equity firm loves animals. So the one company that owns called Dog Factory and Other Factory their own is called Cat Factory. Let's creates Company one called Dog, and remember how the prototype has to be an object with Mel. So let's create these prototypes in the form of an object and issues object. Literal. Syntex. Let's define a dog. Proto property. The dog proton. Remember object, literal syntax. All we need is opening, closing curly braces. That's that. We've created an object and its say this proto So. An employee works here is working for a company called the Dog Century, and it's create company too Old Cat factory. Similar process. Let's create cat protest. I've been closed. Curly braces means we've defined an object, and it's say, that company name. It's called the Kit Tree. You know, let's say we've got an employee who works for each company creates in for you. Let's let employees one. He works for the dog, so we want it is the dog protects another's employees. One automatically has access to the dog factory products. We know when we call them, and we log amount that he'll have company property that is set to the dog factory and it's given Pour You one and name. Oh, Frank and you kissed it. There's another employee employees to, and this employee is part of the kit protest, and it's given point to a name off. Judy. We've seen up to employees. Now let's console log out the employee's name and who they work for. And this is where you'll see the benefits of working with object or create. So look, and we're gonna use tempered literal Syntex yah. First, we're gonna go employees. One name works for employees, one company and they haven't Frank works for the dog factory, and if I cancel, load the exact same thing. But change employees want to employ to. This is the cool thing. Julie works for the cat factory, and this is how you can work with object. Doctorate Hope is making scenes, but let's look at the final way. We can create an object
19. Creating objects: 4. Classes: who we have come a long way. All right. The fourth way to create an object is with classes specifically the E H 2015 plus Syntex other programming languages, for example, Java, Pathan. They use classes to define objects, and people were backing to understand Java scripts proto type, all inheritance. Again, We're gonna have a whole bonus section on project tops and hard. It'll works. But it is confusing, especially if you have come from another language that uses class Syntex. So to solve this problem in 2015 ETM, a script for years six introduced classes and under the hood and I want to stress is Java script. It's still the same. This class that has been introduced is just syntactic sugar. It's kind of a sugar coating, but it doesn't change job script in any way. Driver scripts still uses prototypes. It just now reps it within the class. Keywords of people coming from other languages are not that intimidated by it. Let me show you how classes work
20. Classes with the constructor function: before I show you an example off how to create an object by the class in text. I just want us to talk about constructive functions in a bit more detail, because once you understand how construction function works in terms of prototypes, you'll realize that the class Syntex is just a syntactical sugar around a constructive function. Let me tell you what I mean. Let's just create a constructive function. Old person, which takes in the first name last name and we see this first name to be first name, this last name, the last name and it's have get name method where we just console log using template literal, This is his name. This very intuitive. You've been through this before, so you know exactly how this works. And the second step to construct the function is that's right and stand creating the object . So that's a user equals new Let's say use a one equals mu person and this is John, but and as you know, we can get the name and should console log this out to the screen. There you go, John Doe, you really familiar with us? That shouldn't come as a surprise, but This is where it starts getting interesting. If we've got a user to that comes along and this is Wally Warthog, this looks OK. Looks good. But behind the scenes do you know what's actually happening when that new keyword is used? Java script is literally copping a constructive function all the properties and methods from their constructive function and its placing it on to the new object we've created the new variable. The problem with this is that it's a waste of memory. Space makes our applications slow. You don't want to be duplicating this get name method. For example, Once we write it once, why not just have it stored in one place? Rather than having duplicates and duplicates hundreds and thousands stored absolutely everywhere and every time used the new key word. That's the one problem before. Tell you how to fix this. I just want to show you that every time a function is created in Java script, the engine automatically places a prototype property on their function. Let me show you what I mean. Let's just copy this so we don't have to write it out again. Control. See, I'm just gonna open up our consul here and pasted in today is our function in Google Console. Well, I'm going to do now is going to go person and I want to show you that it has a private property and that product, our property is the constructive function, which is this whole instructor function here? That's what they're constructor function is an. Every time you create a new instance on it, it's going to copy those values onto that new instance I can prove it. It's a user one equal new person, just like we did before. And what do we call him? John, when we console logo user, we have a look here. We open it up. Look at this. The skit name function. This method has been copied to this object. And again, it's got the proto object with the constructor function pointing to this so you can really see the are duplicates were rewriting out. We restoring and memory things that we don't necessarily have to. And this brings me to the point off this whole lecture. How do we solve this problem? Well, what you can do is you can add a prototype onto that function and that gets stored once instead of getting duplicated across multiple instances, let me show you what I mean. Let's go back to our consul here. Now let's say we've defined User One is John Doe. Let's get rid of User to for now, but now we want to on our constructive function at another property called Age. But we want to do this on the prototype. So we got person project time cause we know each function created and Java script. Medicare's this private property. And here we can have an age. And let's just say it's 35. You really know we've defined user before we've done this. But if we know console log, use a one age you can see console logs 35. It's automatically got exit to the proto doc. So what's cool? This is that Now that age property on the prototype, it's only stored once and memory. Have a look at this. If we console, log out, use a one you don't immediately see the age do No, which is awesome. But it is gonna be attached to its prototype, and I'll show you that. Now let's go back to our consul. Quit E and we can see here if we go person dot a dot prototype top age equals 35 and now we console logo user again. You can see we don't see a John. It's immediate properties. But look at this within its prototype object. He's the age. How awesome is this? So this is now constructive functions, prototypes and the like. And no, I think you really to get into the Kloss object. Syntex. Let's have a look.
21. Classes - an example: who we all getting me? That's good. I want to show you now an example of a class object. But before I do, I want to use a constructive function, and I know I've been doing that a lot, but I just wanna have a very simple one. Just so you can compare the differences between the two. This is all about classes and let's do example one. We will use a constructor function. And remember, the first tip to construct the function is to define you object and let's just do a person which gets passed in a name, and we seek the new objects name to the name that reposting, So person's name will be the name of pasta. But now, let's say on this object, this contractor function, we wanting to include a greeting method that concretely user by the name Now. One of the problems we saw in the sword in the previous lecture is that if we use the constructive function and put the method inside its body inside, it's blocked like this. If we go this, let's call it greeting equals function, blah, blah, blah. If we put it in there, we saw that every time you create a new instance off. This this greeting method is being stored in net new variable, and that's just the memory leak. It's just a waste off space. Slow your system down. So what we saw was we can access the person. And on the prototype we can include a missive. Old, greedy and it's do this not and almost greeting. Must do is just console. Log the snap. And what's the second step with a constructive function? That's right. We need to stand yet we need to call object. So let's go. Let user equals new person and it saves. Name is funny, and because we've set the greeting method on the prototype, we can access this directly right now. For example, use a BT and it console logs. This is intuitive and you understand us. Denard. It's create the same object with the class Syntex. Now, before I actually go into class. Syntex, can you see my I D has already put three dots below that dilemma. Function construct. Can you see that? And it's a hover over. It's is this constructive function may be converted to class declaration, so it's actually saying to me Hey, we can convert our constructive function into a more up to date class in text. Way off materials. Object pretty well. I'll leave that day for now so you can compare the differences. You'll see how similar they are. So with the constructive function, the first step was to that's right to find your object. And we use that by using the function keyword well with the class in text, we don't use a function key. Read we user. What keyword drum roll Use the Klasky would. It's a class and then we follow it by opening, closing curly braces. You can see we've just created a class object. But now the only difference is it. With a constructive function, we composite name variable within it. Well, with a class object, we have to define a constructive function and it's simple and it's intuitive. You call it the constructor and the constructors gonna take in a name variable, and we're going to sit the new variables name to the name we passed into this constructive function. Who so there you have it. That's the first part that we replicated on that constructive function, and you can see how similar in Syntex. It is always done that differently is that we've defined a constructor, Miss it within this class within this object. The other thing now that we want to do is one at the greeting method, Remember? Well, when we use the constructive function, we had to explicitly put a run to the prototype off it. But with a class in emitted, you actually declare in, it is automatically put on the prototype. So it actually helps us, would've medically allocate methods in the most optimal way. You don't need comments or anything to separate. These are You can just keep going here. We're gonna define a greeting function, and all we want to do is console. Look, the name wrong and they haven't. We've created a class that results in the same object than what we just did above with a constructive function. Let me comment this art and then I'll show you. I just want conflict in variable names. Let's look at an example. And what's awesome about this is that we still have to go through. The same process is with class than we did with the constructive function. Remember, Step One was to define your object. We've done that. Now what? Stick to that's right. We've got a call object. So let user the school knew. And now we're gonna or in the name Willie. And it's very similar to what we've been seeing previously. Now the screeching method. If we go use a greeting that console logs wanting to the screen Hucles us. But we're not quite done. I just want to show you three things very quickly. You know how I keep telling you how the class in Texas so similar to a construction function Well, a constructive function is a function. So you expect this class we've created to also be a function right? Let me prove it to you. So let me say, here in Java script a class is a kind of function and it puts the methods we create you into the I want to talk property. Any previous teeth, it's console. Log the time off person and they have it. It is a function. But what function is it out expected to be the constructive function? Remember for the constructor function where few console logged the function out, it would actually throw you back the constructive function. Don't expect the same here, and I can prove that to you as well. So it's console log, the person, the last person which we just created. And we know that a function and its taste, this are saying, is that equal to the person, the prototype and the constructor on the prototype and the result is true. You can see that these things are just exactly the same. And the final thing I want to prove to you is that can you see my seeking statement on the it sees using the class puts the methods we create into the prototype property. So how many methods should we have on the prototype property off this person clause? Well, I'd expect to one called constructor and one called greeting and courting with Java. Script is you've got in both methods on the global object that allow us to excess and taste what properties we have. So it's console log, let's access the global object and there is a property or a method called get property names. That's what we want. We want to see all our property names on our person object, but the prototype off it and you can see they we've got to construct and greedy who? This is cool. This is really getting advanced. Hope you starting to get a feel for these things. I mean, just take a stick back. We've done a lot. We've created objects, lie the literal syntax, constructive functions, object of create And now we just don't fire the class. And don't worry if you've been a bit confused with this last section now we're going to get into prototypes, and next section could have a whole bonus on it. But just take a step back and realize like the on so many different ways and draw script to create objects. And we can play around with these things all day long. But the truth is, you must just get comfortable with what you enjoy the most. In some situations, you gonna prefer one over the other. So let's continue. Let's let's find, go get a coffee, go get a coke. Whatever pumps you up. Maybe not a whiskey. You need a good mind for these things and let's let's continue. I'll see in the next lecture
22. Objects recap and how objects can be passed into functions: Let's take a step back and just recap on what we've learned. We've created objects in different ways. We use object, little Syntex, object constructor, syntax object creates in Texas and we used clasps and text. We've seen that Java script objects are a stand alone entity, and every single object holds properties and methods and remember object properties. Just store key or name value piers and properties and methods can be excess using the dot or the square bracket. Notation and objects are so dynamic and Java script that you can even pass objects by reference from one function to another. Whoa. I actually don't think I've showed you an example of that. Let me quickly show you. Now. Job script is so dynamic and you can work with objects and functions in such a dynamic way more so than other languages and one of the ways that you can pass objects by reference into other functions. Let me show you what I mean to say objects can be passed by reference in two functions and to start off, let's just define a function and we're gonna have a whole section on function. So don't worry if you don't understand the Syntex. See it. But hopefully you'll be able to follow along. It's called dysfunction Change name and this change main needs to be passed. User object isn't just a variable. This is a whole object that's gonna be posturing. And the user name is gonna be changed. Teoh, John. And this is us creating a function. And now let us create a And how should we create an object? We've got one of four ways deadly. Well, I'm just gonna use object little Syntex because it is the most simple it person equal, open and close curly braces. And this has not actually created a person object. And it's just one property And that property will be a name value P, and that's properly name will be Name on It Sounds confusing. We could say first men, and we can make that Woody. Now we cancel. Load this out. We should see the object. Then you just start walking. You go. Corker's running. You can see when you're concert. Look, that person, it's got a first name of water. And what happens if we want to change that name? Well, we can pass it into that function. This is what I mean that objects can be passed by reference into another function. We just have to create this if name has to be the same as what we've done here. So let me show you how it works. All we need to do is we need to call the function. And in this function, we're pausing the person. And that's been done. What? His name was changed to John Doe. You want to see Oh, council, Local prison, you go first. Name is now John Doe. Well, it's a double barrel system. This is what I mean by objects Can possible reference into other functions. Let's get back to the lecture. Okay. Now that I showed you that example, I just want to stress this again. With objects in the way we create them. There is no right way to create an object. It's just gonna have to come naturally to you. The more you work with it more, you'll see where to use one object relation method over another
23. JavaScript object model: Now we're gonna be getting into a raise shortly and on the topic of objects. I just want to take a stick back and dive a bit deeper. Harp engines view objects. It's important because at a very high level, All Jolla script engines work the same way is a pasta. It goes real code. And then there's an interpreter in a compiler that optimizes that code into machine go. But now I want to just discuss the job scope object. It's interesting. We're gonna be looking at a few different implementations off this in the upcoming majors. So this is called Mawr. Just a very quick intro into the Java script object model. And when I click this button, we're gonna dive into the later as I mentioned, this is just a quick introduction to the JavaScript object model. And what I mean is that how does the engine sit up in excess object properties? Because once you start becoming an awesome programmer, you're gonna want to understand intricacies of objects, how the engine actually says these, you're gonna encounter bags and now you'll know how to fix them. These are good things to know. Anyway, The starting point is to know that the Sigma script specifications essentially defines all objects as dictionaries. What I mean by that is that you've got keys on each object, and those keys are met to what's known as the jaws from indigenous property attributes. And, of course, the easiest thing to do is to start with an example. Let's create an object by object, literal syntax, and it just has two properties on it X and y. And remember what I see. They strip speak, defines those dictionaries, and it maps keys to property attributes. Will The keys in this instance are X and y. It's the name of the property. Those are the keys and those keys or each reference to properly attributes. And those property attributes have certain values attached to them. One is the value off the actual name off the property. In this case, X has a value of 10. Why has a very of 20 these three other properties attached to this rideable, innumerable and configurable? What do they mean? Well, just very briefly right. Herbal just determines whether the property can be reassigned. Huma Herbal determines whether the property can be seen in a four loop And as you can see for our X variable, this innumerable property is set to true. And this is because every new property is innumerable by. Default is an exception to this, but we'll discuss that later. For now, just know that in Uraba Lasek true by default and the last property is unf readable and that determines whether the property can be deleted. And don't get weirded out by these double brackets. The double square brackets is just how to speak that it mus script specification shows properties that aren't directly exposed by JavaScript. So you're probably thinking, Well, if they're not exposed by Dr a script, can we ever see them? And the answer is, yes, you can. You can access them with the object, get own property descriptor method. Let me quickly show you how you accessed these. Okay, very quickly. Let me show you how we Connexus thes property attributes innumerable rights will configurable and the value ren Bahar said, weaken access. These don't get intimate, available the square bracket using the same example we didn't lecture non. Let's just define an object and let's just say exist e instead of having wine, it's just have aches just easier for us if we cancel loveless object and we open it up here and you look at its prototype and you look at the construct If you scroll down, you can see the get own property. Descriptor. Is this method available? Tual objects. We creating jobs coat. Awesome, right? So let's use it. So let's exist the global JavaScript object and then we want to get own property Descriptor . Now we've got to find the object, which is O b. J. And we've got to find the variable that we want and that is X. If we consul of that outs the ego, you got your value rightful, innumerable and configurable.
CM Code_Zone, !false | funny, because its true
