One of the most common topics in programming is state. It appears in as diverse contexts as creating web applications through understanding scene rendering in game engines. Often described as simply as “a set of values” or in much more complex terms connected to mathematical representations of algorithms as state machines, it touches on many different things having to do with programming, but is abstract enough to not explicitly be a part of a single framework, library, or way of thinking about code.
Imagine a Vending Machine
When teaching the concept of state, no matter its connection to web or game design, I start with the same phrase: “Imagine a vending machine.” On a college campus or as part of most convenient stores, there is a vending machine. It is ubiquitous enough most people have interacted with one or seen a show or movie where people did. You put money in and get something out. Pretty simple, really.
A vending machine is a great metaphor for understanding state in programming.
To use a vending machine, you have to enter something. Usually people put in coins, swipe a credit card, or wave their phone near a sensor. The machine registers this and shows some amount. This is the initialization. Variables of some type are set to their initial values.
State starts with one or more things. This is the beginning set of values, instructions, or other data. It has to start somewhere, and the initialization is where state begins.
After money is put in a vending machine, the next step is to press some buttons or touch a menu. There is an interaction. Something happens. An action or event takes place. In understanding state in programming, this is something like a user clicking a button in a web application or a scene finishing loading in a game. Something happens — an interaction occurs.
The result of an interaction is often a state change. What values were set during the initialization are now changed as a result of the interaction. There is an effect of some sort.
With a vending machine, some amount of money is input, something is chosen from its menu or options, and then the amount of money changes. This is the effect of the interaction.
Setup some values, do a thing, and change the values as a result
Because of the diverse settings in which the concept of state occurs in programming, it can sometimes be helpful to tie its usage to a particular framework, language, or system. For example, the popular front-end web application React discusses state in relation to the lifecycle of its components. Unity uses State Machines for things like animations and character interactions, preparing the initial values and then conditions under which interaction happen and an effect occurs.
Yet, regardless of its setting and usage, the three core elements remain. To use state in any context involve initialization, interactions, and effects. As I joke with my students, at its core, any use of state is a matter of “setting up some values, doing a thing, and then changing the values as a result.” It really is as simple as that, in the end. Sure, some systems and framework do much around around these elements, but they remain the same regardless of code implementation or data representation.
Just like a vending machine. You put some money in, interact with it, and there is an effect of some kind.