On the Usefulness of “State” in JavaScript
By: Andrew Lahr
Tags: Programming, Coding, JavaScript, Flatiron School

What is “state?” How is it useful? How’s my own state? Actually…scratch that last question.

It’s not a huge stretch to say that I’m one fish in a sea of thousands subjecting themselves to the physical and psychological turmoil that comes with a six-month, full-time coding boot camp.

Having just completed my 4th of 5 total projects, I can honestly say that my own “state” has never been more…volatile.

I was lucky enough, however, to have recently spoken to a friend who is far, far, more familiar with the inner-workings of JavaScript than I. And when I let him know that I had a problem with certain DOM elements appearing when they shouldn’t, he let me in on the well-known secret that is the power of “state.”

I wouldn’t, and didn’t know this though, as this particular project was built using vanilla JavaScript, and we haven’t even scratched the surface of REACT at this point in our curriculum. Anyways…back to the problem I had and how he helped me find a solution.

My problem was simple. I had a few buttons that I didn’t want showing up once the user clicked a button on the main page, bringing them to a new page that contained a list of applications associated with a given company. Needless to say, I had no idea how to hide these elements without explicitly “hiding” them on the DOM, which was not allowed for this particular project.

When I presented this problem to my friend though, he was quick to ask me whether I was utilizing “state” to dictate whether certain DOM elements were appearing on the page.

He began to explain the power of setting and manipulating “state” as a way to dictate which elements appear on a given page.

In my case, I simply needed to set the Window state to “true” as an initial value at the top of the program, and then adjust that state manually with each relevant function to show the elements I wanted displayed.

This particular project is an app designed to help me in my job search after graduation. It will track all of the applications I have out at any given time, rendering all the applications I want to see on the homepage page and company-specific applications on each company page.

Above, you can see that my index.js file establishes the state of the Window as “true.” This was used as a baseline that could be manipulated as I called more and more functions throughout the app.

The most important area where I utilized state was in the rendering of each company’s page that listed each application associated with that company. On the main page, I wanted the user to be able to click a button that said “view/edit application,” but since I was reusing Company methods that appended to the DOM throughout the program, I had to find a way so that each company’s page didn’t show the edit/view button. So I ended up manually setting Window.state to “false” when rendering the company page for each company (see below).

Below is the main page containing each company and its applications when the Window is set to true…

As you can see, the view/edit application buttons are clearly visible. But when I set Window.state to “false” and load a specific company’s page…

You can see that the target company’s page (in this case, Target) shows all of its associated applications, but doesn’t show the view/edit application button. That wouldn’t make much sense, since we’re already on the page that lets us view and edit the company’s applications.

What I’m trying to say here is that the power of state should never be overlooked, even when using vanilla JavaScript. It can be a very powerful tool in customizing what DOM elements you want the user to be able to see and manipulate.

I’m sure that I’ll see a lot of more of this in the coming weeks as we dive into REACT, but I definitely got a taste of just how important state can be when building out beautiful, responsive JavaScript applications.

Anyways…time to give my own state a bit of a rest. Do yourself a favor and experiment with the concept of “state” in JavaScript. Trust me when I say that doing so will elevate your JavaScript apps to the next level when it comes dynamic and simplistic DOM manipulation.