Javascript & Analysis Paralysis

Some tips for untangling yourself when you’re new to the world of JS.

shrub-hub web page

Javascript is like the wild west. Or a pouty adolescent that has difficulty expressing themselves. Only able to utter “undefined” when something is not right. Semi-colons at the end of a line are very important — sometimes. Arguments? Functions will take ’em or leave them, no complaints either way. Here are a few tips and tricks for diving into Javascript, some of which I learned the hard way so you hopefully don’t have to.

The Analysis Paralysis Problem.

There are SO many ways to do things in javascript. During brainstorming sessions I was a hamster. Naively under the impression I was making progress— only to realize it had been hours and I had gone nowhere.

A huge impediment for me was just beginning. Not only are the application possibilities with Javascript endless, but the available approaches in tackling your program are equally infinite. With so many choices, I was frozen at the start. There are lots of great resources available for battling analysis paralysis. It’s quite interesting when you delve into the psychology of it all. (I also recommend The Paradox of Choice: Ted Talk with Barry Schwartz) It may take time to decide what works for you. I can tell you that my initial approach by typing rails new shrub-huband diving straight in was not a good idea. I quickly found myself stranded in my index.js file with no purpose, no direction.

Create a User Story.

Map out the flow of your application. Yes, this will change and that’s perfectly fine. List the features you know you want to include, along with some stretch goals. What do you want the user to do when interacting with your application?

1. Create plants, add these to the database.
2. Organize existing plants by creating ‘Collections’
3. Display collections
4. Stretch goal: Make a memory game, generating cards from plants in the database

Finally with some direction, I was able to start the coding side of things. Thus leading to the creation of rails new shrub-hub-2.0 --api . Since I was just using rails for the backend, to create an API, I didn’t need any of the views or other files helpful for when rails is used for the frontend. The --api tag skips generating unnecessary files, and includes gems like gem 'rack-cors' that helps handle Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible.

Too Many Functions to Function.

There are many ~fun~ ways to write a function in Javascript.

Set a variable equal to an anonymous function.

const someVariable = function () { 
  return //*code here
}

Or you could name it.

function nameOfFunction (){
  return //*code here 
}

Arrow functions are cool. They inherit this from the parent scope whereas the scope of other function bounds to the global one by default.

const someVariableToNameYourFunction = (arguments) => {
  return //* write your code 
}

//* Written on the same line an arrow function implicitly returns!
(arg) => arg * arg 

//* Only one argument? Go ahead and remove those parenthesis. 
arg => arg * arg

While some function styles can be used interchangeably, that isn’t always the case. I don’t recommend writing your functions the same way every time. Be intentional about a function’s purpose and design it thoughtfully.

<iframe src=”https://giphy.com/embed/gSBG2dUuRgvGPRQ6Jf" width=”480" height=”300" frameBorder=”0" class=”giphy-embed” allowFullScreen></iframe><p><a href=”https://giphy.com/gifs/gSBG2dUuRgvGPRQ6Jf">via GIPHY</a></p>

For example, when the mouse goes over an image of a flower, the care information displays until the mouse moves off. All of the information I want to display is stored in the element the event listener is attached to, so it was necessary for the callback to be an arrow function. Placing a debugger in displayCare we can check in the console that this is the plant that triggered the event listener.

the callback function for the mouseover event listener

The Fickle Semicolon.

You don’t need it until you need it. For most of this project I just completely disregarded semicolons, they felt superfluous and cluttered. Well, folks, they do in fact serve a purpose…sometimes.

So…Typically clicking the ‘make a collection’ button displays the form below.

But during an unfortunate refactor…The following happened.

Going back to the event listener for that button revealed that in changing

addPlantShowFormBtn.disabled = true      
collectionBtn.disabled = true      
plantCollectionButton.disabled = true

To utilize destructuring assignment instead.…

[addPlantShowFormBtn.disabled, makeCollectionBtn.disabled, plantCollectionButton.disabled] = [false, false, false]

Ruined it all. Adding semicolons to every line of that function fixed the problem and everything went back to business as usual.

Overall, I’ve come to decide Javascript is a pretty neat language. From its asynchronous processing to it’s “anything goes (almost)” mentality — there is definitely plenty to keep you on your toes. I look forward to gleaning a greater understanding the further I dive. But hopefully I’ve had enough of the hamster wheel.