How to Use JavaScript Functions to Organize Your Code in a Pokémon App

Welcome back to AutistiCoder! If you’ve been following along, you know we’re building a Pokémon app from scratch using JavaScript. Today, we’re tackling one of the most powerful tools in coding—functions. JavaScript functions allow us to keep our code organized and reusable, which is a huge win as our app gets more complex.

In this post, we’ll break down what functions are, how they work, and why they’re so useful for creating efficient, readable code in JavaScript. Let’s dive in!

What is a Function in JavaScript?

In simple terms, a function is a block of code designed to perform a specific task. Think of it like a tool or a recipe. Once you define a function, you can “call” it whenever you need it, rather than rewriting the same code over and over. Functions can accept inputs (called parameters) and often return an output, making them flexible for a range of tasks.

In our Pokémon app, for instance, we can create functions to check a Pokémon’s health, greet a trainer, or perform other repeatable actions.

Creating a Basic Function in JavaScript

To create a function in JavaScript, we start with the function keyword, followed by the function name and parentheses. Inside the parentheses, we can add parameters. Let’s take a look at an example:

function greetTrainer(trainerName) {
    console.log(`Hello, ${trainerName}! Welcome to the Pokémon world!`);
}

Here, we’ve created a function called greetTrainer that accepts one parameter, trainerName. When we call greetTrainer and provide a name, it logs a personalized greeting to the console.

Using Parameters and Return Values

Parameters make functions versatile by allowing us to pass different data into them. Let’s say we want a function to check whether a Pokémon’s health is high or low. We can set up a function called checkHP with two parameters, pokemonName and baseHP.

function checkHP(pokemonName, baseHP) {
    if (baseHP > 50) {
        console.log(`${pokemonName} has high base HP!`);
    } else {
        console.log(`${pokemonName} has low base HP.`);
    }
}

In this function, checkHP evaluates the baseHP and logs a message depending on whether the HP is high or low. By passing in different Pokémon names and HP values, we can use this function to check the health of any Pokémon without writing new code each time.

Testing Functions in Node.js

To see our function in action, let’s add it to a JavaScript file and run it in Node.js. For our example, we’ll place checkHP in a file called pokemonData.js.

After adding the function, open your terminal, navigate to your app’s directory, and type:

node pokemonData.js

This will execute the checkHP function with whatever data you’ve entered, allowing you to quickly verify that it’s working as expected.

Why Functions Make Your Code Better

Using functions in JavaScript has several advantages:

Reduces repetitive code: You only need to write the function once and can call it whenever needed.
Keeps code organized: Functions help break down complex programs into manageable pieces.
Makes debugging easier: When each function has a specific task, it’s easier to isolate and fix issues.

What’s Next?

Now that we’ve covered the basics of functions and how they help us organize code, we’re ready to move into React components and HTML elements. In our next post, we’ll explore how to use these tools to structure our app visually and display Pokémon data effectively.

Functions are essential building blocks in JavaScript, and as we continue to add more functionality to our Pokémon app, you’ll see just how powerful they can be. Thanks for coding along with us!

By covering functions in this blog post, we’re helping new developers understand the essentials of organized and reusable code. If you’d like to see this tutorial in action, be sure to check out the video on AutistiCoder’s YouTube channel and follow along with us as we continue to build our Pokémon app from the ground up!

Additional menu