Learn Modern JavaScript: Advanced Topics | Steven Hancock | Skillshare

Learn Modern JavaScript: Advanced Topics

Steven Hancock, Founder All Things JavaScript

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
77 Lessons (11h 29m)
    • 1. Lecture 1: Course Introduction

      4:04
    • 2. Lecture 2: Where Will You Go with JavaScript

      4:29
    • 3. Think Like a Programmer 1: Libraries and Frameworks

      6:12
    • 4. Lecture 3: Advanced Concepts for Function and Objects

      6:47
    • 5. Lecture 4: Functions are Objects

      9:28
    • 6. Lecture 5: First Class Functions

      9:00
    • 7. Lecture 6: Invoking Functions

      11:45
    • 8. Lecture 7: Creating JavaScript Objects

      8:16
    • 9. Lecture 8: Understanding this

      4:36
    • 10. Lecture 9: Understanding this with Normal Function Invocation

      12:16
    • 11. Lecture 10: Normal Function Invocation Using strict Mode

      3:43
    • 12. Lecture 11: Examining this with Method Invocation

      15:43
    • 13. Lecture 12: Understanding Prototypes

      14:24
    • 14. Lecture 13: Understanding the Prototype of Functions

      2:28
    • 15. Lecture 14: Using Call and Apply Function Methods

      12:32
    • 16. Lecture 15: Using the Bind Function Method

      9:04
    • 17. Lecture 16: Invoking Functions as Constructors

      9:14
    • 18. Lecture 17: Constructor Invocation and the Value of this

      10:52
    • 19. Lecture 18: Higher Order Functions, Callbacks and the Problem with this

      14:34
    • 20. Lecture 19: Arrow Functions

      7:13
    • 21. Review

      4:49
    • 22. Think Like a Programmer 2A: DRY Programming

      12:32
    • 23. Think Like a Programmer 2B: DRY Programming Exercise 1

      14:19
    • 24. Lecture 20: Working with Objects Introduction

      1:07
    • 25. Lecture 21: Detecting Properties on Objects

      7:41
    • 26. Lecture 22: Changing Property Attributes

      6:28
    • 27. Exercise 2 Start

      2:24
    • 28. Exercise 2 Finish

      5:33
    • 29. Lecture 23: Making Objects Immutable

      9:17
    • 30. Lecture 24: ES6 Object Features

      15:44
    • 31. Lecture 25: Understanding Method Chaining

      15:28
    • 32. Lecture 26: The Power of Functions Introduction

      1:07
    • 33. Lecture 27: Immediately Invoked Function Expressions

      10:05
    • 34. Exercise 3 Start

      1:56
    • 35. Exercise 3 Finish

      4:42
    • 36. Lecture 28: Understanding Closure

      11:49
    • 37. Think Like a Programmer 3A: Avoiding Global Variables

      11:41
    • 38. Think Like a Programmer 3B: Using the Namespace Pattern

      13:48
    • 39. Exercise 4 Start

      1:35
    • 40. Exercise 4 Finish

      4:33
    • 41. Exercise 5 Start

      1:33
    • 42. Exercise 5 Finish

      11:05
    • 43. Think Like a Programmer 4: The Module Pattern Part 1

      6:22
    • 44. Think Like a Programmer 4: Overview of Fill in Question Code (OPTIONAL)

      11:58
    • 45. Think Like a Programmer 4: The Module Pattern Part 2

      12:44
    • 46. Think Like a Programmer 4: The Module Pattern Part 3

      13:55
    • 47. Think Like a Programmer 4: The Module Pattern Part 4

      16:13
    • 48. Lecture 29: Introduction to Working with Data

      9:33
    • 49. Lecture 30: JSON Basics

      11:24
    • 50. Lecture 31: Creating a JSON File

      7:54
    • 51. Lecture 32: Loading a JSON File Using XMLHttpRequest

      14:04
    • 52. Lecture 33: Testing on a Server

      10:50
    • 53. Exercise 8 Start

      3:41
    • 54. Exercise 8 Finish

      18:08
    • 55. Think Like a Programmer 5: Programming Paradigms

      6:52
    • 56. Lecture 34: Introduction to Object Oriented Programming

      10:33
    • 57. Lecture 35: OOP Theory

      11:46
    • 58. Lecture 36: Setting the Prototype Review

      12:52
    • 59. Lecture 37: The Constructor Property

      5:56
    • 60. Lecture 38: OOP Exercise Part 1 - Introduction

      8:05
    • 61. Lecture 39: OOP Exercise Part 2

      18:02
    • 62. Lecture 40: OOP Exercise Part 3

      9:57
    • 63. Lecture 41: OOP Exercise Part 4

      8:38
    • 64. Lecture 42: OOP Exercise Part 5

      11:04
    • 65. Lecture 43: OOP Exercise Part 6

      9:42
    • 66. Lecture 44: OOP Exercise Part 7

      12:18
    • 67. Lecture 45: OOP Exercise Part 8

      6:52
    • 68. Lecture 46: OOP Exercise Part 9

      15:49
    • 69. Lecture 47: OOP Exercise Part 10 - Getters and Setters

      11:03
    • 70. Lecture 48: OOP Exercise Wrap Up

      7:28
    • 71. Lecture 49: Enumerating Objects with the for in Loop

      6:13
    • 72. Lecture 50: Private Data in Constructors

      6:00
    • 73. Lecture 51: Creating Safe Constructors

      5:12
    • 74. Lecture 52: Can I Modify the Built-in Prototypes?

      4:15
    • 75. Lecture 53: What About ES6 Classes?

      8:01
    • 76. Think Like a Programmer 6: Starting a Project

      8:26
    • 77. Congratulations!

      0:47

About This Class

bfdac8f1

Advanced Topics picks up where the Getting Started course ended. You should now have some experience with JavaScript and understand the JavaScript language much better. Therefore, you are ready to learn more of the nuances and important patterns that advanced JavaScript developers know and use.

In Learn Modern JavaScript: Advanced Topics, we explore the more advanced techniques in JavaScript. You learn advanced concepts for objects and functions, the value of 'this', the power of functions using closure and IIFEs. You learn about the namespace and module patterns. You learn JSON and how to load a JSON file. You will follow along as we apply OOP concepts to a project. You get very familiar with the prototype, and these are just the main topics covered in this advanced course. A new bonus section helps you get familiar with functional programming concepts in JavaScript.

This course contains 15 sections and one bonus section, over 90 different lectures, over 17 hours of video, 4 quizzes, 9 assignments, 1 large project and several Think Like a Programmer sections with invaluable information for those intent on making JavaScript a career choice or a major part of their lives.

If you want to improve your JavaScript skills, this course is for you!

If you would like see the teaching style used in this course, you can take a look at the tutorials I've published on my All Things JavaScript YouTube channel.

Make sure you download the exercise files from the class project section to help you get the most out of this course.

Transcripts

1. Lecture 1: Course Introduction: welcome to learn modern JavaScript. Advanced topics. This is the second course in the learned modern JavaScript. Siri's. This course is brought to you by all things Javascript. I'm Stephen Hancock and I will be your instructor now. I've been involved with JavaScript for more than 15 years, but the thing I enjoy most is teaching the JavaScript language. I especially enjoy teaching advanced topics, so I am excited for this course. Before we go any further, I want to address why we use the word modern in the Siri's title. We chose to call this course, learn modern Java script for the following three reasons. The course will include many JavaScript topics from the ES six or Atmos Script 2015 Standard. Second, the course will not only teach advance JavaScript concepts but will teach the latest best practices. And finally, you will learn javascript in a way that you can apply it to the many different situations that javascript is used. This is especially true with these advanced toppings. Ah, thorough understanding. Advanced topics will help you adapt to any framework library coating philosophy or javascript environment you may encounter. We're not teaching JavaScript around a certain number of parameters. We want you to understand the language fully. If you then choose to use only parts of it. It will be a choice based on knowledge, not simply a choice made because you Onley understand a subset of the language. Now, before taking this course, you need to have a good grounding in JavaScript. If you are just getting started with JavaScript, I would recommend that you take the getting started course first. As you have been working with and learning JavaScript, you have probably heard a lot of terms and concepts that you may wonder about. One of the goals of this Advanced Topics course is to put your mind at ease, as we will be talking about delving into working with all of these concepts. This course will mainly focus on advanced concepts, associate with functions and objects, the two stars of the JavaScript language. We will begin with some general advanced topics surrounding functions and objects. We will look at advanced techniques for invoking functions, address the keyword this in relation to functions, dive into arrow functions in more detail, look at callbacks, make sure closures understood and learn to create. If he's with objects will talk about J son object oriented principles in Java, script prototype Will inheritance and getters and satyrs are among the myriad of things we will address. We will then look at some advanced programming patterns for both functions and objects. We will spend some time with modules as modular coding is something you need to be familiar with. We will also discuss functional programming patterns in JavaScript. Throughout the course, I will have you complete assignments. These will help you learn the concepts presented the files for each assignment, and the files for some of the lectures are available for download as a part of that lecture . Finally, if you have questions as you move through the course, make sure to ask them. The course is set up to facilitate discussions of this type. I check frequently for questions and will provide responses. Other students may also provide their perspective. So without delay, let's get started with these advanced toppings 2. Lecture 2: Where Will You Go with JavaScript: before we dive into the content. I want to take just a few moments to address the value of this course in another way, and it really targets the question. Where will you go with Javascript? Since you are on the path of learning it? What is your end goal with JavaScript? What will you do with it now if you were to perform a short exercise on the Internet and Google some of the strains of JavaScript? Here are some of the common things that are mentioned in regards that topic. Very common is the mention that JavaScript is ubiquitous, meaning it is everywhere, and it is everywhere because it's a central part of the Internet. You're going to find it in a lot of different places, so that is considered a strength of Java. Strip its speed as well is something that's mentioned quite frequently. You will also hear it's easy to learn and implement, and these air all strengths of JavaScript. There are some weaknesses as well, but I want to focus just on the strengths for a moment. Now, the next thing that you will sometimes encounter it's easy. But powerful is the strength of Javascript I want to focus on in more detail. First off, what does it mean when they say that a language is powerful? Well, it could mean a lot of different things toe to different people. But one thing for sure that I think it means to most people that use that word is that the language allows them to do what they need to. And in that sense, JavaScript is very powerful because it is a flexible language. It makes it possible to accomplish most any task and do it in a number of different ways. JavaScript allows the kind of structuring that complex programs need. So if you are planning with your JavaScript knowledge to develop complex programs, then you need to be able to create the kind of structure that will make those complex programs manageable. That will reduce airs that basically will allow you to be successful in your programming tasks. Now here's a quote by Angus Kroll in his book If Hemingway What Wrote Javascript? A book. I think that is Ah, one of unique books about JavaScript. And this quote, I think, sums up what I feel the power of JavaScript refers to, he says. natural language has no dominant paradigm, and neither does JavaScript. Developers console elect from a grab bag of approaches procedural, functional and object oriented and bland them all as appropriate. So what I think the power of JavaScript is is that you're able to approach complex task in a number of different ways. You don't have to continue with the procedural approach, which you undoubtedly used as a beginner in Java script. You are able to branch beyond that. However, in order to branch beyond. And in order to take advantage of some of these powerful aspects of the language, you must learn how to do that. You must learn those elements of the language and how to structure the language in order to arrive at a point where you are able to perform complex tasks in a way that is manageable and successful. So the advanced topics taught in this course will help you get to that point, and our first step is looking at advanced concepts for objects and functions. So let's get started 3. Think Like a Programmer 1: Libraries and Frameworks: every so often throughout this course, I'm going to include a section called Think Like a Programmer. So this is the first section of that type in the course. And for this particular topic, I want to talk a little bit about libraries and frameworks. Now, when you start a new project, it's always a good idea to identify or to research what JavaScript, libraries and or frameworks can help you accomplish that project. They can help you reduce a huge amount of time in completing the project, so they are very important. You should not ignore them. You need to be aware of them. You need to keep up to date with the different libraries and frameworks. But I do want to throw out a rule that includes a caution so that rule is keep up to date with frameworks and libraries, but don't learn them at the expense of pure JavaScript. Know what I mean by that? Well, I think an example illustrates it really well, and this happens quite frequently on Stack Overflow. You will see questions from someone that has posted on Stack Overflow asking how to do something in JavaScript well, and it's obvious by the cold they include, Or by the way, they asked the question that they're trying to figure out how to do something with a particular library. Now this normally happens with Jay Query. You'll see some cold there that is really J query code, and they're asking how to do this in JavaScript. Well, it may just be a slip of typing, but I think in many cases, the individual, the post, those questions don't understand the difference between Jake Weary and Java script. And I think because of that they're hampered in their development efforts because they don't understand pure Java script. And that is the focus of the getting started course. And this Advanced Topics course is helping you to understand JavaScript not so that you won't use frameworks and libraries so that you can use them with more power so that you can use them and understand what they're doing. That's where you really become a good programmer. So I want to show you a resource that I think is very valuable for identifying libraries and frameworks that are available and you can use to research them if you're starting a new project. So let's jump to that website, so the website is java scripting dot com, and it contains resource is about every library and framework that is out there. Well, it may be missing a few, but it has a lot of them. If you look down here at the number of different pages, you can go through. As you look for different libraries and frameworks, there are quite a few. You can search for a specific one. If you want to get the information about one, you can list them in different ways as popular, new and trending. Now, if you find when you want more information about, you can simply click on that framework. This one here is react, and it will contains some additional information. First off this percentage that it displays on the left and this. This is the overall rating by Java scripting dot com, and they derive that in a number of ways. But React right now has a 99% overall rating, which is the highest that is available for the libraries and frameworks. Some of that overall rating, maybe because react is very popular right now, then it has some information from get hub. If you're not familiar with Get up. I would encourage you to learn get hub. It's an important tools to use as a programmer, but a simple way to describe get Hub is it's a repository for projects, and those projects can be on your own personal projects. Or they could be open source projects. And so the open source libraries and frameworks that are available for JavaScript are available on Get Hub. So a display some information about that, and then it copies and includes information from the about section on the get hub site. So that's what this first about Tab contains, so you can get some pretty quick information, and then, if you need to, you can see the repository is well, or you could visit that directly on get hub. There are links to the get hub location here in the buttons. If there is ah, home page for the particular framework a library, there is a link to that as well. So here is the react home page. Here is react on get hub and, as you can see towards the bottom is the information about react that Java scripting dot com is pulling in. When we look at the about section. So this is a fantastic resource. Make note of this website. It will be very helpful for you. And undoubtedly you will be able to find any library framework JavaScript utility that you're looking for. All right, let's continue on with the course. 4. Lecture 3: Advanced Concepts for Function and Objects: we've come to the first section of this course, advanced concepts for functions and objects. Now, in this section, you may find that we review a number of different things, which you are already aware of which off a script. Well, the reason we do that is because we need to introduce some advanced concepts that are associated with different parts of Java script. For example, we will talk about constructors. We will talk about the prototype. We will talk about this and a number of other things. But we are building upon adding to things that you may already know. There are advanced concepts that are important to understand before we delve into some of the more advanced applications of JavaScript. Now we will be talking about advanced concepts for functions and objects. Together, we will be dealing with both functions and objects. Perhaps in some courses, that may not be the case, but in this course it is because in JavaScript, as opposed to some other languages, functions are objects. Now JavaScript is an object or in language from the start. The object is the fundamental data type of JavaScript, unlike other object oriented languages where you must first create a class and then create objects and Java script. You're constantly working with objects. Everything except the primitive data types are objects. This is a very important concept that you need to remember. You are constantly working with objects in JavaScript. Now, I mentioned primitive data types are not objects. Let's review what those primitive data types are really quickly. So here's a list of them. Strings numbers Boolean, undefined, null. And in the ES, six standard symbols were introduced as a primitive data type. Now, even some of these primitive data types, such as numbers and strings, have what we call an object rapper that makes them behave like objects in certain situations. For example, with a string you can use dots in tax toe access, the length of the string or to access methods allow you to work with the string that is made possible through an object rapper. The data type itself is not an object, but it uses an object rapper at the time. You execute that statement in order to make it easier to work with those data types. No everything else in JavaScript. Besides, these primitive data types are objects no one object is a collection of values. It will have a name, and then it will have properties associated with it. Those properties come as name value pairs. We're showing multiple properties here. In this example, those properties could be a function. You can attach a function to an object, or you can attach another object to an object. Or you can attach an array to an object. You're not limited on the type of values that you attach to that object. Now, when a function is attached to an object, it is called a method, a method of that object. Now, of course, to access the values that are associated with an object. We use the dot operator so dot syntax becomes integral. When we're working with objects, we use the object name, the dot operator and then the name associated with the value we want to retrieve. If that happens to be a method, we include parentheses at the end in order to tell the JavaScript engine toe. Execute that code now. Since functions are objects, we have a very similar situation. We can attach properties to a function because it is an object. On the previous Web page, we showed an object with the property of user name. Well, that could be attached to a function as well. Now, how do you access those properties using the DOT operator the exact same way the name of the function dot the name of the property and we can access that value now. The thing that makes functions different in JavaScript are some internal properties that are assigned to a function, and I show two of them here. One is code and one is called. We usually express them with the square brackets. Now these air not properties you can access. That's why they're called internal properties. But these properties are what gives the function its unique characteristics that allow it toe work as a function. So it's an object with some unique internal properties that allow it to work as a function . First, the internal property code. That is where the code of the function is located. And when you put parentheses at the end of that function name, it tells a javascript engine to execute that code. Now, the internal property call is what indicates that you are allowed to execute this object, that it can work as a function. So it's those internal properties that make the difference in functions so that they're able to do something in addition to what your standard JavaScript object can do now. One method of defining functions illustrates that functions are objects, so let's take a look at that next. 5. Lecture 4: Functions are Objects: as we mentioned in the last video functions are objects now. This is an important concept. So I want to spend a little bit of time in this video reinforcing that concept with several different examples now first. Traditionally, we have talked about defining functions in two different ways. You can define a function as a function declaration or, as ah, function expression. The main difference between the two is the function declaration will be hoisted, meaning you can actually call that function before it's defined, whereas the function expression will will not be hoisted. In the example shown on this page, the variable will be hoisted, but it will not contain the actual function. Therefore, if you try to execute it, you receive an air. Now there is actually 1/3 method for defining a function. It's not used because it's not in any way ah friendly method for defining it function. And that is that using the constructor method and I want to show that not to give you another way to define a function. But I just want to show it to emphasize the fact that functions are objects. I think it helps emphasize that, so I'm going to jump over to sublime, and we'll take a look at this here in sublime. I have my job script file and a simple HTML file that it's attached to now. First, I'm going to create a function expression. Remember, this is called a function expression because we're defining a function as a part of a larger expression in this case, the assignment to a variable, very simple function. We simply passing a value. And then we logged that to the council. Now let me show how you would define the exact same function using the function constructor . I think you'll see why this isn't used because it's not super intuitive. One of the differences I have to use Thea upper case f for the function keyword because it is the constructor and then inside the parentheses, I need to pass in all the information for that function, so makes it difficult to define. But for something simple, like, what we have up here shouldn't be bad. So first I want to indicate the parameter what is able to be passed in to the function, and then I want to indicate the code that will execute now. The reason I feel that this helps emphasize the fact that functions are objects is because we used the new key Word new is used whenever you're creating an object, a new object. In this case, we're creating a new function object, and we're assigning it to this variable so you can see they're both the same. Let's just call both of them. And this will all pass an expression, since this is a function expression for report to pass in constructor, since this is using the function constructor. All right, I'm gonna go ahead and say that I want to copy the file path to this HTML file so we can pull it up in the browser. And then I want to open the jobs, the JavaScript console. And as you can see, they both work. We both We have expression and constructor displayed in the console. Now I'd like to do a few additional things toe help reinforce the concept that a function is an object. So first I'm going to comment out a couple of lines. I'm going to continue to work with this function which is assigned to variable report one. Now, if it's a an object, we should be able to a sign properties to it. So I'm going to give it a user name. Property set that equal to my name. All right, let's save that jump out and refresh. Open the console now Let's see if we can access that property. Sure enough, it returns just like any object, because the function itself is an object. Now. Another concept that's associated with objects is that they are passed around by reference , meaning If you make a copy of an object, you actually receive just a reference to the original objects. When an object is created, there is a space created in memory, and that is where the object is located than the variable points to that location. It is a reference to that location. If you then copy it to another variable, it's simply copies the reference, not the actual object that will hold true with functions as well, because functions are objects. So let's look at that really quick and moving to declare another variable report three and set that equal to report one, which is my original function I've already created and I press return now. Those report three have access to user name. Yes, it does. Now What if I changed user name on Report one. Now let's see what we get when we access report. Three. As you can see, it's change there as well. So it changed it in one location. That location where that function is located. And so the same concept of copying by reference applies to functions Because functions are objects. No, really quick, let's take a look Get let's do a D I R both of these a d I r a lattice. Open up and see the details of the function. So here's our function that we've declared you can see the user name shows up here and other details about that function. Now, if we do the same thing with report three, we get to see the same details and notice what name is attached. So that was how we originally defined it. And so it retains that as its name as the function name, and that's a standard property on a function. Now we'll be looking at some of these other things in later videos, but I just wanted to illustrate that they have the same information now. One more thing to show because this is an object we should be able to attach a function to it and Adam Method. And so here I've attached to report three I show user method set that equal to and then I define the function simply. What we're going to do is log of the console, the user name. We use the this keyword to refer to that object, which is the function. I go ahead and press return. Now I can do report three dot show user add the princes at the end to indicate it should execute. And sure enough, it logs the Consul Thomas Report one. I thought show user now report one has your user because remember, it's not a copy of it is pointing to the same location, and it also returns Thomas. So functions are objects, and thinking of them that way allows us to do a number of things in javascript that are very useful and powerful. All right, let's move on to the next section. 6. Lecture 5: First Class Functions: the fact that functions air objects and because of that we're able to pass them around by reference means that we can say that JavaScript has first class functions now. First class functions means the language treats functions as values, that you can assign a function into a variable like we did and that you can pass it around . The fact the JavaScript has first class functions is a powerful element of the language, So let's take a look at that here. I have defined a simple some function. It has two parameters, and then it simply returns the some of those parameters that air passed in. Now, when that function is defined, it is stored in memory as illustrated down here at the bottom. The sum function is kept in memory, so when we refer to that, it is by reference. The variable which we store the function into, refers to the location of that function in memory. Now, if we write another line of code and we assign some to another variable in this case, a what that means is now. A also points to that same location, so were able to assign functions two variables and were able to pass them around their first class functions. Now we've added some additional code. We've created a new function. It's a run function. Basically, what it does is it receives a parameter and then it excuse that. So we're assuming that what the person is going to pass into this function is another function. And that's exactly what we do in the line below, where we have it execute, we enter run and the princes cause the function to execute, and what we pass into it is the variable A and that variable a points to the memory location that contains the function. When the run function receives that variable, it then assigns it to the variables e and thereby Z now points that location. The parentheses cause it to execute and the sum function is executed. So basically, what we did there is we passed another function into the run function. So first class functions. Let's jump to sublime and take a look at an actual example like this. All right, I'm going to move to our JavaScript file, and first I'm going to define a function and assign it to a variable. Some. This will receive two values, and it will return the some of those two values. All right, there we have our function. Now let me create a second function. This will be the run function, and this will receive three values, one of which is a function that we pass in and the other two values are simply numbers know what this is going to do is it's going to log to the console, the function that has passed in. But we want that function to execute, so we put parentheses after it That will cause it to execute. Now, if we pass in the some function, which is what I'm planning to do, it needs to receive two values. And so let's go ahead and pass it. The two values, the other two values that are passed into the run function like that. All right now, let's initiate the function we're going to pass in the some function that's really stored in this variable, so we're able to pass it in, and then let's also pass in number 10 and the number five. You go ahead and say that let's get the file path to this HTML file so we can view it and go ahead and open the consul. Sure enough, it returns of 15 for us, so let's take a look at that again. We are passing in first a function. Then we also pass in a 10 and a five. So inside of the console log statement, this code that has been passed in. We execute by adding parentheses, parentheses. Tell the JavaScript engine to execute that code, and we also pass at the same time we're executing. We pass it these two values, which were also received. Okay, so that's what's going on now. One more example. With the run function, let's say I want to call the run function and I want to pass in a different function. Now I want it to log to the console two values that are multiplied together. So I'm going to pass in a function that will multiply them together as opposed to add them . So to call the run function, I would indicate run and then parentheses that will cause it to execute now in Javascript. Aiken do that without getting an air, even though it's requesting or set up to receive three values that's not required in JavaScript. It doesn't cause an air. Obviously, it's not going to do anything for me because it will try to add undefined, undefined and execute undefined. And so it'll give me an air at the time it executes it because the function is undefined. So that's when the air will occur. Not because there wasn't a parameter passed in, but because it tried to excuse something. So if I wanted to work properly, I need to pass something in now. In the previous example, I had a function already declared, and I passed that in. Well, I can just declare the function right now by entering the function, keyword and then parentheses, and then the two parameters I want past him and then the curly braces for the code that will execute. Now what we want this function to do is return X times. Why so right there? I am passing in a function because I have defined it on the fly. It's an anonymous function. It does not have a name, and it's being passed in. It will be received by the run function, and it will be executed. Now. Two additional values I want to send to the run function so at the end of this function definition, this function expression I'm gonna put a comma, but 10 another comma and put five. Now, let's go ahead and save this jump out and refresh And sure enough, it works. It multiplies 10 times five and returns results, and the run function logs it to the council. So first class functions is a powerful concept. To be able to pass functions around is one of those concepts that we use frequently in advanced topics with JavaScript. So a very important concept to remember and understand. All right, let's move on to the next section. 7. Lecture 6: Invoking Functions: invoking a function means to call or execute it. Now there are four possible ways to invoke functions in JavaScript, and those are you can invoke a function simply as a function. So you define a function and then you call it. You can invoke a function as a method, meaning the function is attached to an object, and you call that function. You can invoke the function using a constructor, and when the function is a constructor, it requires you to use the new keyword. And then finally, you can invoke a function indirectly using call and apply so four methods to invoke functions. Now, what is the difference between whether you choose one method over another? Well, let's talk about that for just a moment. So let me display a simple function. We've declared a function. We have one parameter for it to be passed in, and then we log to the console that parameter now every function, in addition to the parameter or parameters that air passed into. It also received two additional parameters. This and arguments. Now, the four different ways that functions are invoked. The reason. It's important to talk about those four different ways is because, depending upon which of those four method you use that will determine what this is equal to , So that's what we're going to be talking about over the next several videos. But first, before we move on to the next video, I want to show some examples of this and arguments that air passed in so that you understand that concept. So let me jump to sublime, and we'll do that. All right, I'm in the JavaScript file that's attached to this HTML file and less declare a very simple function again. We're simply going to pass in a single parameter. And then let's log that to the console. Okay, Very simple function. Let me go ahead and save that. I mean a copy, the file path so I can open this up in a browser and then I'm going to open the consul. So we have that function declared. We have not called it yet. So now let me call test without anything at all, and it returns undefined. The consul doubt log returns undefined. Now I mentioned in a previous video that in Java script it doesn't matter if you don't pass in a parameter, even though it may be set up in the function. JavaScript allows that it simply sets that variable too undefined. If nothing is passed in and that's what we're seeing here comes back, is undefined. Now, if I do pass in something, then of course it displays that value that I passed in. Now what happens if I pass in more than one? Well, it allows that as well. It only displays the first parameter because I only have one variable established in the function to accept the first parameter. It does not display the second parameter now. I mentioned that with every function to additional parameters are always passed in this and arguments. So let's take a look at that back to sublime. Let me first log to the console the value of this so we can take a look at that. Then also, I'm going toe log to the console arguments, save that jump back out. And let's refresh. Since we refreshed html page are test function has been redefined with those additional consul dot log statements. So now let's call test without anything. All right, so first we have a consul dot log statement for this. No knows what it returns. It returns the window object. So this function, which is executed in the global space, returns the global object, which in a browser is the window, and that's what we're seeing there. Then we have a concert out log of the parameter, and it returns undefined because I did not pass anything in. Then we have a concert log of arguments and notice. Arguments isn't array like value, and as you can see, there is nothing contained in it. Notice there is a length associated with arguments and length is set to zero. Right now. Also noticed the Cali. It identifies the currently running function, which is the function we created. So that is the arguments parameter, which every function receives. Now let's call test again. This time let's pass and multiple arguments. All right, so this remains the same. It's the window object. It's the global object. Now. The vow variable contains a value, and so it displays that. Then we see the arguments parameter and it lists. Everything was passed in even though we picked up the 1st 1 with a parameter which we defined When we define the function, it still is contained in the arguments. We can see them listed here now, as I mentioned, arguments is array like, So you can see that associate with 012 and three are the numbers that were passed in and the length is now set to four. Now how can we use the arguments? Well, let's do one additional consul dot logs statement. This is how we would access individual arguments. Let's say I want to access the second value that's passed in. We do it just like we would have addressed something in an array because arguments is a ray like it is not an array, meaning all of the methods that are available for a raise are not available for the arguments parameter, but it functions like in a race. So it is a ray like this statements going to display the second value that is passed in. Go ahead and save that refresh. And now let's call test again with multiple values being passed him. And as you can see, the fourth consul dot log statement returns, the second value that was passed in for now arguments is not a replacement for establishing your function with parameters, it can be used that way, but it's not recommended. The reason it's not recommended is because if you're using arguments to determine what values air passed in, your function doesn't have a signature. It doesn't tell people what you were expecting to be passed in. And so by defining the parameters, your function communicates much better. Two other people looking at your code and therefore you should use that method and not rely on the arguments. Now when would you use the arguments? While there are situations where you might find occasion to use the arguments and let me enter one here, let's say we wanted to create a function. This simply sums up all of the values that are sent to it, so we don't know how many values were going to be sent to this function. We just want to make sure we some of them all, so to do that, I'm going to set a variable, some equal to zero. That's going to be the total, and then we'll create a four loop. Let I equal zero. The four loop is going to cycle through the arguments and add them to the some variable. I is less than arguments dot length. We use the length property of the arguments I plus Plus. Now we simply set some plus equal to arguments and then, just like we would with an array use of square brackets to address each of the end of individual arguments as we cycle through the loop. And then finally, let's log to the console. The end result. All right, let's save that jump out. Refresh now. I didn't call the function inside the job script file, so I'm going to do it from the console, since his HTML page has loaded that function is a part of the environment I'm working in so I can call it So Summit. And I'm just gonna pass in a bunch of numbers when I press return. It adds them up so I can vary the number of values that are passed into this particular function because I'm using the arguments to address each one of them and add them up. So that's a sample situation where arguments can be very helpful. There are other situations as well that you may encounter, so we've dealt with the arguments parameter and quite a lot of detail. We need to continue to deal with this because this changes depending on how we invoke functions. Now, before we dive into this too deeply, we need to review some concepts about creating objects, So let's do that next. 8. Lecture 7: Creating JavaScript Objects: There are two methods for creating JavaScript objects, so let's take a look of those two methods. You can use the object literal, and that is the preferred method. Or you can use the object constructor. Now let's look at the difference between these two. With object literal, you declare a variable and then you use the curly braces to define the object. Now, if you put nothing between the curly braces, then there are no values associated with that object. Usually what you include inside the curly braces are the properties of that object, and those properties come in name value pairs. So, in the example shown here, we have the property, first name and the property last name, and both of those have a value associated with them. When you are using the object literal, you separate separate properties. Separate name value pairs with a comma, the very last one listed. You do not include a comma. Now this is the preferred method. However, you can create JavaScript objects using the object constructor. Because it is a constructor, it requires the use of the new keyword. So you declare variable and you said it equal to new object noticed the OAS upper case. At that point, you have an empty object. You then can assign properties to it using the DOT operator so b j dot first name equals and you set it to a value o b j dot last name. Now this same format for adding properties to an object can be used with object, literal as well. The main difference between the two is how you initially create the object, this line and this line with the curly brace at the end. Now the properties associated with the object can be of any type. In this case, we have two strings. It could be numbers. It could be a function which then becomes a method of that object. It can be an array. It can be another object so you can have objects inside of objects. Now, the way you access the properties associated with an object is using the dot operator. The way you set values to a property is with the DOT operator, as shown here. Now, let's open up the console and just take a look at a few of examples of this. I'm going to create a very simple object using the object. Literal syntax. Now I'm going to press enter here, but I'm going to use the shift key to press enter because I'm in the console. I don't want it to execute yet, but I do want to go down to the next line. I'm going to create the same object that we were looking at. Use the comma two separate from the next name value pair the next property. Since it's the last one. I do not need a comma and shouldn't have a comma. Then I put the last curly brace and press return. All right, I have an object now. I can access the properties of that object using the DOT operator, and it will return the value. I can set additional properties to the object. Let's create a method for that object. Call the method greeting set that equal to, and now I define a function because this will be a method in a press shift. Enter again so I can go to the next line without executing it. I mean, it's simply do consul dot log Hello. And just to build on what we covered in the previous movie, I'm going to consul dot log arguments and Consul Don't logged this just to show you that both the argument parameter and this parameter are passed in to a function even when it's attached to an object. Then let's end that function with the curly brace and press return. All right, now, if I call that function, I have to use the dot operator to do so. I put parentheses at the end to invoke it, and here we see it prints out Hello. It also prints out the arguments, which I didn't pass in any arguments. So, as we can see, that is blank. The length is zero. Notice what this is equal to. We're going to build on this in a subsequent movie. This is now equal to the object that this method is associated with so you can see the properties attached to that object. So that's what this is equal to in this case. Now let's say we want to remove some of these properties. Let's say I wanted to remove last name while we do that with the delete key word now delete should only be used to remove properties from an object. You shouldn't try to delete a variable with delete, so I'm going to remove last name. And now, if I do object one dot last name tells me it's undefined. Now what if I'm wondering if a property exists in an object? Well, there's a couple of key words. Allow us to determine that the 1st 1 I want to show you is in So last name in O. B. J. One. Let's find out if that's true or faults. That is false because we deleted it using the delete key word so we can use in as a part of and, if conditional, to determine if a property exists in an object. In this case, I was looking to see if last name exists. Let's see if greeting exists, which is a function, but we can still use the n key word with it. Let me just fix the spelling of my object and it returns true. Yes, that is a part of that object. Now, another key word that can be used is has own property and has own property is used using the dot operator. So oh, VJ one dot has own property and I'm going to check first name and that comes back true telling us that yes, first name is a property of the object O B. J. One. So those are some ways to tell whether property is associated with an object. Let's now take a look at this and the value of this and begin to delve into that a bit more . 9. Lecture 8: Understanding this: as we begin to delve into some of the more advanced topics associated with JavaScript, such as object oriented programming. It is important to understand this, the keyword this and how it is used within JavaScript. The thing that makes it difficult to understand is this is determined at runtime, and depending upon what happens within the code, it can be something different. But simply ignoring it because it's difficult to understand won't get us anywhere now in this movie. I'm going to present some initial concepts about this and then in subsequent movies, will address this with more examples, So don't feel you have to understand completely. After this video what this refers to, I will come back to the explanation of this multiple times throughout the next several videos. So let's first take a look at those concepts now. Understanding this or understanding what the value of this is in a particular situation, which can also be called this binding. What is bound to this is based upon some established principles. So what? Let's first describe what this is. This is established at run time when a function is invoked. This is determined by how a function is invoked not where the function is defined, so it really doesn't matter where in the code you've placed the function that doesn't determine what the value of this becomes. How that function is invoked will determine that. And finally, this is a reference to an object. So the value that this becomes is always an object that we can say up front. It will always be an object. What that object is is determined how ah function is invoked, not whether or not the function is associated with an object. No many times when a function is associated with an object, when it is an object method, the value of this is that object. But that's not always true. So I don't want to say that as a statement to cover what this becomes, what this is now. This is not. It will never be the function, though it is established when the function is invoked, it is not the function. It is always an object. So remember that now this screen, I will return to multiple times as we continue to discuss this and how it gets established and what it is in certain situations. So I will rehash these rules that help us to understand the keyword This. Now, one more thing I want to say about this before we end in the video. And that is the binding of AH value to this, which we can call this binding can be implicit, meaning it is set by the JavaScript engine or explicit meaning it is set by you. Something you do in the code determines the value of this. Now keep that in mind. The first several examples will be looking at in the next couple of videos will be implicit later on. As we add some additional concepts and look at some other ways that this is established, you will begin to see explicit methods for establishing this. So the binding of a value to this can be implicit or explicit. All right, let's continue on to the next topic. 10. Lecture 9: Understanding this with Normal Function Invocation: in this video. We're going to take a look at this when a normal function is invoked. Remember, that is one of four ways that functions can be invoked and the value of this can change as a result of that. Now, we just barely looked at this slide in the previous video. But each time I talk about this, I want to bring this slide up to help in grain these concepts in your mind so that you can understand what this should be as you're doing different things in JavaScript. So this is established at run time when a function is invoked. Now the type of invoking we're going to be looking at is a normal function, the call of a normal function. Now this is determined by how function is invoked, not where the function is defined, so that how we will be looking at once again is a normal function. What this will be is an object. So we're going to find out what object this references when a normal function is invoked. And once again, this is not the function. It is always a reference to an object. So let's jumped a sublime and start taking a look at this now. First, I'm going to declare a global variable and sad it equal to global. You'll see why I'm doing that in just a minute. Then I'm going to create a function to call this one fun one. It's going to be a function expression, and the first thing I'm going to do is set a variable. I'm going to use this same variable name inside the function. I will set that to fund one. Now we'll do some constant log statements first. I just want to do a consul dot log to print out where the logs statements air coming from when they print. Then I will log to the console this and then I will log to the console this dot name. So we want to find out which name is going to pull out now when you ah declare a variable in the global space. It is the same as a signing, an attribute to the global object. And so this dot name could be this or it could be this, and that's what we're going to find out. All right, now, let's go ahead and call that. Save that copy the file path, pull it out page and then open the consul. All right, so we can see that the consul log statements air coming from fun one. Right now we only have one function, so that's pretty logical. And we see that this is equal to window. As we've mentioned in some previous videos, Window is the global object when the environment is the browser. And then finally this Stott name Prince out global. And so if we jump back this when we invoke a normal function becomes the global object And because this variable is declared in the global name space, this stock name displays the value of that variable. Okay, so very common way that we invoke a normal function. We simply call it. Now let's add a little more to this. So we're going to have a bit of fun with functions here, just trying some different ways that functions can be invoked and seeing what the value of this would be. So we'll create a sank a second function. I'm just going toe have the exact same statements in this function except changing the value of the variable and changing the logs. Statement indicates where the log. The consul log statements are coming from now. Let's have the fund to function called from the fund. One function. So does it matter if the function is not invoked from the global space? If it's invoked from another function, will that change the value of this? That's what we're going to look at. Now let's say this. Jump out. Refresh. All right. So first from the fund, one function value of this is window. This dot name equals global exact same thing from the fund to function window is the object reference by this, and this dot name is global, so those produce exactly the same things. Even though this is being called from within another function, it doesn't matter. So when a function is invoked, not a method. But when a function is invoked, the value of this is the global object. All right, let's do something a little bit different. Since functions are first class in JavaScript, that means we can pass them around well, what happens if we pass them around and invoke them from some other location? So let's first have the fun one function, return a function, and then we'll invoke the function that is returned. So because their first class we can do this. So I'm going to copy just this part of the fun to function pasted in here. That's what's going to be returned, going Teoh in Dent that so we can understand it. So the return value is basically this function. Now I'm going Teoh. Instead of returning an anonymous function, I'm going to give the function and name, and that is what will be returned. Okay, we can get rid of this fund to function now. Now, when we call the fund one function, it's going to return a value and the value will be a function, while we could set that equal to a variable, and then we could go ahead and execute the variable to execute this function that's returned and see what we get. Well, a shortcut way to do that just for fun will use the shortcut. Simply sit, put two sets of parentheses. So this first sent a prince. He's going to cause the fund one function toe invoke to execute, and then whatever has returned, this will cause this to execute. So let's see what we get. We'll save refresh. Here's a fun one. Once again, it's the same. Let's look up fun too, and it is the same as well. So even though we return the function, the object reference by this is the global object in this case window. And this Stott name is global. So basically it doesn't matter where the function is declared. That is not important. It simply is how it is invoked. All right, let's look at one more change. With first class functions, we can pass a function into another function and have it invoked from inside of that function. So let's try that, and it changed the name of my function to run it. Now we need to set a variable here to receive the function that is passed in and then down here. I want to execute that function so this part will stay the same up here. We should get the same results, meaning this will reference the global object. But let's see what happens when we pass in a function. So here is the command to invoke that function. So now let's pass in another function, and I'm going to use the same fun to function to pass in. So instead of watching me type all that. I'm just going to paste it in here. So here's what we're passing in. And once again, I'm not passing an anonymous function. I chose to give it a name, all right, not necessary. But I chose to in this this case just to have some fun with what we're doing. The functions here. So this is what's being passed in. Let's see what the value of this is in this case. It's going to be invoked from inside of this function after it's passed into it. Save it. Refresh the run it function window is the global object reference by this, the fund to function exact same thing. It does not change. So basically, what I've illustrated with all of these different examples is that when you invoke a normal function, the value of this the binding for this is the global object. So that situation one, so looking at our principles for understanding this it's established that run time. So at the time we ran the function and the function was invoked. That's when this was established and it was determined by how it was invoked. It is being invoked as you would invoke a normal function. So the object that is referenced by this what this is bound to is the global object. And of course, it is not the function. So another way we could say that is all of these functions, no matter how we pass them around or invoked them, they were initiated by the global object. Therefore, this is bound to that global object. All right, let's now take a look at method in vocation and what occurs with this. 11. Lecture 10: Normal Function Invocation Using strict Mode: Now there's one special circumstance that applies that to this binding during normal function in vocation that you need to be aware of. And that's if you're using strict mode. So if you commonly use strict mode with your coating, you need to be aware that this will not be bound to the global object. Now, if you're not aware of strict mode, basically what it does is it changes the JavaScript engine so that it's not so lenient. It forces you to use more strict coding practices. So let's take a look at how this would affect the binding of this. A normal function in vocation. I'm gonna jump out to sublime and use very similar functions. What we used in the previous video Una Declare a variable said it equal to global. Now I'm going to declare function. This will be a function expression inside the curly braces. I'm going to declare another variable name and this time said it equal to fund. Then we'll simply log to the console. This and this start name put the semicolon at the end of the Function Expression School hadn't saved that, and then we will open this HTML file and open the council. Now let me go ahead and execute that function. And just like we saw in the previous video, we see Window and we see this dot name equal to global, which is the variable we defined in the global space or the global object. Now let's jump back to sublime and let's add strict mode to our code. So at the very top insider quotes, I'm going to put use strict. This will tell the JavaScript engine to you. Strict mode for my code. Now let's see what happens if I save this, jump out to the browser and then refresh Now when we execute that function, we received two things. First off, this is undefined. When we locked to the consul the value of this it's undefined, and that's what happens in strict mode. It will not set it to the global object because in strict mode, the global object is not available for binding. So this is instead set to undefined. No, because there is no object in this. When we try to log to the consul this dot name, we get an error. Cannot re property name of undefined because this is undefined at this point. So if you commonly use strict mode in your coating, be aware of how it affects the binding of this when normal functions are invoked, all right, moving on to the next topic. 12. Lecture 11: Examining this with Method Invocation: in this video, we're taking a look at the second in vocation pattern and what that does for this binding what this references when we invoke methods. Now, the same principles of pot apply to this. It's established at run time when the method is invoked and it is determined by how the method is invoked, not where the method is defined and the binding for this is an object. It is not going to be the method, though it is established when that method is invoked, it is not the method. Let's jump to sublime and take a look at some examples. All right, I'm gonna begin with establishing my global variable. That way we can tell if the global variable is ever referenced in our examples that we're doing now I'm going to create an object. I'm gonna call it object one. I'm going to find it with the object. Literal, literal notation. First, I'm going to give it a property of name and set that equal to O b J one. Then we will establish a method by defining a function on this object. Now this function is going to do many of the same things we were doing in the previous video and those exercises so first will indicate where the function is coming from. Then we'll simply log to the console this and then we'll log to the console. This dot me, all right, that's going to be our first exercise. Close that object definition with a semi colon. And now let's go ahead and call the method that is a part of this object. So we do that with dot notation O B j one dot f N F U N one and then parentheses to indicate to invoke the method. Let's go ahead and save this. I'm going to grab the file path to the HTML file and open it in a browser. Then we'll go ahead and open the consul. Okay, we see where the log statements air coming from. Fun one in O B. J. One. Notice the value of this. Noticed what this is bound to. It is the object the object we created. We can see that here and the name value came from the object. It did not come from the global object. So because that object invoked the method, this is bound to that object. No, that's a very important point. Okay? It's not because the method was defined inside of the object. It's because the object was used to invoke it. And let me do a second example to illustrate that in more detail. So I'm going to create a second object using object literal notation. Again, let's go ahead and set the name property, too. O b j. Two. And let's define a fund to method for this. However, this time I am going to reference the function that's already defined in O. B. J one. The way I do that is with O. B J one dot fun one. I'm not putting parentheses after that. What? I don't want the semicolon either, but I'm not putting parentheses after that. So it's not executing the function. It's referencing it. So it's assigning the reference to that method to this method, which I'm defining inside of object to. So let's find out what the object is equal to when we call fun to and invoke that method now, so things don't get confusing in the console. I'm going to comment out that statement. All right, let's go ahead and save this jump out and refresh notice which object is now bound to this ? It's O B. J. Two. It's not O. B. J one, even though the method Fun one was defined inside of O B. J one. See, this is where is coming from. This is where the console log statements air coming from. But this is referencing O B J two and we see this that dot name displays O b J two. So it is how it is invoked, not where it is defined. So going back to those rules established at run time when the function is invoked, determined by how a function is invoked, not where the function is defined and it's a reference to an object. All right, some additional examples now one way. I think we can cement this idea that it's the object that is invoking it is to go back to the previous video where we were talking about invoking normal functions. So let me remove all of this code and let me bring back one of those functions we were using in the previous video and call this fun three. Now, in the previous video, we were simply invoking it or calling it using this method Well, there is another way we could invoke that we could do it this way. Now you can see that it is the global object that is invoking the function, and therefore it makes sense that this would be bound to the global object. Let's go ahead and save that and take a look at it. Sure enough, it's the global object. Okay, so that might help cement the idea that it is how the method or function is invoked, not where it is defined. All right. Another example. And we comment out this statement I'm going to create another object will call us O B J three use object a literal notation to define it. Set the name property equal to O. B. J three and Fun three. We're going to define a method. We're going to set that equal to fund three. Enter my semicolon. No, no, that's what we've done. We defined a function in the global space in the definition of this object, we have referenced that function. So now let's invoke this method from O B. J three and see what we get for this. Save it. Jump out. Refresh notice binding for this is o B. J three. It is not the global object, even though the function is defined in the global object, all right. Another example. Let's now do an object within an object. Creating another object. O. B J four Once again will set the name property equal to O B J. For now, let's create an object inside of an object using object literal notation. And we'll set the name property of that object to O. B. J five. And then we'll define a method fun five. I said that to a function. Then I'm just going to copy these lines from appear because those are the lines we want to put inside of the method. And we're going to say this is from O. B. J five Fun five and then we'll check the value of this and the value of the stock name. I think you're now getting the pattern so you should be able to guess what the binding for this will be right. It's going to be this object, but let's just verify it. So B J four. We're going to call that using our dot syntax the dot operator O B J five dot fun five. So it is being invoked by over J five, not by O. B. J four. Let's go ahead and save it. Let's refresh and see what we get. Sure enough, we get O B J five as the binding for this. All right. One more example before we and this video remember everything but primitives in JavaScript are objects. So what if we attach a method to a function? What will be the binding for this? So let's try that. First off, I'm going to define a function functions fund six, defining it as a function expression. And I'm simply going to have it Log fund six to the Consul, That's all. Nothing major. Now, since a function is an object, I can attach properties to it. So fun six. I'm going to set the name property like we've been doing. I'm gonna set that equal to fund six. Now, I want to assign a method to this function. So fun six dot fund seven 17 is going to be the method is equal to and will declare function. I'm gonna copy these lines so I don't have the type of home, and this is from 17 in Fund six and we will find out what this and this stock name is No notice. The name property for the function is fun. Six. All right, let's go ahead and execute it now. The way we would execute it is using our dot operator again. So which object is invoking? This method that will answer the question is to the binding of this. Let's go ahead and save it and take a look at it from Fund seven in Fund six. And look what it shows as the object that this is bound to it basically prints out the function. The function that we defined fund six C and then the value of name is fun. Six. And so the binding of this becomes that function because functions are objects. And so our statement is still true that the binding is always an object because functions are objects. Now, you may need to take some time looking at the different examples that we used within this video. No, I've removed some of those examples, but if you pull up the Java script file for this video, it contains all of those examples in it, so you can work with those examples. Until you understand this concept, this is an important concept to understand as we move forward. So now we've covered two in vocation patterns and how this is bound based upon those invocation patterns. Both of these patterns are implicit binding, meaning the JavaScript engine is doing that for us. Now, before we look at an explicit method of binding where we choose what this is bound to, we need to talk about the prototype, So let's do that next. 13. Lecture 12: Understanding Prototypes: every object in JavaScript has a set of its own properties, which are defined on the object and a satyr. Properties that that object can access those properties that it can access but aren't defined in the object itself are defined in the objects prototype. We will be working with the prototype quite a bit as we get to the object oriented section of this course, but we're introducing it now because it's key to some of the other things we are talking about, and I'll explain how it relates to the value of this with functions in the next video. But first, let's describe the prototype. Now almost every object is linked to another object, and that linked object is called the prototype, and the object can access all the properties that are a part of that linked object that are a part of the prototype objects inherit. So being able to access those means that it inherits those properties and methods object inherits properties and methods from its prototype ancestry. Now, why did I use the word ancestry? Well, it's not just the prototype of the object, but as possible that the Objects prototype may also be linked to another object to its prototype. We call that the prototype chain an object inherits all properties and methods from the prototype chain. So every prototype it is linked to in that prototype chain now a prototype is automatically assigned to any object. Now, remember, as I'm talking about any object, remember in javascript everything. But the primitive data types are objects. So I'm referring to a raise. Functions the date object. I'm referring to all of these. As I talk about prototype now you can define an objects prototype and once again we will delve into that in a lot more detail. When we get to the object oriented portion of this course, you can also change properties and methods on a prototype and we will talk about that later as well. Now, let me pull up a diagram just to illustrate the prototype. So in this diagram we have an object. This is a user to find object. It is referred to by user one, and it contains some properties user name, age, address city. It also contains a method full address with code there. Now, every object will contain an internal property prototype, as we've illustrated here in some browsers. You can also refer to that using the underscore underscore proto, as shown below and that at some point may become standard in EC MUS script. But that internal property points to another object, and that object is called the prototype. So the prototype itself is just another object so it can have properties and methods. Here we indicate that this prototype has the property state. Now, as we mentioned, the prototype chain allows each prototype to also be linked to another object, its prototype. And that continues until we get to the route object, the route prototype of all Objects and Java script, and that is object DOT prototype. That's where it stops. Now. Any properties associated with any prototype are accessible by the object itself. So if we entered user one dot state, the Java script engine would first look at all the properties defined in that object to see if the object itself owned that property. If it did not find it, it would then go to the prototype link and follow it to the object that is linked is the prototype, and then it would search for it there if it found it there it would return it if it did not find it would continue on up the prototype chain and tell it got to the end of the prototype chain or found the property. If it got to the end of the prototype chain without finding the property, it would return undefined. So that is the prototype. Now let's take a look at a few code examples in JavaScript. I'm going to open up the console and we'll be using the consul for these examples, and I will create first an empty object. Nothing at all. No knows what happens if I do to string in O. B. J. We haven't defined anything in the object, but let's see what it returns. It returns true now. Why would it return true if we did not define to string in the O. B. J object? Well, because it's a part of the prototype. That's why Now let's do object. DOT has own property to string Now. First, a couple of questions here. How do we even have access to a method? Has own property using the DOT operator. If it were not defined as a part of the original object, we never defined it there. While the reason we do have access is because of the prototype, it is a part of the prototype, so we have access to it now. This is the default prototype I'm talking about when wherever we create an object or an array or a function, a default prototype is assigned. We can assign our own prototypes, which we will talk about later in this course. Now let me go ahead and press return and see what that gives us. Now that gives us a false know that show you the difference between in and has own property in simply looks to see if the object has access to that property has own property. Looks to see if the property is defined on the object. So in will look through the prop the prototype chain to find it has on property will not. Now let's go and display this empty object just so we can take a look at it. A little more detail. So here it is. There's nothing to it. But if I open up by pressing a downer, we see that we have a link to another object and that is the prototype. If I then open that up. Now we begin to see a number of different methods, and to string is one of them has own property is one of them value of all of these are methods which we can access from the object because they belong on the prototype object. All right, next example. Let's create an array very simple array with just three values in a press return, and I'm going to display the array. It returns what we defined in the array. But if we click the arrow and opening up, we can see that it is linked also to a prototype. And if we open that up, we begin to see many of the methods which we can use within an array. There are a number of methods join last index of for each index of these air all methods which are possible to be used. Honore using the dot operator. And the reason we're able to do that is because when a new array is created, it links to the prototype object of a raise, which is right here, called Array. The prototype of user to find objects is object. Now what's the prototype of array well, it is object. And so if we open that up, we can see has own property to string some of those same things we saw for the O. B J object we defined earlier. That's because this is was its immediate prototype. Well, with an array, there is a prototype array that comes before the prototype object. But even er an array can access has own property to string because it's a part of the prototype chain. All right, next example. Let's create a simple date object. Now, if I just enter date, it would simply return the date in a stream format. If I want to see more about the date object, I can use de ir within the consul to do that. And there I get the arrow to be able to open it up, and we can see that it's also linked to a prototype and a lot of the methods that you're able to use on the date object you will find inside of that prototype. Here they are all listed, so that's where those methods come from that allow you to work with the date object, and its prototype is linked to another prototype of. So there's the prototype chain, all right, jumping back now to our O B J object we created. There's still nothing to find in it. Let's go at and define a function we noticed to string as being available in the prototype . Let's define and method to string and see what happens. What's forgot to finish my definition before I press returns, I have toe press shift enter. I'll simply have a single line within this method is going to print. It's going to log to the consul object. Now we compress return, and it will define that function is a part of the object and therefore make it a method. So now, if we do over Jadot to string the princes after it to execute, it returns object, so it is executing the method that's available immediately on the object, so the JavaScript engine will first look at the object. If it finds it there, it will not look at the prototype. It will ignore what is ever on the prototype. If the same property is in both places, let's now do the two string in O. B. J. So we got true analys Duo BJ has own property to string, and that comes back true. So now both of those were true because we've defined to string on the object. Now let's go ahead and elite O B j dot to stream. We're going to remove that method. Now Let's go ahead and execute it again. Now that is what the default to string method does. It's placed on the prototype. This is what it returns. So now we're executing that one because we deleted the truth. The two string method that was on O B J. Let's check to string in O B. J. Again. That's still true because it's still accessible from the prototype. Unless Check has own property to ST now that is false, because we deleted the to string method from O. B. J. Now, as we've been talking about the prototype and the examples we've been using, I have not used an example of a function yet. But remember, a A function is an object. We've established that already, so a function has a prototype as well what is available on the prototype of a function. That's what we'll look at next 14. Lecture 13: Understanding the Prototype of Functions: as mentioned in the previous video, Every object in JavaScript has a prototype. Functions are objects. Therefore, functions have a prototype as well. Well, what is defined on the prototype of a function? Let's take a look at that for just a second. Let me open up the JavaScript console and I'm going to define a simple function. All it's going to do is log to the console test. That's all it will do when it's called. Go ahead and press enter to define that function. Check it really quick. Sure enough, it works. Now let's take a look at what the prototype for test is. So I'm going to do a d a D I. R. Because that'll allow me to look in more details at the function. I get this arrow, I can click on toe, open it up. And as I scroll down through here, here is our underscore. Underscore proto underscore unschooling. This links to the prototype. You also will notice there is a prototype property here. What is that used for that is used if the function is used as a constructor, which we will talk about later in this course. So let's take a look at the prototype and see what it contains. Now there are some additional methods here. Notice the apply method. The bind method, the call method, those air three methods I wanted to introduce. Those three methods are available with functions. What those methods do is allow you to change the value of this when a function is executed . So we've dealt with two ways that this is bound implicitly well apply, bind and call or ways to explicitly bind this. So those three functions are what we're going to be looking at in the next a few videos. 15. Lecture 14: Using Call and Apply Function Methods: the first to function methods will talk about, are called and apply. Now, this also addresses the third method of invoking functions and that this third method allows us to change the binding of this. Using this technique, we can determine the value of this. So call and apply both allow you to invoke a function as if it were a method of some other object. And that is how we can determine the value of this. Bind this to an object of our own choosing. Now, before we look at a more involved example, let me just open the console and illustrate the call command. So I'm gonna create a simple function, a greeting function function. All it does is logged of the console. Good morning. Go ahead and press return. It will define that function. No. Obviously I can execute the function by typing, greeting and parentheses that causes it to execute. Well, Another way to execute the function is using call or apply. So if I do dot call parentheses and press return, it executes it as well. And so does dot apply. That does the same thing. No. Why would you ever want to execute a function this way. Well, because you want to determine the value of this. Now, remember, if I just invoked a function outside of strict mode, the value of this becomes the global object. So this is bound to the global object. But when I use, call or apply, I can override that I can choose. All right, So let's look at the concepts that apply to call and apply and also see how they're different. And then we'll look at an example. So if you want to use call, you use the reference to the function the dot operator, and then call and then you can pass into it. The value of this. You can also pass arguments and you separate those arguments with commas. Those arguments would be sent to the function. So in this example we're seeing on this page there are actually three arguments. They're a part of the call method. The first argument is an object, and that will become the value of this. And then we can have one or more additional arguments that will be sent to the function Now apply works the exact same way. The only difference is you pass the first argument you passing is the object that will become the value of this. The second argument is an array, and that array contains the arguments that will be passed to the function so we can contain a single element or multiple elements. So that is really the only difference between call and apply. So the way you determine which one you want to use is how you have the arguments that you want to pass to the function. If you have them listed in an array, well, apply then is logical. If not, then you can place them in and ray and call apply. Or you could just use the call method. All right, let's jump to sublime and look at a more involved example. No. First off, I'm going to create a couple of objects using the object literal. I will put a couple of properties, first name and last name, and then I'm going to put a method. This full name method will simply return the first name Can cat nated to the last name very simple and notice that I use this to indicate that I want to grab the first name of the object and the last name of the object? No, I said I wanted to object. So I'm going to copy this object and create a second object because it will be almost the same. So we have John Anderson in Object User One and Sarah West, an object user, too. Now I'm going to create a function, another greeting function, and we will pass in a term, a greeting term to this function and then simply log to the console, the term plus a space plus this stop first name. All right, there's our function. Now, let's use the call method that belongs on the prototype of functions to call this function . So I use the dot operator, I indicate call. And now I can pass in an object that will become the value of this. So in this first case, I'm gonna pass in user one, and then I want to pass in a term boots. So look what's going to happen here. We're calling greeting. We're calling it using the call method so that allows us toe automatically pass in an object. And that causes this to be bound to user one. So what should return is good morning, John, Because it's bound to user one. Now let's do the same thing again. But this time we will pass in user, too. I'll use a different greeting. All right, let's say those let me go ahead and grab the path to this HTML file so I can open in a browser. And let's open up the Consul. Good morning, John. Good afternoon, Sarah. So if we jump back to sublime, this 1st 1 gave us Good morning, John. Because we passed in user one. So it grabbed this stopped first name using user one as the value of this. So this was bound to use her one. And so we got Good morning, John. The 2nd 1 Good afternoon, Sarah. We passed in user to, So this was bound to user, too, and it grabbed the first name, which is Sarah. Now, let me add one more argument to this function. Let's say we want to put some punctuation at the end of the greeting now, using a call method because we have more than one argument of passing, we would have to enter a comma and then put the second argument. So if we save that refresh, we now get an exclamation point at the end of the greeting. All right, now let's switch that to apply so we can see the basic difference between call and apply. They work exactly the same way, with the exception of how the arguments are passed in. So a simple way to make these arguments passed in his and Ray is simply put an array literal around them. So now we're passing in the object that that will become the value of this. That's our first argument. Our second argument is an array, and that array has the elements that will become the arguments of this function. Go ahead and save, refresh, and sure enough, we get the exact same thing. All right, one more thing. I want to show you, too. Illustrate what is possible with call and apply. I'll use call, but the same thing would happen if I used to play. I'm going to do a concert out log, and I want to access the full name method of one of these objects. But I want Teoh invoke it that using the other object, not the one it's a part of, but the other object. So I am going to force this to becomes something entirely different from what would normally be. So to invoke the full name method of user one I type user one dot full name and now, if I wanted executed, simply put the parentheses. But now I do use the dot operator and indicate that I want to use the call method. And then inside of the parentheses, I pass in the object I want to bind to this, and I'm going to pass in object User too. So now what are we gonna get here? I'm calling this method right here. The method of user one that says that can cabinet this stop first name to this dot last name. So normally, when that executes, that should be John Anderson. However, using call, I'm overriding the default for this, and I'm setting it to use her too. So what we should end up with is Sarah West. Let's go ahead and say that refresh, And sure enough, we get Sarah West, so call and apply allow you to define the value of this when you're calling a function and the only difference between the two with call you passing arguments by separating them with commas with apply, you pass in the arguments as a single array value. All right, let's continue on 16. Lecture 15: Using the Bind Function Method: The bind method, which belongs on the prototype of functions, is similar to call and apply, but has, ah, a few unique differences. First, off bind like call and apply are used to determine the value of this when a function is invoked. But what is unique about bind is that bind creates a new function, and that new function that has created already has this bound to a specific object. And it's the object that you pass in when you use bind. In addition, when you're using bind, you can attach other arguments to that function. That way, when you use the function, you don't need to pass those arguments in. So let's look at a summary of the differences before we take a look at an example. So notice how we have structured the use of bind, we declare variable, and then we said it equal to a function. This is a function that we want to use. We use the dot operator bind and then we pass in a value for this and then we can pass in arguments and bind returns a new function so this F U. N C. Becomes a new function, and the first argument is the object that will become the value of this for that new function. So any time we execute this new function, it will always have this bound to the object we pass in. And then as a side benefit. And really the one of the main intense of the buying method is we can pass in additional arguments. If this function that we are using requires additional arguments, we can pass those in a time. We bind this, and those also will be bound to the function, meaning that we will not have to pass them in as arguments when we call this function. All right, let's look at an example that will make this clear. So I'm going to jump to sublime. No, I'm going to use the exact same example from the previous video that we use for call and apply. I have two objects. User one John Anderson User to Sarah West. I now have a function down here greeting, and it takes two arguments, agreeing term and punctuation that goes on the end. So I'm going to establish a new function. I'm going to call it morning greet and I will use bind to create this function. So I'll set it equal to greeting dot bind And I'm going to pass in user one as the object. So that will be the value of this. Whenever morning greet the spell that right? Whenever morning greet is invoked No. In addition, I'm going to pass in the term argument. Since this is going to be morning greet, I want to pass in Good morning. So that creates a morning greet function. I'm going to create another one afternoon greet and set that equal to greeting that bind. I will pass in user one as the object that will be bound to this for the afternoon greet function and then I'll pass in the greeting term. All right, now we can execute these morning greed. I put parentheses to execute it. Now remember, there was one argument we did not attach to the function and it was the punctuation argument. So let me include that and good morning should always be said with a lot of spunk. Right, So will include an ex exclamation point there An afternoon greet. Well, just make that a period. So basically what we've done is we've created a new function. This function now has user one as it's binding for this. So it's as if it were a method of user one. But we also attached a greeting term to that function so that we don't have to pass that in each time we call it. The only thing we have to pass in now is a punctuation argument. So let's save this and see what it returns. Copy, file path, jump out, open the console. Sure enough, we get Good morning, John. Good afternoon, John. So it should have said John, because John is the first name of user one. So when the greeting function this stop first name with buying, we sent in user one. So it is going to grab John when morning greed executes and when afternoon greet executes. So that is the main difference between bind, it creates a new function. And when that of function is invoked, this binding that occurs is with the object that was specified when the function was created. And so we're invoking this function like a normal function. But this is not the global object, because this function was created using the bind method. Now what would happen if we did this, could we override the binding of this using the call method? Once again, it's a morning Greek, so we need to make sure we use an exclamation point. Let's go ahead and try this and see what happens. Refresh. No, we cannot. The object that was bound to that function using bind takes precedence were not able to override that with Call. Now we've dealt with call, apply and bind, which is the third way of invoking a function, and it effects the value of this what this is bound to. So let's review our slide that has to do with understanding this. It's established at run time when a function is invoked, so call apply. Both invoked the function in an indirect way, and buying creates a separate function that then is invoked and uses the object that was passed in as the value of this. So it's determined by how the function is invoked, not where the function is defined. We showed that with call remember, we invoked a method that was a part of another object, but we passed in a different object. And so the value of this was determined by how the function was invoked, not where the function was defined. And of course, this is a reference to an object and just a reminder. This is not the function. So we've dealt with three methods of determining this. When we invoked functions. The third is the constructor method, which we will deal with a bit later was continue on. 17. Lecture 16: Invoking Functions as Constructors: we have come to the fourth method of invoking functions, and that is invoking a function using new. When you use new with a function, it becomes a constructor. Now you have undoubtedly been introduced to constructors before. For example, if I open the console, I can create a new object with a constructor. Notice this structure. This has the same structure as invoking a function. The difference is that there is a key word new in front of it. This creates a new object, the same thing for the date object that creates a new date. You probably already know that you can also create your own constructors. Well, when you create a function, you could use that as a constructor if you put the keyword new in front of it when you invoked it. However, you don't want to just arbitrarily do that because of what new does when you invoke a function with it. But what we want to do in the next several videos is expand on what you know about constructors. So first, let's introduce or review whatever the case may be. The concepts associated with constructors. I want to make sure we emphasize that a constructor is just a function that is invoked using new. There is nothing different or magical about the function. What is magical is the key word new. That's what causes it to behave different when you use new with that function, when you're invoking it and because it causes it to behave differently. We call it a constructor, as opposed to just calling it a function. Now a constructor returns an object with those two examples that I used. New object New date. They both returned an object. The key word new causes that toe happen. It causes an object to be returned. When that function invokes, the purpose of constructors is to create multiple similar objects. For example, if I use the day constructor to create numerous dates, they would be similar. There wouldn't be exactly the same because the day values might be different, but they would have all of the same methods. They would have the same properties. There would be a lot that is similar about them, so they behave in a similar fashion. So we can say that they're part of a date class of objects or they are a type of date that is how we can talk about them. And finally the returned objects share the same prototype, and that prototype comes from the constructor. That's an important point to remember as we expand on constructors later in the course when we're dealing with object oriented nature and features of JavaScript. This concept is important. Now to illustrate these concepts. We're going to do a few simple exercises, so I'm going to jump to sublime now so we can do that now. First thing I'm going to do is create a function. Now. I'm not going to put anything in this function. It is going to be empty, and I wanted to be empty. Just liking illustrates some of these concepts. Now, once I have this function created, I am going to invoke it as a constructor, using the keyword new Now something I want to point out first notice the uppercase G, when we are defining a function that we intend to use is a constructor. That convention is to use an uppercase letter in the name that references that function. This indicates to yourself and to others that may use the code that this should Onley be in Voke as a constructor. That's important to remember. In the next video, we'll show problems that can occur if you invoke a function that was created for the purpose of being used as a constructor without the keyword new. All right now I'm going to create two objects. Great one, and notice how I'm invoking the function and great to, and I will invoke the function the same way I placed the keyword knew before I call the function that changes what this function does. All right, let's go ahead and say that I'm gonna open this HTML file in the browser, and then we'll use the console to take a look at a few different concepts. All right, open up the console. Now we have two objects created that are of the type greeting because we used the greeting constructor to create them. So they are of the type greeting. Now are they equal to one another? No, they're not. They're they're very different objects. They have a lot of similarities, but they are different objects. Java script sees them as different. However, they are both instances of greeting, and there is a key word in Java script that allows us to check that it's instance of. Let me make sure I make that, oh lower case and notice that returns a true and for agreed to. It returns it true as well. So great One and greet two are both types of greeting. They are of the greeting class. They are objects that were created using the greeting constructor. This is some of the terminology we used to talk about these. Now let's look at a little more detail of greet one. If I type just greet one. I'm able within the console to open up what it returns. It returns this object, and there's nothing in the object because we did not place anything in it. Notice it does have a prototype, and the prototype is object. Now let's look agreed to same thing, and its prototype is the same as well. Now something that's interesting if we do a d. I R. On greeting, this will allow us to look inside that function a little better, and we open it up. The prototype of the greeting function is actually the function prototype was shown here. However, it has a prototype property, and I mentioned in several videos ago that the purpose of this prototype property is when a function is used as a constructor. Basically what happens is all objects created when that function is used as a constructor receive this object as its prototype. Now that's a concept that we're going to build on later in the course. But I wanted to show that to you. Now that's how both of these objects received the same prototype. Now, one of the differences we've been talking about that happens when you invoked functions in different ways is the binding for this. So what occurs with this when we invoke a function as a constructor? Let's take a look at that next. 18. Lecture 17: Constructor Invocation and the Value of this: in this video, we will be talking about constructor in vocation and what happens with the value of this. So let's jump right into it. I'm going to had to sublime. No. First off, I want to illustrate the value of this when a constructor is called. So in order to do that, I'm going to create a function. This time I'm going to use a function declaration. And this is one situation where I usually use a function declaration as opposed to a function. Expression is when I'm creating a constructor, and the reason for that is I feel no need to designate that the function is first class. I don't plan to pass it around. I'm simply going to be using it as a constructor. So in this function declaration were simply going toe log this to the consul and then I will call it using two different invocation patterns. One is simply I will invoke it as a regular function here. We'll do that and the other is all invoke it as a constructor using the new keyword. Now let's see what gets return for the value of this. In both of these cases, I will save this. Copy the file path to the HTML file and we'll open the console and take a look at the value . All right. So when we invoked the function as a regular function, we received the window object the global object as the value of this. That's what was bound to this. And we can see that I've just opened that and reviewing that. However, when we invoked the function as a constructor using the new keyword notice what the value of this is, it is a reference to greeting. So let me jump back to sublime when the new key word is used, it changes the value of this to point to the new object is created. So new causes an object to be created from this constructor. And at that time this is bound to that object. And so that's what we're seeing here in the console. It's bound to this new object. Now that is what gives constructor functions value. Because remember, the purpose of a constructor is to create similar objects. And so we do that with this. Let me show you an example. You have I'm sure seeing multiple examples like this, but perhaps not completely understood why this. So here is a function users and it takes two parameters the first name and last name. Now, the purpose of this function is to create similar objects. Each of these objects will have a first name and last name, and they will have a function which will combine the first name and last name is less. Set that up. So we use this. Remember, this is the value of the new object created. So this stop first name. It's going to put a property of first name on that new object and it's going to set it to the name that has passed in correct the spelling there. And then we'll do the same thing for this not last name. Create another property on that new object because this points to that new object. And then finally I'm going to add a method as well. So full name will be a method on that new object. And the only thing this method is going to do is simply return the full name. And we'll do that by can Katyn ating the first name to the last name. And once again, we use this because this points to that object that has been created. So now that's our method, and that's our constructor function. Let's now create two objects. User One will be the first object. We use the keyword new unless passed in the first name and the last name. And now let's create a second user user, too, whenever we use the keyword knew that creates that forces the constructor to create a new object and then the keyword. This points to that object. The objects will be similar. They will both have a first name in the last name, and they will both have a full name method. Now, once the objects are created, each of those individual objects we could add additional properties to them. But when they're initially created, they will have similar properties. All right, let's say that Jump out again to the browser and refresh. Now let's take a look at user one. There we go. We have a first name. We have a last name and we have a full name method. And remember from our last video, where did the prototype come from? It is result of the prototype property of the function of the constructor function that is called. And once again we'll delve into that in more detail when we get to the object oriented section of this course user to, as you can see, will be very similar, just with different values and first name and last name. Now, one thing to note. When I set up this constructor function, I provided a full name method as a part of it. Now this method is exactly the same when we create these two objects, that method is exactly the same on each of those objects. No one that occurs. That is really a better item to place on the prototype. And I just mentioned that now because I don't want Teoh introduce a faulty pattern. I want you to be aware that this type of thing is better done on the prototype because then you only have it in one place. You don't have it in multiple objects. If you needed to make a slight tweak to that, you could make it in one place. That is the value of having it in a single place. That's one of the values of having it in a single place, so it's better done on the prototype, and we'll address that once again as we get into the object oriented section of this course Now. One last thing I want to point out is the danger of constructor functions if you do not use the new keyword. That is one reason that it's recommended that all constructor functions begin with an uppercase letter that sends a message to yourself and to others that might view your code that this is a constructor and this needs to be called with the keyword new. Because if you don't use new think about this, what will the value of this be? We looked at that at the start of this video. The value of this will be the global object. So what is going toe happen? If you don't use the keyword new, it's going to define variables in the global space, and that's something you want to avoid because that could redefine something that is already defined. Or it may simply muddy up the global space so really quick jumping to the consul again. Let me clear the console. Now let's see what would happen if I were to execute users without the keyword new in a pass in the first name and a last name Press return. Now let's see. First name. If I access that variable, you do a consul doubt log of first name that is now defined on the global space and the same for last name. And so is the full name function. If I call full name, it returns Tyson Barrett because now has both of those available on the global object. So that is the danger of constructors. There are patterns to avoid this. The most common is simply starting your function with an uppercase letter that doesn't prevent it. But that is a reminder of what the purpose of this function is that it is a constructor, so a caution to be aware of. All right, let's continue on. 19. Lecture 18: Higher Order Functions, Callbacks and the Problem with this: At this point, I'd like to introduce higher order functions and as a part of that callbacks and the problem that we encounter with the keyword this with callbacks. So first higher order functions. Earlier, we talked about first class functions. Basically, if a function is first class, it means the language treats functions as values, which obviously happens in JavaScript. So what really is the difference between that and higher order functions? And is it important to even understand these concepts of these terms? Well, I feel that understanding these concepts, understanding these terms helps us talk about the language, allows us to learn the language better. That's one of the advantages of identifying concept, so higher order functions. Let's first look at what that is. So ah, higher order function is simply the functions are able to operate on other functions, and that happens by either taking them as arguments or returning them as a part of the return statement. Now, the fact that JavaScript supports first class functions makes it possible to create higher order functions. Treating functions as values is important if you're going tohave functions, operating on other functions as an argument or as returning them, so one is necessary for the other. The reason we talk about higher order functions as its own concept is because it's the way we use functions. The fact that functions air first class allows us to use them a number of different ways. Higher order functions as a way we use them, and it can help us solve programming problems later on. In the course will look at a lot of examples of that now probably the most common example of higher order functions in JavaScript. Our callbacks. So let's take a look at callbacks is an example. Then I'll show the problem. We can encounter with the keyword this when using callbacks. So let me jump to sublime and we'll get started now, a pattern that is well known in Java script that uses a callback function. Our listeners, When we set up a listener, we use a handler that is called whenever an event occurs. While that is a function that is called, that is a callback function. So let's do that first. So I'm going to add event listener, too. The document object and the event that I'm going to listen for is don content loaded. So this is an event that allows me to determine whether the Dom is loaded and I can begin to act on the Dom. So we've identified the event. Now we can pass in a function. This function is an argument that we're passing in. It will be called once the event happens. Therefore, we can call it a call back. So I'm going to do that with an anonymous function. I'm going to define it right here as a part of setting up my event listener. All right, So what do I want this function to do? Well, I'm going to have it create another event listener. So once the Dom is loaded, I want to create an event listener that will allow me to click on an image and simply display a message to the console. So nothing crazy. So first I will find the image. I'll do that with query selector. There are a number of different ways to obviously find this. I'm going to use query selector and the i d of that image is local. And so with query selector, I specify an i d of an item within the dom using the hash symbol because query selector allows us to use CSS selectors for grabbing items. Now if you are familiar with Jake Weary, you have done this type of thing numerous times in J Query for setting up listeners Jake, where he can make it a bit simpler to do that. This is the pure JavaScript way of doing it, which I think is important to understand. Yes, you should use other libraries to make things easier and to make your development faster. But I think it's important. Understand that pure javascript way as well. So now we've grabbed that note from the Dom, and we're going to add an event listener to it. So logo dot add event listener and the event I'm going to add is click. Now I'm defining in other function. This is going to be the call back. So once again, I'm passing a function in as an argument. And what are we going to do? Simply Consul Doubt log Display the message clip that is all. So this is a common callback pattern, which you have used and seeing probably numerous times where we define the function. That function is then called after something happens so Let's go ahead and take a look this really quick before we move on based on that file path, and now if I open the console, we can see that clicked is displayed. I can click it again and we get clicked a second time. So when that event occurs, it's calling the callback, which causes that message to be logged to the Consul. All right, Now I want to create another call back now, this callbacks going to show us the problem that we encounter with this when using callbacks. And this also shows higher order functions because we're passing a function as an argument into another function. And so functions are acting on other functions. Now, to illustrate this, I'm going to create a couple of variables. These variables will be on the global object simply a first name variable and a last name variable. Now, in addition, I'm gonna create two objects. Now I'll just pesos instead of you watching me type all that out. But I have here to objects and those objects also have a first name and a last name. Now, finally, all create a function going to name it full name and basically The purpose of this function is to log to the console the first name can caffeinated to last name and notice. I'm using the keyword this prior to each one of these. Now, from what we've learned about the keyword this if we invoke the full name function, this will refer to the global object. And so it will grab James West and display that just to illustrate that. Let me call this function, save it, jump out and refresh. And sure enough, we get James West now. What would I do if I want to display the first name and last name for these different objects? So I want to continue to use this function, but I want to use it on multiple objects. Well, as we've learned in previous sections, we can use call to do that and I can pass in User one and let me call it again, and I'll pass in user, too. Let's save that refreshing. We get Corey Sikahema and Hayley Smith, so we changed the value of this by using call and passing in. Another object now lets out a twist to this. Let's add a call back to this full name function. Let's say for some reason we want to delay the display of the full name for a couple of seconds, so we're going to use the set time out. Set Time out is a method that's attached to the global object, and what allows us to do is invoked a function after a set amount of time. In this case, we're going to use two seconds. So let me set that up, set time out, we simply call it, and then the first thing we pass in the set time out is the function we want to invoke. So I'm defining an anonymous function now. Inside that function, I'm going to do the exact same console log statement that I was doing before. Now the second parameter that you pass into set time out is the amount of time. So let's use two seconds is expressed in milliseconds, so we enter 2000. All right now, I'm doing a full name dot call user, one full name dot call user, too, and let's see what happens now that we've added a call back right here. That's our call back using the set time out function, so I'll save that jump out and we get James West printed twice. So why did that happen? Well, that is the issue that I'm trying to illustrate. That can happen with callbacks, where we can lose the value of this with a call back. And so sat time out takes on the default value of this, which is the global object and therefore displays James West. So that's the problem we can encounter with callbacks. Now, how do we address that? What can we do to prevent that from happening? Well, first off, here's a little trick that is sometimes used within JavaScript if I declare variable and the variable that is many times used in this situation and said it equal to the value of this prior to executing the the function that has the call back. And then I changed this reference here to the variable. So I changed both of these two that this Consol the problem. This should display Cory and Haley, so let's save that and refresh. So that works. That's one way to solve it, and that sometimes is used to prevent the problem that exists with callbacks. Now, another method. Let me go ahead in the race this reference here and set these back to the vest keyword. Another way we can solve this that we've talked about in a previous topic is using Bind. Remember, buying creates a new function that can be executed, but in the process it binds the value of this to some object that we specify, while this callback function is not executed until this time expires, so what if we used bind to create a new function that will be returned in this place and we bound the value of this when the full name function is execute, the value of this at that time will be bound to the function that's returned that should there by bind any object that we pass in using the call method. So let's try that out and see how that works. Um, you know, go ahead and save that refresh. Sure enough, that works as well, so bind allows us to overcome that situation, so there's two ways that we can overcome that problem. Now there is 1/3 method, and that involves aero functions, and we will take a look at Errol Functions in the next movie 20. Lecture 19: Arrow Functions: as mentioned in the previous video Aero Functions, help us solve the problem of this. When we use callbacks, there are certain situations with callbacks where this does not end up being the value that we want it to be now. Some of you may not use aero functions regularly, so let's quickly review aero functions. Then we'll look at how it solves the problem. So first here is a simple function. Some, it adds two numbers together, that air passed into the function and returns the value. Now, how would the same thing be accomplished with Errol Functions? Well, now, first off, aero functions provide a minimal syntax so we can do the same thing that is shown in this function with typing a lot less. That's one of the advantages of Errol functions. The big advantage were interested in in this video is the fact that it solves the problem of this. Where we lose this or this is bound to the global object when we expect it to be bound to a different object. So here we have a function. Let's look at the same function defined as a narrow function, accomplishing exactly the same thing. So In both cases, we've assigned the function to a variable. No arrow functions must be function expressions. They cannot be function declarations. And so obviously we have I function. Expression here is we're assigning the function to a variable. We have the parentheses. These are the parameters so that we're able to pass in arguments. We don't include the function keyword that is replaced by the arrow, which is created using the equal sign and the greater than sign. Not only does the arrow replace the function key word, but it also indicates what should be returned. And so once these two values are added together, it automatically returns those two values. So minimal syntax, As you can see, we don't have to type is much. And there are certain situations where that's kind of nice. Let's look at a few additional examples because aero functions are a lot more flexible about what you need to include. Here's another arrow function and notice that this one does not include the parentheses, and that's because we have a single value being passed into the function, so the parentheses are not required. It's still returns the value of this number that is passed in, multiplied by itself. Another example. This one simply returns the number 100. That's all it does now. In this case, we need the parentheses because we have no parameter. Nothing is being passed in, so we need to include the parentheses, so some different ways to define aero functions. Now you can have the curly brace scenario functions. For example, if we had more than a single line, we would need to use curly braces for that. Now, after that quick review of Errol Functions and how you define them, let's go ahead and look at how it solves the problem that we encountered in the previous video. So I'm going to jump to sublime now. Here's the problem that we encountered in the previous topic. If you remember when we invoked the full name function using the call method and passing in these different objects user one and user, too. Because of the callback, which we have inside of the full name function using set time out, the value of this is lost and default to the global object. Therefore, it displays James West. In both cases, it does not display Corey Sikahema or Hayley Smith now In the previous topic, we looked at a couple of ways to solve that. If you remember, we used the method of declaring a variable and assigning at the value of this before set time out was invoked. That was one method we used and that worked great. We also looked at using the bind method that is part of the prototype of all functions. To bind the value of this to this anonymous function. And that worked as well. We mentioned there is 1/3 method and that is you using ero functions. One of the main reasons arrow functions were developed in E. S six was in order. Teoh, take advantage of lexical this Now what do we mean by lexical? This when we talk about something Lexical e, we're talking about where it is written. So basically where this a pairs is where it's going to determine what it is bound to. So in the case of this full name function, this is inside the function. When we invoked the function and passed in a value for this, we would expect it to retain that value of this because of where it sits Lexical e and arrow functions will do that. In a way, an arrow function is like using the bind method. So let's change this anonymous function that we have inside here. Let's change it to a narrow function and see what happens. So I'm going to remove the function keyword, and I'm going to put in the fat arrow operator that defines an arrow function for us. Now I'm going to save jump out refresh. Wait two seconds. And as you can see, we get the data that we expected. We get Corey Sica, Hammett and Hayley Smith. So arrow functions allow us to solve that as well. When we had just the regular function we were losing, the value of this is seen here. Change it to a narrow function. It remains faithful to lexical this, and therefore it solves the problem for us. So that is another reason to use arrow functions in your javascript coating. So two main reasons. Minimal syntax and lexical. This. All right, Let's move on to the next topic 21. Review: before we move on to the next section of this course, let's take a moment and review the largest concept that we dealt with in this section, and that has to do with how functions are invoked and how that affects the value of this. So here are the main points that we cover. First, you can invoke a function simply as a regular function. After the function is defined, you simply call it by entering the function, name and parentheses. That sets the value of this to the default, which is the global object. Unless you are using strict mode with your coding and then this is set to undefined. Now remember, it doesn't matter how the function is defined. It's how it's invoked that makes the difference. The second way of function can be invoked is as a method, So if the function exists on an object and is invoked as a part of that object, then the value of this becomes that object. Now remember, methods on objects can be invoked by other objects because we can reference those functions and they can be copied around by reference. And so once again, it's how it's invoked when it's invoked as a method of an object. This is bound to that object functions that are invoked as a constructor, meaning the new key word is used. Any time the new key word is used, it creates a new object and this is bound to that new object. So any reference to this within within the constructor function refers to that new object that is created. You can also invoke functions indirectly using call and apply, remember, call and applied to the exact same thing. The only difference is how the arguments are passed in to the function with call. The arguments are passed in by separating them with a comma with apply the arguments air passed in as an array, so they all are contained within an array. In both call and apply, you can pass in an object that will be bound to this. So that is the first parameter of call and apply is the object which you want to bind. This too. We also covered the bind method that is a part of the prototype of functions. Bind creates a new function and then you can invoke that new function in the process of creating that new function. You can specify the value of this as the first parameter, and you buying that to the new function. You can also bind or attach the arguments that are generally passed into a function to that new function. That way, you wouldn't need to pass ALS arguments in each time you invoke the function. It would already know them, and it would use them by default. Finally, we covered arrow functions. In addition to a minimal syntax for defining functions, Arrow functions actually step outside the default way JavaScript uses for determining the value of this aero functions determine the value of this lexical e. So it's not so much how the function is invoked, but Lex Klay, where the this is placed. When you write the function that determines the value of this, we found that with callback functions, we lose the value of this, and so we can overcome that using bind and using arrow functions. Now we've covered a number of concepts in this section. These concepts will become very important as we begin to look at more advanced things we can do with objects and more advanced things we can do. It functions and as we begin to look at patterns which we can use programming patterns which we can use, So let's move on to the next section. 22. Think Like a Programmer 2A: DRY Programming: we've gone to another section of think like a programmer in this section will be talking about abstraction and dry coating. Two important ways to think when you're doing coding. So first, let's take a look at what both of these mean. So dry coating is simple dry stands for Don't repeat yourself. So if you find you are repeating things in your program, you need to take a step back. You need to re factor. Something's re factoring is simply the process of cleaning up your code, making it better. And if you find you're repeating yourself, that's a signal to go in and do some re factoring. Make your program better. Re factoring should be a common practice in what you're doing now. Abstraction is very similar. Abstraction helps to keep you from repeating yourself. And basically, the idea of abstraction is that each significant piece of functionality in the program you're writing should be implemented in just one place. So obviously, if you're not implementing it in just one place, you're repeating yourself now. I think this idea of abstraction can be better understood as we look at an example, so I'm going to jump to sublime and we'll take a look at an example that will deal with abstraction. All right, No, here I have a simple function. Basically, what this function does is it goes through the numbers 1 to 100 finds every number that's a multiple of three and then adds that to the total and then displays the total on the HTML page. So here we have here is what prints out on the HTML page. The sum of all numbers divisible by three from 1 to 100 is and then it gives us the total. So we use a while loop. To do that, we loop from the start number to the end number. We check to see if the number is a multiple of three by using the module ISS operator and checking to see if there's a remainder. If there's no remainder than we know, it's a multiple, and then we go ahead and add that to the total. So that's what it does down here on the bottom. We've simply added an event listener to document that once the the Dom is loaded, we then call the function. We wanna wait till the Dom is loaded because we are manipulating the Dom here. All right. Now, why did I call this function? Find it well, because the function does multiple things. I was having a hard time figuring out a name for it, and that could be an indication right away that you need to abstract what you're doing. You need to make sure that significant pieces of functionality are implemented just once, because if I were just doing one thing in this function, it would be easy to name it. But because I'm doing multiple things, it makes it difficult to name it. If I abstract these out to their own functions, I can easily name those functions. And then those functions become much more usable. I can use them in a lot of different situations, and I'm not repeating myself later in the coat. So let's look at what might be abstracted out Well, first were ah, summing some things and so that would be an easy thing to abstract out weaken. Simply create a separate function for totaling up numbers. Next, where we are going through a range of numbers and finding which numbers are a multiple of some number. Right now, it's all hard coded. But if we abstract that out, it gives us more flexibility as well. We could use any range of numbers, and we could use any number to determine if it's a multiple of, so it gives us a lot more flexibility. So let's probably more weaken do. But let's do those two things. So first, let's start with the easy one. Let's start with some and will call the function some because that's what we're doing now. What we want to do is pass in an array of numbers and be able to add all those numbers up and return the result. The reason I'm choosing to pass an array of numbers, cause I'm thinking I had I'm thinking about my fine multiple function that I'm going to create that will find all the numbers that air multiple of some number between a range, and I plan to return noses and Ray. That seems like a logical way to return a bunch of numbers is as an array, and so I want to be able to read in an array and some of those All right, so let's first declare variable total and set that equal to zero this is what will contain the final number. Everything that's added. Then let's simply do a while loop and just check the length of our ray and see if it is still greater than zero. While it's greater than zero. Simply add the number to total, and I can do that by just popping the number off. By popping the number off of the array, it reduces the length of the ray at the same time. That way, I don't have to create another variable Teoh toe act as a counter or something like that. Now we can simply return the total that we've since we've arrived at that. So that's our some function. So we have abstracted out this part here. It could be used in multiple situations. Now, therefore, every time I want to add a series of numbers together throughout my program, I won't be repeating that code with a loop. I'll simply be able to call this function. Now. It's created. Second function will call find multiple because the purpose of this is defined the multiples within a range of numbers, we will pass in a start value and in value, and then the number that we want to use to determine if it is a multiple of that number. All right, now we want to return all the numbers we find in and Ray. Since we have multiple numbers, that seems to be a logical way to do it. So we'll set up Honore first. Now let's do a while loop from the start value to the end value. So while start is less than or equal to end, then we're going to do the following if start. Then we use the module ISS operator. If that's all equal to zero, meaning there is no remainder. Therefore, if there's no remainder, we know it is a multiple of that number. Then we push if the start value onto the results array and then when we're done, we return results. Simple. Is that all right? So we have our two of functions. We've abstracted some of the functionality out of this, find a function. So now let's finish what we're doing here. So the only other thing we were doing is printing out this information inside of the content. Deb. Well, let's just go ahead and put that as part of the event listener, since that's not a function we would probably repeat. We could abstract that out and pass in the node. We want to modify or something like that. You have a knowledge of your program. And so you know what makes sense the abstract out? What doesn't for this? I'm not going to abstract. I'm just going included part of the event listener, and I'll just use an anonymous function. So there's no reason for me to create another function. No, I simply want to get element I d buy i d. And the name of the element is content. And then inner HTM male is equal to Now. Here is where we put in the tax and then call the functions to determine the value. So I'm just gonna copy the text. And now let's in Canton eight. That to the results. So how we How are we going to call both these functions to get what we want? Well, the end result is going to be the total, So we want to call some and to pass into some we need an array. Well, where is that array going to come from? Is going to come from find multiple. So see what we're doing here. And then to find multiple, we will pass in 1 103 Put a semi colon at the end. Go ahead and comment this out. Since we're not using that function anymore, save this. And now let's take a look at what we get. Copy the file path will put it in the browser. I believe we have a little bit of problem. I forgot to do one thing here. We have an infinite loop running. And that's because I know I never incremental the start value as we move through this loop . So say that again. There we go. This time we get the results. The sum of all numbers divisible by three from 100 is 16 83. So now think about the flexibility we have now. I could change the range. I can change this 25 and get the results for numbers divisible by five. So it's It provides a lot more flexibility. It makes the management of your code easier. It makes the debugging of your code easier. If you're dealing with a particular functionality. One place, that's where you know you need to go to figure out what the problem is so abstraction and not repeating yourself to important, important concepts to keep in mind as a developer. Now I want to take a look at one more example. In this section. This example will apply some of the things we've been learning so far in this course, so let's move on to that example. 23. Think Like a Programmer 2B: DRY Programming Exercise 1: in this video, we're going to take a look at a second example of abstraction, but this particular example will apply some of the things we've learned. Some of things we've learned about high order functions about how to invoke functions about this. For this example, we're going to use an exercise that was part of the getting started course, the first course in this series. So let me jump to sublime. We'll take a look at that first. Now the purpose of this code was simply to display events that occurred on an HTML page. So basically, we would display when the page loaded would display. That event would add some listeners one for a key press event, key down event one for a click handler, one for a mouse move event so those three events would be tracked and displayed on the page . We also had the ability to remove event listeners if you wanted to stop it and to add them back in. If we wanted to start it again, says basically what this page did. So let me just show it to you really quick. Then I'll tell you what we want to focus on so as you can see as I move the mouse around events recorded, however, those events are not recorded as fast as they're fired. I should be having multiple events per second when I move the mouse, but that's not happening. There is a course, the click event, and there are key events as well. Just press the key there, but I want to focus on the mouse movie event. We want toe abstract something out of that. All right, jumping back to sublime. Let me move to that portion of the code so we can take a look what's currently happening. Here's where the mouse move handler is created. So this function is created so that it can be called as a call back any time a mouse move event occurs. Now, the reason it's not recording as quickly as it should is because I've added some code. I do an if statement to see if this variables equal to true. If it is, that's when we print the information out, and then we set it to faults, and then we call a set time out to set it to true again after in this case, 1/2 a second so it's really only firing every half second. Now this functionality here, everything without the call to the load info function. The rest of this can be abstracted to its own function so that we can use it in other places. What if there's other functions that we want to only call at a certain rate, were concerned that they could be called to frequently could cause problems with our program. This would be the function we want to abstract out now. This is similar to not exactly like, but similar to a D bounce function that are available in some libraries. For example, underscored Js has a denounce function now. It's not exactly like it, but allows us to illustrate some things. So here's what we want to do with the D bounce function. I'm going to first explain it, and then I'm gonna give you a chance to try it. If you would like. Now this is a pretty difficult assignment, so don't feel like you need to figure it out on your own. But I think it would be valuable for you to try it and to think through some of the concepts. So what? We're going to create is and execute weight function, and we're going to pass in two parameters. One is the function that we want to actually have executed, and the other is the wait time, how long it should wait in between executions. Now what this execute weight function should do is return a function. It should return a function that will do exactly what has been passed in, but it will add the additional ability to wait so much time in between invoking the function. So what this allows us to do is we could then pass in any function, and it would return a function that would have this functionality added onto it so it could be quite valuable that way now. In order to accomplish this, you'll need to use some of the same functionality that was already used down here. With the set time out, you'll need to use the apply method of the prototype object of functions. You'll use that to call the function you'll need to store the value of this in the variable and the value of arguments in a variable so you could make those available to the function when you invoke it, so that will be as if it were invoked in its original context, but it has the wait time added to it. So that's what needs to be done. If you'd like to give this a try, go ahead and pause the video at this time. And then when you're ready for me to review with, you started up again and we'll walk through it all right. Now, as I said, that was a pretty difficult assignment. Hopefully, you learned some things. You thought through it. If you accomplished it fantastic, that is great. But I don't want you to feel like you needed to, because it is a bit more difficult. But I believe you're going to learn some things as we walk through this. So first off, I'm going to declare two variables time out and call now and I'm going to sat call now equal. The true call now is what I will use to determine when the function should be called. Similar to the print it variable that I used in the original code down here. Okay, time out. I probably don't have tohave. I'm just using this variable for when I call set time out. This will record the I. D of one set time out is called. I'm setting it up because in some future version I may want to use it. It's not necessary in this particular version. All right, so those are two variables that I've set up. Now we want to return a function. Remember? I said what we want this to do is return of function that will contain the exact same functionality of what we passed in. But we'll add the weight feature to it. So here we have our return statement. Now, first thing I want to do inside this function is I want to declare a couple of variables, want to store the value of this and another to store the arguments. That way, when we execute this function that's passed in, we can include with it the arguments, and we can include the value of this as it was originally. So we have those two values stored. Now I'm going to set up another function. This function will simply be called when I need to reset the call now variable. So it'll start out is true. Meaning that we're going to execute that function right away. But then we'll set it to faults and then we'll set a timer. When that timer ends, it will call this function the later function and the purpose of that later function is to set call now equal to true. So once is set to true, then it will be able to fire off again. All right, now we simply have an if statement we check call now. If it is true, then the first thing we do is set. Call now equal defaults because we don't want it to execute right away again. Then we call our function. We do that using the apply method, and we want to pass in the value of this. So we store that into this vow variable, and then we want to pass in arguments as well. So that has everything that it would have had originally. And then finally, way call sat time out and the function we want to call when set time out fires is later because that will reset the call now variable. And now how much do we wait until we call that while the wait time that has passed in. So there We've got her execute weight function set up notice the things we're doing. Where returning functions were passing in functions were invoking functions using apply were using callbacks. Here's a callback. Here's a call back. So a lot of those things we've been talking about we're now using to abstract this principle in our programming, and once we abstract it, we can use it in multiple places. So now the only thing left to do is we need to come down to our mouths. Move handler here, comment that out and let's define it again. Remember the execute Wait function returns a function. Now what we want done. Each time this executes will, the only part that was necessary is this right here. All the rest of the code was to add that weight functionality in. So we're going to pass in a function. Well, just it'll be an anonymous function this time, and the only thing it does it has that load info. Now let's go ahead and put a semicolon at the end. And the at event listeners set up the same because it is still mouse move. Handler is the name of the handler. Must save this and let's see if it continues working and it looks like we still have a problem. So I'm gonna open the console and show you the air that we're getting uncaught reference there. E is not defined. I left something out when I was creating that function. I needed to include the E because we're referencing it here. This is actually event objects, so this variable will contain the event object, and then we use it to access, um, information when we display that information. But if I don't include it here, it won't get passed into the X Q weight function. It won't be a part of the arguments that is grabbed, and then it will not include those arguments when it invokes it. So now let's save it. Refresh again. And now mouse moves worked, working. But look, how frequently is executing. So there's one more thing that I did not dio when I was calling the execute. Wait. I included the function that need to be passed in. But I didn't include the wait time. And so javascript functions. If they're expecting a parameter to be passed in, we don't include it. It's fine with that. That can sometimes cause problems. So now I'm going to set that to 500. Jump out, Refresh. And now mouse move is coming. Every half seconds did have as frequently as a as it was. So there we have it. We have an execute weight function We've set up that we now can use in other situations as well. So we abstracted that idea out, created a function that would encapsulate that idea and set it up so that we can use it in multiple places, thereby were not repeating code. Every time we need something similar to this, I'm hoping you're grasping some of the concepts that we have been discussing and how they can help to improve your code. We're going to keep drawing on these as we continue into the course. So let's move on to the next topic. 24. Lecture 20: Working with Objects Introduction: We've come to a new section working with objects now this section or is going to be a small one. There won't be a lot of videos in this section, but there are some things that I want to cover about objects that we haven't covered or won't cover in other sections. So in this section I want to look at detecting object properties. So when you're working with objects, sometimes it's necessary to figure out what properties that object has or if it has certain properties. We will also work with property attributes. So there are attributes, a sign to the properties associated with objects that control how we can work with them. And finally, we'll look at some E S six additions that allow us to work with objects. So, like I said, a small section, but let's go ahead and get started 25. Lecture 21: Detecting Properties on Objects: in this video, we're going to take a look at detecting properties on an object now, in some of the past videos that we've already looked at in this course, we've addressed a couple of key words that allow us to determine if a property exist on an object. Let's review those really quick. So the first keyword is in and in is used this way. If we were to do this inside of an if statement, if and then the property name in and then the object. And if that property name exists in the object or in the prototype chain of the object, this results in true. So in checks the prototype now the other key word we learned that doesn't check the prototype. It simply checks to see if the property exists on that object is has own property. And so that would be structured like this. If person one dot has on property and then inside the parentheses and inside of quotes, the name of the property and that would check to see if the property exists on the object, it would not be true if the property exists in the prototype chain. Now, another way we can detect properties on an object is using a loop. The four in loop allows us to iterated through all of the properties of an object. So let's take a look at that. I'm going to jump to sublime and we'll look at an example. No, I'm going to start off by pasting in an object definition, going to create an object with several properties. As you can see here, some are string Boolean ones, an object so some different types of properties as well. Now how would we looped through those properties to check each one of them? Well, as I said, we do that with the four in Loop and it's structured like this, so we declare a variable. This variable is going to contain the property name as it iterated through all the properties in the object. Then we used the key word in, and then we indicate object that we want to reiterate through. Now, here's how we can access those properties as we iterated through them. In this loop, we use a consul dot log statement, and first I want to display the name of the property, and I can simply do that by using the variable prop that I included in this loop because it will contain the name of the property. Now, how do I display the value of that property? Well, in that case, we have to use the bracket notation for accessing the value of the property bracket. Notation is another way. Toe access properties in an object you're most familiar with bracket notation with a raise , but they can be used with objects as well. And here's how it would be done. First, we indicate the object. Now, instead of using the dot syntax, for example, if we use dot prop, it would look for a property name of prop inside of the person, one object. So what we need to use in STAD are square brackets and then we put the variable inside that All right, I'm going to go ahead and save this and then let's take a look at the results. Let me open up the console. And here we have a list of all the properties and in the value. So we get the name of the property first, and then we get the value notice the value of the one property that contained another object. If we needed to see those as well, we could detect that that were an object. And then we could loop through all the properties of that object. Now, looking at this initially, you may think, well, this work similar to has own property because, as you can see, it's not displaying any properties that may be a part of the prototype. But does it really work just like has own property? In actuality, it it's not quite the same. And that's because every property assigned to an object has attributes. And one of those attributes indicates whether the property is innumerable, which simply means that you can iterating over those properties in a for in loop. So, for example, let me just type in person. One dot property is innumerable. This is, ah, method that's available on the prototype and let's check first name that comes back true. So that means I'm able to iterated over that in a for in loop. Now let's check to Stream, which is one of the methods that's provided on on the prototype when I press return, that is false, so the innumerable property of to string is false, and if we type in person, one and dot and then we're able to see some of these other methods that are part of the prototype. Those are all set to innumerable faults, so we don't generate over them when we're using a for in Loop. Now, in the next video, we're going to discuss the attributes that air part of properties in a little more detail. But before we end this video, I just want to show you one additional key word we can use to grab the properties of an object. So, for example, if I were to Claire variable properties and sad in equal to object dot keys and then inside of the parentheses for keys, if I put person one that will grab the properties of that object person one. When I press return now I can just say display properties and we can see that returns it as an array, and we can see a list of all of the property names that are associated with that object. So that's another way to access those properties. The four in Loop seems to be the most useful in in many cases, but Keyes is available as well. All right, let's move on to the next topic 26. Lecture 22: Changing Property Attributes: In the previous video, we introduced the idea that object properties have attributes, and those attributes can control different features about that property. For example, we looked at whether property was innumerable or not, meaning that we can iterated through that using a for loop no by default. When you add a property to an object, it is innumerable, but it is possible to change that. So in this video we're going to look at one additional attributes properties, and we'll look at how you can change those attributes if you need to. So let me jump to sublime, and we'll get started now. To illustrate this, I've created a simple object. It contains three properties type, width and the height. So let's go ahead and execute this Java script by opening the Web page, and then we'll use the console toe work with it. Let me open up the console, and first, let's take a look at that object. We can see the three properties that I assigned to it. We can see that has a prototype. Now let's check the type property. We learned how to check in the previous video whether that property was innumerable or not , and that's using the property is innumerable method. That's a part of the prototype, and that returns true. So the type property is innumerable. Therefore, we would be able to see it in a for loop now. What if we wanted to prevent that? What if we wanted to keep that property from being discovered using a for loop or a method like that while we could change that? So let me clear the screen, and we're going to take a look at how we can change the attributes of a property and that is done using the define property method that is associated with object. So let's change the type property from innumerable, where we can see it in a four loop to not innumerable so that it would not show up so we could hide it from any of those methods that would look, Look for it that way. Now, the way we do that is, we first indicate object notice uppercase. Oh, because we're using the default object that is a part of javascript. And then we're going to use a method that is found on that object, which is defined property. Now we specify the object and the property. And then we define an object. And inside that object, we can specify the attributes that we want to change. For example, if we want to change innumerable onset of the faults, then we would put innumerable inside that object. Now we use close Pran and a semi colon. Now, when we press return and check o b j dot property is innumerable and used type, it comes back false where it came back true before. So what we've done is we've made that property so that it cannot be discovered in a for in loop or the keys method. Now, another attribute that's available for properties is configurable. Configurable by default is set to true, and what that allows you to do is go in and change the attributes like I have just done with innumerable. It also allows you to delete the property from an object if you choose to. Now, if configurable is set to false, then you would not be able to delete that property or you would not be able to change the attributes of that property. So let's take a look at that really quick will use the type property again once again object dot define property. And this time, instead of innumerable, I'm going to change configurable and set that defaults. Sen. I press return now O. B J has three properties on it, with height and type, so let's go ahead and delete width to show that that is possible. Now when we display O. B J with this gun, let's see what happens when we try to delete type it returns of faults. Did it delete it? If we display it again, type is still there were not able to delete it. If we were in strict mode, it would generate an air whenever you. Whenever you try to delete a property that is not configurable, it returns in air. So in the last two videos, we've learned that there are attributes that control how properties work and those attributes can be changed. Now doing so is not a common task when you're programming in JavaScript, but knowing about that feature knowing that you can hide a property if need to, or you can make it so that it cannot be deleted, there may be situations where that can be valuable, and so therefore we want you to know about that feature. All right, let's move on to the next topic 27. Exercise 2 Start: in this exercise, I'm going to give you a chance to use some of the concepts which we've covered in the working with objects. Also to draw on a few things that you have learned previously in solving this problem. So here's what we're going to do. An exercise to exercise two consists of an HTML file, and a portion of this file is dynamically generated. These two lines right here the contents of this are taken from the object that has been created. So your assignment is to find out first, all of the properties that that object has access to and the type of property it it, for example, Is it a string? Is it I function? Is it a number? And print that to the console, so print each property and then print the type of property is this could be helpful if you're working with an object which you didn't create and you're not familiar with finding out what properties air available and then finding out what type of property is can be necessary if you plan to use it in some coat. So number one do that. Number two. Print another list that is very similar to that list, so it prints the property and it prints the type of for that property. There was a little hint of how to solve that in that last statement, but it only prints those properties that belong to the object that are owned by the object . So the first list may include properties from a prototype or may not if they don't exist. The second list, Onley, includes properties that are owned by that object. The files for exercise to can be found in excites to folder. Use the app dot Js javascript file to create that list. As you can see at Dodger Gases, where the code is that dynamically creates an places that sentence on the page, take a few minutes to see if you can solve this. 28. Exercise 2 Finish: all right. Hopefully, you were able to figure that out. So first off, we want to create a list that prints all the properties that are available on this object. PR es. That's the object were after because that's the object that's generating the pieces off tax that are not hard coded. So let's do a for in loop. There's a for in loop that will cycle through the properties in the prez object. Now I'm going to log to the console the property first, and then I'm gonna can Katyn ate that, too. Gonna put a space a couple of spaces here, and I'll can cat Nate that to the type of not property. And I notice I don't just do P R o p. But I actually have to access the value in order to do type of for that. And that will tell me what type of property it iss. So let me say that refresh open the console. Let's see what we've got. So sure enough looks like here's the property name and then this is the type of property it ISS. So first name is the string mid name is a string last name of string assassination is Boolean. We have several more strings. We have an object, We have a number, and then we have some functions. All right, so that looked like that. Gave me information I need now. I simply need to repeat this loop, but I need to modify it so that I'm only displaying properties that are owned by that object. So I can do that with an if statement. Something like this has own property is the method that we used to determine if that property exists on the object or not. So if pressed, that has own property prop. Then we go ahead and log to the console that information. Otherwise, we won't log it to the consul now, just so I can tell the difference between those two pronounce, I'm going to log just ah, line here to separate him. Some like that. Okay, say that. Jump out. Refresh. So now if I Here's where the owned property section starts in, the last thing in that section is order. It's a number while orders up here. So these three functions are actually a part of the prototype chain. At some point, they're not actually a part of the object itself. Let's take a look at one more way we could do the own properties section. So let me comment out this four loop. We're going to use object dot keys to find the own properties and then to list them so very similar process. Except we're grabbing own properties before putting them in array. And then we simply go through a four loop. So let me set up a variable and then set that equal to object. Got keys in an inside of parentheses. I put the object present. Okay, Now we can loop through that variable eyes less than the length, the length of the array, and then I plus plus to increment. That's our four loop. Now we simply need to do the constant log statement. So let me copy this one from up here, because it will be very similar. Pace that. And now the first thing we want to display is the property itself. And so that is actually found in the array news I to designate the position in the array. And now, for the type of portion we still use the object press. But then in here, we want to put the property. So we do it like that. All right, let me say that Refresh and see what we get. So if we come up, there's where own properties begins. See, we're getting the same thing. Their order is the last item in the list, so that's another way to solve that exact same problem. 29. Lecture 23: Making Objects Immutable: in this movie, we're gonna take a look at immutable objects and how to make objects within JavaScript. Immutable. Now first, what does immutable mean? Well, let's make sure that we clarify that before we move on. So a mutable is unable to change. You cannot change. So when we refer to an object as immutable, it means we're not able to change it. Where immutable means object can be changed now by default. Objects in JavaScript are immutable, meaning they can change. We're constantly changing them. But there are situations where you want an immutable object. Now, how do we go about doing that? Where we want the data on an object to maintain and not be changed, but accidentally or intentionally either one. Now, how do we go about doing that? Well, we're going to take a look at three things that allow us to make objects immutable. First a few movies back, we're looking at attributes of properties. Well, we're going to look at a new attributes rideable that determines whether the property can be changed or not. So this would make it so a property of an object were immutable. Next, we'll look at sealing an object. Now, when an object is Silda, you cannot add any more properties to it, so the properties that are already there once it's still that's fine. They will stay there, but you're not able to add new properties to it, nor are you able to delete any of the existing properties. We'll also take a look at freezing an object as well. Freezing opposite goes one step further. Basically, it's a combination of sealing an object and making the rideable attribute of each property faults so you can't add properties to the object when it's frozen. You can't delete properties from an object, and you can't change the properties that are already on the object. Now, when an object is sealed, you can add or delete, but you can change the properties that are already there. All right, let's jump to sublime and look at some examples. All right, I've got an object created simple object, and we're going to take a look at making this object immutable in the three different ways we talked about. So first will take a look at the rideable attributes of properties, so I have a property on here start date that is a property that I may want to make immutable. The start date shouldn't change. So let's look at how we would do that. We use the define property method of the object object we pass in O B J, which is the object we want to work on. And then we passed in the property that we want to effect in this case start date and then , as you remember, we can then pass in an object that defines the attributes of each property or, in this case of the start date property. So I will set rideable, two faults, but a semi colon at the end. And here's what we're going to do. I'm going to do O b j dot first name and I'm gonna change that. I'm gonna set that to just Steve and then below that, let's do O b j dot start date. Unless set that to a different date. January 5, 2000 and 16. All right, let's see what happens. Say that I mean a copy the file past so we can open this file and let's open the consul and let's take a look at O B. J and see what we have notice the first name has changed. Two. Steve. The start date, however, has not changed, but there was no message given would be nice if it give us a message. If it's not changeable, an air or something, well, that is possible if you use strict mode. So let's take a look at that really quick. But in you strict, say that and refresh. Now we get a type air cannot assigned to read only property start date. So now that gives us an air. So if you use strict mode with any of these methods for making objects immutable, you will receive an air message. If you don't use strict mode, you won't. It will fell silently, meaning it doesn't tell you anything. But when you go in a look at the object, you can see that it hasn't been changed. All right, next example, we're going to take a look at ceiling and object. I'm going to keep it in strict most so we can see the heirs when they pop up. So let me remove this and let's still the object. We do that using a static method from the object, so object dot seal and then we pass in the object that we want to perform the action on now that it's sealed. Let's see what happens if we try to add a new property and we'll just set that equal to true. Save that jump out. No, it's what we get. We get an area a type can't add property. New prop object is not extensible. Alright, let's try to delete a property. Let's see if we can delete type. So deletes o b j dot type. Save that. All right, we cannot delete cannot doing property type of object. So neither of those work, however, make comment that out. We can change and existing property, So let's try to do the same change here again. We'll set it to Stevens to Stephen say that refresh. Now I'm going to display the object. Sure enough, the first name has been changed, so Seal makes so that we can add new properties and we can't delete existing properties. However, we can still change the value of the properties that are part of that object. Well, let's take a look at freeze now, which, if you remember, does a combination of seal and the rideable attributes of properties assess the rideable attribute to fault. So let me just comment that out. Let's change this to Freeze and Willen comment the first line. See what happens. Refresh We get Cannot can't add property. New prop So it doesn't allow that this frozen object doesn't allow that. It's comment that out. Now let's see if we can delete a property. Save and refresh cannot delete property. And I'm sure you can guess what we'll get with the last lines if we can change that first name property. Sure enough, we can't cannot assign to read only property first Name So three different methods for making objects immutable, making them so they are not changeable. We can affect individual properties. Using the rideable attribute of that property. We can affect the object as a whole. Using seal and freeze still makes it sold that we can't add additional properties and we can't delete existing properties. Freeze does the rideable and still together, so that is the strictest case. Once again, if you strict mode, then you'll get our message is, if you don't, you'll just have to check to see if the object was changed to be able to see if if it were changed or not. All right, let's move on to the next section 30. Lecture 24: ES6 Object Features: Before we conclude this short section, I want to take a few minutes and talk about some E s. Six features that are for objects. These features were released is a part of the Atmos script six or Eckman Script 2015 Standard, and they have now become included in many of the modern browsers. So let's take a look at which features I'm talking about. First, I want to look at some object. Literal extensions. Some things were added to the object literal notation that makes it easier or more concise to define objects. Then we'll take a look at some objects. Static functions. Now what do we mean by a static function? Well, it is a function that's associated with the object that is available in JavaScript, so you don't access it from the individual objects you create. You access it from the main object uppercase. Oh, that's available in JavaScript. Now we're going to look at too. Object dot set prototype of an object dot a sign. So let me jump to sublime and will start looking at these features Now. First, we're going to take a look at what we call concise properties. So first let me look at the traditional way of doing this. Let's say we have a variable that is declared and then we create an object and this object is going to include this variable as one of its properties. So let's put some properties in first start and and now we want to put the multiple property as a part of this object. We want the value that it contains. But we also want the property name to be the same as the variable name Multiple. So traditionally, the way we've done that is like this, and that accomplishes the purpose. Now, in he s six, there is a more concise way of doing that exact thing. So let's create a second object here. Start value one and value. Let's make the end value 1000 and now we want to use the same multiple for this object as well. While a concise way to do that is simply enter multiple. Enter the identifier that is used for the variable and as a via six. What JAVASCRIPT will do it was it will set the property to that term and the value to the value that's associated with that variable let me say this and we'll we'll take a look. Copy the file path, jump out and open up the console. No. B J one you can see we have a start value of one and invited 100 a multiple of five O b. J. Two exact same thing with the exception where we'd put a different end value in so we could define the multiple property using the concise method that's available in atma script. So that is concise properties. You know, whether you'll use this or not. That's up to you. But it is important to understand it because you will begin encountering it. All right, we're going to look at concise methods as well. Let me remove this. I'm gonna create another object using object literal notation Again. This time we'll use our traditional first name, last name object we've been using in the course. And now let's define a method. The identify for the method is full name, and here's how we define it. Traditionally, we'll do the same thing as we've done in some past videos. Move those quotes there Don't I don't need those yet. Basically, that will lock to the consul the first name contaminated to the last name. So there we've defined a full name method with that object. No es six provides a concise way of doing this. So let's define a second object. Well, let me just copy this one so you don't have to watch me type and we'll name this object O B . J. Two. Let's just use the same first name and last name. But the concise way of defining the method is we can eliminate the colon and the function key word. We can simply put full name parentheses and then we define the function, and that's a concise way of setting up that method. So let me say this will try both of these in the console. Refresh that. So BJ one thought Full name Return. Stephen Smith O B J two dot full name returns the same thing, so the definition is simply more concise. And that's the whole purpose of these concise properties. Concise methods. It's just easier to type. You don't have that enter so much when you're trying to set up properties that's based on a variable, it's already been defined or a method within an object. All right, Now let's take a look at two of the static methods has been added with ES six. The 1st 1 is set prototype of now. This method is used to establish the prototype of an object. So if you create an object and then you want to establish that the prototype, it's a quick way to do that now. We'll continue to deal with the prototype later in the course, but I think it's important to be aware of this new static method for setting the prototype of an object. So let's take a look at that. Remove this first will create an object that we're going to use is the prototype now. In the previous example, we were setting the full name method on the object itself. Well, technically is much better to put a method on a prototype, and then you can assign that prototype to multiple objects. Then, if something needs to change with that method, you can change it, and it's updated for all of the objects that have that attached. Let's go ahead and put a full name method in this object, which will act as our prototype, and we use the concise notation for doing that. All right, so we have that set up. Now we can create an object. Exact same information as we used previously. Now we've created this object. Now we can assign it's prototype by default. The prototype will be the default object. That's a part of JavaScript. Now we will set the prototype using set prototype of notice. We use object dot set prototype of then the first parameter is the object. The second parameter is the object that will become the prototype. So that's how we use it. Object got sent, prototype of the object we've created, and then the object that will be the prototype for this object. Go ahead and say that Refresh. Now am I able to use that method? Sure enough, I'm able to use it because it's part of the prototype. Now, if we take a look at that object and opened up, here's our prototype. And as you can see, the full name method is associated with the prototype. So that is set prototype of all right. One more static method we want to look at, and that's object dot a sign. Now there are several JavaScript libraries that provide a method that allows you to combined the properties of multiple objects into a single object. So you may have several objects that have different properties, and you want them all in a single object object dot A sign will accomplish that for you. All right, so let's set up our situation. So we have first an object here with a start Property of zero have object one, and we're just going to give it a property A and set that equal to five. What I want that to be o b j one o b j. Two. Let's do be set that 10 and over j three. Do you see Set that 15. Obviously, these properties don't make don't make any particular sense other than this is just an example of what can be done with object. A sign. Now let's say we wanted the O. B. J object to have all the properties that are associate with O B J one over j 20 b. J. Three. While the way we do that is with object out a sign object notice once again, use object with uppercase Oh, now inside of princes, the first parameter is the object that we want to a sign or mixing all the values, too. And so I put O. B J as that first argument, and then we can multiple objects listed after that. And what it will do is it will take the properties of those other objects that are listed, and it will add them to this object. So let me go ahead and put LBJ one O, B. J. Two and LBJ three. We'll save that jump out, refresh and then let's go ahead and display O B J. And as you can see, we have all those properties associated with the object, ABC and start Now it's important to point out that object dot a sign will not copy over properties that are not innumerable. So we talked about that in the previous couple of videos that you can set attributes of properties that make it not innumerable. It will not copy those over, and it will also not copy over properties that are not owned by an object. So, for example, if they were a property of the prototype now, before we finish this section, I just want to jump to our Eckman script six compatibility table and just show you the support for some of these features we've just talked about. So object, literal extensions. This column here. And if you look across, you can see here we are. No desktop browsers. Full support for all modern browsers. Latest versions of node since Version four all support it in mobile browsers. Not quite as much support on the android side. IOS does support. So that's object. Literal extensions. It's also looking objects. Static method. We looked at object Assign an object dot set prototype of If we look at support for those come across the browsers, all modern browsers support that knowed supports and once get on the mobile side not quite as much support, although you do get that support in Iowa's all right, let's move on to the next topic. 31. Lecture 25: Understanding Method Chaining: in the next section will be discussing the power of functions. Now, as I have mentioned previously, functions and objects are tightly bound in JavaScript. Before jumping into some important concepts regarding functions, I want to present a powerful pattern that relies on methods and objects so functions that air created inside of objects. This pattern is called chaining Method. Chaining allows you to call methods that belong to a single object one after another without assigning the return value for each method to a variable. Now you have undoubtedly seen method chaining in JavaScript, but the pattern may have simply confused you. You might have not been sure what it was doing. Let's take a look at an example first, and then we will break it down. So here I have a string. Very simple String course starts in October 2018. Let's say we want to replace the 2018 with 2019. We want to convert the whole thing toe upper case, and then we want to remove this trailing space on the end. So there are three different methods that are part of the string object rapper that allow us to do that and here's what we do. We assign it to str one. So we start with str dot replace. We use the replace method to replace the 2018 with the 2019 than a dot to upper case converts it to upper case, and then a dot trim removes that trolling space. Now this is chaining. We have chained three methods together, replace to upper case and trim. Now, to make sure you understand method chaining, we're going to break this example apart. No notice first. As I mentioned, it's acting on a string. A string is a primitive value. So how does this apply to objects? Well, the thing you need to remember is that there is a string object rapper that goes with strings, and that object rapper makes these methods possible, and it makes method chaining possible. So let's take a look at how this might be done without chaining. First we could do it this way S t r. One and set that equal to str got this first portion right here the replace Then we could take what we got in str one and we could sign that str too. So we set that equal to str one dot to upper gates just like that. Then let s tr three equal str to so knows how we're building here. We're building on each variable that contains the new information And this time we're going to call trim and finally we can log to the console Str three. Okay, so let me comment out this one here so we won't do that one yet. Let me just comment that out and we'll take a look at this first set of statements. So save that jump out, refresh. Let me open the console and we can see that it converted it to upper case. It replaced the 18 4000 and 19 and the space was removed as well. That's hard to tell here, but it was all right. So that's how we do it with a number of different statements and that exact same thing can happen here with method chaining. So let me comment out this last part, okay? Comment all that out and then say this and then we'll take s take a look at str one or refresh str In one. There we go. We have the same thing so now you can probably see what's happening here. So let me uncommon at this part. The return of this is a string and it's placed in str one while we then use that to call a new method. So this string has that string object rapper we call a new method Return results here that contains a string with a string object rapper therefore were able to call trim and return it here. Well, since we're getting a string with the string object rapper as a result of each one of those , we can simply chain them together because this dream is acted on by replace. And as we saw that returns a string, well, then that returned string could be acted on by to upper case and that returns a string as we saw so that returned string can be acted on by trim. And so that's how chaining works. And since those are returning strings, we can simply skip the assignment of that string to a variable and simply indicate that the next method should act on the results. Now this same type of thing could be done with any object that has methods as long as those methods return the object that we're trying to work with. So the same thing could be done with a raise. The next method that we use in the chain must be part of whatever object is passed by the preceding method. So array methods all return a raise or most of them return race. Some of them returned something else, but most of them return a race so we could do the same thing. Let me comment this out and lets you set up an array here. We're just gonna have three things of fruit. We have apple, pear and teach. And that's why we call it our fruit array and also what we can do. We can convert this whole thing to a string, but before we do so we're going toe act on that race. So we're going to set that equal to fruit dot can cat and canned cat lattes lets us put items together into a single race. We can concoct innate array to an array or weaken captain eight items into the same array. And so what we're going to do is we're going to add orange and key. We'll just add those now since That is a method on raise that returns an array, so we can immediately act on it with another a method, and this one happens to be sort. We're going to sort the race. It's in alphabetical order. Then that returns in a race so we can immediately act on it, and this time we're going to join it. We're going to join each element of the array with hyphen character. So the end result of join what join returns is a string. So we couldn't use another array method there because join returns a string. Let's just take a look at that really quick. I say that refresh. And then let's fruit str in. There we go. We have a string of all those roots. Looks like I missed belt apple, but we have a string of all of those, and we can see that that workforce by chaining them together. Now, since joint returns a string, we could not use another ray method, but we can sometimes mix objects as well. For example, we could simply add a to upper case at the end of that because that returns a string with a string object. Rapper. Let's see what we get this time. Fruit string. And as we can see, it's now an upper case, so you must simply use a method for the object that has returned. That's the trick of doing Cheney. Now something that's pretty cool about chaining is that if you set up your own methods in an object that you create and you set them up the right way, you can create methods that will do exactly the same thing that will allow Cheney. So I want to show that going to comment this out here and I'm going to copy in an object that we've created. Let me just pace that and so you don't have to watch me create the whole thing. It's a little bit long. So now this object is created with literal object notation. We have the curly braces and then we have the name value pairs. Inside, we can see F name L name. We can see a score which is an array we can we have total, which is a number and average, which is a number, and then we have three methods. We've added three methods to this object. Add score, do total and do average. So as long as we have a student object weekend invoke those three methods. So the way we would work with those is something like this. We have add score and let's go ahead and do 100 there. That same student object. Let's add another score. This time 80 Soc were acting on the student object.