Department of Redundancy Department

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

More To Explore

computer, laptop, work place-2982270.jpg
Code

Unlocking Wireless Communication: A Dive into the Bluetooth API

Wireless communication has become an integral part of our daily lives, and Bluetooth technology is at the forefront of this revolution, enabling devices to exchange data over short distances and creating a world more interconnected than ever before. At the heart of this technology lies the Bluetooth Application Programming Interface (API), a powerful tool for developers looking to harness the capabilities of Bluetooth in their applications. In this blog post, we’ll explore what the Bluetooth API is, how it works, and the possibilities it opens up for innovation in wireless communication.

lighthouse, beacon, atlantic-8578318.jpg
Code

Understanding the Beacon API: Simplifying Asynchronous Data Transfers

In today’s data-driven world, web applications often need to send data back to the server. Traditionally, this has been done using AJAX requests or similar methods. However, these techniques can come with a cost, especially when dealing with data that needs to be sent during the unload phase of a document, such as tracking and diagnostic data. This is where the Beacon API shines by allowing developers to send data to a server more reliably and efficiently.

Share This Post

small_c_popup.png

Need help?

Let's have a chat...


Login

Jump Back In!

Here at Webolution Designs, we love to learn. This includes sharing things we have learned with you. 

Register

Begin Your Learning Journey Today!

Come back inside to continue your learning journey.