JavaScript the .then / .when method.

Andrew Tamburino — Wed, 16 Oct 2024 15:27:56 +0000

Today, I was following a WordPress tutorial, and the instructor was demonstrating how to search the site using jQuery and JavaScript, specifically using the .then() and .when() methods. As I followed along, I realized that I wasn’t as familiar with these methods as I thought.

So, I did a bit of research, took some notes, and added them to my Obsidian notebook. To be honest, the notes are kind of rough—they look like something a fifth grader with the attention span of a squirrel might put together (which, let's face it, sometimes feels like me!).

But I figured, why not share them? If they help even one person, it’s worth posting.

Imagine this:

You're at school, and you and your friends make promises to each other. These promises are like saying, “I’ll finish my homework, and then we can play games.”

But here's the thing: sometimes it takes a little while to finish the homework. You might finish it fast, or maybe your dog eats it, and you never finish (oops!). JavaScript promises work the same way. It waits for something to happen, and then it says, “Okay, what next?”

Now, let’s talk about `.then()`:

The .then() method is like what you’ll do after the promise is done. Imagine you say to your friend:

“If I finish my homework, then we can play video games!”

But what if you don’t finish? Uh-oh, you can add a backup plan:

“If I don’t finish my homework, then we won’t play video games.”

Here’s how you would say this in JavaScript:

promiseToFinishHomework
  .then(() => {
    console.log("Yay! We can play games!"); // If you finished
  })
  .catch(() => {
    console.log("Oh no! No games today!"); // If you didn’t finish
  });

Now for `.when()`:

This is like when you’re waiting for a bunch of your friends to finish their homework so you can all play together. You’re like:

“When all of us finish, then we can play together!”

In real life, that’s called working together. In JavaScript, you use something called Promise.all() (which is just like saying "Let's wait for everyone to be ready!"):

Promise.all([friend1, friend2]).then(() => {
  console.log("We’re all done! Time to play!");
});

Summary (Super Simple):

.then() Is like saying “When this one thing finishes, then we’ll do something fun.”
.when() (or Promise.all()) is like saying “When everyone finishes their work, then we’ll all play together.”

So, JavaScript is just making sure it knows what happens next when promises are kept—or broken! 😄

So How Does It Know?

The promise doesn’t check the homework by itself. You tell it! When you create a promise, you decide if it’s resolved or rejected based on whether the task (like finishing homework) is done or not. The .then() runs when the promise is resolved, and .catch() runs when it’s rejected.

Example With Real Life Action:

Here’s a full example to see it in action:

let promiseToFinishHomework = new Promise((resolve, reject) => {
  let finishedHomework = true; // Change this to false to see the rejection

  if (finishedHomework) {
    resolve(); // Homework is done!
  } else {
    reject(); // Homework is not done!
  }
});

promiseToFinishHomework
  .then(() => {
    console.log("Yay! We can play games!"); // If the promise resolves (homework done)
  })
  .catch(() => {
    console.log("Oh no! No games today!"); // If the promise rejects (homework not done)
  });

Why Test-Driven Development (TDD) Is a Game Changer for Better Code

Andrew Tamburino — Mon, 23 Sep 2024 14:12:18 +0000

🧪 Exploring Test-Driven Development (TDD) has been an eye-opener! Writing tests before the code forces you to think through functionality and edge cases upfront. It’s a powerful way to build confidence in your code and ensure each feature works as expected before you even start coding.

Why TDD?

The concept of writing tests before code might feel counterintuitive at first, but it offers some key benefits:

Prevents overengineering: You only write the code needed to pass the test.
Early bug detection: Catch issues as early as possible, reducing troubleshooting time later.
Well-defined requirements: The tests act as a clear, actionable specification for what the code should do.

My Experience

Recently, my mentor had us walk through some files with pre-written tests. Our goal was to draft functions that met the tests and think through the process and the best approach.

In this exercise, I noticed a pattern: each test had a step to validate the string input. Instead of rewriting the validation logic in every function, I created a simple helper function to handle the validation for all the tests. This not only made my code cleaner, but it also improved efficiency.

TDD opened my eyes not just to writing better code but to thinking more strategically about how I code. It really drives how you can be more efficient in your approach.

How It Works

TDD follows a simple three-step process often referred to as Red-Green-Refactor:

Red: Write a test for a new feature or function. At this point, the test will fail because the feature doesn’t exist yet.
Green: Write the minimum amount of code to make the test pass.
Refactor: Clean up the code while ensuring that the tests still pass.

Have You Tried TDD?

Have you experimented with TDD in your projects? What were your challenges and wins? Let’s chat in the comments — I’d love to hear your experience with this methodology!

DEV Community: Andrew Tamburino