DEV Community: Quinn Sissler

Waiting on a Promise.. Async and Await in JavaScript

Quinn Sissler — Mon, 31 Oct 2022 00:02:33 +0000

Why use Async and Await?

By default, Javascript runs synchronously. This means each operation will wait to run until the previous operation is completed. For example, running these two lines of code:

will always result in this output in the console:

Line 1 is run first and Line 2 follows.

However, sometimes we need our code to run asynchronously. Enter: async and await!

Async and Await

Async and await are used with promises. Placing the async keyword before a function ensures that function will return a promise. The await keyword can only be used inside an async function. Anything after the await keyword tells Javascript to wait until the promise resolves and returns its results. So when may we want to use async and await?

Putting it in Practice

While completing our capstone projects for bootcamp, I was helping a friend brainstorm some possible ways for her app to function. She wanted a user to click on a dog they were interested in adopting and then fill out an adoption form. We decided to have the initial click event create a post request, essentially joining her user and the adoptable pup and then push the user to another page where they could input more information. However, her post function would push the user to the form page before the promise resolved, meaning we did not have the id for the newly created donation form yet and therefore could not use that id in our url and then again in our future patch request once the user completed their form. To solve this issue, we were introduced to async and await!

First, we added the async keyword to our function. We set our fetch to a constant (res) and added the await keyword in front of the fetch. We then declared a new constant (data) and set that to our res.json(), including the await keyword once more. The await keyword tell JavaScript not to continue on to the next operation until the prior operation is resolved.

We then created a function aptly named redirect that pushes the user to the page where they can update the rest of the form information. Lastly, we invoke the redirect function using the data we received from our promise after it is parsed to json.

Our final code:

Conclusion

In conclusion, async and await is a great tool to use when the need arises for JavaScript code to be able to run asynchronously. While today we saw just one great example of using async and await, there are many other ways it can be utilized, which I look forward to using in the future.

Dependent: :Destroy to the Rescue!

Quinn Sissler — Wed, 12 Oct 2022 13:53:13 +0000

Dependent: :Destroy

In Rails, Active Record associations can easily connect our models, allowing for common operations to be streamlined. (For more on Active Record associations, check out my blog post on them here!) One option that can be added to these associations is the dependent destroy option. When an object is deleted from your database, dependent: :destroy will call destroy on all associated objects for you.

Why use dependent destroy?

During Phase 3 of Bootcamp, my partner and I created a word game that asked the user to choose the word that matched the picture on the screen. Our User model has_many :games and each Game belongs_to :user. Our User was able to delete themselves from the database but every time we deleted a User, the rest of our application would break. We finally narrowed down our bug to having orphaned Game instances left in our database. Our orphaned Game instances no longer had an associated User, since that User was deleted. After solving this problem in a much more complicated way, our instructor introduced us to a much better and built-in option: dependent: :destroy.

Dependent: :Destroy to the rescue!

Dependent: :Destroy is added to your has_many association declaration like so:

With this option added, whenever a User is deleted all of the Game instances that are associated with that User are also deleted. Ensuring you leave no orphaned data behind is as simple as that.

Where do I add Dependent: :Destroy?

The dependent: :destroy option should never be added to a belongs_to association that is connected to a has_many association of another class. Doing so can lead to orphaned data. The dependent: :destroy option should be added to the association that you want to also be deleted when you delete the "parent" instance. For example, in another project I had instances of Trips and each of those Trips has_many :items. When I deleted a Trip from the database, I wanted all Items associated with that Trip to be deleted as well. To ensure this, I added the dependent destroy option to my Trip class, on my has_many :items association:

In summary, dependent: :destroy is a great and easily implemented option to ensure you leave no orphaned data behind.

Resources:
Rails Guide: Active Record Associations

Associate with Me: Active Record Associations

Quinn Sissler — Fri, 16 Sep 2022 12:57:23 +0000

Associate with Me!

Active Record is an incredibly powerful ORM library. One of the many ways we can use Active Record is to help us simplify our code when using common operations between two associated models. Let's consider a simple school application that includes a model for teachers and a model for students. Every teacher has many students and every student belongs to a teacher. Our table model could look like this:

Our model declarations without Active Record associations would look like this:

One to Many

The above example shows a one-to-many relationship. To create this association with Active Record, we would declare our models like this:

The belongs_to association creates a one-directional connection between the models. With belongs_to, each student in our example model now "knows" its teacher.

The has_many association is typically used in conjunction with the belongs_to association. With has_many, each teacher in our example model now "knows" its students.

With just one line of code added to each class, we now have many built in methods that allow us to effortlessly access related data.

What now?

Now we can use our built in Active Record methods to access related information.

We can ask a teacher about their students.
We can also ask a student about their teacher.

Let's create a teacher instance for Mrs. Smith:

Now to access all of the students that are associated with Mrs. Smith all we have to do is:

Yes! It's that easy!

Let's create a student instance for Johnny:

In order to find out who Johnny's teacher is, all we have to do is:

We can even take it a step further and access Johnny's teacher's name:

Conclusion

Active Record is a wonderfully efficient tool that simplifies our code when writing association methods for our associated models. Our example today barely scratches the surface on what Active Record can do and I encourage you to check out their documentation to learn more!

Sources:
Rail Guides

Filter Out the Fear: filtering arrays in JavaScript

Quinn Sissler — Thu, 25 Aug 2022 20:57:00 +0000

filter()

As a beginning developer, I felt intimidated by the filter method. While filter can be a daunting array iterator to learn, after mastering the filter method, I appreciate what a powerful and useful tool it is. If you are fearful of the filter method too, read on and let me help you filter out your fear!

Simply Put

Simply put, filter is a method that allows us to filter out one or more items from a larger collection based on certain criteria.

Let's start with an example of the filter method using a simple array of numbers:

For example's sake, let's remove the number 3 from this array using the filter method.

In the above example, we call filter on our array of numbers. Then, we state that for each number in our array, return all numbers that are not equal to 3. This line of code would return the following array:

Upping the Ante Marge

A simple example is great for helping us to see how the filter method functions but now let's use filter with a larger data set.

Here we have an array of objects. More specifically, it is an array of Harry Potter novels. Each book object includes the title, author, page total, and series number.

Let's pretend we want to read the 4th book in the series (which also happens to be my personal favorite!) but we cannot remember what the book title is. Let's use the filter method to help us:

We call .filter on our array of Harry Potter book objects. Filter will look at each book object, check to see if its series number is 4. If the series number is not 4, filter says, "See Ya!" and moves on to the next book object. If the series number is 4, filter says, "Come aboard!" and keeps that object in the array.

This is the filtered array that would be returned to us given the above code:

We have our filtered array with the only book object whose series number is 4, which just so happens to be... The Goblet of Fire!

Typically, we would set this new filtered array to a variable name like so:
This allows us to access the filtered array where we may need it. We'll see how this idea is utilized in our next example.

Go Big or Go Shopping

The previous examples have been enlightening but it's time to see the filter method work in the scope of something we are all familiar with: filtering clothing items by category. My bootcamp project partner and I recently developed a closet application using React that allows the user to filter their closet based on clothing category, i.e. tops, bottoms, shoes, etc.

Here you can see an example of our clothing item on the page, as well as the item object:

Utilizing a dropdown menu, the user can change which items are shown on the page based on the selected clothing category.

When a user chooses a specific category from the dropdown, the filter method is utilized to display only the clothing items of that chosen category.

Here is the code that makes this behind the scenes magic happen:

First, we set our new filtered array to a variable named "clothesToDisplay". This allows us to use our filtered array to render only the clothes with the chosen category on our page.
Next, we call filter on our original clothes array, which includes every clothing object we created.
Then, for each item in this clothing array, if our chosen category is "All", we want to return true. This means if there is no specific category selected, return all of the items in the original array.
Finally, we return only the items from our array whose category is the same as the selected category.

*It is important we use the toLowerCase() method because we are using the strict equality operator to compare our categories. Our clothing object's value for the category key begin with a lowercase letter, but our category dropdown options begin with an uppercase letter. We must call the toLowerCase method to ensure they are exactly equal when comparing.

Conclusion:

The filter method is an incredible array iterator that should not be feared! After learning how this method can be utilized in a variety of ways, I hope I have helped filter out some of your fear and you can happily filter whenever and wherever the need may arise!

Loop For a While: For and While Loops in JavaScript

Quinn Sissler — Thu, 04 Aug 2022 16:08:00 +0000

Looping Through Life

In the year and a half I took computer science courses in college, looping was my Achilles heel. There seemed to be so many different little parts and I struggled to understand how they all worked together. As I restarted my journey to become a software engineer, just the thought of looping filled me with dread. With this blog post, I am going to conquer my fear, further my understanding, and hopefully yours too!

What is a loop?

At its core, looping is a way to do the same action more than once. I always say "work smarter, not harder" and loops help us to do that! If manually programming what you want to do each time is like walking up the stairs, then loops are the escalator, doing most of the hard work for us. There are quite a number of loops you can use in JavaScript but today I will focus on a for loop and a while loop.

The For Loop

The for loop has 4 different statements. Its basic structure looks like this:

Initialization: This is what is executed first. It can start loop counters and more complex expressions, but often it is used to declare a counter variable. Basically, it tells the loop what it needs to know or do to start.

Condition: This is what tells the loop to continue! As long as this condition is true, the loop continues to loop some more. Once this condition is false, the loop comes to a complete stop.

Iteration: This is what is executed at the end of each loop iteration. Often it involves incrementing or decrementing the counter variable you set in the initialization part of the for loop.

The three above statements are all separated by a semicolon.

Loop Body: This is the code that runs each time you go around the loop.

Let's look at a simple example:

For this example, the initialization is setting the variable of lives equal to 5. I imagine this to be how many lives you might start with while playing a video game.

The condition in this example states as long as lives is greater than zero continue to run. That means if lives is one or more the loop will loop again. Once lives reaches zero, the loop will stop.

The iteration states that after every loop happens, decrement lives by one. So once a loop occurs, there will be one less life.

In this loop body, we are just console logging a string that lets the user know how many lives they have remaining.

The result of this for loop in the console would be:

As you can see, the first console log shows the initialization of lives at 5. The last console log shows lives at 1 which means our loop did not run when lives reached 0, which is exactly what we wanted.

The While Loop

The while loop is similar to the for loop but it only has two statements. Its basic structure looks like this:

Condition: This is exactly like the condition in our for loop. If this condition is true, the loop will continue. If this condition is false, the loop stops.

Loop Body: Just like in our for loop, this is the code that will run every time your loop loops!

Let's use our lives example from before but this time we will use a while loop:

Our while loop looks similar to our for loop but there are some definite differences:

1.) Our variable initialization (let lives = 5) is done outside of our loop.
2.) Our iteration (lives--) is set inside of the loop body.

Even with these differences, our results are the same:

Conclusion: I don't know about you but I feel more confident in my ability to understand and write JavaScript loops already! While there are so many more looping methods you can use in Javascript than I covered here, the for and while loops are a great place to start.

Resources:
Loops and Iteration
JavaScript While Loop
JavaScript For Loop