Skip to main content

State in JavaScript – What Is a JavaScript State?

A state is the data a stateful program is managing.

info

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"

Try it on StackBlitz

In the snippet above,

  • oldChannel and currentChannel variables are the memories used to store states.
  • The variables' values are the states.
  • changeTVChannelTo() is the stateful program used to manage the states.
Buy sketchbook for web design, app development, software engineering
note
  • The states inside oldChannel and currentChannel will change based on the arguments passed to the stateful program. For instance, when we passed in 48 to the program, oldChannel's state changed from 5 to 11, while currentChannel's state changed from 11 to 48.
  • 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"

Try it on StackBlitz

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.