Flatiron Phase 1 Blogpost - Codewars
Tags: javascript, beginners, webdev, programming
Published: 2022-07-28 16:24:44

As someone who plays a lot of video games, I've heard the term "spaghetti code" used to describe a game that has had so many people work on it that the code is borderline unreadable. This never really made sense to me, until I truly learned how many different ways you could code a solution to one problem. 
I've tried to get into coding many different times throughout my life, (all met with failure) so I was pretty nervous about diving into javascript for class. I knew that compared to languages I had tried to learn previously, the syntax was much simpler, but learning new things can still be stressful, especially for me, as I have a habit of giving up easily.
Thankfully, it also turns out I have a habit of getting distracted and playing around with codewars, something I actually think really helped me understand the basics of working with variables through the use of array manipulation and iteration methods. Not only did it do this, but I also found that looking at the solutions from other, smarter coders had motivated me to do even more research and implement new methods that not even the Flatiron School had told me about into my code. I was developing _my own_ way of coding things.
 
For example, the Array.from() method has become one of my go-to tools for creating arrays with values derived from variables outside of the scope of whichever function I'm calling it in. Not only that, but it's also great for making reference arrays, the length of which can be dynamically altered based on pre-existing variables.

I think refactoring code has become something that's way easier for me to do specifically because of codewars; you can code a solution to a problem, look at other solutions, and use the new knowledge you gain from research to write an even better solution. As an example, here's a task a did a few months ago:
![codewars prompt](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6efn0varp6b8w5q07au.PNG)
Here was my first solution:

![first solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn8yqgynf22afsuxcsgz.PNG)
In this solution, the first thing I do is create a reference array as a tool for later code by using a spread operator on the text argument, which has all been converted to uppercase. I call this array "refText". I then create another array, one which we will be pushing strings into, and then returning as the solution. I simply call this array "arr" and initialize it with one variable, the text argument (set to uppercase) because I know that no matter what, the first item in that array will be the text argument set to uppercase. Finally, I call a for loop that iterates over the length of the text minus one. For each iteration, the loop uses .shift on the "reftext" to remove the first item (the first letter), and pushes it onto the end of the array. After that, the loop simply joins the array, and pushes it onto the end of "arr". 
Now this works, and it uses some pretty simple methods to get the job done, but as I said, one of the main draws of codewars to me is the way the website incentivizes you to refactor code, so here's my second, shorter solution:
![second solution](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r4nxar9lokv6no97qni.PNG)
In this solution, all I'm really doing is returning an Array, but since I'm using an Array.from, I can do quite a lot to this array that I'm returning, all in one line. The first argument is an object that Array.from uses to dictate the length of the array. Since I know that the solution array will always be the length of the string it's being fed, defining that length is as simple as using text.length. Array.from can also take in a map function if you need to iterate over the array, so I use a little trick I learned after looking at other solutions to the problem. Instead of meticulously removing elements from the beginning of a string and pushing it to the end, I combine the text argument with itself, thus creating a string that is just the text repeated twice. Now all I have to do is return a string that samples from the repeated string, using the map function's index element to slice the repeated string at different points for each iteration. If that's confusing, this image should provide a visual indication of what I'm basically doing to the repeated string. (the text in red represents what part of the string is being added to the array at each given iteration):
![string example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0s7ljnls2qqhp5524c40.PNG)
This is just one of many examples of things I learned with this approach.
Through this entire phase, I've felt my confidence when it comes to learning new languages improve dramatically, which is great because as someone who wants to eventually dive into game development, one of the biggest barriers for me has always been learning new syntax. I've come to find out that the internet has an abundance of resources that not only teach you, but paint a picture of the broader coding world that I had not had before, that being one of _individuality_ and _collaboration._ After seeing how many solutions there can be to one problem, it really hit me that this is an art form. Like drawing (a frequent hobby of mine), the product of a programmer is something that not only embodies their specific way of coding, but also what they've learned from others.
I guess that's why spaghetti code exists.