JavaScript Data Structures Foundation | Rahul Giri | Skillshare

JavaScript Data Structures Foundation

Rahul Giri, Web Developer

JavaScript Data Structures Foundation

Rahul Giri, Web Developer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
40 Lessons (2h 42m)
    • 1. Class Trailer

      2:31
    • 2. Essential Concepts

      1:43
    • 3. Constructor Function

      9:07
    • 4. Prototype

      3:41
    • 5. Class

      3:33
    • 6. List Data Structure

      1:24
    • 7. Creating Class For List Data Structure

      2:48
    • 8. Implementing Add Feature

      6:06
    • 9. Working On Find And Remove Feature

      8:22
    • 10. Creating InsertAfter Feature

      5:15
    • 11. Implementing Contains And Clear Feature

      4:08
    • 12. Challenge - Work On Traverse List Features

      2:43
    • 13. Solution - Implementing List Traverse Features

      8:22
    • 14. Challenge - Work On DisplayElementNameOnPostion Features

      0:44
    • 15. Solution - Implementing DisplayElementNameOnPostion Features

      6:11
    • 16. Stack Data Structure

      2:35
    • 17. Using Object To Create Stack Class

      3:44
    • 18. Implementing Push and Pop Feature

      8:56
    • 19. Working with Peek and Clear Feature

      3:58
    • 20. Challenge - Extend Stack Class Feature

      0:36
    • 21. Solution - Extending Stack Class Feature

      3:15
    • 22. Challenge - Convert Stack Class From Object To Array Class

      0:33
    • 23. Solution - Converting Stack Class From Object To Array Class

      4:31
    • 24. Queue Data Structure

      2:44
    • 25. Using Object To Create Queue Class

      3:49
    • 26. Implementing Enqueue Feature

      3:19
    • 27. Implementing Tricky Dequeue Feature

      8:35
    • 28. Working On PeeK Size and Clear Features

      3:29
    • 29. Extending Features With Two Extra Methods

      5:30
    • 30. Challenge Convert Queue Class From Object To Array Class

      0:30
    • 31. Solution Converting Queue Class From Object To Array Class

      3:40
    • 32. Set Data Structure

      2:06
    • 33. Creating Set Class

      2:37
    • 34. Implementing Add And Remove Feature

      8:36
    • 35. Working On Contains, Show And Size Method

      4:32
    • 36. Creating Unique Set

      8:55
    • 37. Adding Mutual Members Feature

      3:37
    • 38. Challenge Implement Difference Set Feature

      1:34
    • 39. Solution Implementing Difference Set Feature

      3:20
    • 40. Final Thought

      0:48
16 students are watching this class
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

220

Students

--

Projects

About This Class

Welcome to this class, where we gonna cover JavaScript data structure foundation.

In this modern web world, knowing the JavaScript is as important as breathing. but what happens when you are about to build a very large and complex application.

Well sooner or later you’ll get confused and it will be hard to manage your data and application structure.

So here comes this class in which i’ll give you thrall knowledge of foundation data structure in JavaScript. i will explain 4 essential JavaScript data structures as easy and in detail as possible.

You will be amazed how easy it is when you start learning.

This is two part class, this is the first part where you’ll learn “foundations” of JavaScript data structures and in the second part you’ll learn “advanced” JavaScript data structures.

Here is what you’ll learn in this class.

  • Essential JavaScript Concept
  • List Data Structure
  • Stack Data Structure
  • Queue Data Structure
  • Set Data Structure

You’ll have...

  • Several coding challenges and
  • Access to all the exercise files for this class

So you’re ready to master the foundation of JavaScript data structures then roll up your sleeves, fire up your code editor and let’s get started with JavaScript data structure foundation.

Happy Coding.

Meet Your Teacher

Teacher Profile Image

Rahul Giri

Web Developer

Teacher

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2013, I never stopped learning new programming skills and graphics designing.

I did not learn web development and graphic design skills in college. It's self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with hundreds of online businesses to build their websites and train their employee on front end programming.

And that's where it ticked me to broaden my horizon and record these most up to date training train you with cutting-edge front end programming skills that will put your career on fire.

I can't wait to see you inside my life-changing classes.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

phone

Transcripts

1. Class Trailer: Welcome to JavaScript data structure foundation class, where you're going to learn about essential JavaScript data structures. We will kick off this class with essential JavaScript concept, you must need to know in order to effectively work with JavaScript data structures. And we're going to cover three essential concept, the constructor functions, Chomsky prototype and IAS 2015 classes. But throughout this class, we're going to use the most latest and greatest wish to code your JavaScript application and that IAS 2015 classes. So once you will have a thorough understanding of essential JavaScript concert will start this class with list data structure. So if I create any kind of simple to more complex list, like this simple grocery list or to-do list. Well, this is the data structure you're gonna need after that, when I talk about stack data structure, Well, there's tons of different scenario where you can use this amazing data structure. But let's take a simple example. So let's say if you're a create your own code editor where coder can undo back to its previous state, or it can then go back to the next step. Well, this is where you're going to use the stack data structure. Next, we're not talking about queue data structure. And there is a hunters of different places and scenario where you're going to use this incredibly powerful data structure. So for example, if I create a giant email servers where you're going to send them millions and billions of email every single day, and then you're gonna need this queue data structure. Have you heard about this a male chimp, Spark Post or acti campaign and so many other ESPs, Well, they all just queue data structure. Without queue data structure, these ESP will never exist. After that, we are talking about set data structure. And this data structure is basically computer representation of mathematical concept, finite set. So for example, if you build giant databases, we're gonna have ten, hundreds of tables and billions of records. And you wanna mathematically figured out the relationship between all those records. While that's where you're going to use the setter structure, remember that Facebook mutual friends feature or people you may know, well that's all happened because of these set data structure. And we are going to these data structures. We also want to encounter some interview questions you might get asked during your interview. And we're going to frequently cover it to in our lectures, elementary, that we're gonna cover this entire JavaScript data structure two class. The one is going to be Foundation, which is the one you are watching right now. So here you are going to cover about List stack, you and cetera structure. And then there's gonna be part two of this class. This is going to be the advanced JavaScript data structure. We're going to call it a binary search tree. Linkedlist has tables and graphs. So Hi there, my name is Raul Gide and our front-end developer who's working with JavaScript for 70 years now. So if you're ready to learn and master JavaScript data structure, then obviously live forever equator. And let's get started with JavaScript data structure foundation. 2. Essential Concepts: So welcome to the very first chapter of this class, essential concept, where you're going to learn about the essential concept you must need to understand before getting started with JavaScript data structure. And basically, I'm talking about the three most important concern, the constructor functions, dusky prototype and yesterday flipping classes. Well, basically constructor function, unlike a regular function, which is primarily intended to initialize your default properties and methods. And the prototype, which is a core concept of JavaScript, we're gonna use it to attach a method to any JavaScript class or object. And finally, we are talking about IAS 2015 classes because this is the most latest and greatest way to code your JavaScript application. And we're going to use this eastern difficult classes throughout this class. So why it is important to understand this constructor function in JavaScript product? Well, let me tell you that data structure in javascript is not a new concept. It's here for decades. And if you already have a job or going to do a job, and if it is possible to work with JavaScript data structure, or you might already have JavaScript data structure code that is coded by ex employee using older versions of JavaScript or AEC must script of five and below in that scenario, in order to understand those legacy code, you must have to have a good understanding of this constructor function and JavaScript prototype. It might sound petrifying on difficult conceptual art. But trust me, they are so easy to conquer. And by the way, having knowledge of this concept is also great for interview. So if your interviewer might ask you to code you cannot your modern code into legacy code or legacy code into modern quote, then you'll be able to do it very easily. So from the next movie, we are going to briefly cover all these three important topics. So see you in the next movie with constructor function. 3. Constructor Function: So here we go, Amun-Ra via score and see I have a very simple SQL file for this chapter. And there's another file in app.js where you're going to write our JavaScript code. And here you see I have linked at fine. So now let's go to app.js and let's start creating our constructor functions. Well, let me make this very clear that constructor functions are not any kind of special functions in JavaScript. They're just like a regular function, but they are primarily intended to initialize default properties and methods. So let me show you, let's create a simple regular function which is going to have a name of a person. And again, we're going to use this function as a constructor function. We will start its naming convention by capital a later. We're going to treat this function as a class in other high-level programming languages like Java, PHP, Python, it is gonna walk like a class. So that's why it started with this capital of the convention. And because this is our constructor function, we're going to initialize default and primary properties and methods of a person right here. So what is the default property a person can have when a person have a firstName, lastName, sandal is, and so on. So let's start with the firstName. So because this is going to be insect Construct function, I'm going to make use of this. And then MSA had first, right? And then here we're gonna grab the value which is passed at this pentameter. So gonna use this a firstName right here as a parameter. So being captured disvalue party this parameter, and I'm going to assign it to the fostering so we can use it later in other matters. So we have firstName. So we also want to have the last name, right? So the in a copied and similar sometime and paste it right here. And this is going to be the last limbs and a limited went to laughing. And then this is also going to be the first step. Now a person can have this, so it's going to be this Dark Age. A person can also have a center, so it's going to be sent out. So there we go. We're gonna grab this last one, data point right here. Then we have this H. So let's hit comma I have comma i and we have centered center. And then you go, now what we can do, or we can go down right here. And let's create one instance of our Person class. So it's going to be led. And let's give it a name of a person. When I can give it my name was also let's give it a minute. And I want to say a new person, right? And because our constructor function take this parameters, we need to use this parenthesis sign, and we need to pass these values. So fastening is going to be the last thing, is going to be good. It so well you did. And then we have h, So I'm 28 now. So then we have gender. Well, I'm amazed. I say yep, there we go. So now I have passed this value. Now I can easily go here. And if I go here, you see that now there's a one-person it down the last term is getting his mail and is 28 year young, you say it is working fine. We can keep another one if average, for example, let me just create for my brother, which is a Rohit. He's gonna have Rohit and is also grid. But now he's 26 years and is also made it. And if I go here, you see that now we have only one because we have only one. So then just go ahead and load. And there we go. If I go here, you see that now there's a 2% The first one is really, and the second one is Raul essay. So now this is working properly. But what happened if I want to log the full length? So here what we can do, we enqueued an adult matter. So this here you can say this dot n is going to be full name. And this is going to point to four limb, right? So now what we can do, we can go right here. We can create a function is going to have the exact name. So now we equate exact for link. And now because this method inside the constructor function v have access to these properties. So what you can do here, we can simply say return and what you want to return. Well, it's going to be this dot first name plus this dot fastly, right? And we need a little bit, a surplus, it means one spins here. And now once we saved it, we can go right here. And you can see the holder fullname, right? And now if I go here, you see that sooner. Rather good, you see. So it's working fine even if he had really doubtful, right? Or you can simply say Poisson, wonderful limb or poison to doubtful, right? It's totally up to you. And to say ROI and instruct creating this new function, you can also use an arrow function. Yep, get rid of this here fully. And then what you can do, you can simply click this arrow function, right? And here I'm going to create this one. And they go, if I go here, you still see the same result is because now we're using this new era function. But again, you can actually go for this oiled one. So we didn't get rid of it and it's still going to work. So here is a still working. But now this is a new way to do it because this is a bit cleaner and very simple to use, right? There you go. So this is the error function. You can just do it directly in constructor function. But because this is a constructor function, this is intended to keep our constructor function clear. That's why I'm asking her full name again. And we're going to just create a separate matter right here. So it's going to be full name. And this is going to be function. Right. There we go. So now let's get rid of this arrow. Now let's go ahead and add another area because you know, at the start and let's say here bio. So I'm not discreet a symbol of bio based on the information we have right here. So again, because this is a bio inside this constructor function, we have access to all these properties. So what do you do here? We can say here function. And this is going to be bio. Just make sure that he has to be same as this value. Right? There we go. And now here we can say that console.log. And this time we're gonna make use of template literal sign, which is new in 2015. And here I can say my name is Rahul and I am 28 years young and proud male. So what do we need to replace this one? Well, it's very easy when I use this dollar sign. It's called template literal. And then here we can grab this matter because this matter have a full link. So we're going to grab this meetup. And here when I say Desktop for Linux, and then here I'm 28 year young. So what am I look, and again it up is 20. We can again use this template literal. And here is going to be, so yes at the start is going to be each. And there you go. I'm a proud and disinhibit this dot sender. Now let me just tell you something that the sender is going to be in this start with capital a litter. But let me show you first. Let me just go down here and then just print it first. So I must say that an apple dot. Now if I go here and you see that ST, My name is Rocky, 28 year, young and proud me. You see this is starting with a capital letter. Then you can use in built-in property to make it lowercase. So you're gonna see a t2 and there's going to be lower case. And now it is going to turn that Xander two lowercase. If I go here to see my name is Ron giddy. I'm creating young and proud midnight stone into lower case. And again, you can add something. And right here, like this, there we go. So now if I just go here and if I sit here, Rohit dot, if I go ahead and see that now, my name is Rohit and I'm 36 years young and proud me. And see this undefined. Well, because we have a logging something from this method, what not returning anything. So that's like sprinting undefined. So let's return here. And the figure here, you see nitrogen in true, but now it's working fine. So yep, this is your constructor function. And again, you can also use function expression. That's actually really easy because you can create a simple variable, let and let say bio. And here is going to be function. And now getting at this one. So now this is called function expression and it's going to be using. So now this is your constructor function and also learn how to create this function expression and just create a variable. And just to make it equal to a function, that's it, it's verified. So now we have a master that constructor function. This is just a regular kind of function to define our default properties and methods to keep our code subroutine and separate the matter or logic out from this constructor function. So this is the constructor function. And next time when your employees said that create this data structure using constructor function, this is exactly how you do eat because now you have swelled understanding that how to create and work with the constructor function in JavaScript. 4. Prototype: So and this will be, we'll begin talking about JavaScript prototyping pattern. And dusky prototype is the core of the Javascript. So your interviewer might ask you to code your current data structure in telescope prototype. And in this movie, we're going to cover only the basics of a telescope prototype. So lemme show you how this program is going to help you. So you see that in our constructor function, we have total six properties and methods. You see that these four are the properties. These last two are matters. But in one single go, they all look like a property which is not true. So for that exact reason, we don't get rid of this methods. We don't need it because we can always make this method as a prototype of this person. So now our controller function is only the mean with the important properties. And that's what exactly JavaScript prototype will allow us to do. Let me show you. So let's create this function. So using dusky prototype, it's very easy. Let me just comment it out. And here I'm gonna grab the class. So here it's going to be personal. And then I'm going to use this dot is going to be prototype. And then what method you want to be Prototype offer this person class. Well, in this case it's going be full name. Exactly. And now what we can do, we can set equal to and then we're going to use this function. And here into this function, we're gonna grab the exact same code and we're going to paste it right here. Our fully matter is ready because we have attached this full limb using prototypes to this puzzle. Now this a folding is a part of this puzzle. Exactly. Let me show you. If I go down here, I can say here fore limb. And if I just go Here, you see it's saying that our Guinea and you see this error is because this method doesn't exist right now. So let me just comment it out and say, now it's printing my name rather giddy. Yeah, I can see here who hit dot a full limb and it is actually going to print here. But right giddy, You see, it's printing it. So now our full limb product is working properly. Now what I can do here, we can do the same thing right here. We're going to just go down here and we can see here person as going to grow. And it's gonna be bio. And then we can set here function. And then I can just grab this stuff you have, we have just placed here and I'll paste it and let me get rid of it. So here we again doing the same thing. And if I just go down right to here, you see, if I sit here. And if I go here, you see it's going to work. You see, oh, this is not working unquote. Typing out the is.5 full limb is not a function. Well, I got it. Why it's doing it. You can see I'm using here a camel case naming convention, but now this property doesn't exist right here. So what exist when this particular day? Well, it's a full limb. So now I can just make it a small letter. And if I go here you see they'll say My name is Gary and I'm pretty six-year Yang and proud of me. You see, now it is again started working. So now this is how you can attach a matter or feature using prototypes to any particular class per constructor function. And this is how wrote apple patents walks in JavaScript. So let me just go ahead and get rid of it. And there we go. This is your final version of the JavaScript prototype. So let me just go down here. Let's also make my bio here and it's displaying my name is Raul Gary and I'm 28 year young and proud. So that's pretty neat here. And you see that now we have successfully extracted our matter appearing from this JavaScript function. And using this prototype to attach these mattered to our constructor function. 5. Class: So finally, the time has come to introduce you to the ES 2015 classes, which is Model and much cleverly to code your JavaScript applications just like the code in the high-level programming languages, like Java, PHP, pattern, and so on. Let me show you how I do it. It's very easy and very fun. So here we're going to use this class Kiva. And then we're gonna give it a name of a person. And because this is a class, we don't have to give this parenthesis sign. Now, we can only basis, and there we go. Now here you need to use this constructor. And let me tell you that this constructor name came from this constructor function. This is the constructor function and this is the constructor. Said this person class. Now this constructor work like this constructor function. Then show you, I can just grab every property from there. And we're going to initialize right here inside this constructor. And now we're going to have on the pedometers. And we're going to just put it right here. Exactly the same. But this is much cleaner because we're going to have all the methods, all the properties right here inside this glass. Very powerful. So we get into this constructor function because we no longer needed. And now for this prototype, it's very easy. We can go down here and we can create our mattered. Well, let me tell you that this is a prototype of function. But here inside this class, we call it matter. So here let's implement our full length and grabbing rabbit and paste it here. Then let me show you. I can go down here. And if I go here you see it's actually going to work. It's Raul giving. And hence the error is because these are fully, is not a function. So we need to go up right here as a full length, we need to make this name to be capital letter because now we have a matter inside of class and it will walk. Yep. Let me show you. My name is Anne. I'm pretty six-year, young and proud me walking, even biometric, I'm connecting to poison class using this prototyping mattered why it is working well because behind the scene, JavaScript will still gonna walk in the same wait, yes, it is going to translate this class code into product will code. So behind the scenes, JavaScript still use this prototype. But now it gave us much cleverly to code our JavaScript application. But don't forget the task into behind-the-scene still aegis prototype. And that's why this method is working. Let me show you. If I go here and you see the bio right here, that's very, very powerful. Now again, if you indicate bio severely easy, you can go here. And then you go, Yep. I'm at rabbit and artistic greatly. Perfect. And let me get rid of it. You don't need it. And if I just go here to see, it's still going to work. And let me just print my bio. So it's going to be right here. I'm going to be bio. If I go here, nights printing mind bile, My name is wrongly. So it's a very powerful and this is the modern way to code. You telescoped apps. And this is a very clear and concise way to cool your apps. Very, very powerful. And this is the way we're going to use throughout this class. But now because as shown you constructor function, programming, pattern, and classes, all the three important way to cool your apps in this chapter. So in future, when you go for JavaScript data structured interview, you'll be able to code your data structure using constructor function, prototype, pattern, or JavaScript classes. So that's it for this movie. Let's go to the next chapter. We will start working with our data structure. 6. List Data Structure: Welcome to this brand new chapter. We are going to learn about list data structure. Well, let me tell you that this is one of the most easiest data structure you're gonna learn out throughout this class. And it's also one of the most fun to. So what is laced where list as an abstract data structure, it's like any kind of typical to more complex list. You see every single day, for example, list of grocery, list of your favorite TV shows or movies, or even a to-do list at your walk. All those kind of simple or more complex list. So here you see that I have a list of my favorite TV shows. Let me just show you all the feature this list can have. So here we will be able to add a TV show in this list. We will also able to remove a TV series from this list. We can also find any specific TV show on the list. We can also check that if destabilised is contained with any specific TV show, we will also be able to insert any TV show after any certain TV shows. So for example, if I want to insert the walking dead after this artificial TV show, well, we will be able to do that. And finally, we will be able to delete this entire list. There's are tons of moral feature. For example, you're gonna get the very first TV show in the race where the last visual in the list and the TV series on the certain position and so on. And he will see all these and Tom Moore feature we're going to implement for our list data structure. So from the maximum V, let's start working with list of a structure. 7. Creating Class For List Data Structure: So here we go on my Riesco Tater, and you see that I have a very simple and General Estivill filing. Lee start a stable and there's another fine, namely start J as we're gonna write out a list of a structure cord. So let me go to Lister Estimate and let's include our list touches here. Some say escape and it's gonna be so, so police. Now let's go to our list RTs fight. And here, let's get our class Liam list. Well, you see that I'm just giving so generously, which is a list, but you can be as specific as you want. For example, if you getting this list for our to do well, you can see here to do list are defecating for the movies or maybe our TV cities. Well, you can give it to that specifically. For example, if you creating for the cruelest where you can see here to rule list, that's it. But because I'm giving the general name, we can use this list class to almost any kind off list. So let's go ahead and keep our constructor matter. We're beginning in his list, our default properties. So before initializing our different properties. Let's talk about most important matters. Vigor need to make our list work properly. For example, Vienna need a matter that will allow us to add something on the list or remove something from the list and so on. As of right now, we will have six important matters. So let's start with one of the most important one. That is at matter, that we allow us to add an element on the list. So let's also committed out. So an issue here add an element on the list. Now, the next we gonna need this really move a method that will allow us to remove an item from the list. Next up. Vignal need find a method that will allow us to find an item on the list. So let me just grab it here next up, we gonna need contain method. So it's gonna be contains matter that will allow us to see if our list contained with any specific I don't. We're looking for next Big Gonna need a matter that a lot was toe insult Any item after any specified item. So it's gonna be insert after. So this insert aftermath that will allow was to insert an element after a specific element on the list. Next up really need this clear a matter that we're going to empty our list. So this is one of the most important matter is gonna empty the list, and that's it. So these are the six most important matter vegan and made as a right now, but in future movies, vegan and several more methods to extend the feature off a list. But as of right now, these are the six most important mattered we're looking for. So this is it for now. Now let's go to the next movie, where we work on constructor and add matter. 8. Implementing Add Feature: So in this movie, we're gonna work on constructor method and add mattered. So let's start with constructors. Mattered were beginning in easily is our default properties. So what is the most important properties in our list class? Well, the list itself. We need a container where Begin store our items. Well, for that, we need to get a property name list, so that's created. So this start list and then we will assign it to an empty area where we can push our data. So this way we're going to a store are items, and this property is a private property. And because we're using JavaScript, we don't have access to excess modifiers like a private, protected or public in those high level programming languages like a dower Ph. B. This is John Escape. Well, there's awaken do it in their escaped by using typescript. But this class is not about Pap script. So how can indicate that this property is a private property in pure Jascha? Well, you're going to use this underscore sign and this is the strong indication that this property is intended for private use. So that's little trick in basket now, the next property Vienna need is at least size. So we need to keep track off at least a size. Well, it's gonna be very easy. And I say here they start list and it's gonna be size, and we're gonna initialize toe zero. So at the very beginning, it will start with zero. And again, this is gonna repair property. So we're gonna put this underscore sign. There we go. So, as of right now, the only one I need these two properties to work with. Now let's go down here and let's create instance of her class. So here, I mean, I just skip this variable. Where am I? See a new list, and then I'm gonna use my list. So now we have new list. Now what? We can easily go ahead and logging so concerned that log and let's say here near list and after go here, you see that we have locked our list and you see that our list is empty. Right now there's an NGO and also the list Eyes is zero. So that's what exactly we're looking for. Now let's go ahead and just walk on. This ad mattered toe Add something on the list so in admitted Veena need to pass a perimeter and then here we gonna need this property. So we're gonna see here this is gonna be list, and then we can use our A push matter to push this value on the list. For example, I can say value. And now, if I go down here and let's say here new list dot ad and then what do you want to add? So let's add my favorite TV show is gonna be there, Flash. So now if I added here, you see that now it's going toe Had that a flash right here because it pushed it right. So we're using these are a matter. It is Bush property. But everybody know this property here in this class I want to show you a different uniquely to push value toe this away. So let me show you how so It's very easy. We can simply walk on index space. We can secure zero, and then it's gonna be Quito and then is gonna be the value my for save it. And if I go here, you'll still see that flash right here. You see the sister Leah, and the reason is because I'm saying that whatever the values comes here, just put it to the zero index, which is gonna be the 1st 1 And that's why it's pushing here. But if I just go ahead and duplicate it and add my another, our favorite TV show is gonna be startled. Now if a save it if I go here. You see that? Now this flash is replaced by struggle. Why's that? Well, because the flats was initially at the zero Index, which is a very first item. Then he pushed it. Style it. So that's why the flask are replaced by started. So how we can solve this problem, but it is very, very easy. We're gonna make use of these least its size and because this is going to keep track of the land, well, we can push any new data toe this track index. So let me show you how it's done. So unless he had the start and gonna be least size and now you see the list I Z zero So not initially, you will see the same result you say title there because again, it's a place very flash because we're not doing anything with it. So once we push any item, toe this list, ready to incriminate it by one. So now what we can do, we can say here they start list size and then let's say that's pass, which means increment by one. So the very first TV show will gettinto zero index and wants it to get there. Then this list size is going to incriminate by one, which is going to be one. Now the next TV show will push. It's really actually going to push into the first index and then again, it we're going to implement at two. And it worked like this. So now if I just go here, this list contained without both official the flash and starving Now I can go down here. Let's add one more. It's gonna be the strain on the same A typical here, You see that this is have a list of three the flash, the struggle and the strain. So see, this is very powerful because on every item, get added, be in committing about list size by one. So we're keeping track here, and then we're using this same property right here to decide which index our need Atom is gonna go. And if you want, you can get rid of this court entirely, and then you can just suffix with plus plus, and this is going to do the same thing. It means that it's going toe push the current item in this current index, and then it'll be incriminated by one. So now if I just go here, you'll still see that three d visual, the flat, startled and the strain. So this is the sort court virgin off this cold, This man. Yeah, this is a soccer virgin. So now let me just get it off it. And we left with only single line off court in ad matter. So this is it. But let me just tell you that once you get into interviews, your interviewer may ask you to add data validation to this ad matter. And that's totally fine. You can add that validation based on the scenario. Your interviewer, I told you so. This is it for this movie in the next movie. Let's go ahead and work on the move and find matter 9. Working On Find And Remove Feature: So this movie, we're gonna work on removed and find matter and we'll start with the fine matter because in order to remove anything, we need to first find it. And then I use this fine method as a helper matter inside this, remove the matter in road to make it work properly. So let's start with our fine matter. So here I'm gonna pass the value to find. And then inside I wanna make use off Normal for loop. So honest, therefore, and don't let is gonna be equal to zero. And as a long hour, I is less than this. Thought I was gonna be the list dark land. Then just go ahead and implement our I plus plus Right, So there we go. Now what we can do inside this off for Lope. And this is, by the way, a very simple a genetic form up. Some are inside here. We cannot take the condition. So we're gonna compare this value to the current index off are the start list. So let me show you Harston. So it's gonna be if and I must say here they start and it's gonna be list this current index which is I'm looking through. So the current index inside this late is equality called toe our past value. Then go ahead and return Santas. They have the time is gonna be. And now, if we didn't find it, go ahead and return minus one. So what is mean by that? Why? I'm returning minus one. Well, I can also say here for four, which is not found, but in javascript we gently se minus one so we can check this value to find out that are finding methods have found the value or not. So this matter is basically going to return index of the item, or simply, you know, 10 minus one on this is what exactly we need. So let me just go ahead and see that are fine. My time is working or not. So what? I'm outta here. I'm on this console dart long here, and I must say here, new list. And then let's make yourself find here, right. And now we're gonna find the street. So if I displaced it here now, we expect to see second index, which is to index and you say regarding because I was trained. You see here in the second index and we find it correctly. So let's go in the flash and we will see here. Jiro. So let me is we're here on Let's see the flash and feel Here you see it? Zero index. So now are fine matter walking as expected. So now, also up here on let's work on this. Remove matter, obviously militarism you value. So we're gonna pass the value perimeter and then here let's create a variable. This gonna see Found it. Now here. I'm gonna use our helping matter fight And then we passed. So now this found it. A variable is going toe Hold to possible thing the 1st 1 If it is found, it's going to hold the index of the item are if it is not from, it's going to hold the minus. So what do we can do here? We can put a condition to check if it is done, the index or minus one. So what are we gonna do here that we're gonna use the defense to programming technique? It means that we got our first detect. The worst case scenario on the worst case scenario in this case is not fun. So what we can do here. We can use this variable. See? Found that And then we compare that If it written minus one. You see it's right here or if you're using this a 44 while you can taste it off for four like this on done. If it is done in 44 it means not found. So what? We can do it. We can immediately say consoled art, lock or alerted. It's totally up to you here and I say Sorry, we couldn't find that. But also after a turning this masses Benetto immediately exit from this court. So we need to stop this quarter right now, so I really turn it false. So now, once if not found it, it will it and false and we immediately exit from this. But if this condition is not met, it means it actually found the value wants to be found It we can say here they start as one of a list and in order to remove something from the list we need to use these supplies matter now, Inside this place, function are mattered. Journey to pass through the first for the past is found it because we know that founded store shooting the first this valley for a four, which is not found or the second possible thing is the index off the item. So when it passed the index of the items they want to remove, and then when it is set, just move. Only one do not go overboard. So camera pasa Well, if I pass it here, Jiro, it will not going to remove anything. But if I pass it one, it will going to remove only the found item. But if I said it to it, we're going to remove the item it found on the item next to it. So we need to limit it to one. And now, Because if you're keeping track right here, we got into Dick lamented. So what we can do here? We can see this dark and gonna be least size. And you see, I'm using this document director. So we're going to document the size off the list, right? So Yep, this is it. This is how it's actually going to work. So let's put it in action. So let me just go down right here. Let me just get it out. This you know Fine. And you see that if I say that if I go here, you see that we don't all have three item in the list. We need to remove one. So let's remove the flash. So let me just copy the flash here. And I must say, here new is gonna be list. It's gonna be remove matter. We can only move this a flash. So once I remove it, you will see only to dementia, which is toggle on the strain. So they figure here, you see that it's indeed remove the flash and say the startle and the strain is only the men in there. So it means that our the movement, that working properly But let me show you something. What happens if I remove that capital later? And instead, I put this small later? What? I wasn't happy name is over here and see that. Sorry, we couldn't find that on the list that them and just actually make this a messaging little bit clear. So let's use this literal assign so we can simply finding so sorry we couldn't find that. And is it off that unit justice happened? A strain? It is a new India's six. And we gonna place here the value. You see this when? So I have a separate if I go here. You see that? Sorry, we couldn't find the flash on the list, which is not true, right? So let me, actually just, you know, put it right in this manner. So it's gonna add that calm. I see sort of couldn't find the flash on the list. It is possible you see the fashions, dear and write things platform Well, because of the basket is a kiss and steal language. Miss, the small and capital later are treated differently. So that's why it's saying not far. So how we gonna fix it? Well, it's very easy. We can go to this or find a matter and what you can do, we can exhausted function. That is to lower case, right? This is asking function. What? It's going to go. It's going toe convert anything on lower case. So what we're doing here is that we're converting any values toe in this list size to lower case on then the water want to convert this past value to lower case. So what's gonna happen is the current item we're comparing instead the list it's turn into lower case on the value past. It's also lower case. So we're comparing the lower case. Was this lower case? And now if I just go here, you see that now that item is removed. But the powerful thing is, if I go down here now, it doesn't matter how you write it. For example, you can make it capital. You can you can just make it. This are like, you know, this. It doesn't matter. It will stay going to find it because our find Matadi here. It's converting into Lorca's on. Then it's comparing it. Okay, so I figure here, you see that stay got removed. So this is a very powerful thing on this is how you will find and the move mentor works. So this is it for this morning 10. Creating InsertAfter Feature: So in this movie, we gonna work on insert after mattered because this contain and clear matter is a very small and simple methods and weekend work on these both matter in the next movie. But in this movie, we're gonna work on this insult after matter. So as a perimeter in this matter, we need the actual value you want to insult and then the value you want insert after. So now we need to find out this insert after value that it exists or not. And for that we can use our find matter. This is a helper matter. So Viel said, Let and you can say here found that. And then they start, let's find and then began a sexual insert after. So this very well is going to hold two possible value. First of all, it find the value which is going to return in tax. So we'll have the index off the item we want to insert after this value or if it is not found it lit. And for four. So now what we can do. We can use that defense you again. Problem technique, and begin simplicity. Found that and then we can see here, If it is for for then we know that we couldn't found that inside after All, right, So what do we can do? We can immediately say canceled Oclock. And I'm gonna use this template, Ritter. And here we can lock that we couldn't found the insert after value. Please supply a valid item. There you go. So you see that we couldn't found the insert after on the list. Please supply a valid value. And just after it, we need to immediately exit from this matter. So you can see you later, force. And if this condition is not true, it means that we found the value we are looking for. Well, in that case, we need toe add this current value after that specific item we found. Well, that's pretty easy. We can just make use of these start and it's gonna be a list, and then we'll use this a spy's matter again. And now this time, what we gonna do? We gonna grab this one? Because now you know that we have index off it, right? So we can say here found that. So this is gonna be the index. Bless one. So we're inserting after so found it is a two Dennis +13 So on 30 index, our current value is gonna be so that's how you do it. And then we turn this switch off. It means that we said it zero. It means that we do not want to remove it. Just turn it off and then what you need to hear way to pass the value we want to insert at this position. Preparation. Right. So now there we go. This is how you do it. And again, if you want to change this very believed to be something kind of insert position Well, you can easily do it because funded do not make sense. So you can also say, Here, insert posse. So inside position and I congrats it right here. And then I could displace it here. So insert position on then plus one. It's gonna be three, and this is going to be zero. It means it's not going to remove it. So that's done off. And the value and passing year. That means the current past value is going to get inserted just after the specific element we have specified. Okay, so that's how you do it. And again we're tracking the list size, so we need to start it here. List size increments so honestly had plus plus plus. And I'll see you at the start list size. So this is how we in cremated. Now let's go down here. Let's see if our insert function it's working properly, so let's just get rid of this every move matter. We don't want it. Now let me just call our instance. It is gonna be new list and then insert after and after what element in this case, I want to insert the walking dead and I want to insert it after the flash. And now at the index one, you will see the walking dead. If I go, here is it is on Carter. There's a list of spices, not a function. So let me just go up right here. Let's see what is the problem here. And you see that? Actually, we need here least so we want to add into the list of not least stays. Now it's going to work. So if I go Hey, see that now? Indeed, our are walking there is inserted just after the flash and you see it is working fine. And then you can just, you know, bacon, bacon. Just add, like, you know, this one. Like, you know, like us Capital H or Capital City. It isn't a matter, because if you already checking the case says to you'll still see that added just after the waterfront. And let me just take one more. So it's it is a walking that is inside it. Now I'm gonna just duplicate it here and now. What I'm gonna do here, I'm gonna get rid off this flash, and I want to insert something after the walking dead. So now what I want insert is that Super Bowl and not over here. You see that? Indeed. Our supergirl is inserted just after the walking dead. So now our listens working properly and even you see the list Isis five. That's true, because we have little five items in it. So this is how your insert mattered. Walks. So this is it for this movie? That's what the next movie, where we walk on canteen and care matter 11. Implementing Contains And Clear Feature: So this movie we're gonna work on contain and care mattered. So let's start with contain Method, which is gonna check if the list contained the value which is passed into this matter. So that's pass it the value, and then we're going to do we're gonna say let and it's gonna be found at. And then we need to use our find helper matter. So you say you find and then be possible the value which is passed through this matter. So now we know that this fine matter is going to return either the index of the value present in the list or Trident for four. So what do we can do here? We can do some if its condition, Jake So honestly, f And now what? I'm gonna sit here found at and let's take it. If it is 44 weeks because again we need that defensible. I'm technique on. Then if not found, we can simply say there, construct knock, and they're gonna use this template, literal and lava masses that we couldn't found that on the list and that immediately with exit from these matters, there's nobody and let's make it faults. Now we can go after it, because once this condition not made, it means that we found it. So once we found that item on the list, we can log this message considered Rock Helen. Oye, we found that on the list and that's it. I pissed it. This log here is because off this word, it is very hard to type. So that's I It's okay to paste it here. So now if I just go down here, let's try to find it out. So here are my new least, and then it's gonna be campaign, right? So let's say if it's contained with any especially value, I'm not try this Supergirl. So I'm gonna grab this a Supergirl and paste it right here. And then if I go here. You see that Valeria We found Supergirl analyst. That's crazy. But what happens if I say here Superman? Because Superman is not in the list. Settle Say we couldn't found Superman in the list. Obviously, there's a typo here, so we can easily fix it up. So it's gonna be in the list. Not I own the least, and there we go. So we couldn't found Superman in the list so That's pretty, Nate. Here and again, you can just take anyone, for example. I'm not saying the flash, and now you see that Hell, er, we found the flat on the list. That's crazy. So there you go. This is how you contain method works. Now, let's go ahead and implement our kid method, which is insanely simple. We can simply just grab our list aan den. What we can do, we can just set it toe empty. We clear it out. So if I say that if I go up here, you see that this is actually in its listo empty, and that's what exactly we're doing here. We are again in its allies into empty array. And now, if I just go down here less, call our new list, and it's gonna be clear, and then it's gonna be a matter, right? So now let me actually just glam it up and let me just go up here so you will see that the list is empty. You see any zero? So there's nothing on the list. It's totally empty. But he said that at least sizes five well, we also need toe in its allies to zero so what? We know we can simply to say that they start and in a list size and let's in his life stoop zero in Africa. Here you see that now our raise empty and also the list says itself. Well, there's another way to do it. You can simply just get it off this here. And you can simply just use this delete given. And if I go here, you see, it's deleted that lets property completely, and it can do the same thing on this list size. So I'm gonna paste it right here. Let me just get it off it. And after go here, you see that our list is now completely empty. Even there's a no property exist. So this is not the way I'll recommend, because I like the way it means that we still have a list. But it's empty, so we can again push any data to the list. So, yeah, this is how you're clear matter and this contain mattered walks. So now let's go to the next movie, where you will face a challenge. So this is it for this movie 12. Challenge - Work On Traverse List Features: So now this is a time for a challenge. And here's a challenge. You need to add several matter toe this list infrastructure, which is going to extend the feature off our list class. Let me show you those matters you need to work on. You see, these are the four matters you need toe. Make it work. So the very first matter is the first, which is going to return the very first element on the list. Then we have this last matter which is going to return the last element on the list. Then we have this next matter which is going to return the next element on the list and the very end. We have this pair of matter which is going to return the previous element on the list. So let me show you how it is actually going to work. So here, let me just call my class Instant. Here it is in a new list. And if I call here first you see, it is going to return the very first element on the list. In this case, you see the flash. You see, the flash is there. Now, if you go here and I've said here. Next you see, it is going to return the walking dead. You see the walking dead here now because this is the 1st 1 is the flash. The next one is going to be the next item in the list after the flash where it's gonna be walking there. And if I said next one more time, it should return Superman because 1st 1 is the flash, then the next one is the walking dead. And then the next one is Supergirl. And again, if you call it one more time next it is when digital stubble. So this is how it's actually going to work. Then if I said here breath, it is going to return the place item in the list. So in this case, we have total two times next. So our pointer is gonna be on Supergirl and if I call breath just after eight, it is going to return the walking dead because here we are, and the previous I talked Supergirl is the walking dead. So this is what is going to return on then the very last we have the last weather, which is always going to return the very last element on the list. So in this case, the very last minute on the list is the string. So this is one of your challenge to build it. Now, let me just do one simple favor. In order to track those things, you need one important property. So another stated for you, So it's gonna be the start is gonna be petition which will allow you to track the compilation of the item we are in. So in this case, if he say right here in next really told position So this will be free, but is going to keep track. And if I said here breath right, you know that this is the third question you just dick lament by one is gonna be on second . So this is the hint. I give it to you. Now, at this point, you can use this particular property to make our these four methods who are says go ahead and will it by yourself. So you can be proud off. And in the next movie, I'm gonna show my solution 13. Solution - Implementing List Traverse Features: So the last movie I give you a challenge to walk on these off four matters and make them fully functional. Well, if you did it that it's a great job. Give yourself a pat on the back. But if you didn't and already his my solution. So let's start with this off. First matter, it is the most simplest one. Get inside the matter. Let me just show up here and we need to return the very first element on the list. Well, it is very easy because we're using this list container. We can just go down right here, is gonna say return because you want to return it. And I say, here they start and it's going to be our list. And then we need to return our very first item in this case, the item, which is on zero index and do index item really the first item in the list and that's it. Let's go down right here. And you see, there's a newly start first. Well, if I go here, you see, it's not gonna print. It is because I'm not control logging. So let me just go right here and let me just grab it and I'm gonna use this console dot Look, and then just paste it. And if I go here, you see it is going to love right here. The flash you see, For now, let's go ahead and move on to the last method, which is also very easy. When it do just go and grab the same thing right here. But now you see, in this case, V Total have five TV shows. You see, it is right here. So in this case, we can say that. And it didn't the 4th 1 obviously it is Do Index based. So the 4th 1 is going to react. Ley the fifth item on the list. But our list is a dynamic. That means that if we don't know the length off our list So this case, you see that we're keeping track awful its size. Yes. We're gonna grab this property vehicle right down here and here on a beast. It. So I'm gonna use that property minus one and then you go because you see that we have the list sizes five fight So 51 minus is gonna be fold. It doesn't matter how long it this list. Go. The index of the last item is always gonna be the list size minus one. And now you see that this method is going toe properly. So let me just go ahead quickly. Console, lock Someone stay here last. And if I just go here, you see that is going to return The very last element. Analysts in this case, the strain and you see right here the strain. But what happened? If I add like a different division, for example, I'm gonna just go right here, and I'm gonna just add it right Unknown insert after adhere. Let's a supernatural. And if I go here, you see the supernatural is the last one. So now, in this case, it is running the super natural. You see, there we go on, He's a supernatural. It is the last mission. So it's working fine. Now we need to work on this next matter which is going to return the next element on the list. Now this is isn't hard. So what if we can do? We can go here and you'll see that it is the next element. And by default, the pension is zero and the next element will be one. Right. So what we can do here is that we can grab this position with the current position and we can just place it right here. But inside off this well, 20 we just gonna increment it first, right? So we're gonna make it plus past dysplasia, but is going to increase the value off our this position by one before the display. Our next item Now it is very easy. We can grab it from here and we can paste it here. So it's gonna return this stuff list and not in this case incident. This only size. We actually gonna use this start, and it's gonna be a petition property, you see. So in this case, it's now one, so it's going to be one, if somebody quite it again. Then the pensionable engaged, increased by one, which is maybe two and then you want to return the to let me show you how it's one hour. So let me just go to next year. Let me actually get read off it. And now let me all to get rid of it. And now here, let me describe it. And here I'm not see next time I say first and the next. And now you know that the after first the next will be the walking dead. You see the flash is the first in the list. Then we have the walking date, which is next in the list. And then if I see you next one more time, it's going to turn super that. I'm sure you if I go here and let me just do it next and it's going to return the Supergirl , you see Dario, it's Supergirl and don't know about the supernatural because it's actually coming from this last year when we just coming it out so it would be totally clear. You see the next Mr Supergirl. So next we have the flash, which is the 1st 1 Then Mexes went over the walking dead and the next one's tropical. If I say next one more time, it is onto it and start. So if we go here and let me just do one more time next, and if I say we have a go here, they say it's going to return The startle. You see it is right here, but there's a one problem. You see that if I just go after supernatural So let me just do do more time. 12 And if I see you see now, supernatural is the last one, right? Because they send next What? What happened? If I say one more time next, If I call the next function after our least ends policy, it's a undefined. So before calling our next matter, we need to check that If there's a next, it is a no next. Then we immediately stop it or long it here, that is a no next. So what we can do here, we can go right here. Let's answer politician. So here. I'm gonna see if and I'm gonna compare this position to our least size minus one. So I'm not saying at the start and is gonna be list size and got a B minus one. So it is loud. Oh, it's going to check that our current position is that list Eyes on minus one. If it is, that means there's a no next. So it means that the composition is a five, and then the list size minus one, which is gonna be the total item is water cooled to five. It means that there's a no next. Right. So what do you do here? We're gonna immediately concert along here, and we're gonna say here that Sorry, it is a no. Next on. Then you need to return it, right. Return. False, which is went immediately. Stopped exhibition off this next matter and exit out from it. So now they go. Now, if I go here, you see, it's 100 on Saudi. There's a no next. And it's turning this false here on this is how it can do validation check. And this is your next matter. Now let's go to our play of matter, which works similar to this one. So I'm gonna grab this entire code right here to say bye some time. Here we go. I messed it up. And now what I'm gonna here is I'm gonna get rid of this first eso we'll actually show you why. But here injured off incriminating I'm not recommended by one. So now if I use this plus, it'll going to increment by one because the actually going next here, But in this matter vehicle previous, So we're gonna determined by one none of this gold down right here and Now, let me just say here the ref, right? And if I go here, it is indeed going to return the prey. One which is the strain were here on Super Natural and the previous atom of the supernatural is going to be the strain. So let me just go right here. And it is working fine. But again, if he hits certain point, for example, over do 3456 And if I say that if I go here, you see that there's undefined. Well, because again, we're not checking it. So we need to check it right? An easy and very last. You know, when you go play, play, play. If it's going to be the flash, it's obviously the 1st 1 So let me just go here and again. It's very easy to add validation. We can use this the same technic. So how did this go ahead and based it from right here now, here. No, no, no. I'm gonna just get it off. Everything yet. And now what I want to do is that I want to check that if our position is not greater than zero, then exclude this piece. Of course. So I'm gonna set here not later than the right. So now, once our position is not gated and Jiro don't say sorry. There's a no breath in Africa here, you see, Now it's going to work, You see? Sorry, there's a no pref. So after the flash, there's a no breath and this is how it is going toe. So now you see that are pref next last and first mattered work properly. And this all happens because off this position, which is going to keep track off the positions right on. This is how you can use these. Afford a matter to travel through the list. And this is how it didn't get the first, last next and previous item on the list. 14. Challenge - Work On DisplayElementNameOnPostion Features: So now it is a time for another challenge. And what I want you to do is to work on a matter, name display element, Name on position. Very well. Past speak position. And this matter is going to return the name of the element on that specific petition. And make sure to check that position is a valid or not. But that's not all. You also need to make this compatible with our travels in matter so that it's actually college when I see a new list and there's gonna be displayed enemy name on position. And if I part separation, name three and then when I call it next, where it should go toe four and display the fourth element. So this method should be compatible with this travels in matters like a next and Prev. So just go ahead, Bill this matter and I'll show you my solution in the next movie. 15. Solution - Implementing DisplayElementNameOnPostion Features: So in the last movie I gave you challenge. If you did it really good job, give yourself another pat on your back. And if we didn't? Don't worry. Here's my solution. So let's get inside here and let's do a quick validation check. So position is going to get past. So I'm gonna go here and say, if there was a petition and let's say if not, elation is greater than zero, which basically I'm using this year s a previous one. So if the past position is not gated and Dedo and I also under check if it is not gated on the list size, some say end and I'm gonna go up here and see the beginning. Just this one. So I'm gonna scrap here, So I'm gonna go right here, and I'm also not check this one citizen big position is greater than this. Least a size on this one. Then there's a problem. It's actually a invalid position. So I can console door to lock here, and I can say here invalid petitions is gonna invalid British. And there we go and obviously need to return it. So let's return False. And there you go There's out of elation, check services, the left and zero for granted until its size. It's not overweight position. Now we can go down right here. And once we know that it's past our condition check. It means this developed position. Now we need to return the item on that position. It's super simple. We can set a little and it is going to be this start and is gonna be our list rights. They start list and then we need to pass the petition. So here we go. I passed the position here, so now it should return Element name. So now he passed yet hard. It means that you don't return the fourth element on the list in this case. You see, this is the Geo 12 and three started and see it is done in Startled twice here. So let me just do one thing here. Let me just go ahead and get rid off all this stuff so we'll get back to it, right. And you say that the first which is made of the flash on then 3rd 1 is going to be the starter. You see, the flatter, the 1st 1 and the struggle is there, Right? But you see that the index off the startle is tired, all right, but this is definitely the fourth item on the list. So how it could solve this one So it will display in the third item on the list. In this case, it's true. Displaced Supergirl. How can you do that? But it is very easy. You can actually Dick lamented by one first on, then you can display the question in this case, it is going to return. The Supergirl, which is third position on this portion, is always going to get dick lamented by Well, it means that it will not going to use the position for it. We're going to use the position to behind the same. But this thing will do the trick to in this case if I want to display the fifth element. You see, the 5th 1 is the strain. And you see, technically is the 1st 2nd 3rd 4th and the victor you see now the next perimeter is supernatural. So let me just go right here and let's see if it is working or not. So if I just copy and if I see here next. What do you think is gonna walk or not? Let's see. So if I said here next, if I go here, you see, the next is the walking dead. You see, it is not working because the next one is supernatural or rise displaying the walking dead . It's carting from the 1st 1 The first with the flash on the next ones working it right? So how can I fix it that is going to display this last one? It is supernatural, but it is very easy. You see, in this matter were not restating the position of this one, right? 72 elicited the position so I'm not a good habit. Here, let me just go down here and here. What? I'm a do before returning this element on interstate here District position and let's set it toe This one right here, minus minus picture which is increment by one. And then we can use this but a property right here. And it is one toe. Let me show you. The fifth element is the strain. You see, it's right here. See? 1234 and 50 Strain. And then the next off strength is going to be supernatural. You see, it is working here, and why this is working is because here I am really setting this position to be the water preparation I have passed in this matter. So this is Hawaii. This is working. And if I said here breath, it is going to return. That's train. Let me show you. They say it's going to eat under strain. And if I again see here breath well, it is going to return. The prevalence is the struggle, right? Its right to here to see So the previous off the strain is the starting. Now you just don't want Let me just go ahead and get it on this one because you see that the next off this train is supernatural. Super original is the last element. And if I go one more next you see it is going to display that later. Which is there's no next. You see, it's a sorry doesn't know next again if I go play here, you see, it's going to display this one the strain, because we are right here and the playoff the supernatural is the street. And now you see that this matter is working properly. And even if I just pass here wrong value, for example, if I pass it it, it is not the left says it is going to do. Spare the Arab and say it's it undefined here. The reason is because after this one, there's actually we have set it this next prayer flare that's the same defined here and ready thing on different. I think I'm a domestic night because I'm taking this boat sing at the same time. So I need to set. You are not and said it was Jake. Either of condition is true, and I think, Oh, here, you see, that's going to say invalid position and you see it's a false So again, go ahead on, have fun. I'm just go ahead and the space to tear and again next. And if I go here, they say it's under. It's the spirit of walking. There is because our first element is the flash, the 2nd 1 with the next one the walking dead because this court is live executed. And why is because off this invalid petition. So we have killed our excision of this program right here. So it haven't gone to this one So that's what position got neighbor this day. And we're working by the for sale. So Yep. This is how your display element on position matter works. 16. Stack Data Structure: Welcome to the brand new chapter where you will learn about stack data structure. So what is stack? Well, a stack is an abstract data structure and unstack only open with one end. And you see that here we have the stack. Well, you can think of as a stack of cards or stack of books, but it's only open with its one end. And is it this is then only where insertion and deletion fight them take place. And that's called top of the stack. So this is the top of the stack and this is the only end with open for insertion and deletion. And you see stack follows lifo methodology means last-in, first-out. So whatever I get inserted last, that will be the first to pump. So if we insert this book right here, and if I say pop, well this is the same book which is going to pop out. And let me explain. This concept will be solely by a visual algo.net. So here you see that I am an stacked and we have this four item in our stack. If I just go ahead and push one item the stack, let's say at eight, it's gonna get added to the top of the nine. Civically care, you see that now idiot get added a tougher mine. If I push it one more time, we'll see this in 98, where 98 gonna get added at the top of the ADA to C. So it's edit right here. Now if I just go ahead and pop it, you see the last one that we have added that is the first to get popped. Now if I hit one more time, the weight is going to pop. So this is stack and it's follow lifo philosophy. Whichever element to be added into the stack that will be the first to remove. And here's a real world example. You see this is the online Esther visiting editor. Well, you see that here we have this a text. Well now if I get rid of this text, now you see that we have this recent changes, but in order to get back to that changes, I can hit this undo button. The text will reappear and this is stacked in action. Yep, it's very, very powerful. This is the one scenario, but there's a ton of different scenario where you can use stack and there's another one, there's a JS Bin, right? So for example, if I just going to write here S2 and just put my name, we unravel giddy, and now does my name. If I hit Command Z or Control Z in PC, you say that My name is actually going to get arrest if I hit Command Z or Control Z one more time, the x2 is going to get it S. So there you go. That is the third item in our stack. Now if I hit one more time Command Z, well that you will also want to get removed. So undo and redo in any system works because of the stack. So let's go to the next movie where it will start to buckling with stack data structure. 17. Using Object To Create Stack Class : So here we go. I'm on my VS coordinator and you see that I have a very simple estimate phi for our stack data structure chapter. And there is another filenames, test.js. Where are we going to write our JavaScript code? And here you see that I have linked desktop ab.js file. So let me just go to this test.js and let's create our stack class. So here I'm Nancy Glass, and it's going to be stack where I'm giving it a generic name. But you are free to give your own specific name. So let's create our constructor where we're going to initialize our default properties. So what is going to be the most important property for this class? We need storage where we can store our values. Yup, that's going to be important. So I'm gonna say this, and because this is going to be a private property, I wanna use this underscore to indicate it. And then I must say here, stack storage. So it's a very specific name and we totally get it that what is actually mean. Now, instead of using array, I'm going to make use of object encoding this data structure in object is because it's little bit at different way to coordinate array. But don't worry, later in this chapter, you will also want to learn that how to code this ticket of structured using our a2. So now we got our most important property right here. But we need one more that is going to keep track of our stack size. So let's go ahead and create it so it doesn't matter. And obviously this is going to be private property, the stack left, so it's going to be stacked. And then we're gonna initialize to 0. So initially it will be 0 and then we can increment it, a decrement it based on operation we're going to perform. Now this is our constructor and default properties. But what is going to be the most important method we're gonna need to make our stack walk properly. Well, you see here that in stack there's a big push and pop. These three are most important method we're gonna need to make our stack walk properly. So for example, if I push any value here, let's click here and it is 61. If I push here, you see, sorry, the maximum size is seven. So let's pop it fast. I'm a puppet, so it's going to pop from the top. Now you see there's a 60 here. Now if I go ahead and push this 25 is going to add the very top you see, and now if I pop it, you see it's going to remove that 25, the latest changes and see decides walking and if a peak here, well, this is going to show the very recent item which is added into our stack. This is 16. So these three methods are very critical. So let's go ahead and build this three mattered. So I'm gonna say here, push, which is going to push a value in a list. Then evidently this pop, which is going to remove any element from the end of the stack. And then we have this big, which is going to show the very recent item on the stack without removing it. And we need one more method which is going to clear out our stack. So these are the four most important matter we're going to need to up. So let's go ahead and quickly just add some documentation here. So this push is going to push a value or an item to the end of the stack. So to the end of the stack. And here it is going to remove, to remove an item or a value from the end of the stack. And then we have this big matter, which is going to show us the value from the end of the stack. So it's going to be return value from the end of the stack without removing it. And then at the very end, we have this clear method, which is going to clear out the stacks. So for now, we're going to work on only this formatted, but in a common movies, we're going to add several more mattered to extend the feature of a stack, but those additional method is going to wait until the challenge of this chapter. So this is it for this movie. Let's go to the next movie. We're gonna work on push and pop matter. 18. Implementing Push and Pop Feature: So in this movie, we're going to walk on a push and pop method. So let's start with push method. So obviously vary to push their own value. So I'm just giving it a parameter name value. And we're going to post this value to our stack storage. So it's very easy. We can sit here, this dot is going to be our stack storage. So this is where we going to push it and in which index that we want to push for. Now, let's go to, let's say g is going to be equal to the value. So whenever you call this push method and give it a value, it is always going to push it. It will 0 index in this tax storage. Well, let me just show you. So let me just go down here, create a new instance of a class. There's going to be let, let's say here, my stack, It's gonna be equal to new stack. And there we go. Now let's go ahead and console.log our, my stack. So it's going to be my stack. And now if I go here, you see that indeed we have our stack class. This status is 0, and then we have stack storage, which is basically an object. You say, this is an object, not a day, and it's currently enter right now. So let's go down here and let me just post something it. So I'm gonna say, yeah, my stack as wannabe dot push. So let's push my favorite TV shows. Let's go for the flash. And then if I save it, if I go here and you see that now it is indeed post that flash at the 0 position is a, this is 0 index. That's right. But what happened if I push another TV show like so it's going to be struggle. And if I go here, you see that now the flask got replaced by stable. Why is that? Well, because we have hard coded this index value, it's always going to push at the 0 position and whatever Xist in general position is going to get replaced by the new value. So this is we don't want. So what we can do, we can grab this stack dot link property, and we can just ignore, paste it here. And now each time when you push something, they're going to increase this value by one. So for example, if I push one TV show is going to be one. If I push too, is going to be 23 and so on. So start with 0, and let's go ahead and increment it. I say this dot stack LE plus plus, which is going to increment by one. Now if I go here, you will see two TV show. It's right here. See the two stack length as he flashes there, the start list there. So now it is working. So let me go down here and let's add one more. So it's going to be super. They'll, they'll go, if I go here, you see that now we have little trees stack and, and then we have the Flash, startle and superlinear. So now this is working fine. And again, if you're in an interview and your interviewer asks you to add some validation here. Well, it can easily do tier. Well, let me just give you a simple example. So I must say if and then I'll check that if various provided or not, if not value provided, then go ahead and throw an error. So it's going to be simple. Locke is gonna be console log and it's gonna say, hey, please write a value. So please write value. And then I can immediately return false here, right? And now let me show you how it's gonna work. So I'm gonna go down here and here. I'm not gonna pass anything. It's going to be anti. And I figure here, you see it saying, please provide a value and you see there's nothing got added. But what happened if I just go up here and if I remove this relation check, you see it's actually going to add it into our stack. You see there's a full C undefined. So that's a problem here. So that's why I'm adding a very simple check, but obviously can customize this validation. To add only numbers or only characters and so on based on the interviewer request. So it's totally up to you and this is how your push method is gonna walk. Now let's go ahead and work on this pop method. And the state is going to remove a value from the end of the stack. The very last when we got to enter, this is going to remove that. So in this case it's going to remove the super good, right? So let me just go ahead and get rid of it. And let's go ahead and work on this pop matter. So again, because we are removing a value from that end of the stack, we don't need to pass anything here. And here what I'm gonna do, I'm gonna grab the very last value or the last item in our stack storage. And we need to set here this. And then there's going to be stack storage. And then here I need to pass the index of the very last. Well, well, you see here that we are keeping track here. So we can go grab that one and we're going to paste it right here. So now this is going to return the list site, which is in this case, you see here is the list size is three, but when you really check it, you see there's only two index. So we need to say at a minus one. So the one way we can do it is that we can say here, this.tab length minus one. Or what you can do, you can just go up right here. Let's quickly decremented by one. So in this case what's going to happen? Let me also decrement this one. And then we've also got the index n, Because if I say here, minus one, we still need to decrement it to keep the track of the last sentence. So now, because we initially decremented right here, we don't have do glitter, and we can also use this exact value. So now this got decremented. So you see here that now it's saying three, it's got two. And you see that we have this two index. So that's how it's actually going to work. And it is going to grab the very last one, which in this case, this second one, super them. So this is how it's worked. So how we can delete it? Well, because we are using here object. Well, you could use your Delete keyword. Yep, you can see her delete. There we go. This is how it's actually going to work. So now if I go here, so if I say here, my stack dot pop, you see it is going to remove the last element, which is super girl and say that lived size is now two instead of three. And see, the Superbowl got removed. Fairly powerful. If I say it one more time, you see it's going to remove this toggle. Now list is only one. And say there's only flash, the Super Girl and stable gotten over. But what happened if you want to print the value just got removed? Well, it's very easy. We can go right here. And now we need to grab the value before we deleted. So what we can do here that we can store that value. So what I'm gonna do, let's create a variable is going to be let, I don't know, let's pop. I don't know. You can just give it any variable, him you wish. But Pugin, I'm using this one and I'm gonna go ahead and grab the exact Cinco. And whenever I detail, we're limited in that you cannot use this variable in this delete keyword into grab that directly. So we cannot say here, that will get rid of it. And you can say here, bomb, it is not going to walk. Let me show you. If I go down and you see there's actually pop. So you see that it's actually just showing this error because we cannot use this delete keyword in variable. So we need to go for entire targeting. There we go. But now what we can do because we have already stored the last data in our pop. We can return it. So we can say yeah, written. And that's it. And let me tell you that they cannot just go, go ahead and use this'll delete after this one. Because once you say return, order will stop right here, it will liver perform this one. So we can't do it, so we need to do it in this way. Now what's going to happen is that when I just go down here, you can see here my pop, but you can also log it. So say console.log. Okay, now if I say pop, display, the value just got removed and see the struggle is got removed. And that's the true. And sit as a pop. Well, let me just copy it and on a paste it here and let me get rid of it. You see, they've now to go to disobey the supercool first and then startled because Super Girl was first popped than struggled, got popped and flash, right? So this is how you can print the value of the item which is last pot roast hot remote. So yep, this is how your pop and push method works. Now if your interviewer might ask you to add some validation, for example, if I just go down here and if I say that, say no four times and we have only three item, you see this now saying undefined, right? So it's actually not good at validation. Check to check. There's a holiday item in the list. So it's very easy. You can see here if and what you can say here. It can go up and say, we're keeping track of the stars tech length, rather going just Collaborative. And check if it is equal to, equal to 0. If it is, it means there's no item in the list, so we cannot pop it. So we can say a console.log. And here we can say the stack is empty and then return false. Now what's going to happen if I go here, you say it's saying the stack is empty. So this is now helpful masses. It's displaying here. This is how push and pop method box. Let's go next movie where we talk about peak and care matter. 19. Working with Peek and Clear Feature: So this will be, we're going to walk on a peak and clear the method. And they are very simple to implement. So let's go ahead and start with peek method. Well, pig method is very similar to this, a pop method because V actually going to need the very last item on the list. So what I'll do here, I'll just go ahead and grab this part here. And I'm going to go here and rBST. So first of all, let me just go ahead and get rid of it and we need to return. So what I'm doing here, well, you see that I'm grabbing now standard length, which is right here. And this is keeping track of the length of stack size and then we decrement it by one. It means that we can sit here minus one. So you see, let me actually show you. So you see here that limited the score here because you see this empty one is actually popped out. So let me just go here. And you see that this stack and is three, and we have two to three TV shows, but the index is only two. So when you just sit here minus one, so it will be exact index. So for that, let me just go here. And you think I am decrementing it by one. So either you decremented here or just say minus one here. So this will be very easy because we do not need this one. There we go. And now I'm returning the very last element, honest XTO. And if I just go here and say here, console dot log, that's going to be my stack. Dot. You see, it's going to return to the Bowl. You say it's returning super good because super they'll last to be Schopenhauer style. See Superman. So now this method is working properly. Now let's work on tear matter. Well, it is also extremely simple. We just need to grab everything in constructor. We can paste it right here. Yep. You say because yet again going to initialize our stacks or is to be empty object. And then this tech lead is going to be 0 again. And that is going to clear out everything. So what we can do here, let me just go ahead and call our my stack.me. And if I just go Here, you see that now our second t is 0 and our object is empty is because we have again initialize to this spot. And again, if you want to get rid of it, well, you can just get rid of it. And we're gonna use delete keyword here. So Delete and it is going to be doing, it is also going to delete the properties. So initial, you see this tab and then there's a no properties. We actually have here. Doesn't know stack sludge and this deck length, you see this delete keyword is going to delete even the property and that we do not want it. So let me just go ahead and again, let me use gravity unless Mr. Two right. There we go. So we are back to normal. And now you see that we still have our properties here. So we can still push data to storage and so on. But as of right now, as tokens is 0 and texts or isn't. So now, if you want to push any data, you can push it up. Yes, you can totally do that. Somehow she asked, was this evil dead? And now you see if I go here, there'll be one item. And again it's working is because here we clear our stack and then we again pushed this TV show. So now we are reusing the stack so we can clear it out and then we can push the new value and pop it out. So this is how you speak and care methods work. And again, you can optimize this code if you wish. For example, you see it's right here. So I'm incrementing this property in another line, particular shutting down. You can get rid of it completely and then you can set yet, which is going to be a shorthand version. And you think you're doing it in one single line. And that's very powerful. If I go ahead, you see our stack still works. 20. Challenge - Extend Stack Class Feature: So now this is time for a challenge. And what I want you to do is to walk on these two extra method and make it work properly. So what this method is going to do, where it is going to return true if the stack is empty, it means that it is going to check that our stack is empty or not. And based on that, it is going to return true or false. And then we have the size method which is going to return the size of our stack. For example, if I have, let's say, five items in the stack while it is going to return five. So these are two very simple method I want you to work on. And I'll show you my solution in the next movie. 21. Solution - Extending Stack Class Feature: So in the last movie, I gave you a challenge to make these two method walk properly. So this is going to return if our stack is empty or not, and this is going to return the size of our stack. So if you did a great job, but if again, don't worry, he's my solution. So let's start with is empty. So it's very, very simple. What I'm going to return is that if it is empty or not, well, it is very simple. We need to check that if I stack length is equal to 0. If it is, it's empty. If not, it's not. So here I must say this dot n, we're going to grab the stack length. So it's gonna be stack length. And then we're going to compare it to 0. If it is equal to 0, this is going to return true. If it is not, it's going to return false. Let me show you. So here, I'm not call that is empty. So let's go ahead and say console.log. And I mean, I'm just grab my stack dot and let's take it is empty. And now if I go here, you see it is going to say false because it's not empty. There's a three value in it right here. So what? I'm going to go ahead and get rid of everything. Now, it is empty. It should return true. You see, it's returning true. So yep, this function is working properly. Now let me just go up here and let's work on this size. While it is also very simple because we only need to return the size of it. So we're going to grab these type dot length and we're gonna go to down here. And I set this dot cyclin and then we simply return it. Yep, there we go. And how if I just go here? And you see if I say hip size, you say it's going to return one. That's because we have only one item in the list. And the reason is simple is because we have clear out our list here. So if I just go ahead and you get rid of it, now be habitat for item in the list. So it's going to return 4c. It's turning for. And here you see our stack is not empty, so that's returning false. But none of us is telling one awesome thing you see, because we have this is empty. We can go to this popular at any validation, check what they can do. We can make use of this method. Yep, we can get rid of this entirely. And instead of that, we can see here this dot is empty, and then that's it. So now we know that is empty is going to return true or false. So now if it is empty, which will return true, sort of true. Go ahead and make this one defaults. It was actually going to execute this one. So it's going to work like that. So now let me show you it is working or not. So because we have four item here, let's go ahead and pop it four times. So I must say my stack dot pop. And I shouldn't need to make it a 5x times because four times is going to pop it. And the fifth times you can say the stack is empty. You say it is working. So now this method is became helper method for our pop matter. Very simple methods and this is how you implement it. So now let's go to the next movie where I'm going to issue you a final challenge. 22. Challenge - Convert Stack Class From Object To Array Class: So now this is time for another challenge. And this challenge is little bit different than any other challenges you have encountered so far. So what is the challenge? When the challenge is to make this class work with JavaScript arrays instead of object. What I mean by that? Well, you see that I'm using here object. Well, it should work with arrays. So your challenge is to make this class compatible with JavaScript arrays. So go ahead and exit the challenge and make this class walk with JavaScript arrays. And you will see my solution in the next movie. 23. Solution - Converting Stack Class From Object To Array Class: So in the last movie, I showed you a challenge to make this code compatible with JavaScript arrays. So if you did it, congratulations, you did a great job. But if you didn't, don't worry, here's my solution. So we had this JavaScript object, but now we need to convert into jazzy today, so it works properly, which asked him to agree to. So I'm going to change only this property. So this is now RA container instead of object container. Now this property is going to walk the same as it is. But I say that Porsche val here, we need to do some modification. So since the stack storage, well now we need to get rid of this part here because we do not need it. And here we're going to use in built-in push method in JavaScript arrays, which is push. And then we're gonna push our value. And because we pushed our value that we need to increment it. So we're gonna say here, this dot is going to be stacked length plus, plus. So now we have postal value using this inbuilt in JavaScript array method, and then we have incremented. So that part is done. Now in pop, everything is going to be the same, but we only need to work on this one. Well, it is a very easy again, we need to get rid of this delete keyword we, because we no longer needed. And now what we're going to use here, the in built-in method, this is going to be pop. Again if you do not need to print the last popped value, well, it can get rid of this line and this line completely. But since we're going to print the value we actually needed, and that's it. This is your pop matter. Now, peek method is going to be exactly the same because it's only returning the last element on our stack. So this is going to be exactly the same. Now in clear, we need this array, right? So object, we need your array. Now is empty, is still going to be the same because we are not using any array specific thing here. So it's going to be same. And again, this is also going to be the exactly same. And now we have successfully converted our stack class to work with. So now if I just go down here and let's test it. So here you see that there's actually, let me just get rid of it. We do not need it. So we have total four TV show. I let me get rid of it, right? So you should see that for TV show. And you see this tagline is four, which is fine. And there is a 40 Vishal, the flash struggled superglue and the hash versus the builded. Let's pop it out. So see if poppies Walker. So I'm going to say my stack dot pop and it should remove this right here. The Astros disabled it. So you see it's indeed removed it. So the flask Target Super Girl. And if you want to print the item got removed. Again, if we need to wrap it into console.log, so console dot log. And here we go. If I go here, it's to say as a singlet and Z, it is working. Now we have this peak. So now after we remove this address is invalid. If you begin to peak, then the last is now super well, this is gonna be console.log. And then I see her my stack dot peak and it should return super gun. So if I go here, you see it is indeed returning Super Girl because superglue is now the last item on our stack. So that's also working fine. Let's go ahead and now work on clear. Well, we'll have to work unclear right now. Let's go on is empty because Claire, who is going to clear everything out and we don't want it. So we're going to say here is empty. So now if I go here, you see it's going say false because we have three item here. Next up, we have the size. That it's very easy. We're gonna go ahead and let's get the size. In this case, we have three TV shows in our stack. So it's gonna turn three. You see, it's run three. So now this is working properly. And again, now we can say here my stack dot clear, which is going to get rid of everything and clear. Our stack. See clear. And if I go here, you see that now our stack is empty, stack length is 0 and x2 is also empty. But again, if you want to push afterwards something where it is to do that. So let me just go ahead and grab it. And I'm going to just push it here. And let's make it supernatural. And Africa here. And you see that we have the stack. Death is one. It means there are supernatural God post and say, so now Alice Toklas completely working with JavaScript arrays too. So now you know that how to create the stack data structure using JavaScript object in JavaScript arrays. 24. Queue Data Structure: Welcome to the brand new chapter, where you're gonna learn about queue data structure. So what is Q? Where Q is an abstract or type structure, somewhat similar to stack, but unlike stack and queue is opened at both its end. So you know, a stack, stack only open with one ends, and that's called a top of the stack. But contrast that to Q. Q is open at both end, just like this. It's opened with its boat n. So one end for enqueue data and another end to dequeue the data. So one end is always used to insert data that is the most probably the back. So just think like a cue on ATM or on the build counter at Walmart. The another hand used to remove data that is mostly the front. So at the back you enqueue the elements or data, and in the front you will remove the data or elements. So unlike stack queue follow FIFO methodology, which means first-in, first-out. So the data items Toad first will be accessed fast, but as pack for low lifo pathology, the element of the data that is told last that will be accessed fast, but in enqueue, the data items which is stored first will be accessed fast. So now let me explain this. Q where visual aura.net, so here I am on q n You see that behavioral seven item in the queue. So if I just go ahead and if I add one more data right here at 57, well, this is going to add it to tail, which is actually a back. So if I hit seven, You say it's good right here. But if I dequeue where it's gonna dequeue from the head, which is from Frank. So 25, we're going to dequeue. So we click here, we see a 25 got dQ. If I click one more time, the 17 got dQ. And if I add something on the queue where it's going to add it to the tail, which is the back, just like you on atm. So you already know the scenario of q in physical world. But what would be the possible in the virtual world? Well, you might already know mulching post, post or active campaign. They are not the greatest ESP on internet email service providers. And they said millions and billions of email every single day. Well, that's because of q. Every single meal which is going to send is pushed into the queue. And this queue is continuously going to say an email and Dequeue that email. So you might have seen that once you send email, sometimes it's arrived within a second and sometimes take up to five to ten minutes to arrive. Why? Well, because if it is arriving within a second, it means that there is a no such element on the queue. But when it's arrived within telling that, that means that email queued up behind millions of other important events. Without queue data structure, these companies will live or exist. So from the next movie, we're gonna work on the logic of queue data structure. 25. Using Object To Create Queue Class: So here we go. I'm gonna VS Code Editor and you see a very simple STL file for our queue data structure class. And there's another file named q dot JS. Where are we going to write our queue data structure JavaScript code. And you see I have linked this file right here. So let's go to AACU dot js L. Let's start creating our queue class. So it's gonna be class and I'm giving it a generic name, which is a queue. But again, you are free to give your own specific name. Now let's go ahead and create our constructor. Where are we going to initialize our default properties? And for properties, it is similar to stack because stack-based on FIFO philosophy, which is first in, first out and q based on lifo philosophy, which is last in, first out. But when it comes to properties while they have identical properties, except q one, have a one more extra property. So what is the most important property for Q? Where the Q storage itself, because we need a storage, we're going to push our item to the queue. So for that, you have this and it's going to be underscore because this is a private property. And I must say I Q storage. And this is going to equal to object just like stack. We're gonna quote our queue data structure in Object a. Let in this chapter where challenge, you will go on to learn how to create the same class using array. Now what is the next property within a native? Well, the next important property we're gonna need is the queue length tracker, which is going to track the length of a cube. So it's going to be q length, which I'm gonna initialize to 0. So at the very beginning, it will start with 0. Now, in order to make our queue data structure work properly, we need several important methods. For example, we need a method which is allow us to enqueue items on the queue. And then we have the metal which is going to remove item from the queue and so on. So let me just give you the example here. You see this is a visual 0.9c and I'm on q right here. And you see the Enqueue. There's a three important matters which is peak, enqueue and dequeue. So when I click on enqueue and it is a 57, if I click Go, it will going to add 57 right at the tail with the end of the queue. And then when I say dequeue, which is going to remove this 71 from head, you see dequeue and it's removed. So it is based on the last in, first out. So this is the last n and then this is the first out. And that'll be have peak, which is going to allow us to pick the item which is about to dequeue. So if I click here, this is actually the item which is about to dq1. So we need three important properties, peak, Enqueue and Dequeue. So let's go right here. So we're going to work on enqueue first that will allow us to add an item to the end of the queue. So let's go ahead and complete documented that says push an item to the end of the queue. Then we have our next method is dQ. Now this method will allow us to remove an item from the front of the queue. So let's go ahead and say here, remove an item from the front of the queue. There we go. Now we need our next method that is peak, that will allow us to pique the very first item in the queue. So here we go, there we go. So these are the most important methods we're going to need to make our queue work properly. But I want to add a couple extra method that I think is important for the q. So the photon is going to be size, which allow us to see the total remaining item in the queue. So let me just go ahead and just paste it right here. And it's going to return the total item in the queue. And next one, I'm gonna need yet clear, which is going to clear out the q and here documented, so clear the q. So these are the five important method. I think it is important for our queue data structure. And let in this chapter we're going to add several more method to extend the feature of our q data structure class. So this is it for now. Let's go to the next movie where we'll work on enqueue method. 26. Implementing Enqueue Feature: So in this movie, we're going to walk on enqueue method that will allow us to push an item to the end of the queue. And this is going to be similar to our stack push matter. So we're going to pass your value as a parameter. And then we're gonna grab this value and push it to the queue storage. So here is going to be this, and that is going to be Q storage. And then we need to decide the index where we want to push our new value. So for that, we're going to grab this Q dot length because this is where we're going to keep track of our index or our q lambda. And let me set that equal to value. Now, let me tell you that now this is going to be always a 0. So every single time when you push a new item to the queue storage, we need to increment it by one. So then we will have a new index. And once a new item get added to the queue storage, this will going to increment by one. So the new item get added into one and then it will again increment to two. And it will look like that. Now this is it. Let me just go down right here. And let's create the new instance of our queue is going to be bled. And it's going to be my queue. And it's going to be new queue, right? And then what we can do, we can set yet console.log. And here I'm logged my Q and done. Let's go up here, and I'm going to use my cue to enqueue something. So it's going to be enqueued. And here instead of wars, I want to enqueue this 0, which is an invalid character. And there's a reason why I'm doing it, because I want to make something really clear in the next movie. For that, we're gonna need numeric values. So that's why I'm adding here the 0. But you can also use a word like the flash, right? But as of right now, we're going to use this numeric vector, which is a 0. Now, if I just go Here, you see that we're logging argue successfully and we have the q length is one. And then this is 0 value, which is pushed into 0 index. So if I just go ahead and push another value this time it's going to be one. You see that now this is also good heredity or is it the length is now two. Then we have the 00 indexed and one as one index. And this is very important. You will go in to understand in the next movie why I'm doing it. But as of right now, let's go here. And what happens if I just push nothing here? But it's still get added to the queue. Length is three. But this is not true because this amplifier so many to protect it. So we can easily just go right here in q. And we can do a very simple validation check. So we can easily say if and then if not value, it means that if it didn't pass anything as a value, then return false. And then we can display error. So we can say a console.log or let me show you another property here is going to error. Then here we can say, please provide value. And there we go. So now if I go here you see that nice thing. Please provide a value and it's saying this is an error. Let me tell you that in consumer clock, there is the most important property is log, which is going to be the one. If I go here you see that yellow symbol is the same. It's actually a warning and then there's an error. And if I go here to see this is actually error. So I'm putting here, so that's why I saying that please provide a value. So they'll go, our incubator is working properly. And this is for this movie. Let's go to the next movie. We are given a talk about this tricky dequeue method. 27. Implementing Tricky Dequeue Feature: So in this movie, we're talking about dequeue method. And this method is little bit trickier than any other methods you have seen so far. And even to see how in a bit. So let's start implementing our dequeue method. And you'll see that this method remove an item from the front of the queue. Well, let me explain this one more time. Why are visual aura.net? Because this is really critical to understand that how this method works. So we have written seven item in the queue. Here you see that we have head on 72 and PIL on 93. So if I just click here dequeue, you see this head is going to get removed, the 72, right, which is the very first element on the queue. So let's hit take you and you see the 72 is gone. Now there are 61. When I click one more time dequeue, the sixth one is gone and now the head is pointing to five. So wherever our head is pointing, that is the item it is going to get removed. And remember this term, the head and tell because Vigener made it soon in this movie. So now let's go to our method and let's implement it. So now you know that this is going to be a very fast item in our queue storage. So what you might want to do is that you're going to grab our queue storage initially. And then what you gonna do, you know that it's going to be a very first item in the queue. So you're going to just say a 0 index, which is always going to the very first index. And then you're going to say, delete it. Well, it is not going to work, but let's do it for now. And what I'm gonna do because I'm deleting something from the queue storage, we also need to decrement it. So let's go ahead and say here this dot as one, I'm a queue and it's gonna be length. And then here we can say minus minus. Now let's go ahead and see if our method is working or not. So here I'm gonna say my q is going to be dot dq. And let's see, it is removing our very first element or not. Now if I go here, do you see that now our queue length is two, which is quite good. And you see that 0 is called a MOOC. Now, this vertex is working for 0. But what about if I go here and if I create another dequeue? Now it is going to dequeue the one you think is gonna do. Well, let's see. If I go here, you see the queue length is decreased to one. That is actually true. But you see the one is there. It means that our queue length got decreased. It means that function actually ran, but this one item in the queue got removed. It means that our method is not working. Why is that? Well, let me show you. So if I go here, let me just go on dequeue method, right? And you see that this delete keyword is going to get rid of this 0 index entirely. You see there's a mode 0 index because if there is a 0 index, it, we can feel it again. But this delete keyword is getting rid of that 0 index entirely. So we don't have that index event in our queue storage. That is a very important to understand. So let me just go here and let's figure out how to do it. So you see there's a queue length. Well, I cannot use queue length here because q length is always going to be the length of the items in the queue, which means if you want to delete it from the end, well, we can use queue length property, but because we want to delete item, which is from the beginning. We cannot make use of our queue length. So what is the solution of it? Well, let me show you. Well, if I go here, you see there's a head. This head is going to keep track that which item is about to get removed. Yes, we need to create this head property. So let me just go right here and let's create our head property. So it's going to be this. And let's, because it's gonna be paired property, let's make it head. And now it will start with 0. So this is gonna be a default value. Now because we are keeping track of a head, we can go down right here. And instead of this 0 index, we're gonna make use of this.tab property. And we only want to increase this.userId once we delete something. So we're gonna go ahead and paste it right here. So now this is going to keep track. So now because we are using head, we also need to incremented. So let's say plus, plus, which is going to increment our headcount. And now if I go here, you see that now that one got remote, you say, And now our queue length is one indeed because we only have one item in the queue. But now our head is pointing to the second index, and this case second index, this right, this one. So if I go here and if I dequeue one more time, it will go in to remove that second index if I clearly see that now, the second index is also got removed and now one head is pointing to the third index. And we don't have item which have a third index. So that's why it's not going to work even if I remove it. But as of right now, our matter is walking. So let me just get rid of this or to dequeue method and let's keep only one. Now we need to cross verify that our enqueue method is working or not. So let me just go ahead and copy it and let's put one more items in the queue. So here I'm gonna say three. Now if I go here, you see coolants showing that there's a three item in the queue. But we technically have to item, what is the problem? Because you see that the second index is actually belongs to Todd value, which is not true, right? It should create another index is going to be third index, right? But it's not creating it. Instead of placing the second index value, it means that our enqueue method is not working properly. So let's see how can we fix it. So let us go to this enqueue method and let's see what is the problem. You see that here we're using this Q dot length plus, plus. It means in this case, our queue length is three, right? So that's why it's pointing to the third item in the queue. In this case, this is 0 is the first item, this one is the second item, and this two is the third item, which is going to be a second index. And now it's getting this third item. And producting index is two. So that's why it is replacing this second index value, which is technically a thought item in our queue. So it is not creating another index. Really see here that our head is now pointing to one. So what we can do, we can say queue length plus head. It means that three plus one. Now it is going to be four. So it will go into that fourth index, which is technically authoritative. So let me show you if I go here, let me just go to enqueue method. There we go. And now we still going to need this Q dot length. But now this time we also need to add this dot L is going to be our head index, right? So now we are seeing that grab the queue length and plus this dot head and whatever comes to index, go ahead and insert this value. And also we need to incremented the secure left because we have added something in our queue. So they say, Yeah, this dot q length and plus, plus risks going to increment it by one. And now if I go here, do you see it is going to work. You say that now instead of replacing the second index, nights, creating another index which is three. And again, you can add some kind of a validation check on dequeue method. So it is an item, then it's gonna dequeue or it's going to throw the error. So this is a very easy, you can simply say if, and you can check that this q length is equal to 0. If it is 0, it means there is an item on the list is going to be severely simple. It's going to be q equal to 0. And now we can easily determine what cell. So we can say handwritten, there's going to be false. And then what is the message you want to return? Once there's an item in the queue, then you can say or console dot log or you can specific consumer to one, it's up to you. And then you can login as something like this. The queue is empty and that's it. So now let's go ahead and check it out. So here you see that I have a three item in the cube as of right now. So I can go down here and let's dequeue it. So I'm gonna go ahead and I'm going to paste here 123 because there are three item in the queue. So now without coolant is 0, you see it's 0 here. So now if I just paste one more time, it will go into so that error. And it says now saying the queue is empty. And again, you can show warning if you wish, because that's going to be really stand out so honest. And if I go here, you will see that the yellow RSA, the queue is empty. So yup, this is how your dequeue method works, and this is quite a tricky, but now you get it. But if you didn't understand yet, then I will encourage you to go ahead and watch this video again and again until you drill this concept into your mind. 28. Working On PeeK Size and Clear Features: So in this movie, we're gonna walk on peak size and clear methods. And these methods are really easy to build because you have seen me building it in stack data structure chapter. So what I want to do in this movie is to go ahead and build this methods by yourself. It means that take this method as a challenge. Go ahead and pause this video and build it by yourself. And once you did play back this video to see my solution. So go ahead, pause this video right now. You did it. Great job. Now let me show you my solution and let's start with peek method. So you see this speak method is the very front item in the queue. So if I go up here, you see that we have these properties. And you see that there is a coolant property which we're going to use if we want to display something from N. But because we want to display something from start, we're gonna make use of these Godhead property because this is going to keep track that which item is about to get removed. So for that we can just go down here. And yes, we can return this dot head property. And there you go. That's it. Now let me show you now if I go here, you see if I just say here console.log. And if we're going to print this, my cue that that's going to print this afford because this is the fourth item is about to get removed. And you say there's a no item in the fourth stage because we have added so much time. So let me just get it of this dQ first. So now if I go here, this announcing that our toward index is going to be DQ. So you see third index is write this one. So this is about to teach you, and this is the very front item in the queue that if I just go ahead and add, let's say two more. So let's quickly do it. So here I must for answer five. Now, it's still going to point to three. Is it still pointing? Three is because this is the very front item in the queue. And this is what about to the MOOC. So now our peak method working properly. Now let me just go up here and let's work on this size. Well, you guess it, because we are keeping track of these static unit length. This is what exactly we're gonna do here. We're gonna go down right here, and we can determine this property and let me just log it one more time. And now this time is going to be size. Well, you see that? We'll see three because we have total three item in the queue. If I add one more item, it will go into the speed, the four item in the queue. So it's gonna print the food item. You say there's a four items printing. So this is working properly and you say that our head is taped wanting to three, say because this is the item about to remove our peak and.size method works properly. Now let's go ahead and work on this clear method. Well again, it's a super-simple because we're gonna grab everything we have in constructor and I'm going to paste exactly that here. So we are initializing our queue storage to again an empty object. And then we are resetting our queue length to 0 and head to 0. It means that everything what we have initializing our constructor is going to be exactly the same on this matter. And if I just go down here and let me just clear out Q, so I must say my q is going to be clear. Enough. I go here, you see that q length is 0 and head is 0. So it means that everything is empty and pointing again 0. So we have received every property in our queue data structure class. So yep, this is your clear method and it is very simple. So this is how this three methods, WACC. 29. Extending Features With Two Extra Methods: So here you see, I've added two extra methods to our queue class. The first method is going to return the total item processed by the Q. And the second item is going to check if our queue is empty. And you see that these two are very simple methods to implement. So that's what exactly I want you to do. I wanted to just go ahead and pause this video and implement these methods by yourself. And once you did, then replay this video to see my solutions. So go ahead, pause this video right now and implement these methods by yourself. So you did a great job. Now let me show you my solutions and we'll start with total possessed item by this Q method. Well, you see that this method is going to return the portal items possessed by this Q. This is very important because we want to know that how many items this Q is already processed. Well, for that, you see that we're keeping track of heavier, right? So we're going to grab this head because we cannot grab Qlik is because it's going to return the total item in the queue. But we won't only item which is processed by this Q value. You see that this head is going to keep count of a head index. So let me just go down right here. Let me show you how it's actually going to work. So first limit is go where they turn our, this dot is going to be head. Now if I go down right here and you see this peak is also going to work in the same way. So now let me just go ahead and just grab it from here and let me just paste it. The end of the size. I'm going to say here, total item presses with q. And if I go here, you see it's going to return three. Why is that? Well, because you see that now our current head is pointing to this third index, you see that our head is pointing to the value. Our head is pointing to the current index. And in this case it's pointing to toward index and it will print our current ahead, which is going to say the three item persist. Well this is exactly what true, because we oppose it 012, right? Its total three, so via three item. And this is actually working is because this head is not pointing to value, it's pointing to index. And you know that in JavaScript, index starts from 0. So that's why it is totally fine. If our index starts from one and this is going to return four. So we need to say here, four minus one, and it is going to be three because we have got all three item processed. So now our head is going to do the trick. And again, if you want to build a little bit display user-friendly masses, but it's really easy. You can just go ahead and you can just say return, which is going to be true. Now here you can just log of masses, and here we're gonna make use of this deal is signed so we can dynamically print something on the message itself, the total item processed by this Q. And here we can dynamically returned the number, the portal seven item possessed by the skew. So for that, we can use this dollar sign, which is going to be a template literal. And here we can grab our head. Yeah, exactly. And then go, if I go here and you see that proton three item processed by this Q. And if I just do one more, let say if I go here and if I dequeue one more, and now it's gonna say that totaled four item process by the skew is if it's working fine. So this is kind of a user-friendly message bus. Again, you see that this is now displaying how many items processed by our q. So this is very powerful. Now let's talk about this is empty, which is going to return true or false based on our queues, empty or not, it is empty. It's going to return true. If not, it will return false. So it's very easy, or they can just go up right here. And you see, we are capturing this right here. So we're not going to be rp. Well, when our coolant is equal to 0, these Hadley. So now we can go down right here and we can simply Lipton that this coolant is equal to 0, then our queue is empty. And because we are returning here, it's going to return true or false only. So now if I go down right here and let me just go ahead and log it. So I'm gonna say it is empty. So it's going to S and empty. And since it's returning false, because our queue is not empty, the three items in the queue. So now let us say if I just denote dq, let say three more time here. Now it is going to be empty. So it should so true, is it, it's saying true? Because now our queue is empty. So that is working properly. So now let me just get rid of this three dq methods. And let me just go up here. And because we have this method, what did we do here instead of this, if L sake, let me just go ahead and use this as a helper method. So it's gonna be this is empty and that's it. Now if I go here, you see, now it's still going to work because you see in dequeue, this is empty, it is returned in the queue, is empty. So what I can do here if I go down here and let me just return of four times, so it's going to be 1234. And if I save it, if I go here, do you see that now it's going to turn, the queue is empty, right? Because now we don't have anything in cube. So our this matter is working also properly. So there we go. This is how R is empty. And this total process item by this Q matter walks very simple, but very, very important. 30. Challenge Convert Queue Class From Object To Array Class: So now this is a time for another challenge. And what I want you to do is to record this class in JavaScript array. So now we have already coded it in JavaScript object, but you need to make it compatible with JavaScript array. And we have already done that in stack data structure chapter. So if you have seen that chapter, you already know how to do it. So go ahead, give it a shot just to make necessary changes to make this work with JavaScript array. And I'll show you my solution in the next movie. 31. Solution Converting Queue Class From Object To Array Class: So in the last movie, I give you a challenge to recode this entire class in JavaScript array. So if you did it, good job and if you didn't, don't worry, here's my solution. So here, instead of this object dynamic used up this array container. And because we are using this array container, we have some special in built-in array methods we can use to push any data to the front or end of the array or poverty data from the front or end of the array. So for that exact reason, when I get rid of this head property entirely, we no longer needed. Now let's move to enqueue matter. And here you see that if we do not need these apart, and here we're going to use this push, a method to push any item to the end of the queue. Well, if you want to push it to the front of the queue, we can use unshift method. This is going to push at the beginning of the queue. But because we are pushing at the end of the queue, we're gonna make use of this push. And there we go, it's working, and this is it for our enqueue method. Now let's talk about dequeue method. Here, we no longer need this delete keyword because if we are using array here, now, let me get rid of it. And now we want to remove the very first item in the queue. Well, for that Vienna because of this shift method. And this is the special method which is inbuilt in, in JavaScript arrays, right? So this soup method is going to remove the very first item in the queue, and this is it. So if you want to push something end in the queue, you're gonna use this a push method. If we want to remove something from the end of the queue, you wanna use pop method. And if you want to push something beginning in the queue, you want to use unshift matter. And if you want to remove something from the beginning of the queue, you're going to use this shifted method. So this is a very powerful. So now we have done, let me get rid of this head plus, plus because we're no longer using our head property. There you go. This is it for this dequeue method. Now, peek method is x0, this data head, well, this is not true, so this is actually very easy. We can go up here. We're going to grab this one now, and we're, we're down right here and we're gonna paste it at, instead of returning something when asset here, 00 index is always going to be the very first item in the queue. And I'll show you a demo in a bit. So now let me just go down here you see size where size is working properly. Now is it portal possessed item by this Q, you see pointing at this dot n. So instead, I can go ahead and grab the exact same thing and paste it here. And now is empty. Well, this is going to work fine and clear. I'll make it two. And we're gonna get rid of this head property. And their JO, If I go here, you see that now this is printing to limit the score right here has a peak. So now our head is pointing to the second index. And let me just show you it is true. You see the second index is right here. So our head is pointing the right direction. Next up, we have this size. Well, you see our q contains only two items, so it's also working fine. Now there is a total pacifist item by this q, in this case, our head is pointing to two, so 01 got remove means we have proceeds to do item and see it saying the total two item processed by this Q and it is also working properly, is empty. You see it's returning false. But if I dequeue, let's say two more time. Let's say two more time. You see it now it's gonna say true because now our list is completely empty. So, so this method is also working fine here. And this the last matter. You need to check. Now, every matter is working properly. This is how you can code your queue class using JavaScript arrays. So now you know that, uh, how did include this queue data structure using JavaScript object and JavaScript arrays. 32. Set Data Structure: Welcome to the brand new chapter. We are going to learn about set data structure. Well, step isn't abstract data structure that can store a unique values without any particular order. It is basically a computer implementation of the mathematical concept finite set. And that's where this got name of set data structure. So here's example. Facebook mutual friend is a great example of a data structure. So here's a screenshot of my personal fistula count. It's showing that this guy have a twelv mature friends, this gamma for mutual friends, and this guy had a three mutual friends. So let me just explain you that what we're gonna cover in this chapter, we're going to cover the three type of center structure. The first one is a union set, which is going to return the unique members in both set set a and set b. We have SAT and we also have the set B. You see that in steady there is a full member and said to me There's also for members. So total we have eight members here, but instead we, we have two people. This is a whole Elisa which is also present in set a. So this Raul and Lisa instead be, are considered as a duplicate. That's why this union set is gonna omit this around and Lisa from the set B, and it's only going to return six members, which is not wholly John Liza Alexander to heat and mind. So these are the unit members in both set. Next up, we're going to cover this intersect type, which is going to return the common members from set a and set B. So in this case we have set a which is the same as a union set. So we have this four members in set a and foreign, but in set B, in this case, you see Robert and Lisa is common in both set. So that's why this is going to return ground and Lisa, because they are common in both set and they call mutual friends. Yeah, put that Facebook feature, this is happening, that's because of Intersect sat next and the last type we are going to cover is a different step that is going to return set a members that are not present in set B. In this case, John and Alexa, UC, John and Alexa present here, but it is not present in set B, and that's what it's going to return here. Seem like people you may know because they are friends of friends, but not your friend. Behind-the-scene physic using this different set to calculate it. And again, in this chapter, we record the basic logical fait. So from the next will be Bina started working with cetera structure. 33. Creating Set Class: So here we go. I'm on my Viscoat filter and you see I have a very simple estimate file for our center structure chapter. And there's another file, limbs test.js. We're going to write our JavaScript code. And here I've linked that file. So now let's go to our set dot js and let's start creating our set class. So here I'm gonna say class and it's going to be set. And again, it's a generic name, but you're free to give your own specific name. Now let's go ahead and create a constructor. Where are we going to initialize our default properties? Well now let me tell you that the set data structure little bit different than any other data structure that you have seen so far. And in this chapter you will see why. But first, let's go ahead and create our most important property that is set storage, where you're gonna post our new set members. So it's going to be this dot and here is going to be set storage because this is a convention we're using throughout this class. So I'm gonna stick with it and I'm gonna initialize to an empty array container. Now let's go ahead and create other most important methods winner need to make our center of structural rock properly. The metals like an ad, which is going to add a member to set and the method like remove, which is going to remove a member from set and so on. So let's start with ADD method, and this is going to add a new member to our set. Next, we're going to need the move method that is going to remove a member from set. Next, we're going to need this a seismometer that isn't written the size of our set after that wiggly contains method that is going to return true or false based on the condition if the member is already present in our set or not, then we need this Schroeder method that is going to return all the member of set. After that big only three more properties which is unique to set a structure, and that is going to be union set. And this is going to return the unique members in both set when set a and set B. And the second unit method of vigor need for this set data structure is intersect. And this is going to return a new list of mutual members in both set means common member in both set, set a and set B. And then the very last mattered villa need is different set. And this matter is going to return all the members of set a that are not present in set B. So these are the three unique methods only for set data structure, and these are very special. In fact, this intersect method is a way how fish will show you mutual friends. So yeah, but these are all the method we're going to need for this set that a structure. And we're going to start working with this add and remove method in the very next movie. 34. Implementing Add And Remove Feature: So in this movie, we're going to walk on add and remove methods. So let's start with this add method. So I'm going to pass your value as a parameter. So we're gonna grab that value and we'll push it to set storage. But wait, our set contains only unique values, means we cannot pass duplicate value to our set storage. So that means that before pushing this value or new member to have a set storage ready to cross verify that value is not already present incest storage. So sounds like we need if else condition yep. Venus ahead. If and then when I grab our storage, so we need to make sure that the past is already not present in our set storage. So in order to do that, we're going to get up our storage and let us say here, dot index off. Well this is going to find the index of our value. So basically what we are doing here, we grabbing this value and you're passing into this index of method, which is going to return the index of the smallest value. So if I pass your five, well, if there will be five, then we're going to grab the five and return the index of it. So if I only have a five, then index of five will be 0 because other containers start with 0 index. So now what do we need to do? We need to see that if the index is greater than minus one. So if I just go here, if I say here greater than minus one, well you see, even if it is 0, it means that we have a value on 0 index. It means there is a value present in our set storage. So we can't say it equal to 0. So we need to say that if any number which is greater than minus one, it means that we already have that member set stories, so we cannot add it. So here I'm going to return, and here I'm gonna use this template literal sign, and let's throw a message. So here I'm returning that this is already present in the set. So instead of this, we're going to just use that dollar sign and lock our actual past value. So for example, if I passed here, the whole is going to say round is already present in the set and what happened in the past value or a member is not already present in the set. We're going to push into the set storage. And I say, this dot is going to be set storage. And then we'll say git push. And here is going to be valued. So now we are past value, it's going to push it right here. So let's go down and let's create a new instance of a class. And let's see it's what learned up. So as I let is going to be my set and it's going to be new set. And then what I'm gonna do, I'm going to say console.log and our login, my set. And here let's add a new member to assets, so myset ad. And then let's push it route. If I go here, you'll see that there's a one item in an array which is route. You say it is working. Now let me just push one more, is going to be Rohit. So rho, it is my gender but up, and you see that now there's a novel and Rohit. But let me just do one thing. Let me just copy this rooted and tried to push it one more time. This was going to happen. If I go here, you see it didn't push that value. You see there's no duplicate contained because we are checking here, right? You see and we can't see this message is because you were not logging here. We're returning it. So what do we can do here? I can just simply copy it and we can just pass into console.log. And now it is going to return that error. Let me show you. If I go here, you see it saying rho, it is already present in the set. And that's why it's not pushed it. And if I go here, if I say elisa, well, you will not see that error. But instead you'll see that three item in the array. This is around rural and Lisa. So you see it's working. Now let me just tell you something. What happened if I pass here? Nothing, right? Empty. So let's pass nothing here. If I go here, you say it's still edit here, there's undefined. So we need to make sure that before running our add method, we need a real values so it should not be empty. So we can say that if and set here not value, then we'll return false or return anything you want. For example, let's say console.log here, please pass a valid value. And if I go here, you see it's returning, Please pass the valid value. So it's working. And again, you can actually just print it error. So it's going to be more visible even. So if I go here, you see it's going to say in red flag, say Please pass a valid value, so there is an error. So this is very nice. Now we did check our add method of working properly. Now let's go ahead and walk on this remove method and a remove method, we're gonna remove any specific a member. So we need that value as a parameter. So we're gonna grab the member you wanted to move. So before removing any member from the set, we need to make sure that member is already exist in our set because it doesn't exist, we can't remove it. So let's sick. So here almost a let, and here I will say index. So we need to find the index of the past of ALU member. Again, we're gonna use the same technique here we have used to. So this one, we're gonna grab the same thing and we can appear state right here. This is going to return the index of the past value. And if this value is not already present in our set, it is going to return minus one. So that's what exactly we can check here. So here what we can do, we can say if index is equal to, equal to minus one, it means that it is not fun. So we can return here 44. So let's say your return is going to be a fluorophore which is not found. Or if you want to return any specific message, just go ahead do it. Let's actually do it console dot log. So we're gonna say at a console.log and let's say that member doesn't exist in the set. But what happens if I found the member? Then in this case, we need to remove it. Well, it is very easy because we're going to grab our the stock is going to be set storage. And then I'm going to use our splice method, which is going to splice out any specific index we have passed. This case. Now we know that this is going to return the index. So you're gonna grab this, I'm going to paste it right here. And we're gonna limit our splice to only one element. It means that only one member is going to get removed. If a parser to then this member, which is the index, is going to get removed. And also the next one. We don't want it right? So we need to limit our removal to only one element. So let's take, it's working or not. So I'm gonna just go down there and here, and I say my set as going to be dot remove. And let's remove Rohit. So let's say a row ID. And now if I go here, you see that row, it will be removed. So if I go here and see the Rahul is there, but rho, it is gone. So it is walking. And you see this pass of added value is because we haven't passing it in here. So let's pass your Lisa, Right? And actual lessons remove desire because that is the last item we are past. And if I go here, do you see that here? The round window, it is present, but Elisa is gone. And if I just get rid of this remove and if I go here, you see now there is a liaisons also present. So this is working fine. Now let me just uncommitted and let's try to remove these up one more time. And now if I go here, you see that member doesn't exist in the list because Lisa is already removed by this first remove method. Now Liza is not present in the second time. So that's why it's throwing this era and saying member doesn't exist in the set. So it means that our remove method is also working properly. But what happened if I pass your small letter off Lisa? What do you think was gonna happen? Let's make it small. Lisa. And if I just go Here, you see that member doesn't exist in the set and you see that's not true because Lisa is there, but I have passed the small letter of this N. Now here in hand mattered when adding with the capital letter Liza. And we're passing here, they move as a small letter. So that's why it is not working, because JavaScript is a case-sensitive language. So how can we make this work? Well, we have already solved this problem in earlier chapters, but if you haven't watched it, lemons swap, lemme show you, you see that we are using this value right here. So what we can do, we can turn this value to lowercase. Yeah, you can say head lower case. And then this is going to turn this valid to lowercase. Now, in order to compare it, we need to up here, and we also need to turn every single member into lowercase once it pushed into our set. So what I can do, I can simply just grab the same function and I'm gonna paste it right here. Exactly. And now if I just save it, if I go here, you see that now there's only two elements that removed. But you see here that now every single member in a set having the lower case letter. And that's what exactly we are doing here. Passing this monitor eval to offset, and then we are converting the past value or member to lowercase. And then we are computing the lower version of past value and the member which is already present in our set. And that's why it is working. So no matter how I'm going to pass it, for example, I can make it capital I, capital S. It's still going to work. Is it still going to work since desire? So now our add and remove Mitre working properly. Now let's go to the next movie. We are gonna walk on these three methods. 35. Working On Contains, Show And Size Method: So in this movie, we're going to walk on size, contains, and show mattered. And these are very simple methods to implement. So let's go ahead and quickly build it. So for the size method, it is very straight forward because we're going to determine the size of assets storage. And it is very easy. We can just go down here and here we're going to grab our set storage. So you're gonna have a desktop set storage. And it's going to be led and we're just going to return it. That's it. Let me just go down right here. And let's console.log size of my set. So here it is going to be my set dot size. And if I go here, do you see it is going to return four because we have written for members in the Senate. Now, banding and Lisa. So it is working fine. If I add one more, for example, let's say here. And you see it's going to add five now, returning five. And if you want to display even more user-friendly message, well, it's very easy. We can go up right here, and we can use a template literal in years 2015. So we're going to use this to list signature. So heavy go This is our masses. There are fine but present in the set. And now we can just add this value dominantly by moving our five. So when I say a dollar, and this is going to be our disk storage Scotland, and that's it. Now if I go here to say there are five members present in the set, very, very powerful. And this is a user-friendly message. So if I remove this and Mike here, it is going to say this affordable present in the surface and that stroke because here we have only four members in our set. So our size method working properly. Now let's go ahead and walk on. This contains matter. Well, this is also going to be very easy because we're going to pass your value as a parameter. So we need to match this value against our set storage index. And so we're going to check that if a set is already contained with this a member or value. But this is also going to be super easy because this, we're gonna go up here. And you see that this check here. Yep, exactly. We're going to grab it from the Reagan. I just paste it here because this is exactly what we need and we just need to return it. So what this method is actually going to do is that we're going to grab our set storage. And then we're going to find the index of this past value. If that index exists, it will going to return 0 or greater than 0 number. And if it is not present, it is going to return minus one. So this is what exactly this doing. So let me just go down right here. And let's say it's not. So here, begin at the city or console.log. My set dot contains and let's see which one. So I will just take care of it. And if I go here you see it's a true means. Our set contain a valid name, Rohit, looking properly. Now, let me just go ahead and set it 0. Now this is not true, so it's returning false here. So I'll contained mattered working properly. So what we can do here is that we can use this contain matter right here so we can get rid of everything from there. And when I say at the start, and it's going to be contains, and then here we can pass the value. And now that's it. So let's go ahead and let me just duplicate this leads us. So we needed to make this automated walking or not. But for that we need to lock our console here, so console.log. And then what I can do, I can go here. It will say this, I already presented the set. So now that method is working on so pi. So there you go. This is how you create the set contain a matter. Now let's move on to research show method, which is also very easy because it's going to return our entire storage. Yes, that's true. So it's going to be this offset storage and that's it. So now what we can do here, we can go down and we can dislodge our entire storage. So console.log. And it's going to be a mindset dot shown. Now it is went along our entire storage and you see, it's indeed loving law, whole crew hit badly. And Lisa. And if I add here one more, when we already have this micah, So let me just uncomment it. And if I go here, you see that now it's printing these five members, which is our own ruin, vandalism and Mike. So now I'll show method is working also properly. So this is how you're gonna build your soul contain and seismometer. Now that's what the next movie. Rarely we started working on the core method of a set, which is a union set. 36. Creating Unique Set: So this will be willing to walk on union set method that is going to return newly stock unique members in both sets. So let's get inside this method and before coding the logic, let's first understand that how this method is gonna walk. So here we're going to have to set, set a and set B. So let's say sit a have a member of 1234 and set to be, have a member of 456. Now these are two different set. This is a set a and this is set B. Now this method is going to compare these abode set. I'm going to return our new set, going to contain 123456 y total return 1-2-3, 4-5-6. Well, because you see that this is set a and set a have member 1234. So it's going to return the, all the four member of set a and then this set B, you see this set we also have an inverter for, so it is going to omit dismember because we already have this member right here from set a, and then it will move to the next number five. And we don't have 5-year, so it's gonna include 56. And now you see that this is totally unique set because all the member in this new set is unique. So that's what this method is gonna return. So you see that these are first set is going to be our, this set, because we already have this set right here. And the second set we're going to pass as a parameter to this method, fuzzy set B. So second one is this one and set B is what we have passed to this union set method. Now let me show you how we're going to call this method because that way you will understand it. So you say if we already have this set, which is going to get right here, so this is our first set. So what do we do here? We can go down right here and we'll create another set is going to be led and I'm gonna give it a name of mindset to. So this is our second set and obviously it's going to be new set. And then what we do, we're going to pass this Lisa to the second set, and let's add three more member to our second set. So first, remember elisa, then we're going to have here Mike, Then we are going to have here zone. And then at the very end, let's put my name so my number will be common in both set. So that's why it's going to omit one of my name and then it's going to turn the unit members in both set. Now because you know that this method is going to return another set. So we need to also say it like a set. So we're gonna create another set, reasonably lead and are going to be tested. And then this test set equal to new set. So this is going to be another set, is I'm going to use this variable again here. And then I'm going to store these new unique member of set right here in the city's data. So how it's gonna walk while you see that this is going to be our default set, which is a set a. So we're going to just say here are my set. So let's say my set. And here we're gonna use our union step method. And then we're going to pass this second set right here. So I'm as a mindset and it's going to be right here. So this is how are we going to use this union set mattered. Now you understand it. Now let's go ahead and quote the logic of our union set. So now we need another variable here, and it's going to be union set. And this is going to be equal to nu set because it's going to return a new step. So now what we can do here, we can duplicate this set storage. Let me show you what I mean here. So we're going to look through our set storage and I'm going to push it to the new set where you can also just hard-code it would like it this one. So I can also say here, now our new members right here. But that's gonna be a hardcoded and we want to make it a dynamic. So what do we do here? We can just make a new set and then we can use for loop to loop through our this current set storage or members. So here let's go down and I'm gonna use this a four-loop. Let ions will be i equal to 0. And now here I can say if i is greater than this and it's gonna be storage dot length, then what you can do it, we can say a plus plus I, so we're going to pre-increment it. And then here we're going to post every single item or member in our set storage to this new set which is union. So we're gonna set union, set dot, maybe push. And then they're going to push every single member of this storage. So we're going to grab this set storage. And when I sit here, I know what that's gonna do is actually just going to create a duplicate of this storage right here. But this is dynamic because right now we are passing only three value. But if I pass her one more value or like water value that we're on the road, like searching, you see, then it will automatically want to just know, push it to right here. Now we have our set a. Now we need to look through this set b also to compare it. So we're gonna do the same exact thing. We're going to grab it from there and we're gonna paste it right here. And here we are going to get rid of this, this bigger set, because this is what I passed it up. And don't forget that this set is going to be a set. It means that our step, this property. So that's why we also need to consider it. So I'm saying here, instead of this set, I'm saying, yeah, grab this set and set that set storage dot length and just do the same thing. Now here, we need to get rid of it because we don't need it. We need yet FL's conditions because we need to compare it, right? So here we need to check that our union set already not contained with the any member, which is xs here. So how can check it? Well, it's very easy usa dot contained because don't forget that we have this contained methods available to us. That reason is because it is us, it is a type of set. So that's why we have this method, our level. And now here we can simply just grab this set storage. We can pass the value existing index. We're looping through. There we go. So at this point I'm checking that our union set, which is the original set, is contained with any value which is present here. But the member of the set B which is not present here. Then, and then only we are going to push it to the new set. Well, for that reason, we need to reward it. I can use this negation operator. And now it's saying that if this union state is not contained with this a member, then we'll just go ahead and set and I'm going to push it to the union set. So we're gonna say here union set. And then because it's a set, we have that property oily Well that is set storage. So we have this one and then we can push it to the set storage. Well, obviously the value we have just checked, because if it is not contained, it should be in our union set because this is going to be unique. And now this isn't. So this is our set B comparison, and this is our set. Now we need to return our union set, right? So you can see here, the return is going to be union set, and that's it. So this is the logic of our union set. Now, we need to see that it is working or not. So we can go down right here. And here you see that the start test set. Now let's go ahead and console.log here. So it's going to be console.log and it's going to be our test set. And now what is going to be the expected result while you see his allowed ru it bendy and such. And then there's a Liza, Mike, John and down. So Raul will be good, omitted. So here we left with total seven members. So let's go here and you see that now it's only four y's that actually have some problem here. So let me just go up here and let's see, sorry, this is actually less than, not, greater than, so it's going to be less than. Now we should see this, but there's actually, the push is not a function, okay? It's lined 55 and you see that on 55, it is right here. Okay, fine. I forgot to add the set storage. We're gonna grab the satisfied, you're gonna be sick right here. And you see that also, I forgot this dot. Push. There we go. So we have some typical problem here. Now you see it, see the seven desert is Raul ROI IT band is such employees are Mike and John is. Now our function is working properly. Put seven members in our new set. Now we'll just go down here and let me just do one more thing. So for example, if I just go ahead and let me just create such in one more time here. So they're going to be because I'm duplicating it. So it's gonna be searching. And then let me just go ahead and just do one more thing. So let's say I'm going to copy this mic. I'm going to paste it right here. Now in this scenario you see we have this role, role it bandy, such in and Mike. So this phi will be already pushed into our union set right here. And then what's going to happen is that this is going to check, so Silesia is not present here. So let's all be six. Mike, Mike is there. So it will not get count, it will be omitted than John is. They also is going to be 701. Then you see a whole list there. So it's an omitted, such it is also the tsunami omitted two. So now we should see again the seven members. And you say that this is going to be actually my set, not my SO2. If I go here, you see that now we again have the seven members. Now let us look at the next movie where we're gonna walk on this intercept Sec. 37. Adding Mutual Members Feature: And this will be, we're going to walk on intersects set method that is going to return no list of mutual members in both sets. So again, Veda parser set as a parameter. Now let's get insight and let me explain you that how this method is going to work. So here for example, let's say we have to set, set in set B. So set a going to have a member of 1234 and a set B is going to have a member of 234. So now this method is going to return a neo set which contained a mutual or common members. Like in this case, you see that set a have one. So c one is not common in both set, so it is going to omit one. You see the two tweets containing both set at. So it's going to return to here, the three common in both sets. So it's also going to return three here. And then this four member is also cone boats it, so it's an item here for, so this is going to be the final intersect set. So this is what exactly it is going to return. It's going to return the mutual or common members in both set. So think of it like a Facebook, mutual friends behind the scene, Facebook users, these intersect method to show you the mutual friends. So how are we gonna quite well, we're not quite the same way, but this time, this is going to be the Intersect set. That's it. So let me just go up here and let's go to the logic. Well, it's quite simple because here we are creating a new set. So it's going to be left and let's make it intersect. And this is going to be equal to nu set because again, it's going to return a new set. And let's say you have return. And it's going to be our intersect. Now in between villages, quote our logic, where again, you see that set a is going to be our disk storage. We already have it. So what do we do here that we're going to compare this past set value to our existing asset, store it. And if you find any mutual member in Boulder Dam, then I'm gonna push it to the new set which is intersect. So here when I sit here for, and then I'm going to move through our existing storage, which is set a storage. So it's gonna be let i equal two is going to be 0. And as long as i is less than our this storage dot length. So let me just go up here. Let me grab it and let me paste it right here, dot length. Then go ahead and just pre incremented. And then inside we're gonna use FL's conditions. So vena say yeah, if, and I'm gonna use this set here. So if this is past a set, contain the value we're looping through right now in our set storage. So here we go. And I said you have i, then this go ahead and push this value to intersect set. So here we're going to add that value to our intersect variable, which is right here. So unless I intersect that ad, and this is the add method we're currently recently, right? So we're going to just grab this valley and I'm going to add it. So we're just gonna do down here. And here, we're going to just use this exact value because this is the mutual value in both set. And that's, this is the logic and a very simple and very easy. Now let me just go down right here. And you say that we are using this intersect setter. Now let's go up here and see around is common in both set. Then we have this Rohit which is not common. This battery is also a common, but such as is common in both set. So Raul such it's going to return. And then we had this Mike. Mike is also common in both set. So the final intersect set is going to be searching and Mike, because these three are the common both set. And if I go here, you see that our set contained with three members around such it in mind because these three are common in both set. And now you see that our intersect method working properly. So now let's go to the next movie where we're gonna work on different sets. 38. Challenge Implement Difference Set Feature: So and this will be, I want to issue a challenge. And the challenge is to go ahead and implement this method by youself. So what this matter wanna do? Well, it's going to return a new list of set members that are not present in set B. So obviously just like other methods, it's automatic set as a parameter. And then here, let me explain you that how this actually going to walk. So suppose we have this set a contained this member, so 1234. And now that we have set B that contain off 345 members, now this method is going to return when it's ready turns set members that are not present in set B. Well, let's see this one, while one is not present in set B, so it's written one. You say that 22 is also not present in set b. So it's going to turn to, and then you see this tree. Well, three is present in set B, so it's an Omid set B. Then you see this for, well, four is also present in set B, so that's also going to be omitted. And this five don't count because it's only going to check this set a and that's what exactly it needs to return set a member that are not present in set B. So this is going to be your final result. So if I just take this example, you see that this arrival is present here. So it's gonna omit the ravel wrote It is not present in set B, so it is not written Rohit, then bendy is not present here. So it's also right on bandy, but such. You see it's right here and the mike is also present here. So the final answer will be Rohit and bendy that are not present in p. So this is how you're different set method. When I walk. Now go ahead and try to implement this method by yourself, and you will see my solution in the next movie. 39. Solution Implementing Difference Set Feature: In the last movie, I issued a challenge to go ahead and implement this method by yourself. And if you did, it ends walking, then well-done kudos to you. But if it is not working, then don't worry, here's my solution. So this method is going to be exactly same as this method. Only one single difference. Let me show you. I can just go down right here. So here I'm gonna create a new variable which is going to hold our new different set. So it's going to be different set. And then it's going to obviously the type of new set. And then here when editor on our different set. So there we go. Returned it. Well, it's very similar to this matter. They'll show you. I can just grab everything from there and I'm going to paste it right here. And here you see that this is our set a and set b. We have just passed it right here. So we need to look through our set. And then inside this loop, I'm checking your if this past set contain the value of our step a currently we're looping through and they'll be pushing it right. But now in this case, what I do if this past that doesn't contain with the value right here, then we're gonna push it. So here we just need to add this negation sign and that's it. So here what we are saying that if the subparts that value does not contain the value of set area looping through, pass that value to this a different set. And here we are seeing that if past setup I look contained with the set storage value, then only push it here. So here we are looking for the permanent members in Bowser. And here we are looking for all the members which is present in set a, but not in set B. So that's it. If I'll just go here, it should return root and badly. So let me go down here and here we'll just call our different set matter. And if I go here and you see it saying references, intersect is not defined as a set different set. So the Enter isn't lane number 89, somebody to go to 89. And let's see what is the problem here. So this is 89 and here you see that we are easy to intercept. Well, we need to push it or add it into differences not in the set. And now if I just go down right here, now, it should walk. So if I go here you see that you will see this eroded and bendy because Rohit bandy are not present in set two. And we can also reverse this stuff. For example, we can just pass this milestone tube as a set and my set is set b. Now in this case, what's going to happen? Well, this is one of a set a and this is gonna be set B. So in this scenario, Liza is not present here. Mike is present here, so Mike will get omitted. John is not present here. So genres gonna count. So Liza and John and the node is also present here and settings also presenting up. So now this should return Lisa and John because in this scenario, step two is set a and my set is set B. So if I go here, you see that Lisa and John will be there. So C, Lisa and John. And if I pass it, another member. So let's say here and add here Alexa. So if I added Alexa, You see that Alexa will also be the cell's going to be lethal zone. And Alexa, lisa, jordan, Alexa, because now we are treating this mindset too as a set and my set as a set B. So this is very powerful. And again, you can reverse this order on any method you wish. You can also intersect. And this union set, this is your different set matters. 40. Final Thought: So now that we have learned foundation of JavaScript that are structured these four basic and important JavaScript data structure, that is a List stack queue. And now you're ready to use it in your own real-world project. And don't forget, this is a pattern of JavaScript data structure. In the next part which is advanced to ask you about a structure, we're going to cover Binary Search Tree. Linkedlist has to be n graphs that are more advanced data structures when this class is telling decoding. But if you're watching this class in the future, the chances is that this class is already live on schedule. So you can simply just search my name on it. And it's going to show you on my courses. And if you want to watch my other classes, you can take that on my profile. So I really appreciate that you have taken time to watch my glasses and I hope you enjoyed learning dusk your data structure formation.