--- title: "State machine - Glossary | MDN" chunk: 1/3 source: "https://developer.mozilla.org/en-US/docs/Glossary/State_machine" category: "reference" tags: "web, html, css, javascript, documentation" date_saved: "2026-05-05T05:45:55.902114+00:00" instance: "kb-cron" --- * [Skip to main content](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#content) * [Skip to search](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#search) [ MDN ](https://developer.mozilla.org/en-US/) HTML [HTML: Markup language](https://developer.mozilla.org/en-US/docs/Web/HTML) HTML reference * [Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements) * [Global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes) * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference "See all HTML references") HTML guides * [Responsive images](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Responsive_images) * [HTML cheatsheet](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Cheatsheet) * [Date & time formats](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Date_and_time_formats) * [See all…](https://developer.mozilla.org/en-US/docs/Web/HTML/Guides "See all HTML guides") Markup languages * [SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) * [MathML](https://developer.mozilla.org/en-US/docs/Web/MathML) * [XML](https://developer.mozilla.org/en-US/docs/Web/XML) CSS [CSS: Styling language](https://developer.mozilla.org/en-US/docs/Web/CSS) CSS reference * [Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties) * [Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors) * [At-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules) * [Values](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference "See all CSS references") CSS guides * [Box model](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction) * [Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using) * [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout/Basic_concepts) * [Colors](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Applying_color) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides "See all CSS guides") Layout cookbook * [Column layouts](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Column_layouts) * [Centering an element](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Center_an_element) * [Card component](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook/Card) * [See all…](https://developer.mozilla.org/en-US/docs/Web/CSS/How_to/Layout_cookbook) JavaScriptJS [JavaScript: Scripting language](https://developer.mozilla.org/en-US/docs/Web/JavaScript) JS reference * [Standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) * [Expressions & operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators) * [Statements & declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements) * [Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference "See all JavaScript references") JS guides * [Control flow & error handing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling) * [Loops and iteration](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration) * [Working with objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_objects) * [Using classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_classes) * [See all…](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide "See all JavaScript guides") Web APIs [Web APIs: Programming interfaces](https://developer.mozilla.org/en-US/docs/Web/API) Web API reference * [File system API](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) * [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) * [Geolocation API](https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API) * [HTML DOM API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API) * [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) * [Service worker API](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API) * [See all…](https://developer.mozilla.org/en-US/docs/Web/API "See all Web API guides") Web API guides * [Using the Web animation API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API) * [Using the Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) * [Working with the History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API/Working_with_the_History_API) * [Using the Web speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API) * [Using web workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) All [All web technology](https://developer.mozilla.org/en-US/docs/Web) Technologies * [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) * [HTTP](https://developer.mozilla.org/en-US/docs/Web/HTTP) * [URI](https://developer.mozilla.org/en-US/docs/Web/URI) * [Web extensions](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions) * [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) * [WebDriver](https://developer.mozilla.org/en-US/docs/Web/WebDriver) * [See all…](https://developer.mozilla.org/en-US/docs/Web "See all web technology references") Topics * [Media](https://developer.mozilla.org/en-US/docs/Web/Media) * [Performance](https://developer.mozilla.org/en-US/docs/Web/Performance) * [Privacy](https://developer.mozilla.org/en-US/docs/Web/Privacy) * [Security](https://developer.mozilla.org/en-US/docs/Web/Security) * [Progressive web apps](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) Learn [Learn web development](https://developer.mozilla.org/en-US/docs/Learn_web_development) Frontend developer course * [Getting started modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Getting_started) * [Core modules](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core) * [MDN Curriculum](https://developer.mozilla.org/en-US/curriculum/) * [Check out the video course from Scrimba, our partner](https://scrimba.com/frontend-path-c0j?via=mdn-learn-navbar) Learn HTML * [Structuring content with HTML module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Structuring_content) Learn CSS * [CSS styling basics module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics) * [CSS layout module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout) Learn JavaScript * [Dynamic scripting with JavaScript module](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting) Tools Discover our tools * [Playground](https://developer.mozilla.org/en-US/play) * [HTTP Observatory](https://developer.mozilla.org/en-US/observatory) * [Border-image generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-image_generator) * [Border-radius generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Border-radius_generator) * [Box-shadow generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Backgrounds_and_borders/Box-shadow_generator) * [Color format converter](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_format_converter) * [Color mixer](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Colors/Color_mixer) * [Shape generator](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Shape_generator) About Get to know MDN better * [About MDN](https://developer.mozilla.org/en-US/about) * [Advertise with us](https://developer.mozilla.org/en-US/advertising) * [Community](https://developer.mozilla.org/en-US/community) * [MDN on GitHub](https://github.com/mdn) [Blog](https://developer.mozilla.org/en-US/blog/) 1. [Glossary](https://developer.mozilla.org/en-US/docs/Glossary) 2. [State machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine) # State machine A state machine is a mathematical abstraction used to design algorithms. A state machine reads a set of inputs and changes to a different state based on those inputs. A state is a description of the status of a system waiting to execute a transition. A transition is a set of actions to execute when a condition is fulfilled or an event received. In a state diagram, circles represent each possible state and arrows represent transitions between states. Looking at the final state, you can discern something about the series of inputs leading to that state. There are two types of basic state machines: [deterministic finite state machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#deterministic_finite_state_machine) This kind allows only one possible transition for any allowed input. This is like the "if" [statement](https://developer.mozilla.org/en-US/docs/Glossary/Statement) in that `if x then doThis else doThat` is not possible. The computer must perform _one_ of the two options. [non-deterministic finite state machine](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#non-deterministic_finite_state_machine) Given some state, an input can lead to more than one different state. _Figure 1: Deterministic Finite State Machine._ ![The machine transitions from state 1 to state 2 for input X and from state 1 to state 3 for input Y](https://developer.mozilla.org/en-US/docs/Glossary/State_machine/statemachine1.png) In _Figure 1_ , the state begins in State 1; the state changes to State 2 given input 'X', or to State 3 given input 'Y'. _Figure 2: Non-Deterministic Finite State Machine._ ![The machine may remain in state 1, transitioning to itself, or may transition from state 1 to state 2 for input X](https://developer.mozilla.org/en-US/docs/Glossary/State_machine/statemachine2.png) In _Figure 2_ , given input 'X', the state can persist or change to State 2. Note that any [regular expression](https://developer.mozilla.org/en-US/docs/Glossary/Regular_expression) can be represented by a state machine. ## In this article * [See also](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#see_also) ## [See also](https://developer.mozilla.org/en-US/docs/Glossary/State_machine#see_also) * [Finite-state machine](https://en.wikipedia.org/wiki/Finite-state_machine) on Wikipedia * [UML state machine](https://en.wikipedia.org/wiki/UML_state_machine) on Wikipedia * [Moore machine](https://en.wikipedia.org/wiki/Moore_machine) on Wikipedia * [Mealy machine](https://en.wikipedia.org/wiki/Mealy_machine) on Wikipedia