Mastering Loops in JavaScript with Our Pokémon App

Welcome Back to AutistiCoder’s Pokémon App Series!

Today, we’re diving deeper into JavaScript fundamentals to enhance our Pokémon app by learning about loops! Loops are incredibly useful when dealing with lists of data—like multiple Pokémon—and allow us to handle repetitive tasks efficiently. In this lesson, we’ll focus specifically on for loops, which are perfect for iterating over arrays or lists in JavaScript.

What Are Loops?

In programming, loops repeat actions until a specific condition is met. Think of it like repeating instructions until you’ve gone through every item in a list. There are a few types of loops in JavaScript:

For loops
While loops
Do-while loops

In our case, we’ll focus on for loops since they’re commonly used to handle lists and are ideal for iterating over arrays, like our Pokémon data list.

Using a For Loop to Iterate Over Pokémon

Let’s start by looking at a basic example of a for loop in JavaScript. Imagine we have a list of Pokémon names that we want to print to the console. Here’s the code to get that done:

let pokemonList = ["Pikachu", "Charmander", "Squirtle"];

for (let i = 0; i < pokemonList.length; i++) {
    console.log(pokemonList[i]);
}

In this example:

We have an array named pokemonList that contains three Pokémon names.
Our for loop iterates through each item in the pokemonList array.
The loop continues running as long as the index i is less than the length of the pokemonList array.
Each time the loop runs, it prints the name of a Pokémon to the console.

Setting Up in VSCode

To test this out, let’s add this code to our pokemonData.js file in the pokeapi project folder. Follow these steps to set it up:

Open your pokeapi folder in VSCode.
Go to the pokemonData.js file.
Add the pokemonList array and the for loop from the example above to the file.
Save your changes.

This code will enable us to see the output of our for loop right in the terminal.

Putting the Loop to Work in pokemonData.js

Here’s the full code snippet you’ll add to pokemonData.js:

let pokemonList = ["Pikachu", "Charmander", "Squirtle"];

for (let i = 0; i < pokemonList.length; i++) {
    console.log(pokemonList[i]);
}

This loop will print each Pokémon name in the pokemonList array to the console, letting you see it all in action.

Running Your Code in Node.js

Once you’ve saved your changes, open your terminal and navigate to your app folder with the following command:

cd Documents/pokeapi/app

To run the pokemonData.js script, enter this command:

node pokemonData.js

If everything is set up correctly, the loop will execute, and you should see each Pokémon name printed in your terminal.

Expected Output

If your code runs successfully, you should see output that looks like this in the terminal:

Pikachu
Charmander
Squirtle

This confirms that the for loop is working as intended, looping through each Pokémon name in the list and printing it to the console.

What’s Next?

Awesome job! Now that we’ve covered the basics of loops and used a for loop to handle a list of Pokémon names, you’re well on your way to managing data effectively in JavaScript. Next up, we’ll learn how to add conditions to our loops for even greater control, allowing us to filter and manipulate data as we iterate. Stay tuned for more!

Thank you for following along, and happy coding! Be sure to check out the video tutorial on YouTube for a step-by-step visual guide, and don’t forget to subscribe for the latest updates on our Pokémon app series.

Additional menu