Summary

Web Application Development Lesson Summary

Key Points Covered

Handling Undefined Variables
- The importance of checking if variables (like Aerospan) are defined before using them.
- Introduced two methods to check: using an if statement and the AND (&&) operator to prevent runtime errors.
Using the AND Operator
- Explained how the AND operator short-circuits: if any condition is false, subsequent conditions are not evaluated.
- This provides a concise way to ensure that certain operations only occur when required variables are available.
Refactoring Code for Modularity
- Emphasized the practice of breaking down code into smaller, well-defined functions for clarity and maintainability.
- Suggested encapsulating functionality (like adding a new entry to the DOM) in a dedicated function.
Creating the addNewEntry Function
- Demonstrated the creation of a new function to handle the addition of new entries, enhancing modularity:
```
function addNewEntry(entryText) {
    // Create new element
    // Set its text content
    // Add necessary classes
    // Append to the entry list
}
```
- This function takes entryText as a parameter, defined outside and passed as an argument to promote better function usage.
Naming Conventions
- Highlighted the importance of using descriptive names for variables and function parameters to aid understanding of the code.
Testing Changes
- After refactoring, it is critical to test the code to ensure it still functions as expected.

Conclusion

The lesson focused on improving code quality through proper error handling and modular design. Following these practices enhances readability, maintainability, and reduces the likelihood of errors in the web application development process.

Video Transcript

Welcome to another lesson. Let's keep building our web application. So, one thing I wanted to mention before we continue. The last time when I did Aerospan in line 29 here, this assumes Aerospan is defined, but that... That could be a case where when I did the guide elements by class name sub0, that could be undefined. Because of that I have to do the ifAerospan on line 10. That thing also needs to be done for line 29. So, let's add ifAerospan is defined. Place the Aerospan class list at inside the block for that if. Just in case Aerospan was to be undefined, you would not get an error. Another way of doing this is using the double ampersand instead of having the if. You can simply do like this. So, this is like... It's called the AND operator. So, it tests the condition here. If this is true, it goes on to the other condition. And if all the conditions are true, then this whole statement will be true. But if any of the statements starting from the left, if any happens to be false, it stops immediately. It doesn't evaluate anything to the right. So, if Aerospan were to be falsely, in this case it would be undefined. Undefined is a falsely value. So, this condition would be false. Because this is false, it would not even check anything else because of the nature of the AND operation. This is logic, right? This comes from logic. This is the AND. But if this is true, it will continue checking everything that's changed via the double ampersand. In this case, going to be to the next one, is this value, true V, if it's not true V, if it's false V, it will stop right then and will consider the whole thing to be false. And won't. But for our purposes, we do this so that if Aerospan is defined only if it is a true V value, the condition is true, this statement will execute. If this is false, it will not execute this part of adding the class to the Aerospan to make the error disappear. Because there is no Aerospan to add class to. So, this is an equivalent way of doing this, if here. You can do it either way. Anyway, just wanted to show you that. Now, moving on, I would like to show you a way of improving the code. Usually when you find yourself writing a lot of code in one specific place, that becomes a mass pretty fast. So, usually when you program, you want to split things into separate modules. You want to think of modularity, and you want to think of separate functions that have a very well-defined meaning. A function that has typically one concern. You are responsible for doing this, and this only, and you do it very well. This other function is responsible for doing something else, and that's something else very well. So, that's a pattern, that's a very good practice to follow. One thing I can see right now is the part where we create the new entry and add it to the DOM. That could be one thing we could place in a new function. So, we can start like this. So, this one creates a new element. It does not depend on anything else coming before, right? It just creates a new element memory, and then it sets the content of that to the entry text. Now, entry text is something that we depend on that came before, on line 5. That could be as used as the input to this new function we are going to create. Now, new entry.classList.addEntry, that's not dependent on anything. And document.getIngList.id, that's not dependent on anything here in this particular area of the code. So, we can fix this whole thing, and we can move it to a function outside. I'm going to call it define function, keyword function. Let me call it add new entry. And I'm going to paste the code in between the body of the function that is the opening and closing curly brace. Now, we have this name of the function is add new entry. It has to take one single parameter, and that's the entry text, because the entry text, we got it from line, now the line 17, that's outside the scope of this function. So, there must be a way to communicate to the add new entry. And by the way, we need to call it in line 28, add new entry. We need to call the function right here. So, meaning, what does it mean? Like, you're going to say add new entry is calling this function, so it's going to execute the code that's defined in the body of this function. So, it's going to execute new entry, create the element, new entry text, new entry text. This is not defined here. This was defined outside 17. There's no way you can know about that. So, you have to pass this as an argument to add new entry. So, you say entry text right here. Now, we pass this value, new entry, entry text to the function add new entry. And that has to be defined as a parameter here in the function signature. And let's call it entry text. It could be any name you want, but that any name here, for example, if called ABC, you have to call everything that references it ABC. Obviously, ABC is not very good description, descriptive name. Always make sure to name your variables, parameters, arguments, or something very descriptive that when you get back to your code or anybody else, there are going to be a lot of other developers. They're going to see your code, they're going to understand right away what you mean. If you just put ABC here, it's going to take some time for whoever reads this code to figure out what whatever ABC is. So, always make sure to add a very good descriptive name to your variable names. So, entry text is passed here, and it goes there. It does change the text of this new div created in the memory adds entry class to the new entry and then finally appends the new entry to the div whose idea is entry list or element whose idea is entry list. The element does not necessarily have to be a div. I just know it's a div in this case, but just look in line 16. In any case, that's one refactoring, right? We could do and I'm going to save it and see if it still works. Always make sure that after making the change, if it still works as intended, so it's working fine. Click error, error disappears fine. So, it's fine now. So, we learn how to refactor that into a new function. And this function has its only concern is adding a new entry to the list. Right, it creates a new element, sets the text, adds the class for style and finally appends that to the list of entries. I think we're good for now. Let's take a break and I'll see you on the next one.