Transcripts
1. Presenting Classes: classes in JavaScript allows to build models of objects based off of relevant data and behavior from real world objects. This introduces a system of inheritance between related classes. This helps us to find similarity between objects. Programs then describe how these objects were latent, interact with each other to calculate data and evaluate conditions. To define a class, we used the class keyword and give a class the assigned data using a special constructor function the constructor creates and initialize is an object for that class based on the unique info that we'd like to give it. If you want to create new classes based off of existing ones, we can now use the extends keyword in order to make sub classes and Children of parent classes. Let's explore classes with an example, and we'll stick with the theme you might be familiar with and something you might enjoy. The Lion King. Now everyone in The Lion King from Simba tis as you is an animal so at the very base will have on animal class. This animal will then have some very basic object data, such as a name and hype. It will even have a method within it called Hello. That says a message of what its name is and where it comes from. Other classes will be able to extend upon this animal based class. So let's suppose we have a lying class that extends animal. It will inherit the name and wait data from Animal, but we could modify its data a little bit for a line. We could give it even more data, such as the color of its for and update the hello meth it in order to say its name and that it's from Pride Rock. Excellent. Now this logic can extend to a multitude of classes and also inherit from animal. And you can imagine the sheer number of objects that we could present. After all, in the land we have giraffes, birds, warthogs and plenty more potential classes to create based off of this one animal class. Let's move on to seeing these classes in action
2. Defining Classes: let's create our first class situation by following that line. King Example. First we want an animal class, so use a class keyword and we'll call it animal. And then for the body of the class, it's just a pair of curly braces like any other scope or function. Now, within that class to initialize the object data, we use the special constructor key work. The constructor can take any number of parameters. We decide depending on the relevant data for this specific class. So remember that we want a name and height for all of our animals Now, within the constructor, we could start modifying the object that is created for the class with the this keyword. So we need to specify that. Are this for the animal now has a key of name a signs of the name that we passed within the constructors argument list. So say this stop name equals name. Likewise this for the class needs a high tea a signs of the height that we pass as a second parameter. This Saad height is our height. Now don't be confused by the fact that we have a name on both the left and the right. The name variable that you see on the right refers the name that is passing through the constructor. Likewise, the height that is on the right is referring to the height variable that is passed through the constructor. And we could actually call this anything we want, like A or B as long as you specified that this not name is now equal to a in this, that height is equal to be. Let's revert those changes. Everything looks fine for the animal constructed. We can best illustrate how this class works by creating a new instance of the animal class . So create a new variable king let King equal and assign it to the new keyword, followed by animal and a pair of parentheses. The new keywords signifies to JavaScript toe look for a class or object type. Now look at the animal and its parentheses. You notice that it looks very similar to a function well within these parentheses. Just like a function. We can specify what we want to pass as parameters to the constructed now, so let's give it move fossa for its name more Fatah and then 4.5 for its height because my boss is a pretty tall line as we save. We should now have a king class variable. And then let's just go ahead and council dot log king and check out Be constants. Let's save and Boom. We have a new animal class with the name of Move fossa and a height set to 4.5. Very cool. Now how about adding a special methods? The class called HeLa that gives us a nice greeting of the animals name and where it comes from? Let's see the constructor at eight. Hello, Method. Right after constructor, Say hello and then this greeting will say something like high on the sudden name from the Animal kingdom. So we use a tablet string to achieve this. Will consul dot log a temp littering high? I'm this dot name, and in order to access this son name, let's use the dollar sign and pair of curly braces. Then we can just say the stock name because we have our this object within the class animal . Now there were just, say, from the Animal kingdom, Great and not to use this method. Let's take out this constant log and just like an object we access it with the period king dot Hello, as we save. Hi, I'm Mufasa from the Animal Kingdom and nice to meet you. Move fossa. Great. We just saw our first class of animal in action. Let's move on to extend this class to create a child and extend our knowledge about US six classes and inheritance overall.
3. inheriting Classes: Let's create a child class of the animal class to show inheritance working in JavaScript. Remember that inheritance refers to this idea that we can create clauses off of a base class and receive all of those properties from the parent class. Let's say we wanted to define a lying class. We begin the classic relation normally, but then, in order to inherit from animal, we know specify that this lion class extends upon the animal. So let's say class lion extends animal great. Since line extends animal, we can already create instances of the line class and give it some data. Let's create a son Grable in a sign into a new class and give it some data within the parameters. So let's son equal a new lion was a Simba, and its height is, too, because he's still pretty young, well counseled out log son, and check out the sun clause or the line class rather and boom. We have a line whose name is Simba, and height is two. Excellent. Now the line is still just as general as our animal class. How do we make it more specific toe lions and allow us to give it Mawr information at the instance declaration. Well, we'd again give line a constructor. Were there two parameters of name and height once more. But after height, we can start specifying additional fields to give this line more data. Since lines sometimes have different colored for, let's give it that additional field. So color is the 3rd 1 in our constructor list. Before we can start accessing this object, though, we need to call to a special keyword for this class, since it extends animal in child classes before we can start using that this object to modify class data, you need to use a super keyword to acknowledge a parent's constructor. This will call the constructor of the parent class with the name and height that we specify first, So do it just like so super name and height, then within the constructor. After we use the Super to call the parents constructor, we can once again access through this object. So now we have the freedom to say this stock color equals a color that we argue within the constructor, and now we can specify symbols color in its instance. So it's color is golden and bang. We have named Simba. Height to you and it's color is golden. All right now what if we still want to use that hello method for lines, but we want to log a different message entirely. Luckily, in child classes, we can just override methods from parent classes by re declaring them. Let's customize a hello greeting in the line class to say hi, I'm this not named from Pride Rock. So now at a Hello muffin right after the constructor them a consul dot log Hi, I'm this dot name from Pride Rock and then at the very bottom instead of council. Don't logging, son. We can just call son not hello to see that greeting in action and high Simba is great to meet someone from the royal family. Next, multiple classes will usually exist in separate modules. Let's extract this base animal class into a separate file called Animal dodgy s. So first off, create the new ball new file animal dot Js Now take out the class will cut it, pace it within the animal duchy s, and then add an export default of animal to the animal dot Js five and at the very top of our index dot Js We cannot import animal from animal Dodge s in order to grab are extracted animal class, Let's say And there we see our SIMA message still logging to the consul Importing and exporting worked for us for these modules for the classes. Alright, awesome. We just saw an example of inheritance with classes and the extends keyword in Java script We can actually implement as many child classes of the animal as we'd like. We could create hyenas, birds, elephants and anything you want in the entire animal kingdom. Furthermore, the lion child class in any class we could create could be further extended to create even more sub classes and grandchildren of the base animal class. All right, let's move on to exploring another concept within classes, static methods.
4. Static Methods in Classes: let's start with a clean slate and discuss a new topic within classes. Static method. When we create a static method within a class, we can access those methods without explicitly declaring an instance of the class. This comes in handy when we want to create more practical classes as named spaces for methods rather than to hold data. For example, let's start with a blank slate and define a new class of calculator. It's a class calculator, and its body is a pair of curly races. Now, with in this class, we can choose to have a constructor. However, remember, we won't be using those class for its data, but rather its methods. So let's give it a static method to make a static method. It's exactly the same as defining a regular method for a class, except we proceed that method with the static keyword. Let's define our first static method for the calculator class now and give it one called Multiply. So static. Multiply a B return a times B. And as you can see, this one is a completely identical to the multiply method that we created earlier when we explored modules. All right, now that we have this static method. We can start using the calculator class as utility to quickly access multiplication. So let's define a variable and said it's a instead it equal to calculator. Don't multiply five and seven Well confident. Log a and what do you expect to see if you said 35? You're right. Cool. So as you can see calculator dot multiply is now a static method. We did not create a new instance of calculator, but the static keyword allows us to access. Multiply right away. Great. Let's add one more static method to the calculator class in order to reinforce this concept at ecstatic add method. And just like before from our modules, example will return a plus B If we change calculator, don't multiply to calculator dot Add five and seven. What do you think will show up? Bang, We see 12 as you probably guessed, appearing in our consul. All right now we can start to see the usefulness of the static keyword in classes. Calculator now becomes a way that we can quickly access a whole collection of methods from just one class import. The new calculator t word in this case is not an object holding data but a namesake for holding relevant methods like add and multiply. And we could have divide, subtract absolute value, all the good stuff. All right, let's move on to exploring even Mawr es six with classes and prototypes.
5. Highlighting Differences between Classes and Prototypes: let's discuss the difference between classes and prototypes in JavaScript. Those of you familiar with programming or who have taken a computer science class before might be familiar with this paradigm or concept called object oriented programming. Object oriented programming refers to this concept in computer science that models objects based off of real world objects. These objects contain relevant data, and a program will design around, making these objects interact with each other. Many of the major programming languages, like C, Java and Ruby, provide heavy support for object oriented programming models around systems of classes and inheritance. So the question is, Is jobs good based off of an object oriented programming model? After all, the E six jobs classes that we just explored seem to point to the answer being. Yes, however, the true answer is no. JavaScript is based on a prototype all inheritance model. It's a bit different than classes under the hood. Classes actually are just extractions of job script prototypes, so we're not actually creating classes of data in the same way Java and Ruby does with their object oriented programming model. But the E six class syntax enables us to create JavaScript prototypes very quickly in a more understandable way. So the next question is, what is a prototype? A prototype is a characteristic that every object in JavaScript has, and that tells us a very specific characteristic about that object, and that characteristic is its parent or the object that inherited its properties from See . Every object in JavaScript has a prototype and actually inherits properties and methods from their parent prototype. This creates a prototype chain or even a data structure like a date or a rate in JavaScript inherits from prototypes above them. At the very top of this chain is the object prototype itself. Now that we've explored how prototypes work in JavaScript, we've clarified also the difference between prototypes and classes in other object oriented programming models. We now have a better understanding of the fact that classes aren't classes at all, but prototypes under the hood. Overall, all the story starts to become a lot less abstract when we actually see prototypes in action
6. Prototypes: Let's crapped our first JavaScript object prototype. In order to do so, we use the object constructor function in job script, so use a keyword function and then follow up with the name of the prototype. Let's create a wizard prototype so function wizard and the body is a pair of curly braces as usual. Now, the function keyword in this case is not being used to create an actual function that achieves some logical expression, but rather it will be used to host data in this object prototype, a prototype that has data according to the number of parameters that we passed to it. First, let's give this reserve prototype the name field Ah, house field and a pet field. So function wizard name House Pet. Great. Now we can access the object of the prototype with the this keyword and following the same pattern as we didn't classes. We said the keys on the this to the values that we passed in the functions list of parameters. So this stunt name equals name. This not height or this of house Rather equals house. Mr Pet equals pet. Excellent. Now let's make our first instance of the Wizard the name will be Harry Potter. The house will be Griffin Door and his pet will be out. We can't intention object prototypes now with the new keyword, just like a class and assign it to a variable. So let Harry the variable equal a new wizard prototype with Harry Potter as the name his house will be Griffin Door and his pet will be our and then we'll confident log Harry and save. Now we have a wizard prototype showing up in our consul that shows are relevant. Data Griffin Door, Harry Potter and Out Awesome. We can also add methods to the prototype that gives it some functionality based on its data . Let's add a method that describes in a greeting called Greep to the prototype What this wizard is. So we'll say this stock reap equals an arrow function. The dis returns. I'm this dot name in a temp littering from this dot house. Note that in this era function, I don't have to specify the return key word, actually, so we can take out this brace, take out the return key word, and now this returns the expression on the right by default from the arrow function syntax because we're omitting the currently braces. Now let's clarify something. Unlike normal function declarations, Arrow functions don't create their own this object for the local scope of the function by default. Instead, their scope will still reference that this off the outer parrot function. This greatly benefits us when creating more advanced functions and prototypes because their inter functions concil reference the data in the parents scope. All right, at a log of harry dot Greek to the council. So let's amend this to say, Harry Dockery as we save we noticed I'm Harry Potter from Griffin Door. Nice to meet you next. Suppose he wanted to add more data to this prototype. Well, we could easily just update the prototype declaration. But each prototype also comes the prototype keyword property, which represents its object data. We can then take advantage of that prototype keyword toe Adam or properties to the Wizard prototype very easily. So suppose you wanted to add another field such as pet name, for example, without having to go back and change the actual constructor. We could use a prototype keyword just like so above Harry. Say wizard Duck prototype dot pet name. And this line as a pet name property. See the prototype as if we actually did so in the prototype declaration. Next to add the actual pet name. We say harry dot pet name equals Hedwig. I noticed that our instant stays the same. But if you counsel, don't log Harry now we'll find that the pet name for Harry is Hedwig. Awesome. Now let's revisit this discussion that we started earlier about their functions, not creating their own this object in their function scope. Suppose I wanted to add a method to our prototype now. Well, let's use a prototype. He were just like before we can say wizard, don't prototype dot info So this function will give us some info about the Wizards pet. So let's try to add that function with an arrow function. I would say Wizard up prototype dot info equals return temperature ring that says I have a this stop It named this start that live. It was said a council. Don't log harry dot info now, and as you can see our concert complaints, that has no way to handle this, and info is undefined. The reason this code doesn't work is that the arrow function does not create a this object for the function prototype to reference. Now an air function works within the actual function prototype because it has an outer this to refer to so as a solution when using the protect keyword to define a method. Since we can't refer to that local scope this object within the prototype, we don't actually use an arrow function. We use the normal function declaration. This will recreate this object and allow us to refer to those properties held within this object of our prototype. So instead we say wizard dot prototype dot info equals function without the arrow return. I haven't this stop pet named this dot name. As we save, we find I haven't our named Hedwig working and logging to the council Excellent with a plain old Js function operation we see are relevant. Data appear So this shows that air functions, while insanely helpful and shortened concise, actually aren't the best solution in every case. This time, we needed a function keyword in order to create a this object for our prototype. Now that we've seen prototypes in action, it should become a little more clear that class is simply extract its logic and wrap it up to make prototypes look nice for coders with an object oriented programming background. But when it comes down to it, remember that classes are just wrapped up. Prototypes and prototypes are simply functions. Remember, every object in JavaScript descends from another prototype and inherits those properties starting all the way from the beginning of the chain. The object prototype itself. All right, let's continue learning E s, six.
7. Presenting Data Structures in ES6: in the field of computer science data structures referred to the programmatic storage of data for efficient usage. Every application on the industry level takes advantage of a data structure in order to manage their data more efficiently. First, off, sophisticated algorithms used data structures to perform advanced calculations like searching or sorting in CS. We can quantify certain algorithms based on their running time or how quickly they solve a problem. Also, we can rank algorithms based on how much memory or data they use. In other words, the resource is that they require now in Essex, received a few updated cleaner data structures within the release. Let's explore the first data structure in that collection. The six set allows us to store unique values. It's similar to an array, but you cannot have duplicates the specific feature of no duplicate values. Places sets as an advantageous data structure over a race. Suppose, for example, we were hosting an event, and every individual receives one giveaway. Every time a unique visitor comes for a gift, we give it to him or her, and at the individual to our set of people who have received a gift. Now suppose that individual came back for a second gift with an array, we would have to implement an algorithm or own custom helper function, to check if our list contained that individual already that we don't give that person a second gift. However, if we use a set to track our guests with gifts, we know right away if that individual already received a gift by using the methods that the JAVASCRIPT set data structure provides. These methods include the ad method delete method and has method with checks for the presence of data within a set. All right, let's move on to implementing a set our first e Essex data structure.
8. Writing a Set: Let's jump into our 1st 6 data structure and implements a set under the hood. All sets inherit from the set prototype, so we declare a set with the new keyword. Declared a new set called A In a sign it and new instance of the set prototype declaration Let a equal new set. In this set, we can add anything from primitive values. Toe objects. All we have to do is past data to the set dot Add method. Let's add some new numbers a dot add five, for example, and a dot add 43. Excellent. Now how about adding a strength? Will that work? ADA ad well and seems like everything's fine with our set. Now let's try adding on object just for good measure whose X value will be 50 and why value will be 200. Go ahead and save that. Everything seems to be fine. And finally, let's Consul, don't log a and check out the set once and for all. As we save, we see our five and 43 numbers are shrinking as well as our object value. Excellent. Let's explore the methods that the set prototype now provides for us to find out some info about this set. For starters, all sides have a size property that we can access to determine how many elements exist inside the set council dot log a dot size and boom. We see four, as you might have guessed, because we added four elements to our set. Now here comes a highly useful function. Let's check whether this set contains data will check whether it contains number five. So instead of a dot size, let's confidante log a dot has five. And what do you think will show up? Well, true, as you might have guessed, since we added five earlier, let's check if it has seven then and there we go, we get false. So it's a true or false value, depending on whether the parameter exists within the set. All right, let's see something very useful. We can convert entire erases sets very easily. We only have to pass an array to the set constructor. Let's make an array of numbers and start off with a clean slate. Let numbers equal. You could have any numbers you want, so I'll do 578 13 and 17 and now are numb. Set will be a new set passing in the numbers array to the constructor. I'm gonna go ahead council don't log Numb set. And now we see a set prototype with 578 13 and 17 which is what we had in our original, right? Next. How do we print each of these set elements individually? Well, we need some way to generate through this data in the set and print each element one at a time. Luckily, the JavaScript set provides for us a values method that lets us do just so. It returns an iterated object that contains all of the values set up for traverse along. Now, in order to handle this iterated properly will use a variation of the four loop called the Enhanced for Loop. So let's declare that four loop now for let element of numb set values. And on this line, we're seeing a four loop with on assignment within it. What's happening is that the element variable will get set to the current value in numb set up values at every adoration of the loop. So because numb said, dot values essentially contains an honorable list of values from the original set, this enhance for loop sits the elements each of those values one at a time. As we cancelled out log element, we should see every generation. So we get 578 13 and seven. Awesome. Now let's apply the set to a relevant problem that we might encounter in an enterprise application or personal project. Consider a long string of random characters. How could we quickly tell which characters appear in the string? Well, as one solution, we could convert the entire string tuna ray, then convert that to a set and bang. Suddenly, we have all the unique elements in that original shrink. Let's try it now. Create a shrink of random characters by going crazy on your keyboard. So let chars equal whatever you want in this awesome string. Now let's split this list of chars into an array of all of its characters by calling the special split keyword on the slipped. Let chars are equal. Chars dot split on the empty string to split each character within the original shrink, and I will make a charge set that is a new set passing in the charge are then we'll go ahead and constant log the charge set and check it out. And as we see, we now have a set of each unique element that we included in our original random string and that only managed to type 10 characters as I went crazy on my keyboard. Alright, that covers a set in E s six. Let's move on to learning even more e a six data structures.
9. Presenting Maps: next up will explore a second. Yes, six data structure maps. The map has pairs of keys and values. For those keys and values, we can use both primitive values and objects within an Essex met. Each T is unique. You can't duplicate the same key within a map. To understand how on that works, we could think of them as almost identical to objects both objects and naps. Let us assign values of keys. We can retrieve those keys, delete them and change what's stored for that tea. However, some important differences exist between the regular JavaScript object and the map data structure that s six provides for us. And these differences actually make the map a much better collection of data. Since objects have a prototype, certain default keys exist that would collide with keys that we want if we aren't careful. However, in the ES six map, we can use any TV want without worry. Also, the keys of an object are primarily shrinks, whereas with a map, these could be anything from primitives, objects and even functions. Finally, we can get the size of a mat very easily by calling the size property well, we have to figure this out the long way manually with a regular JavaScript object. Okay, let's dive into the map es six data structure and look at some useful examples with code.
10. Writing a Map: Let's create our first instance of the ES six map, similar to the set we instant tan. She ate the map using the new keyword. Create a variable A and assign it to On that let a equal knew that great. In order to give the maps, um, pairings of keys and values, we use the map dot set method. The map. That set method for maps takes two parameters a key and a value. Very simply, let's define a key for this map, and this one will be a shrink like T one equal Shrinky. Then we'll call the set method of this a map. And let's argue in the first parameter, the key one we just created for the second parameter, just a string that says Return value for a strain key. So once again, a dot set key, one for the first parameter of art a map and then return value for issuing key. That's constant. Log a and check it out. Here we see we have a shrinky now mapping to our return value for that shrinky. Awesome. Let's add additional keys. This time. We'll have a key to let's key to equal a object e this one will say a key, which is just some dummy data, but we'll go ahead and set the value of key to to return value for on object key. But having Bata boom, we have a key return value for an object. He So here we conceive that we have objects as an actual key within our E Essex map data structure. Very cool knows you another one, and we can have functions as keys as well. It's like T three equal function, and we'll just have an empty function that doesn't return anything. But the key distinction is that we consent key 32 a return value for a function key. And as we save, we see valid function as a key for E six data structure returning return value for a function key so we could have shrink ease. Object. He's function keys, anything we like within our map in order to map a key and value pair. Now let's think about how to iterated through maps in order to print keys and values, just like a set that can take in an array of elements and converted. Similarly, a map can take an array of length to arrays. Convert that into a map. Let's create a quick map in this way. So first declare a new key value pair for Numb are, which is going to be a regular array. Its first element will be one Array, which has one and then one. We'll have another two array of two to then, finally, another two length array of three and three. Now we can convert this easily into an E six map. Just like so, let Val map equal new map, then we'll pass in them are into the mat constructor. Let's save culture. Don't log Val map. And as you can see, we have new map with one mapping 212 mapping to two and three mapping to three, as expected by converting the original Numb are awesome. Now, to put these values one at a time rather than in one go, we need to somehow generate through than that. The map structuring Essex does have the values helper method, just like the set structure. But this Onley returns these second elements, which are the values for our keys to print. Likewise, if we use a parallel keys method, we'd only find the keys for our map and said We want to use a helper method for maps called entries Again will use the enhanced for Luke or the four of Loop, as it's also called to map through each pair of keys and values one at a time and print them. So take out the console log for Let He Value Now it would have a to link array of Val map dot entries. Let's Consul, don't log a template string, which says we have a key which points to our value as we save. All right, one point someone two points two and three points of three. Great. All right. Now let's explore your six maps even more deeply. With the relevant problem, we'll revisit that counting letters in a random shrink that we introduced in the discussion on ES six sets. This time we have an extra capability within that keys and value pairs. Now we could use maps to again ensure that our letter entries are unique and don't go in more than once because this map prevents us from duplicating keys. However, this time when we approach a letter, we've already added to the structure we won't just skip over anymore. This time we'll have a counter for each letter, and at the end, we'll know exactly how many times each character showed up in our shrink. Once again, start with a clean slate, declare a new shrink and then tackle the keyboard. It's every Oh, and who knows what languages is, but we'll count the letters, and maybe that will give us a clue. First off, declare a new letters matter, but letters equal new map. And then we'll implement a four loop that generates over the string one character at a time for Let I Equals zero. Eyes listened shrink dot length, five plus plus, and then we'll send a letter variable to the current character according to our lives. Value for the I've character in the shrink let letter equal shrink. And here the fun begins for implementing the actual counting logic. At this point, we need to think about two possible cases that can happen when we encounter a letter either than that doesn't have the letter yet or has it already. So the map does not have. The letter will set the letters value toe one in the map to count that letter. Otherwise it does have the letter and we can update its value and add one to it. At the beginning of it all will mean if statement that checks from that does not have the letter yet. Let's say if letters that has letter it's equal to falls. Do something now. We can actually shorten this condition to say if bang letters dot has letters. Which says the same thing. No, the use of this bang as mentioned earlier or exclamation point All this does is switch a booing value to its opposite. So we could have checked if letters that has letter is equal to falls. But you see bangs everywhere in JavaScript to shorten down statements and expressions just like this. So if the map does not have a letter, remember, we sent its value to one to recognize the first appearance of that letter. So we say letters dot set letter one, otherwise in the else block will update the value of letter. Since we know that the letters map already has our letter letters dot set letter, we'll get the current value off the letter and then we'll add one sweet. With this code, it'll fill up our map with a bunch of letter counts. All there's left to do is actually check out this full MEP. Let's council don't log letters at the end. We'll go ahead and save. And I just had a little typo. We'll say letters dot set and boom. There we go. I typed a five times 04 times anything interesting that I talked a lot. We also got a P four times so cool we got an awesome key value pair of the number of times a character appeared in our string, a very useful case for the map data structure in E. A six. Fantastic. We just went through Essex maps, which are better key value pair collections than objects. But you'll still see objects everywhere in Essex code. So don't just replace every object now with a map where maps really come in handy. Isn't collections where we need keys beyond just strings or the key value? Pairs are often added, removed or updated. Excellent work, and let's continue learning
11. Presenting Closures: will now examine a significant concept within JavaScript and E S six closures. Closers refer to functions that remember the environment that they were created in and could further reference the independent variables within that environment. In this way, the closure combines a function in the environment within which we declare that function closers enable us to do intricate thinks such as the creation of function factories. In other words, we can create functions that return other functions to make more adaptable methods for the more closes enable us to declare methods in a way that maintains private data in JavaScript . We can't do this automatically like in languages like Java. But we can't emulate this kind of behavior of private variables seen in so many other languages. Use enclosures okay, lets hope to answer the basic question of what aren't closures and how do they work as we explore them in the upcoming examples
12. Closures and Scoping: let's explore this concept of closures in further detail. Remember that with closures will create functions that can refer to the variables within their environment and keep track of the environment of their creation. First off, let's define a new function named Call. Let call equal an arrow function with an empty body. And in this function, let's give it some secret local data. Let's secret equal es six rocks, even though that's not much of a secret. Now, if we try to access the secret variable outside of the scope of the call function, we would find an air so council don't log secret and has seen secret is not defined in the global scope. However, we can get access to this data if her function closure has a method which reveals the data . Let's add that method now let reveal equal another arrow function. Well, simply, Consul, don't log secret. Now we'll call reveal within her actual closure. And then let's call the closure with a commented and boom, we see EEA six rocks, even though our secret variable is on Lee, within the scope of this call, closure were still accessing it somehow in the global scope awesome. We've seen our first closure in action. You'll frequently hear this concept of inter functions accessing the values in parents scopes as lexical, scoping, lexical. Scoping simply refers to the idea that JavaScript and our program keeps track of the location of a variable to understand where it can be accessed. Let's go find this closure example and further explore lexical Skube rather than call review within our closure. Let's return the reveal function entirely now. This return statement enables us to define a variable and assign it to the result of our closure. So rather than calling, call, let unveil equal call and then we go ahead and call unveil. And as we do so we see that our closure still has access to that inner secret variable. Now, for those of you with experience in other programming, languages might find this a little counterintuitive. After all, local variables within a function usually only last there the execution of the function. Therefore, it may seem like we can't access the secret variable once our function finishes completing . Shouldn't the secret variable be undefined once we attempt to call unveil? Well, this points to the power of closures within JavaScript. Its this idea of lexical scoping the closure retains a reference to the lexical environment that it was created in and allows us to access data within scopes of functions even after the function completes. Therefore, our Annville variable gets assigned the value of what they call closure returns. Thus, we have access to the secret within the closure, even after it finishes. All right, don't worry. If closures still seem a little abstract, we'll delve into the concept further with more practical examples to show how you can take advantage of closures already to improve your E A six programs.
13. Function Factories: in Java script in Essex. Closures enable us to create function factories, function factories, take one or more arguments and return new functions based off of those arguments, let's create our first function factory with a function that adds a subject to a strength. It will take one parameter the subjects we hoped at so Const add some picks equals X, which will be our eventual subjects. Let's return something within this body scope within the scope of add some fix. Let's add an inter function called can Cat that has one argument of its own and returns a result of adding together the ad Suffolk's argument and its own concatenation argument. So Const couldn't cat equals. Why the return result of adding Why plus X Because X's are Celtics. So we wanted to follow what? Finally, this ad suffix function now returns the inter closure. So at a statement that returns can cat excellent, we've created a function factory. The first takes an argument, defines a closure and returns it with varying capability. Depending on our initial argument, let's explore how this works with a couple calls. Add some picks. First up. Suppose I wanted a function that adds a suffix ness to any word we argue. So let add nous equal the result of calling Add some pics arguing ness We'll go ahead and council don't log Adn s to see what this looks like So as you can see, the result is a function returns Why and why plus x So let's go and call this function now with a prefix adn s r prefix will be happy And let's make sure that set this to a variable Let h equal adn s happy Let's go ahead and confidante log h along with badness and boom We get happiness as a result So we see the result of our function factory first we argued mess to the ads Suffolk's function that it's except parameter looks at the con cat function on the inside which is not a closure that remembers a lexical environment of ad Suffolk's and returns its own argument of why plus X And then finally it would return that hole closure for add some pics. We've now created this whole function in a factory for ad mess and then we can use add mess And are you happy? And there we go. We're consul dot logging happiness. As a result, let's show this another time with another suffix. Let add full equal. Add some picks. Phone. Let f equal. Advil will argue fruit. Now let's go ahead and confidante log f and we get fruitful as a result. How cool. Alright, let's try this concept of function factories home with a second example. This time we'll deal with a more math oriented function factory. Let's define our second function factory, which turns a function that multiplies two variables. It will follow a similar structure to our ad Suffolk's Function and Closure to find a function product which takes one parameter. Ultimately, this will become our function factory that returns an inter function which multiplies our original parameter of product with inter functions parameter. Let's add that inter function now, except this time let's shorten down the closure and return the function right away so we can just return why and in return. Why Times X as usual. Great. Let's call this product function factory and create some functions which turned the result of multiplying custom numbers. So let Multi five equal a function factory return function of product and five here we're creating a new function with our function factory called Multi Five that makes a function with one parameter for a variable and returns that variable multiplied by five. As we argue originally, that's confidante. Log a call of multi five and mold 53 Here we find 15 as expected. Very cool. No, let's do it again with a double call Cool product to it's council. Don't log of result of doubling nine as you save. We now find 18 in the council and great we Nazi function factories working fully with his ex closures, which gives us great custom functionality. Now, before we move on, we can once again take advantage of a couple steps to reduce this function factory. Recall with arrow functions that we can remove the return key word and return the expression on the right automatically. So let's shorten down the inter function. Take out the braces, semi colon, the return key word and then we got a return. Why arrow y Times X now notice that everything so works as I save. We still got in 18 but you'll notice that we can still shorten this down again. We'll take out this curly brace this return key word as well is this curly brace, and as a result, we have a very concise statement, which is a completely valid function factory. As we save and reload. Boom, we still have 18 awesome. You'll see reduced methods like this show up on just one line more than often India six coat. But the function factory earlier in the expanded syntax of the earlier version, can be more understandable. It's up to you to implement which way you'd like, as long as you're internally consistent when you create your E six programs. All right, let's continue exploring closures in Essex.
14. Private Methods: many languages, like Java support the ability to create private methods to enable data encapsulation. Thes private methods have restricted access toe only other methods within the same class. Now in JavaScript, we can't do this natively with the Essex class, for example, but we can emulate the behavior of private methods by using closures. Let's explore this concept of creating methods with closures, an example of a function that keeps track of a budget with private data. First declared a new function called budget and assign it on an ominous arrow function. Cons. Budget equals R Arrow function with a body scope. Next, let's give this budget some private data. First, a balance variable. The band's equals zero number. Create a private method called change Bow. Let change about equal a function with one parameter, which just returned to the balance return balance plus equal that, and this will go ahead. Update balance to add whatever we argue within change about now, let's add some closures to this budget function to give the user ways and manipulate this private balance data. These closures in the function will then use the functions environment and give us ways to manipulate its lexical scope for our first accessible method or closure. Let's create a deposit 20 method that utilizes a change about private method and allows us to update the balance by adding 20 to our budget. So call it deposit. 20 equals an arrow function that just the turns the change bow of 20. There we go now to give the user access to this deposit. 20. Method. Let's return an object, which is holding a deposit. 20 key mapping to our deposit. 20. Method We'll go and instant 10. She ate a wallet now equal budget and let's council dot log What? That while it actually looks like as we save, we see an object with just one function. A deposit, 20 function. Let's go ahead and call deposit 20. Let's save and boom deposit 20. Seems like it worked, but we can't really tell what actually happened. So to check our balance, we're gonna add a check function closure now to the budget. So CONST check equals return what the balance currently is. And now let's add that to our list of functions, so check maps to check would save, and after depositing 20 we cannot constitute log a check of the wallet and boom, you re fined 20. Return to our consul, which is updated after zero. Great. So the question is, why couldn't we just check wallet dot bounce? Let's try that wallet dot balance. Let's shy consul dot logging it right after the check. Let's save and we have undefined. That's because we're not returning balance within our return. Object for the actual budget were only returning methods that have access to the budget, but not the actual budget balance itself. This is not a private variable in terms of using closures and the function pretty cool. So this is awesome. We have to closures in our budget function. Now let's add 1/3 1 now to the lexical environment. Withdraw 20. That will change the balance by negative 20. So Const withdraw 20 equals arrow function that just changes the bow by negative 20 which will subtract 20 from the overall budget that will add a withdrawal. 20 Call Withdraw 20 and anything about objects is that when keys and values are exactly the same, India six. We don't even have to specify the colon syntax. We can just specify one keyword right away and return the relevant methods. Nice little Essex shorthand syntax trick that makes things look really nice. So now let's withdraw 20 before our budget check Draw. 20. What's at a couple more calls to deposit? 20. Take out this extra fluff. Let's go and check the balance after this first off deposit, 20 is plus 20. Withdraw 20. Go back to zero and a couple more deposit twenties. We should get of 40 as we save. What do we see? 40 bucks for our wallet soup. Endless. We just use closures to define publicly accessible methods that access private methods within our overall budget Variable. The use of closures to achieve this effect is called the module pattern in JavaScript and E Essex. Overall closures, in combination with private methods, have great benefits. Private methods don't only restrict access but significantly improved programs and make owed more manageable by keeping essential functions separate from the functions, particulary to a certain local name space. As a result, the global name space for our entire program looks Pierre and clean. Excellent. Let's move on
15. Presenting Generators: Let's discuss a feature that brought a lot of excitement. E a six generators they can feel strange to work with at first, but with some examples. And after diving into the code, you'll see why generators prove so useful in E A. Six. First of all, generators break the typical runs a completion model for normal functions, meaning whenever we run, a function we expected to complete before moving on in the program. Therefore, other expressions and statements can only happen once a function has finished. Generators as a different kind of function can pause in the middle or at multiple times and resume again later deposit function in a generator, we use a special keyword yield, and to resume the function, we make a call to the special dot next method. Generators then allows to construct very handy things, such as functions with controlled flow and simplified versions of generators. All right, let's get these coding gears spinning and start working with generators
16. Defining a Generator: Let's jump. It's creating our first generator. That syntax for a generator uses the function key word followed by an asterisk. Our first generator will just be called letter maker. Let's define it now, so function asterisk letter maker. It's a function so it will have a body denoted by curly braces. All right, recalled the idea of a generator the generator introduces. Controlled flow into the functions runs on. So rather than following the runs to completion model, we can create functions with pause and resume capability. So again, how do we make a function that pauses? It returns its current value when paused. Well, we use a U of keyword at three yields to the letter maker, and we'll just yield a list of characters one at a time. First will yield the character A then will yield the character. Be then will yield the character. See Okay, now that we have a very basic generator, let's create an instance of this generator and find out how to access its paws Values one yield at a time. First up declared a new instance of this letter maker and we'll call it letter. Jen let letter Jen equal letter maker notice that we don't use the new keyword when defining instances of generators. Great. Now we can finally reveal how to access the yielded state at each yield within our generator to access the yield or pause within the generator function. We use the dot next method next, takes one step within our generator and returns the current state of that generator. And then we can access that return state using the value. All right, so let's call Sadat log a call of the letter James dot next method letter jane dot Next, and then we'll go ahead and access the return value. But save and boom. We get a showing up in our consul Awesome at a couple more identical consul logs, and we'll find each yield. So good. Copy and paste this a couple times and we should get ABC. There we go, ABC. Let's see what happens if we try to access the next value after ABC. We get undefined because we have no yield defined and we've reached the limit of our generator. Okay, let's work with a more practical example, a generator that yields a counter one at a time, for example, Imagine this generator keeps track of customers in your tech shop. Each time someone walks in the door, the generator will return the next value. The nice thing about this generator compared to other methods will be that it doesn't matter how often you call it, how many times you call it or at what time you call it. It will always return the next value so defined the generator as count, maker, function, asterisk, count maker, body of curly braces and within count maker will define account variable. Let count equal zero in. The idea with this generator will be to yield three counts. We have a store limit of three, and once account is over three, the generator will no longer return a value. To do that, we'll add a condition to the count valuable and as long as it's lower than three will yield our count variable adding one to itself. So while the count is still less than three will yield count plus equals one. As we save. Let's make a new instance of this count generator. So let Count Gen Equal Count maker. Let's go ahead and council don't log a bunch of calls to the count n dot Next, accessing the value method. So 123 and four as we save, we get 123 and undefined as expected. Great. Now we can go ahead and yield four if you wanted to after three by just increasing the limit to count is less than four and we get a counter toe. 1234 Awesome. We saw some fundamental implementations of the new ES six generator, and it's practical use cases. For example, what we just saw with the Count Maker generator can also be extended to a system to make I DS. In other words, the generator will continue generating new ideas for users one at a time, ensuring that they're always unique. But in a very controlled and interim format, it doesn't matter when a new user signs up where the two minutes after the last user, two hours or even two weeks, this generator will return the next i d for the new user and a proper number. Now that we've seen this use case, let's continue and dive into some or involved uses of the generator in E s six
17. Controlling Flow with Generators: will now work with MAWR involved generators. Continue exploring the concept of controlled flock. Let's figure out how to add a recent capability to our generators. First, we'll create a new generator that list the even numbers, starting with two to find a new generator and call it evens function. Asterisk evens the body of the function as braces. As usual. Let's initialize accounting variable now and set it to zero count equals zero. And now let's do something considered near blasphemy. In the realm of programming will add a loop that can never stop while true, which will always be true. Count plus equals two. Then we'll go ahead and yield count now, the while loop Untrue can never break in a runs a completion model. This would never exit and cause an infinite loop. This is actually a notorious piece of code. A computer science teacher might tell you to never write in one of your introductory courses, but with generators we like to live on the edge. We disregard that advice and uses dangerous loop to our advantage. So let's see it in action by creating a new instance of art evens generator let sequence equal evens Let's go ahead and call the dot log a first call of the yielding state, so sequence dot next accessing the value. Let's go ahead and copy this a couple more times. Let's save and we get to 46 as expected. And this while loop is not breaking our program now, you might be wondering how will exactly re set account variable doesn't seem like we can do much within here. Well recalled that dot next special method for generators that were using right here. Well, it has an optional parameter that we can use the past state to our generator. Whatever we passed as a parameter to the next function can modify the internal state and behavior of our generator. So update the generator just like so, set the yield count to a reset variable. Here, the reset looks from whatever is passed to the generator and checks for it in a yield statement. All right, And then, if reset is true, so equals the true. But we can just say if a reset itself is true, that will go ahead and set the count back to zero. As seen, the yield statement does not only return the current state but also checks for state passed into the generator itself. Then we have a simple if statement that sets account back to zero if that yield statement ever evaluates the truth. All right, let's see this in action. Let's keep these logs of sequence start next stop value. But then afterwards, let's count adult log sequence dot next true dot value and then we'll council don't log another call to sequence dot next dot value and let's check out the values returned here as we save Boom, we get 246 But then we pass. True to the evens function, Serie set becomes true. You re set back to zero and yields a plus on account. Awesome. +246 to 4. We've now discovered how to reset our generators. Never recovered. Reset. Let's move on to even more ways that we can take advantage of E S six generators
18. Generators vs Iterators: Let's discuss generators compared to generators in JavaScript and ES six and generator in any programming language will access items from a collection or array one at a time, and it keeps track of its position as it does so in JavaScript. Just like the generator, we can define our own integrator with the next method that returns the next value of a past for right. Let's create our own generator now, which won't be a generator, but our own handcrafted generator from scratch. Define a concept called Array generator, which will be an arrow function with one parameter array. CONST. Rated. Aerator equals array. Here's our arrow function and great. Now, within this generator, we need to define the starting point. Assigned a new variable of index 20 with the array inter rater scope. Let index equal zero. Next will return an object for this generator with the next keyword that maps to an air of function. Return next and we'll have an arrow function. Great. Now all we have left is the ad the actual logic within. Next to return the next item in array and increase index by one every time. First we want to check if the index is less thing, the terrain life. That way, our generator knows to stop once the index exceeds the arrays limits, and then we'll temporarily store the current value within array. Index then will increase the index by one and finally returned that temporary variable. So let's add it, logic right within the next body scope. So if the index is less than the array dot length, make sure everything is formatted correctly. Let next equal the current array index. Will that increase index by one, and they will go head and yield and return rather that next variable. Now let's work with our own custom iterated function by creating an instance and passing it array of 123 So let's say I t is equal to array it aerator passing in 123 which is just an array to use for now and then we'll go ahead and council dot log some next calls. So let's log. I teed up next and check it out. Let's save and boom in our consulate, we get one, which is the first value that we passed in our iterated er. Let's go and do it. A couple more times we should get 123 Let's do it one more time and we see that it finally returns undefined once it goes past the array dot life. Very cool. Now this generator works to go through the array one element at a time, But with generators, we have a powerful alternative going coming out the generator code. Just a have it as a reference. It's a good command slash. Next, we'll create now on ES six generator. So function, asterisk a rate and redder, which is now a generator within the generator. We have special access to a key word called Arguments, which checks for whatever we pass when we call our array integrator. All right, so it's at a yield to the actual arguments. Keyword. They will make an instance of R rated aerator and pass it in values of 123 So far, I t equals R rated aerator. 123 Let's go in confident log a call of i t dot Next, find the current value you save. We get array of 1 to 3. All right. Pretty cool, except we want to yield these values one at a time rather than as in the tire array. So will emulate the behavior of our original generator, but adding enhanced four loop that goes through each argument individually and yields those so instead of your arguments enhance four loop for Let our of arguments then at each instance will yield Argh itself. Let's go and save boom! We get the current value of just one. Let's add a couple more and we should get 123 Awesome. Know that we've essentially used a yield keyword three times in this loop. Well, it's six provides a shortcut for us. Whenever we use yield more than one time in a row, we can just use a yield asterisk, syntax and reform the four loop into one line with yield asterisk arguments, arguments As we save, we get one suit three. Just as before. Great. We now have a very reduced generator that fully mimics the custom or reiterate er that recreated originally awesome. This covered, um, or advanced topic within JavaScript and E s six in general. And if you plan on coding in languages in more than just Js and he s six, then it aerators will show up everywhere with e six, though generators will allow you to approach MAWR advance programs and create more effective it Aerators. Remember, generators have that start pause and reset functionality with the handy yield, keyword and next method. All right, let's continue learning s six.
19. Presenting Asynchronous Programming and Promises: Let's dive into the concept of a synchronous programming in JavaScript and E. A six First Off will define asynchronous programming, but first clarifying the differences between synchronous programs and a synchronous programs. When we refer to synchronous programs, we refer to those that run in sequence from top to bottom. These programs may or may not face blocking operations that affect their run time. On the other hand, asynchronous programs refer to ones that run on a looped engine, meaning when a blocking operation happens, such as a network requests to a server that may take a while to go through. The A secret is Code Die. Burt's the operation to a different handler. Therefore, this keeps a program running without a block ever happening. So let's get to the important question at hand. Why do you need to know about a secret? It's programming, and why does it matter? First, off user interfaces and browsers are asynchronous by nature. After all, the U. N. Browsers handles events such as button clicks, mass moves and submissions of data a synchronously. Think about the fact that these events get happen at unpredictable moments in time. Therefore, on a synchronous model This would cause constant blocking for the user whenever the engine would have to handle each new request and wait for it to finish with a synchronous programming, though, this problem is sucked. If the user sends a new function request, that function gets diverted to a handler. Well, the user sees a response, and the response gets processed in the background. In this way, a secret is programming enables us to interact with databases, servers and public AP eyes, because operations with these technologies could take some time to complete India. Six. We can follow a model of a secret is programming and handle functions that take time to complete with promises. Promises allow us to handle asynchronous processes by representing values that will at some point return in the future. Promises can exist in one of the following three states pending, fulfilled and rejected, which, respectively, clue in on the promises current status in fulfilling of function. Ultimately, promises introduced a great way to handle asynchronous programming in Essex and will definitely appear in any programs and Essex projects that you code in the future. So let's start exploring promises and asynchronous programming
20. Promises: let's begin with the basic syntax for a promise in ES six. First, declare new variable and a sign that the result of calling a new promise constructor within the constructor will have a narrow function. With two parameters, the 1st 1 will be resolved and the next one will be reject. Both resolve and reject represent handlers in the promise that give a function to update the state of the promise. Resolve handled, successful promise Calls will reject pedals, promises that can't determine of value. Let's first explore that promise by resolving a future value. First, let's resolve a string that just has resolved promise. Data me. Now we need a way to determine how to access this promise data. You often hear the concept of accessing of promises data as consuming the process. To do so. Reuse of promises dot then method, which accepts a function that gets a promises return value once it's fulfilled. In this case, we'll call that function that gets the eventual return promise value response. So at a call to p dot then we'll have a response with an arrow function. And let's simply consul dot log that response. Let's go ahead and save and the response is resolved. Promise data. Very cool. All right, how about a promise that doesn't successfully return data but instead rejects it? How could we create that kind of promise and handle it? Furthermore, let's modify the promise to reject a standard value for the promise rather than return a resolved one. So instead of resolved, let's use the reject function to reject rejected promise data. Notice that we now see in air with our consul that we have uncaught promised data from our then statement. This gives us a clue of exactly what handler function to call in order to see the rejected data. So next to then, we can add a dot catch statement to catch that value. So dot catch and this one takes an inner arrow function as well. So we do air and council don't log that specific air as we save. We noticed that we have rejected promised data now in our consul so great notice that we have a chain of functions now the first, then statement checks for resolved data in the promise and when it finds none passes the flow of control to our catch statement. This has the effect of finding the promise, air and consuming are promised data. Let's make one more important distinction with promises. Remember, the promises represents stand in values for data, however, promises can often take time to process. This includes those functions that deal with servers AP eyes or networks that may need time to process the data before returning it. So let's examine the effects of a secret. Is programming with a promise that doesn't necessarily resolve right away once again modify the promise? This time we use a set time out function, and we'll resolve some promise data. So at a call to resolve resolved promised data. And then we'll make sure that this isn't return until 3000 milliseconds or three seconds have passed. Let's save but being after three seconds. But, uh, boom resolved promised data. Cool. Now let's make a distinction. What if he added consul dot log to after promise consumption after the actual then statement? What do you expect to show up first, the after promise consumption or our promise? Well, as we save, we see after promise conception and then three seconds later we get resolved Promise data. Well, this behavior imitates what we might expect from promises that interact with AP eyes for networks, the promise may take time to complete, but we still get to run the coat outside of the promise function as it's running in the background. Ultimately promises, allows and neatly handle asynchronous processes in the background as we run other coat. Great. We just covered the basics of promise creation in Essex. Let's continue exploring promises with a more practical and in depth example in order to illustrate their true usefulness and power.
21. Presenting HTTP Request Methods and Fetch: and you six. We have the beginnings of a new A P I called Fetch, which allows us to interact with Internet Resource is through Js programs to lay a solid foundation for this type of programming. Let's cover another foundational concept in web development and the World Wide Web. In general, http http. Or hypertext transfer protocol defines a foundation for how data communicates over the Internet. For example, notice that in a browser at the beginning of a u. L. You will always see the letters Http. Well, this Http is specifying a scheme for the website for a specific request message to send to a server. The server then provides Resource is based on the http request, such as HTML files and other content like images for the browser to Sirte. We can use various types of http request methods in order to specify exactly what actions then to perform First of all, the most common one the get method represents http request that only retrieves data and has no secondary effect. Usually the get method. We will turn html as a resource or other data such as a JavaScript Jason object. As a result, no, that Jason is an alternative file format for JavaScript that essentially host large job script objects as one large file. Next, the post method actually sends data to a server in order for it to add a resource is or update existing ones. This ranges from anything so destroying an email within a list or updating comments on a message board or adding new values to databases. Other examples of http methods include the head, which as from meta information such as the title of a resource, the delete method, which removes a specified resource. And the patch method, which only partially modifies the resource you most often see get and post in action. However, when dealing with our own databases and servers, as well as when interacting with a P s. Okay, let's get ready to rumble and code with AP eyes and fetch
22. APIs and ES6 Fetch: in JavaScript. We have a new technology called Fetch, which provides access to using http request methods to use fetch. We passed through the fetch method, the path of the resource. We want data from, including any specifications. Then this function returns are promise containing the results of that call. This is funds can either return a rejected air or a result success as seen previously in the exploration of promises. The consume promise then holds all the relevant data we want from the resource. On a quick note, the Fetch a p I is still currently considered on experimental technology and not supporting all browser versions. Yet if you're using newer versions of chrome, Firefox or safari, though, you should be fine. Okay. To perform a fetch will need a resource of first grab data from Had to Jason placeholder dot type a code dot com Right here. Here we have a tool that simulates an A P I for testing and prototyping purposes. It's fully functional and will allow us to visit Resource is and grab pseudo data as a way to learn. This will perfectly illustrate the capability of the fetch method because you don't need to purchase any authentication teas for this, a p I or even register as a user to start interacting with it. It's completely free now. Once you hear, scroll down a little bit and you'll find a list of available resources and routes. Click on the road that says post slash one. This will take you to a page where you will find some return Jason Data containing non consequential things like a user i d. A title and a body component. To go for us will be to use a fetch a p I to see this Jason object within our program. All right, so Step one, let's copy the U. R L in a sign of constant called route within our function. Set to that you are so is Jason placeholder dot tepco dot com slash posts slash one. So const root equals that you were l in a strength. Now let's use the fetch method. It takes our route for the first parameter, and then we can specify any specifications with an object as his second parameter. And our specifications specifically for this one will be a method that is the http get method in all caps. All right now, just like a function. We consume the result with a then statement because it's a promise. So dot then response. And let's just go ahead and council don't log that response for now. I'll go and make a sneak. Let's save. Go back to our application and boom! We get a response whose status is 200 ultimately. Okay, let's look at the pro Doe key within here. Notice that we have a bunch of useful methods within the object prototype for the response . The one that were mainly interested is the Jason Method. The Jason function in turn returns. Another promise which will return are pure Jason Data. Now, as we return, this will introduce the concept of chaining promises, every return response that Jason we could handle. The return Jason from this promise with another than statement. So modify and just like so, instead of council dot logging, the response will return response dot Jason and now within another then statement with this chain promise we can handle the Jason that we find and simply council. Don't log that as we save boom, we find that whole object that we saw earlier online. We got the body of the I D the title and the user I d Very cool. So fetch enables us to use Resource is online right within our program. Imagine if we use another A p I that published weather data or city reports. For example. We could use these really complex AP eyes to build really intricate applications, and we can work with them very easily using the Fetch A P I and promises. Let's use a more dynamic AP I now and continue exploring fetch with another example We use another rare free AP I actually hosted by Google to return Jason Data about books. Now bear with me as we type this u R l But it will be worth it. Trust me. So the your URL is http as which days for secure w w dot google 80 IES dot com We're gonna find the books resource. We're looking at the version one of the FBI, so v one find volumes. We begin the query with a question mark. We say Q equals spn. And then finally we get a bunch of numbers to represent our ice. BNC 0747532699 All right, So this is the whole string. You can pause the video and take a moment to look at it to make sure you got it all typed out. But I'm going to go ahead and save, and as we do so we find new Jason data within our consul. Great. So we can look at items, find the object within here we confined volume info and see a bunch of information about this book, which is Harry Potter and the Sorcerer's Stone. Very cool. So we've explored http requests the JavaScript fetch a p I and chaining promises in action all together, working with a P eyes and handling them with promises will give us the power to build truly meaningful es six projects. All right, let's move on to more topics in E s. Six
23. Presenting ES7 and More on EcmaScript: Welcome to Acma Script 2016. The next version of Atma script after es six. This version is called E s seven. Though very small update on the language, it's still necessary to go over the new features that the update includes will also explore some very well develop proposals for features in javascript that have a great chance of appearing and eat. S eight. First off He has seven has a new operator for exponentially ation replacing the math thought Pau Helper. This explanation operator makes it much simpler to deal with raising numbers by a power. Next is seven release support for a new method within a race. This method dot includes makes it much easier to check if an element already exists within a structure following the exploration of the new seven features. Let's go over some new possibilities that you can place your bets on seeing an E S A and the publication of Atma Script 2017 one very high stage s. A proposal includes better support for accessing the elements of objects. Hash maps and job script include methods for accessing the values, keys and entry. Specifically, however, I'll just currently only have support for the object dot keys method. So let's hope that s a arouses out. It makes object manipulation with a dot values and dot entries method. Next, here comes a huge proposal that almost made its way into E s six and S seven, respectively. A sink functions a sink functions further, support asynchronous programming in javascript. They handle and return promises well, letting code execute in the background without blocking ever happening to the program. As you'll see a sink functions introduced. Even better control flow beyond promises when it comes asynchronous programming. So exploring the proposed a sink and await keyword will be fun and valuable. All right, let's get to learning all about us seven and beyond.
24. ES7: New Features: in order to begin exploring S seven, we need to make a couple of changes to our build configuration. It's nothing too drastic. Just one NPM in salt and another string in our package dot Jason Fox. So in your terminal, find your project and run NPM install babble preset is 2016. Save death. Once I was done, head back to package dot Jason in your project. Let's find package dot Jason and make sure that is 2016 is specified as one of the presets , all right, with the project and figured. Let's explore the new features of S seven or eight as 2016. First off. In order to work with exponents, we traditionally make a call to the math library and use a power function just like so. Let a equal meth up. How 25 And as we cancelled out Log A. We see 32 which is two to the fifth power. However, in his seven, we have a much easier time achieving this behavior with the X Women she Asian operator. Inspired by other languages like Ruby, the exponents has a new operator would just looks like to multiply. Signs interrupt, so change in that thought, pal. Call to to times times five as we confidante log A. We notice that we still get 32. Let's explore the next new ES seven feature you may be aware of. The DOT includes method supported by shrinks in JavaScript, created just like so let be equal shrink. Wonderful dot includes wonder as we constant log be, we should see a true value. So we get true. Let's test if it includes butter, so you save. No, it does not include butter. All right, so the string includes Method simply checks. If what we argue with it includes is included within the actual shrink. Yes, seven extends this type of functionality to a race supported by its own dot Includes method change. Be to an array and council don't log whether includes a certain value. So let's do too. 345 and six. Let's check if this rate includes for as we save. Yep, our array includes four. How about seven? So we save falls? No Are Ray does not include seven. All right. After covering the exponents operator, any array dot includes method. We've actually finished exploring all of the new features. India seven. Now it takes a lot to include a new feature in an update to JavaScript. And just because yes seven was a relatively small one doesn't mean that there isn't a lot of ideas on how to improve the language. In fact, there were plenty of proposals to the language for S seven. However, there's still not fully developed and exist in certain stages of experimentation and implementation. Many of them, though, admit it close to becoming part of a release and could very well make it into the next one . It just takes time. Well, let's explore some of the more late stage proposals, though, and check out these features. That way, we'll prepare ourselves for S A and the future of JavaScript.
25. ES8 Proposal: More Object Manipulation: our first s. A proposal makes a manipulation of objects much simpler. In order to work with these new features, though, we need to insult another preset which can handle this new coat. Get back to the terminal and run NPM. Install babble preset yes, 2017 Save death. And then we'll need to make the necessary change to package dot Jason, but adding the ES 27 preset to our list of presets, so make sure in packages out Jason, you have it just like so. Yes, 2017 in your list of presets. Great. With that, let's go over a function that already has widespread support within the object. Prototype dot keys, which turns all the keys for a method to find an object called OBS and will give it some quick data just to have some keys and values. Let AJ equal a which is one be, which is to and seeing which will be three. Then let's define a variable called keys and assign it to the result of calling the object prototypes. Keys function upon our object object like he's equal object dot keys up, and as you counseled outlaw keys Presto, we have an array of all of our keys, ABC Fantastic. Now, before this proposed update for essay, we only had access to this dot keys method For the object prototype. However, this seems a bit incomplete. What if I only want to look at the values well, Luckily, this proposed he s a feature provides for us a dot values method which does just sell, modify the code to the following. Let values equal object up values on OBS and then we'll confidante log our values. And voila! We have an array of our values 12 and three. Finally, along with the keys and values function, we have another method called entries, which gives us pairs of keys and values. In Honore. Let's examine it. Let entries equal object entries, owner up and council dot log injuries as we save boom array to each one is a pair of our value and key. So here's a value and key key and value. Great. Now you may wonder, why is this useful? After all, we have the keys and values methods, which gives us way more limited arrays on the specific parts of the object we want. We'll consider Iterating through the array to print keys and values. This entries met that makes it more direct and doing so with the DOT keys or dot values method. Let's add a simple loop the loops to do raise in entries in order to print out. Our object will use and enhance for loop in this case, so for let entry of entries, then we'll simply call Sadat. Log the temperature ring, which is our key is the current entry. We'll access the first element with an entry. Then we'll save the value is the second element with an entry so one we'll save and boom ta value. One key be value to in key see value three US thanks to this ES eight proposal will have an easier time manipulating objects in JavaScript in the future with the DOT values and, uh, entries method beyond just dot keys. Now there's a high chance that these methods appear in the next version of Atma script, so it's nice to know about them even before their official features. Let's explore another s a proposal next
26. ES8 Proposal: Async: next up, we'll go through a huge proposal for essay something that actually almost made its way into ES six and seven and has huge possibility of appearing in the next version of ECMO script. This will actually continue our discussion of promises and asynchronous programming as well Explore facing functions in this s a proposal. A sink functions have an underlying purpose to further simplify a circus programming for the job, script developer and programmer. First off, you might recall this tension between a synchronous or concurrent programming and synchronous or sequential programming. In one case, the former, we have the possibility of running multiple processes at once in order to speed up coat in sequential programming. However, we have a top to bottom model. The must run each method step ignorantly, even if that means certain functions will take a really long time. This means operations that could take a short time for the user, end up getting the late waiting for the secret, this program to finish therefore a secret. It's programs solve this issue by sending that delaying function to the background and finishing the rest of the statements. A new C proposal implements this type of programming with new functions that use a new specialty word. A sink, which is short for you guessed it a synchronous. All right. With that discussion, let's create our first basic function called a sink one, which will simply return a string. What so a sink function? A sink one. Which returns? What now? Just like a promise. We consume the return data from this facing function with a then statement, so go and write a sink. One. Call the function dot Then we'll find the response and consul debt. Log that response and boom! We get a one in our consul return from asynchronous function. Great. Let's not examine facing function that rejects data this time will define and a sink to which just throws an error. It's a sink function, a sink to will throw a new air object that says issue with a sink. Oh, no. And just like before with promises, we catch any errors with a catch statement, a sink to call the function. We'll go ahead and catch any errors and counseled out. Log what that air looks like as we save whom we get air issue with a sink and we get a nice stack trace to see where it actually happened from Great. Let's explore the last state of a promise pending besides, resolved and rejected and examine how to handle currently processing functions with the await keyword. First, let's modify. Are racing to function toe actually resolve some data? Let's just go ahead and return to now. What if he wanted to combine our A sink one and facing two functions? Well, we could do so with another a sink function that waits for the value of both of these With the await keyword, the await keyword puts a pause in the racing function. It does not allow it to continue until the promise has some return data. It's highly useful for introducing controlled flow back into the function, especially if you don't want code to run until you have the result of your promise. Let's explore this new awake capability in a function called a sink three. It's going to remove this call and say, a sink function a sink three. First we declare a first constant of one said to await keyword on calling a sink one that's confidante. Log what one looks like, and for const to we'll do the same thing but will await for the call of a sink to and then we'll go ahead and council dot log to. And finally, let's add a call of her asynchronous function a Sink three as we save. And I just had a little spelling error. So go and fix that. If you made the same mistake, although you probably saw me do that and like Oh, no, right, they think that it's Nick. So there we go. We got one to in our consul. So notice the two uses of the await keyword. In the first instance, the one variable gets set to the result of the result promise, waiting for its value. No matter how long this promise may take to resolve, the same goes for our to constant. It awaits for the racing to function to complete, even if that means taking a while to do so. It's almost like making a gateway within our asynchronous program. It makes sure that other code beyond the awaited promise does not run into the promised returns of value. In this way, we can actually write code that is dependent on the result of the promise. After all, we have the await keyword to ensure that our variables are set to a promise that won't be undefined. Now, this logic extensive functions that interact with an A p i or server. Often we don't want logic to continue until we find relevant data in our functions. Therefore, the U A keyword ensures that we don't manipulate data that isn't actually valid, which comes very in handy for AP eyes that may only return data after some time has passed . Still, using multiple await keywords in this way sort of introduces a synchronous and sequential flow of logic Back to our A sink functions. What's the purpose of the ace in keyword? Then? If this isn't going to introduce any speed ups with all these facing calls and await cause and therefore negate the chance for concurrency, that's a great question. And the answer is, it's important to use you Wait keyword at your discretion don't add too many because it really take out the greatness of asynchronous programming in the first place. To put time taking functions in the background still await. Overall comes very much in handy when we want to write code that again depends on the result of a promise. Let's explore one last feature within this basic proposal. The basic function also ships with a promise dot all feature, which handles multiple calls to asynchronous functions in a parallel fashion. Let's declare our fourth and final a secret dysfunction a sink function a sink for. We'll use the structuring assignment to set both arrested one and arrest to variable at once. We'll set it equal to the await on Promised at all, which we can use to pass an array of asynchronous functions that promise that all will call concurrently civil call a sick one first and then a sink to and then finally will set raise one and reds to within a confidante. Love to check out the constants. And then finally, let's an a sink. Four. Call at the bottom of our program and check it out and boom! We get one to you as expected, because promise that all runs both of these concurrently. Awesome. This feature proposal of a sink and a weight has been around for a little while, and it nearly made its way into Essex, but the engineers behind a sink wanted to make it perfect so it just hasn't quite found its place in a release yet. You definitely Seymour of the A sink and await functionalities in the future of JavaScript , though fortunately, you'll be prepared to use these functions and begin taking advantage of them in order to make your job easier with asynchronous methods as a developer and JavaScript programmer. So luckily, you'll be on the cutting edge, knowing all about a sink and a weight even before it's officially released.
27. Previewing the React Application: Welcome to Book Explorer. We'll create this application together too quickly, introduce, react and bring together many of the concepts we went over and Essex to see how it might work on the scale of an enterprise application. It works just like this. Go to the search field and find a book title for whatever you want. For example, let's search Harry Potter. Next comes a gallery of book titles with their image is relevant to the query that we searched with Awesome. Each title that has a clickable component which will navigate us to its home page, where we can find more information so that we go. We find its home page on Google, which we got from the application dynamically. While building this application, we'll learn all about JSX and Mawr Essential react ideas in this section and will work with the Google Books, a P I in order to grab our data. Hopefully, you have a lot of fun while learning react and bringing together many of the ES six concepts we learned in this course. Let's get coating
28. Setting Up and JSX: Let's begin building book explore To get started. We need to insult some new NPM packages within our project. Head back to your terminal and project folder and run NPM Install that will preset react, react, react dumb, react, bootstrap and then do a save death. All right. This will install the presets that tell our Web pack configuration file to transpire. React Fox. It will insult react itself and the react, Um, which handles rendering react components onto the browser user interface. And it will also give us the React Bush package, which makes selling easier in react projects. First off, let's make sure our Pakistan Jason is completely set up correctly. Head back to package dot Jason and make sure to include react within your presets. Just like so Now head back to index such es and let's start working with react. First import, react from the React library, and then we're going to import the react dumb from react dump and notice that these are default modules Me. Now let's quickly get something rendering onto the screen with react. First off, though, we're going to need to head to index dot html and make a very small change, so go to build index dot html We needs at a new div right above the script that simply says the I d is route. Now we'll set this idea to route, and this day will actually be used by react to render our entire component and application . Great. Now we can actually use this tag to render react components and to render react components we use of react down package in Index Duchy s. Let's render a quick div that just says react application. We'll use a react arms render method which takes two parameters the red component we want to render and where to render it on the HTML. So we'll say react dumb, don't render well additive that just says react application And then for the second parameter, we specify where we're going to get that i d so document dot get element, But I d will access the one of root very easily. Now, you also notice that it seems like we're using HTML in our JavaScript fop. However, this isn't actually html. It's called J s ex JSX in Essex at XML like or html like syntax markup to JavaScript in order to Mary components of a screen. JSX is a structure that we use within react to create our components as we save notice that our react application def shows up on the zoom in on the actual index R. J s click right here and boom, There we go. React application. All right, Next up. Let's export this logic into another module will get react to show up from outside this index dot Js file from an external component.
29. Make a Global Component: Let's create an external component The host of JSX for application first, create a new components folder and within that, create a file called Global Daja. Yes, so within app, create a new folder, components and then within components will create a new file called global dot Js. Now, within Global Duchy s will create a react component. Components and react referred to reusable independent pieces of code that either achieved a specific function or represent part of the user interface. In this case, our global component will serve as a component for our entire react application. So within Global Duchy s at the very top Adaline that imports react as was he component feature from react great now would set up a class and turn it into a react component. So class global extends component and our block of curly braces. Now, before we forget, let's make sure to export this global component as a default component for this module so that other files can easily work with it. So export default, global awesome. Extending this class as a react component now gives us a bunch of useful methods that react provides in order to handle rendering components onto the interface. Our first special function from react will be the render method which returned some Js x. Our JSX will return a did that says the APP component for now. So then add a render method returned some JSX A common mistake is omitting the return key word and only having the JSX within the render method. So make sure you have that return and additive which says the global app component. Great. So that's it for setting up our global dot Js component Now with an index dot Yes, let's import that global component we just create. So going import global from the current directory, find components, then find global. Now we need to replace a standing JSX with our global component and then it'll be a self enclosing tag because it doesn't have any Children, nor attributes will go and save and boom. We find the global app component Great. Now that we see the global app component under screen, we could continue developing this global application component and build the features of book explore
30. Creating an Input Component: to begin extending upon this global component will create an input field for this application that allows us to search books to render our search field will take advantage of react boo shafts. Really nice input fields at the very top of the file. Let's import a few helpful components from react. Bootstrap. So under important reactive component from React and Import. The Form Group for Control Input Group and glib pecan components from React. Bootstrap. Great. Now let's update the render field. Let's get rid of our standing text and give it a type. We'll take advantage of the age to header to Element tag and the title. Simply be book, egg explore. Let's say that and bang, we have a large title now. Book explore. Let me see amount to his normal size and never go. Our header to is looking really nice. Now we'll go ahead and set up our input component. Aided by react. Bootstrap at the very top will create a form group, but shells bootstrapped style. This section as a form then within the four group will add an input group, which makes an in line styling between an inter form control, which handles the user input and an input group add on, which makes a click of a button to handle the form submission. So let's add a form group boom within the form Group will have an input group input route, and then we'll have our form control component. We'll have the actual form where the user can type in their information from the field so this type will be text. And then we could give it a placeholder so that we, the user, knows what to type. Search for a book. And now this form control actually won't have any Children, so we could make it a self in closing tag by just doing slash and the closing tag. And then within this input group, let's add and add on in for group dot. Add on and this will be our little button, which will be a glitch, pecan or cliff icon who's good attributes will be search. All right, let's go and save all of this new JSX. And then we get a nice new input field component, which says, Search for a book so we can do Harry Potter. And as we cook the button, nothing happens yet. So even though this looks really nice, we need to add some functionality to this input. We'll create new helper method within a react class called Search said Do it right before the render method. Let's add a search. Let's it be. Place it above right here and then within search. Let's just constant log search for now. Next we'll add on click handler to the input group dot Add on, and then the handler takes an anonymous function, which points to the helper method that we want to call, which will be search. So on a click of input group, let's have an air function, which points to this dot search. No, when we save, make sure it's so said. Add on. And as we save, let's click search a couple times and boom, we're getting searched showing up in our consul Now. This search method, although working, needs a little more to it would be neat if you could tell what the easier typed in the input field. Of course, to do so, we'll need to have more dynamic data for our react component that represents what the user types in the four to find a solution and awaits. Add dynamic data. Let's move on to the topic of state within react applications
31. Introducing State: let's head state to this component in order to have our search function acknowledge with the user types in the form control component. Remember, State simply refers to this idea. That data is particular to a react component. As user interacts with your component, the state updates and shows relevant component changes based on that updating state and incoming data. All right, it's at sea tour component. We need to use this classes constructor within the constructor. We pass a props, keyword and make a call to super props in order to acknowledge any incoming data for this component. Then, after calling Super Props Week initialize state with of this keyword of the class and create a state object, said the very top, let's call constructor, we'll pass props called Super Props. Then I said we could initialize a state object on this within the state object. Let's have one key for now, which vats of the value of a blink strength so that it will simply be a query key, which maps suit a blink strength awesome. Now under form control field, we can add some logic that hails updating this state to whatever the user types so adding on change handler to the form control component, which takes an event which points to a specific function, are specific. Function will be react this dot set state method in order to update our state to the relevant value that we're getting from the event variable. So let's call this thought. State well, passing a new object. Let's look at our original query, and then we'll map that to the event dot target value, which will be a string representing what the user types within the form control component. Let's save as we do. So let's go type some new data. So Harry Potter and it seems like it's working. We just don't have a way to check if it actually worked for now. So let's update the council dot log in search toe. Also, don't log this dot state dot query. Let's save because we do so we need to retire Harry Potter. But once we do and re click search boom, we get search. Harry Potter in our consul great are updating state feature worked with this dot set state and an unchanged handler informed control. All right, Before we move on, let's add another event handler to the input field. That makes it easier for the user to interact at the application by simply pressing the return key word. This handler will be called on Key Press and then the actual button press registers an event dot key and all we have to do is check of event. Daki is equal toe enter. So read after on change. Let's add on T press again. We'll look at the event, but this time let's check. If event dot Key is equal to enter, and then, if so, we'll go ahead and call this dot search. Let's save once again. How would this time? Let's search Lord of the Rings and notice. I'm not gonna click the search button, but press enter and boom! We got a search for Lord of the Rings. All right, now that's working. Will move on to some styling and actually making the search functions smarter by connecting an A p I and fetching some data for this entire application
32. Styling with CSS: let's make this application look good to do, so we'll add some CSS styling to the yep, head back to index dot HTM. Oh, and first of all, we'll add boot shop, a very popular CSS library for anyone to use, which will give a bunch of stylistic improvements from the get go. We need a link of the style sheet type, which will point to the online CSS filed for bootstrap. So navigate to you getting started on bootstrap dot com. So get bush f dot com such getting started and you find a link to the online latest compiled in men. If I CSS fop good, copy that link and simply pace it in to the head of your index dot html component. So take out this comment. Make sure this is a line properly. Then, as we save, you should see your sailings update in the application. Give us that alternative fund, which is very nice for us. Cool. So using this bootstrap link will make our user interface look a lot cleaner because of the bootstrap stylings we'll still wants at her own custom stylings. On top of this, so create another solution, Klink and pointed to an index dot CSS file within the current directory. Sudden New Link Who's rela style? She in the h ref will be in the current directory finding index dot CSS. Now we need to make the index dot CSS file you file index dot CSS within our build folder in the first style is going to be overall, Globalstar say dot global well aligned everything to the center for the text. We'll also give it some padding. So that way it's not touching the edges. Now within global Duchess, we need to add a clause names that overall div and set it to Global. So head back to global dodgy s That will give our overall div the class name equal to global. And as we save boom as reload notice that things aren't touching the edges anymore. And our title is now in the middle notice that we don't use a class keyword like all HTML files because classes already reserved keyword in JavaScript. So react enables us to specify classes without interference with the class keyword of javascript by using the class and name attributes. All right, let's continue hooking up this application by adding the Google books a P I to our search method and actually fetching some data
33. Fetching Books: for book Explorer will take advantage of Google's free book A P I, which was a huge collection of books and book information that we can access with simple search queries. Here's the A P I that we're going to use and its documentation were interested in that feature that allows us to perform full text searches and retrieve book information. Next, Here's an example of the actual endpoint that we're going to be hitting. It returns a large Jason format filed with the kind of book that research the items that were getting in a bunch of descriptions based on every single book. Nice. All right. Now let's actually get to the code head back to research helper function. And first, we're going to clear a new constant, which will be our base. You were out. Say, const base you are l equals an empty string. For now, let's start ready out the link. So first it's an http resource, Http, in a secure one. So s Golin slash slash We'll get the actual website, which is Google ap eyes. We'll find the books resource. We're using the first version number. We're looking at volumes. Question mark begins a query and Q equals allows us to specify a query. So once again it's https. Google FBI's dot com slash books slash b one slash volumes All right, now we need to fetch the data from a specific search on this base. You were out and noticed that I use the word fetch. You guess it were used A fetch a p I will fetch on the temperature ring that combines airbase here. L and the query that the user types add a fetch on the template string with our base, you earl adding this current state of query Now we need to simply specified that this is going to be a get http method. So we'll say its method is get awesome. Remember, we consume the promise with a then statement. So then response. We'll return the response that Jason, because we're interested in the response that Jason and then we'll consume that promise with another one. So then, Jason and for now, but simply confidante log what that Jason looks like. Let's go ahead and save our application updates. Let's give a search of Harry Potter and see if we get some Jason an Awesome We got a huge object. And this is exactly what our current example that we saw earlier looked like this huge object. We now have it within our consul. Fantastic. Now let's use these book items that we're getting in our program toe actually update our user interface.
34. Adding a Gallery Component and Introducing Props: in order to represent our list of book items, let's create a gallery component that will host all of our fetched book items. First off, just like how the user updates a state of query with the input. Let's update some say, to reflect new data within our application at an item's key to the state object and set it to an empty array. Well, say items, is an empty array split next within the Jason Handler. Let's grab the items key from this Jason and assignments even items variable. Notice that we're going to use the structuring assignment on objects to assign the items variable directly to the items key within Jason. Then we use the structuring assignment again to set the state of her items array to this item. Variable. Let's create a block of code. Well, let items within the structuring assignments equal Jason. Then we use is a shorthand structuring assignment on objects in tax to set items, toe items within our state. All right, now that we've taken care of updating the state to our fetched items, let's add a gallery component to our application that handles rendering these items create a new file within the Components folder called gallery dot Yes, its components new file gallery dot jess now within Gallery Duchy s will set it up to be a react component. So import react component from react specified at this class gallery extends the component to grab all that stuff from react for rendering that will render and return a basic differ . Now that simply says gallery component. So gallery component. Don't forget to export by default. The gallery Great. Now it's important gallery within our global component and get it to appear right next to our search field. So import Gallery from Gallery in Global Dodges, noticing that this should be Gallery Dodge as so Let's just go ahead and read Name that gallery touches. You guys probably caught that mistake. I'll move that in here to get the folder. All right, Now that you've taken care of that seems like the galleries working. We'll go in at the gallery component now next to our search field. So right after the search at a simple call to gallery never go. We see a basic gallery component for now. All right. Now, our gallery component needs to know about these fetch book items However, we don't want to have to add our search function to gallery as well. So how do we get this child component of our global to recognize its state and held items? Well, this is where props comes in. In react. Props is very similar to state but refers to the parents state rather than the local state of the application Components received props from pair components, passing them through attributes so we can specify that will pass on an item's prop to our gallery component with the value of this dot state dot items. So in gallery, let's say it hasn't items attributes equal to this that ST dot items Now within gallery, we can recognize that I was a rate and set up some rendering logic in order to handle the appearance of new books, since we're getting them through our props. So go back to the render function. Let's add some logic that handles mapping over under Ray so we can just create the relevant number of JSX components. No matter how many we receive, will map over each item. Within this stop props items one item at a time. It's right here. Let's add a new stand, a little block of code. Let's get it on these lines to make it formatting nicely. Then we'll say this dot props that items dot net one item at a time. You notice that in a search call each book object within items will have a volume in Foky. The volume info holds a bunch of useful data, but we want the title in particular. For now, we'll use the structuring assignment to grab the title from volume Info. So let title equal item dot volume info, and this will grab our title. Then we'll return it if that just displays the title of each of these books. So let's return a div that says Title and make sure not to forget that return Key word. It's coming mistake to forget this, which will introduce errors in her application. If we omitted it Great. Let's go ahead and save and conduct a new search. So it's like a pair. You Potter could look up anything you like, though, And boom, there we go. We get a list of items. Now take a look at our consul warning that each item in our rate needs a distinct keep property in react. This is to distinguish sibling components from each other. Luckily, the map function comes with an optional second parameter that keeps track of the index of each child within the map function. So reform them that function to include that second parameter, and we'll call it Index and specify that each of these dips the title has a key attributes set to that index. So once again, at a second parameter of index, the key for this div will be index. As we save, we'll have to conduct another search. How about Lord of the Rings and Boom? Are warning goes away now that each did has a key index property. All right, we have a really cool list, but let's make it look a lot better and interactive by taking advantage of Mawr of the data within volume info to build even more detailed gallery items.
35. Gallery Details: Let's make our gallery component look better by using more data from the volume info property. First, we'll take advantage of the image links that the volume info provides for us, and later on, we'll transition this dip into a clickable component that sends us to the home page for each book. Let's set image links and info links toe item dot volume info along with title so we're gonna grab or image links and our info link from item dot volume info. All right. Now let's modify our dip to include the thumbnail picture for each book, and the thumbnail is a key within image links within the DIV. Add an image of right above the text and will specify that source is image links dot thumbnail above the title at an image with a self in closing tag whose source will be image links dot from jail. Then let's given all property all images need, and we'll just say book image. Now we need to make one small check and image links Some books on the Google Books AP. I don't have images yet or thumbnails, so image links will be returned as undefined. We need to check for that because if we attempt to render an undefined image, our application won't set the items array and update our search. What we can do, though, is bypass any undefined image like to the Ault. So that way it just shows a book. So let's add eternally expression, which is basically a shortened down if else statement to make sure we render something for image like so let's say his image links undefined. And let's just format this correctly first, so his image links not equal to undefined. And if it's not defined, we'll go ahead and render the thumbnail. But if it is undefined, will render an empty strength. So first it checks for this condition. If it evaluates to True, we go to the first condition. If not, we go to the second condition specified after the colon. Now, as we save, let's go ahead and check this out. Let's go ahead and search up Lord of the Rings and indeed, we get a bunch of images. They're just not format and nicely yet, so let's look of game of Thrones because I know that one of the books for them certainly does not have an image yet and has seen we get book image when image is unr entered. Now, instead of this book image property, we can specify an alternate image. Go and look up a photo missing photo or icon you'd like. Then we get in a render methods specify of variable. That says Alternate equals the image that you have hosted online. We're going to specify the alternate instead of a blank string. That way, we always show a photo regardless of the current state of the Google Books, a P I for that image. So once again, if I do game of Thrones now, boom, we get a huge alternate photo. All right. Now, if we make a search, we certainly get images. But we definitely want to add some styling to make this look nice. First, let's add a class name to the over relative, the Image and the title. Dave components. So let's call the overall Div book class Name is Book. The title component will be a div that now says book text. It's a class name is book text and then our image will have a class name of book image. The class name is Book Dash. I AM G and awesome. Now we need to dive into the stylings for these components, and there's quite a bit of them. With CSS. It could take more than a couple changes to get your interface looking just right. But it's all worth it in the end, at a new gallery styles component to tell us that we're changing, the gallery sells. Let's sell the book, book, image and book title, so heads index dot CSS. We'll specify that we're going to be changing some gallery styles just so that our CSS is separated nicely. First up for our book, we'll add a display to make it in line block, but to make them side to side, but not on top of each other. We'll give it a with of 220 pixels, which is large enough to be seen, but not small enough where it can't be seen. I would give it a margin of 10 pixels, so that way they're not touching each other. We'll give it a textile line of left. We'll make the cursor pointer. So that way, when you hovered over it, it looks like it's clickable. Position will then be relative to the other books right next to it. Now within book image, it'll look similar. We'll have a with of 220 pixels as well as a height of 220 pixels. We'll give it a border now of four pixels solid 000 which will be black, a border radius of four pixels to round out the edges and the corners object fit of cover. Make sure the images look nice as background images. We'll give it a position of absolute, so that way it renders right on top of our book component. All right, last one book text. Now that's what looks pretty cool. We're gonna give it a background color of black, which would give it an overlay field. We'll give it a color of white F F F. It's opacity will be 7.5, so that way it's a little faded over the image it's with will be 214 pixels, and right after that we'll give it a margin left of three pixels. So that way it doesn't go over the border. We'll give the text online of centre, right into the middle of the image. Its position will also be absolute we'll make sure textile line is spelled correctly. Nothing about editors is that when you make a mistake with typos, it usually tells you right away the bottom will be zero step way goes all the way to the bottom of our image component. Its padding will be 10 pixels. Alright, so reload. Let's try checking out the changes. Search up Harry Potter or anything you like and boom, we get very nice Dave's. The point is not showing up yet because I have to actually say Pointer. So let's save reload once more. Search of Harry Potter again. Boom! We get a nice cursor pointer, and right now it's not clicking anything yet. So now that we have all these looking nice, let's add the last bit of functionality that takes us to the home page for each of these books. So go back to gallery dot Js will change the overall div to an anchor tag to change this to a so what we can do now is with this anchor tag, set up a a draft property set to the Info link that we could give it a target of blank so that way and navigates to a new page instead of taking us out of our application. Let's go and save is it reload? Search up Harry Potter once more. Whatever you search last and Boom, it'll take us to New Page, which will be our home page for the actual book. I Don't awesome recreated a complete react application and gotten a taste of Essex, in effect on the industry level. Excellent work. I hope he had fun building this application. There's a challenge portion in the section overview in case you want to extend upon this and continue exploring. React. Also, it's worth mentioning that I haven't entire course dedicated to react. Yes, as well as Redux. If you want to add this framework to your skill set and understand it more deeply, it's really in demand skill. So I highly recommend that course. I have a discount link for anyone in this course, and you can find that in the section overview with that being said again, great work and let's keep coating
David Katz, Software Engineer - Coding Instructor
