JavaScript Design Patterns for Web Apps

Adding TodoList Methods

Maximiliano Firtman

Maximiliano Firtman

Independent Consultant
JavaScript Design Patterns for Web Apps

Check out a free preview of the full JavaScript Design Patterns for Web Apps course

The "Adding TodoList Methods" Lesson is part of the full, JavaScript Design Patterns for Web Apps course featured in this preview video. Here's what you'd learn in this lesson:

Max implements the add, remove, find, and replace methods in the TodoList class. Since the data is stored in a Set, the Array.from() method converts the Set to an array so it can be iterated. After the data is modified, the notify() method is called.

Preview
Close
Get $100 Off
Get $100 Off!

Transcript from the "Adding TodoList Methods" Lesson

[00:00:00]
>> Maximiliano Firtman: Well, what else do we need in the list? Well, actually, the actual list behavior, that's actually, well, it depends on the behavior you want, the American or the English one. My brain sometimes is doing a mix of British English and American English. So,
>> Maximiliano Firtman: What's the list behavior?

[00:00:24]
Well, actually, we need to add an item, we need to delete an item, and delete an item. We're going to add also some properties or methods, actually, that we will use later, such as find where we get a text. And we will find in the list if the to-do is already there, okay?

[00:00:52]
Also we have a replace list that that we will use later, but we can add the code later if you want. But why replace list, because maybe we wanna be thinking about the future. I wanna get the list from the database, from somewhere else, and I wanna just take that and replace my list, my whole list with the list I receive as an argument, okay, make sense?

[00:01:15]
And then I need to fill the gaps here, but it's not really a big deal. First, to add the list, I can just go and say, hey, this.data.add(item), okay? Yeah, it's okay, but if I do that, I'm skipping that part that I mentioned before that should check first if there is no duplicates from a value option point of view, if I already have that Todo or not, okay?

[00:01:49]
So then I will add something here. Another thing is that we will see later if you're going to receive the item or just the text. I think that we may receive the text. So not the item, because from the outside, they don't see items, okay, they see just the record.

[00:02:13]
So maybe that, I think it's okay, so let's do replaceList first. We will just say this is the simplest one, this data equals the list that we receive as an argument. So we need to receive the list as an argument. So we're going to receive a list, and we're going to replace our private data field with that, that's simple.

[00:02:36]
For add, so let's fill the problem that we have here. Again, what's the problem, what happens if I go and add here lunch twice? I don't wanna add lunch twice. And even if I have a set, okay, the problem is that because I'm creating new objects all the time, it's not gonna make a difference.

[00:02:59]
So I need to go and check manually, so I need to check if the todo already exists, okay, Exists, like that. Because it's a set, I mean, I can use a filter to check if it's there or not. The problem is that set does not support filter or map or other of the array method that we are used to in functional programming.

[00:03:26]
So something quick that we can do, I mean, there are other ways to solve the problem, but something quick is we can quick an array version. So we can say Array.from(this.#data), and now because it's an array, we can filter the array. And we can try to find, if I have a todo, we can use our equals function.

[00:03:50]
Remember, we did an equals function here, and we're going to use that one. So why I'm using this.text, why I'm using equals and not this comparison directly? Because in the future, I might add more properties. So it's better to the item to include the logic inside the item to decouple the problem.

[00:04:15]
We always need to decouple our problems, okay? So then I'm going to say if t.equals is equal to the item that we receive here, okay, so this item that we have here. And we are going to check if the filter actually returns another array, if the length of the array,
>> Maximiliano Firtman: Is greater than 0, I think I have a parentheses issue, and there we are.

[00:04:49]
So if I have more than 0 in the array, it means that it's array there. By the way, it should be 0 or 1 only because we're not adding duplicates. So then we are going to add only if it doesn't exist.
>> Maximiliano Firtman: If it already exists, I'm not going to add anything to the list,
>> Maximiliano Firtman: Okay?

[00:05:16]
For deleting the data, I actually need to do something similar. So I actually need to loop through the array, by the way, let's call this item on every, just to use the same pattern here. I don't even remember exactly the name I used on the companion website. So I will delete the item, so I convert it into an array, and I need to find the todo that I need to delete.

[00:05:49]
And I will filter again, and I will find, for every todo I will check. If it's equals, I can call equals again to the one that I receive, okay? And by the way, I can also say this is always an array, so I should check (0). But the problem is that maybe it doesn't exist, so I should check if someone is asking me to delete that, to do that, it's not there.

[00:06:20]
It shouldn't happen, okay, but anyway, we can leave here a flag, check for later, okay, just to focus on the important part. So then I can talk to my data, set, and delete there the todoToDelete, okay, like that. And finding by text, it's also going to be taking the array and returning if we find,
>> Maximiliano Firtman: A todo that is equals to the, by the way, I think I have a problem here that we will solve later.

[00:07:05]
Because what we receive here to call equals, okay, the problem that we have on delete a list is that later, I think that when we are deleting, we don't have the item, we have just the text. So if we call equals, okay, when we get the equals here, the problem is that it's expecting an object, not a string, unless we change this equals and check the type, if it's an object or if it's a string.

[00:07:38]
So maybe you're not following yet what's the problem because we didn't code the other part. But I mean, right now, I think that item can be just the text. Let's just clarify this by changing the name, okay? So because of that, for now at least, then later we can change that, we can say, hey, let's check if the text is, wait a minute, why?

[00:08:07]
No, I'm doing this wrong, this is this. I'm just going to check if the text is equals to the text. So I'm manually checking the text here, okay, just that property. And something similar should happen here. So let's call this todo_text, so it's not gonna be the same problem.

[00:08:29]
So I will check for every todo if the text is equals to the todo text we are looking for, okay? I think we should be good for now. There is one more thing that is important. Remember, this class is implementing the observer pattern, right, because we apply the mix-in at the bottom.

[00:08:55]
That means that we're expecting something. We're expecting observers to observe our list. And when you apply observer, it's not just managing the observers, removing the observer, it's also notifying the observers. So it should notify my observers when my data changes, okay? In my case, well, the data changes here in replaceList, so I should call notify.

[00:09:25]
And again, do we have a notify method?
>> Maximiliano Firtman: Yes or no? Well, actually, it depends, that's a good answer here. So it's not actually written in the class, we are burying checked in that method through the mix-in, so I can execute this. So then I also should notify, also when we delete, because we are changing the list and when we are adding, probably in the if, only when we add something.

[00:09:58]
So remember, this notify will actually use the observer pattern, and it will broadcast to all the observers that something has been changed, yeah?
>> Student: The duplication of the Array.from lines in each method, is there a drier way to do that or is that not a real big issue.

[00:10:24]
>> Maximiliano Firtman: I mean, it's not that big a issue, we could create a method that will do that in every case. I mean, Array.from will create an array on the fly. And because this is dynamic data you're changing, I mean, we cannot create an array and keep it consistent with the set, okay?

[00:10:43]
So of course, we could get out of the set and directly work with arrays and we will not need that change. So I'm saying, instead of using a set, if you change here with an array, then you don't need those array's declaration. And if you wanna simplify that part, you can just change that and data is going to be an array directly, okay?

[00:11:09]
But you won't have that security of the set that won't add the same element twice cuz you have that, okay? But I don't think that adding a method here will make any difference, I think it's gonna be the same. Because this is already a method call, we are just changing one method call with another method call, it's not gonna be different, okay, make sense?

[00:11:38]
Okay, so I think that our classes are ready to be used.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now