State in JavaScript – What Is a JavaScript State?
A state is the data a stateful program is managing.
In JavaScript, a variable is a memory for storing data. And the variable's value is the state. In other words, a variable is like a diary, while a state is the data logged into that diary.
What Is a Stateful Program?
A stateful program is a program whose output depends on external states (events).
Whenever a program is stateful, it means that the program manages (mutates) one or more states.
For instance, consider this stateful program that outputs a user's TV channel choice:
let oldChannel = 5;
let currentChannel = 11;
function changeTVChannelTo(newNumber) {
if (typeof newNumber === "number") {
oldChannel = currentChannel;
currentChannel = newNumber;
return `Channel changed from ${oldChannel} to ${currentChannel}`;
}
}
// Change the channel of the TV:
changeTVChannelTo(48);
// The invocation above will return: "Channel changed from 11 to 48"
In the snippet above,
oldChannel
andcurrentChannel
variables are the memories used to store states.- The variables' values are the states.
changeTVChannelTo()
is the stateful program used to manage the states.
- The states inside
oldChannel
andcurrentChannel
will change based on the arguments passed to the stateful program. For instance, when we passed in48
to the program,oldChannel
's state changed from5
to11
, whilecurrentChannel
's state changed from11
to48
. - The opposite of a stateful program is a stateless program.
What Is a Stateless Program?
A stateless program is one whose output does not depend on any external event.
Whenever a program is stateless, it means that the program does not manage any state.
Therefore, each data you input into a stateless function is processed independently of preceding inputs—because the program has no record of previous data inputs.
For instance, consider this stateless program that outputs a user's TV channel choice:
function changeTVChannelFromTo(oldChannel, newChannel) {
if (typeof oldChannel === "number" && typeof newChannel === "number") {
return `Channel changed from ${oldChannel} to ${newChannel}`;
}
}
// Change the channel of the TV:
changeTVChannelFromTo(11, 48);
// The invocation above will return: "Channel changed from 11 to 48"
In the snippet above, changeTVChannelTo()
is a stateless program—as it manages no event.
In other words, the function is independent of any external data.
Overview
This article taught us that a state is an event a stateful program is managing. We also discussed how JavaScript uses variables as states' memories. And how it interprets a variable's value as the state.