3 Things I Learned Building My First JavaScript App

As a newbie to the JS and coding world, I was very overwhelmed not only with absorbing the new language, but also ensuring that each line of code I wrote made sense. Basically, I had no idea what I was doing, but I was ready to tackle it head-on!

And of course, as part of the learning process, I wanted to start keeping a mental list of things to watch out for, and best practices to implement in further projects. I think that’s a pretty normal thing to do, right? There are plenty of ‘best-practices’ resources out there online, but I thought I’d share some of the ‘I should do this instead’ scenarios I bumped into when building my first app.

1. Repeating Code.

I found myself looking up values deeply-nested in objects, and kept writing the same thing over and over each time. Creating a variable for that helps save a lot of time remembering where each value is located, and shortens your code a bit.

For example, for our burrito-building app, we had a parent object holding a number of ingredient objects. To access one of the ingredients’ calorie amount or names, we’d have to write something like this:

burrito.ingredients[ingredient].calories; burrito.ingredients[ingredient].name;

Instead, we shortened it to this, which saved a lot of time and code:

var ingredientInfo = burrito.ingredients[ingredient]

2. Functions should only do one thing.

We were using a function to add the number of calories together for the selected ingredients, and we thought it would be a good idea to use the same function to remove calories. I learned however, that having a function named ‘addCalories’ should only do just that, add the calories, not subtract them. Sure, I had to write more code to create a function that removed calories/ingredients, but overall it’s much cleaner and easier to read if someone else is new to my code, and makes it easier to debug!

3. Calling the same function all the time.

After we learned that a function should only do one thing, we created a function for basically everything. However, after creating more and more functions, we realized that we were calling some of the same functions at the same time.

For example, the addCalories function would always come after the addIngredient function, which would display the checkmark over the selected ingredient and add the name of the ingredient to the page. We figured, hey, since they’re always being called one after another, shouldn’t we either a) call the second function inside of the first function or b) combine them? And that’s what we did, we combined them. We now only have 2 functions: addIngredient and removeIngredient.

So that’s that! It’s easy in the beginning to get lost in your own code, considering you barely understand what you’re doing with a brand new language. But just remember that it’s always important to keep your code clean and ‘legible’; not only for others to read, but also for yourself. Just like when you scribble something really fast with pen and paper, if you don’t remember what you wrote, you might have a hard time deciphering your chicken scratch a week later.

P.S. Want to find your burrito soulmate? Try out our app: http://burritotinder.club

& Feel free to check me out! — @meaganpau // http://meaganpau.com