State in Programming: Useful Explanation with 2 Examples
Tags: programming, javascript, functional, webdev
Published: 2021-08-27 09:55:28

A **state** is the specific data a [stateful program](#what-is-a-stateful-program) is managing.

> **Note**
>
> In [JavaScript](https://www.codesweetly.com/html-css-javascript), a variable represents the memory used to store data — while 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:

```js
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](https://stackblitz.com/edit/web-platform-ko9fxt?file=script.js)**

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.

> **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).

## 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:

```js
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](https://stackblitz.com/edit/web-platform-zomas1?file=script.js)**

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.

## Wrapping it up

In this article, we learned 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 is the state.

Thanks for reading!