Jun 28, 2021
The State within JavaScript
State is an important concept to understand for any kind of application development. Like many other coding bootcamp graduates, I initially encountered this ubiquitous computer science concept relative to its use within the React.js library. While having a solid concept of how state works within React is necessary for building web applications with the library, it is not a sufficient explanation of how state works within the broader context of computer science. To really understand the use of state within JavaScript it is important to examine how JavaScript traverses the paradigm divide between object-orientated and functional programming languages.
What is State?
Establishing, updating, and otherwise manipulating the “state” of a system is a core concept of computer science. Broadly speaking, state can be defined as the stored value for inputs of a given application. The sum total of all data stored within the an application’s variables and constants can be loosely thought of as the state of an application. Notably, the data stored in the state of variables are susceptible to alteration through out the course of the applications run time.
Simply put, the state of an application is all of the data the application is keep track of, and is necessary for the application to run. One common example from the web is how when visiting your favorite social media site you will need to log in before being able to catch up with your feed. Once you log in, despite the URL remaining the same, the content displayed on the site will update to your account. This change of rendered content is one example of a state change.
The concept of state is closely associated with object-orientated programming. Typically, within functional programming languages, best practice discourages programmers from altering state. However, because of the importance of state changes for building complex applications, thankfully, JavaScript has adapted state changes despite its status as a functional programming language.
JavaScript’s State
A common use case for state management within JavaScript is its ability to enable responsive user interfaces(UI) on website by manipulating the DOM. An example often used to illustrate how state can used to implement dynamic solutions to UI problems is a simple HTML <button> element which, on click, increments an integer counter.
The first step is to define a variable within which we will store our state. From here we will build out the rest of the functionality of our counter button by inserting functions responsible for updating and rendering state.
// define a variable to store statelet state = {
count: 0,
};
Next, I will set up a counter component which consists entirely of the HTML framework required for both displaying the current form of the state of the counter, as well as creating the <button> element which will update the state by increasing the count by 1 on click. (Also of note is the implicit return quality of the fat arrow functions.)
// set up counter componentconst counterComponent = (count) =>
`<div>
${count}
<button onClick="increaseCounter()">
Increase Counter
</button>
</div>`;
Render function which will re-render the count displayed on the browser every time a user clicks our <button> element. Importantly, because we are manipulating the DOM, the webpage will not need to reload — an essential aspect of smooth UI design.
// define a render function to update the DOM treeconst renderComponent = () => {
document.getElementById('app').innerHTML = counterComponent(state.count);
};
Unfortunately, as of JavaScript ES6, we do not have access to a built-in method for setting state like in React. For many reasons, it is preferred to not setState directly — which will be discussed when I go over how state utilized within React. For the purposes of the demonstration of state in ES6, defining a simple function to update state directly will suffice.
// set state directlyconst increaseCounter = () => {
let countPlusOne = state.count + 1;
state.count = countPlusOne;
};
The last step is in creating an event listener for our <button> which will call our <renderComponent> and <increaseCount> functions when a user actually clicks the <button> element.
// create event listenerconst button = document.querySelector('button');button.click(() => {
increaseCounter();
renderComponent();
});
Conclusion
JavaScript is surprisingly flexible when it comes to utilizing state, especially for a functional language. With ES6, there are even more elegant solutions for state management by utilizing classes. In the future blog posts I will explore how state works within the React library, and compare it to class based JavaScript. We will also explore the state management tools, such as Redux, which are commonly used within React to management state inside of large web applications.
