---
title: "Discussion on \"Untangling your Logic using State Machines\" | Hashnode"
description: "Discussion on \"Untangling your Logic using State Machines\". You may find this article useful if:\n\nYou can read JS / Object oriented languages (Python, C++, C#, Java, etc)\nYou are familiar with writing functions (https://stackoverflow.com/a/4709224)\n\nIntroduction\nA few weeks ago, I was working on an applicatio..."
url: "https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Untangling your Logic using State Machines](https://blog.robruizr.dev/untangling-your-logic-using-state-machines?utm_source=hashnode&utm_medium=feed)

You may find this article useful if: You can read JS / Object oriented languages (Python, C++, C#, Java, etc) You are familiar with writing functions (https://stackoverflow.com/a/4709224) Introduction A few weeks ago, I was working on an applicatio...

Oct 8, 2021 · 6 min read · blog.robruizr.dev  
Read the article

-   [#javascript](https://hashnode.com/tag/javascript)
-   [#clean-code](https://hashnode.com/tag/clean-code)
-   [#vanilla-js-1](https://hashnode.com/tag/vanilla-js-1)

## Written by

[Roberto Reyes](https://hashnode.com/@axolodev)

@axolodev · Germany

  
[View profile](https://hashnode.com/@axolodev)

UI Engineer

Hello! I'm Roberto, a Mexican Web engineer. I enjoy learning new things related to development to then share them with others 😄 You can easily find me on Bluesky: https://bsky.app/profile/robruizr.dev!

## Responses 5

Markdown supported · ⌘↵ to post

[Jb Rocher](https://hashnode.com/@jibrocher)

[Oct 10, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/61631f8b53401f641ba10a20)

Great work ! It's always interesting to try implementing a pattern from scratch before switching to a fully fledged library like Xstate.

It got me thinking, I think you could take it one step further, while still avoiding any third-party dependency. Right now your `changeState` doesn't guarantee that you machine will be executed as described by your diagram.

For example nothing prevents you from calling `changeState('fadeOut')` from the state `invisible` which shouldn't be possible.

This could be solved by implementing the transition function from the [mathematical defintion](https://en.wikipedia.org/wiki/Finite-state_machine)

Something like that :

First you'd add the transition to your state defintion

```

const buttonStates = {
  // You could also map these to a number instead of the same string,
  // but this is personal preference as it's easier to debug.
  fadingOut: {
    show: "visible",
    hide: "invisible"
  },
  visible: {
    reset: "visible",
    fade: "fadingOut"
 },
  invisible: "{
    show: "visible"
  }
};
```

Then the transition function could be defined like so:

```

 const transition = (state, event) => {
    return buttonStates[state][event]
}
```

Which would allow you to call `transition(button.state, "fade")`

Might be overkill for your use case, but thought it was worth mentioning :)

[Rizel Scarlett](https://hashnode.com/@blackgirlbytes)

[Oct 9, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/6161270a8e8734462af5f356)

This was so informative! Love it!

[Roberto Reyes](https://hashnode.com/@axolodev)

[Oct 10, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/6161270a8e8734462af5f356#reply-6162965318374f25732726d7)

Hey Rizel! Thank you! These sorts of comments inspire me a lot 😄

[Rizel Scarlett](https://hashnode.com/@blackgirlbytes)

[Oct 9, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/616126878e8734462af5f34b)

Loved it! I learned a lot here

[Eleftheria Batsou](https://hashnode.com/@eleftheriabatsou)

[Oct 8, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/616001108e8734462af5e0f9)

That was a nice read [Roberto Ruiz](https://hashnode.com/@robruizr)! I liked how you walked us through the problem and the solution.

[Roberto Reyes](https://hashnode.com/@axolodev)

[Oct 8, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/616001108e8734462af5e0f9#reply-616051878e8734462af5e78e)

Thank you!! Happy that you liked it :)

[Turbopasi](https://hashnode.com/@turbopasi)

[Oct 8, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/615fd7198e8734462af5dc29)

Love it - I think I just learned something new here 🤙🤙

[Roberto Reyes](https://hashnode.com/@axolodev)

[Oct 8, 2021](https://hashnode.com/posts/untangling-your-logic-using-state-machines/615fc05db945c81a907cf8c7/comment/615fd7198e8734462af5dc29#reply-615fd87f8e8734462af5dc6c)

Thank you!! I'm glad you did :)