I started learning JavaScript at FlatIron School almost two months ago. After learning JavaScript three years ago, I thought I would breeze through this phase. Little did I know how quickly things can leave your brain. At the beginning it was rough to get back into something I haven't done in three years. Once I got the hang of it, it felt like riding a bike. The main the I noticed about this program is the way they teach code. The last program I did taught me "cool" and "fancy" things I can do with code to make a website look neat. This program is actually diving in how the code works, giving me a better understand of when and how to use certain methods. For example, instead of just teaching me what .map() does, I now know how to build that code from scratch and exactly how it works under the hood.

I find it fascinating that there are always endless ways to solve one problem. This blew my mind when for loops pretty much became extinct in my code when I learned different ways to iterate through arrays and objects.

To iterate through this array:
Const arr = [1, 2, 3]

This code:
for (let i = 0; i < i arr.length ; i++) {
console.log(“Hi”)
}

Became this code:
for (i in arr) {
console.log(“Hi”)
}

Which became this code:
arr.forEach(() => console.log(“Hi”))

As you can see as I learned more through this program, I am able to not only shorten my code, but also make it easier to read.

Another amazing thing I discovered about JavaScript is how much you can do with such little code. A simple click event in one to two lines of code will make a button come to life! JavaScript methods like .filter() and .reduce() can do a ton of code with just that one word. Our code can shrink as we learn more as seen above. I think nothing compares to the power of APIs. APIs are some of the easiest and best ways to expand your code. It’s amazing that the coding community shares and uses each others code to give and send information. I can have every name, type, number, stat of every Pokemon to exist at my finger tips with a simple GET request. That’s exactly what I did with my Phase 1 project, until I hit a bump in the road.

As frustrating as it is, I think debugging is my favorite part about coding. It’s what coding is all about: problem solving. In my Phase 1 Project, I had a huge bug which was not allowing me to move forward in my project. I looked through my code over and over again and saw nothing wrong. After a lot of googling, I finally came up with a possible solution. Here is the code with my bug:

function handleNewPoke() {
//Fetch Pokemon
const randomPokeNum = Math.floor(Math.random() * 151)
fetch(https://pokeapi.co/api/v2/pokemon/${randomPokeNum})
.then(res => res.json())
.then(function(data) {
const pokeName = data.name;
const pokeImage = data.sprites.other["official-artwork"].front_default;

      //Handle Form
      guessForm.addEventListener('submit', function(e) {
          e.preventDefault()
          const userGuess = guessForm.guess.value.toLowerCase();
          console.log(userGuess)
          if(userGuess == pokeName) {
              console.log("correct")
          } else {
              console.log("incorrect")
          }
        })  
    })
}  

When my handleNewPoke() function runs, I am fetching information from an API and getting a name and image. I then have an event listener on a form which tells me if my guess equals the name of the Pokemon I fetched from the API. I found that every time I ran this function I was adding a new event listener. If this function ran 5 times, I would have 5 event listeners on that form. So even if my guess was correct, it would be incorrect for the other 4 event listeners. I didn’t know event listeners worked that way!

My solution was taking that event listener and putting it outside the function. The only issue is I needed that pokeName variable from the GET fetch request to compare it to my guess. I expanded the scope of pokeName by creating it outside the function and changing its contents within the function. I used many debugging tools to come up with this solution. I used console.log(), the Node.js debugger, and Google!

I was very proud of this project because I think it really shows off everything I have learned in the past two months. While I felt comfortable writing some JavaScript before, I know feel like I know exactly what my code is doing under the hood. This allows me to write my code faster and problem solve easier. My code looks like something I can read and immediately know what is happening, instead of a bunch of random letters and numbers on a screen.