As I have stated in previous posts, functions are a building block of JavaScript. One of the ways functions are used is to eliminate duplicate code. This is to abide by an object oriented principle known as DRY, or ‘Don’t Repeat Yourself’. This is the opposite of WET, or ‘We Enjoy Typing’. So we want our code to be DRY. You can use functions to reduce similar tasks into a function that performs the same task. This will reduce your code. Maintenance will be easier, upgrades simpler. Bugs will be reduced (I know…none of you have bugs in your code…right).
Let’s look at a scenario…imagine you want to purchase Packer tickets (Go Pack Go!). There are many different seats and prices based upon the location of those seats. We could set up code for each scenario…
Select section 132 seat 14, then charge $
Select section 674 seat 3, then charge $
Select section 125 seat 8, then charge $
Select section 310 seat 11, then charge $
Select section 101 seat 5, then charge $
This does not even include box seats!
As you can see, this would result in a lot of code! You should also see some similarities in each request above. We should be able to distill this down to a function. So let’s look at one possibility of a better way to select our Packer tickets…
[code lang=”js”]
function chooseSeat(section, seat) {
if (section === ‘x’) {
if(seat >= 1 && seat <= 50) {
// Charge a price
} else {
// Charge another price
}
} else if(section === ‘x’) {
// More pricing logic
}
}
[/code]
You could build your logic several different ways, such as a switch statement, etc. The point I want to make though is that now we have a function that will go through the selection logic for us and all we have to do is tie an event to our function as follows…
[code lang=”html”]
<button onClick=“chooseSeat(132,14)”>Reserve your seat today!</button>
[/code]
On a related note…’refactoring’. Many times in our coding, we build logic and functionality into our functions. As our code base matures, we notice violations of DRY and need to refactor our code. Refactoring is basically rebuilding our code to make it cleaner and easier. I challenge you to take a look at a past JavaScript project of yours and see if there are any functions that need to be refactored to abide by DRY.
Happy Coding!
Clay Hess
