Finite State Machines in JavaScript

[@pearlsswine]

I've read a few articles on this finite state machine and have struggled to get a grasp of it, but your video made it really clear what it is. Thank you!

[@perronemirko]

Agree

[@jornejongsma]

It's Friday night, 11pm and I had a few... And I'm watching this! I really feel addressed by this video: I'm in the third state, so I think I should dispatch myself to another state: SLEEP

[@yogesh.asthana]

Awesome video. Just needed it to know how can I implement state machine. Thank you.

[@Matanyo1]

Finally, somebody explains the state machine concept well! Thank you! I love your channel! Do you have any website?

[@SteveGriffith-Prof3ssorSt3v3]

I have no personal website currently. I do plan on launching some courses in the future likely through Udemy.

[@agent-33]

Your explanations are always the best.

[@mikaknuuttila2052]

This video gave me a great idea for a project at work. Thanks Steve!

[@SteveGriffith-Prof3ssorSt3v3]

Great. I just added a link to another code GIST in the description that has more properties and features.

[@mikaknuuttila2052]

@@SteveGriffith-Prof3ssorSt3v3 thanks teach!

[@pauloheres]

tks! Amazing explanation

[@taiiebehmohebi3427]

Hi Steve, I've used the concept of state machine as you explained, my codes are almost like yours, but when i use arrow functions in my states , the this key word refers to the window object and when i use classical definition of functions the this refers to the transition object inside of machine and i'm not able to use the changestate and dispatch functions that are declared inside machine, i would be grateful i you could help me about that...thanks in advance

[@SteveGriffith-Prof3ssorSt3v3]

That is what arrow functions do to `this`. kzbin.info/www/bejne/m4iniZqpfsyHfc0

[@MrHedy90]

Thank you!

[@sydneycamille1932]

Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Thank you very much!

[@koteswararaonukani1682]

Hi Steve , i am big fan of all of your videos could you please create playlist of Typescript videos thats very helpful for new JS framework learners like me or please suggest good tutorials or blogs out there. Thanks Steve!

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. Please add your request on my tutorial request video comments.

[@6ocram]

Thank you very much this is really useful :D

[@MrMarkgyuro]

thank you!

[@6365bharath]

Steve, what are the practical use-cases for Finite State machines on the frontend? Do we use this when there are so many if-else conditions and if our application can only have one state at a time?

[@SteveGriffith-Prof3ssorSt3v3]

React JS and other frameworks are built around managing state. There is a state object on each page. It has an initial state object when the page loads and then you can modify that object anytime you want. Each change to the state will trigger changes to the page and other functionality.

[@jimmyclawson3494]

Cool man

[@glebzaitsev6741]

Is there any use of const actions? Looks like this declaration is redundant. Other than that the great video, good job!

[@SteveGriffith-Prof3ssorSt3v3]

Using const will help you to avoid typos by providing auto-complete and actual error messages. Either strings or Symbols as the values work well.

[@glebzaitsev6741]

​@@SteveGriffith-Prof3ssorSt3v3 Thanks, i mean a diferent thing tho. I meant declaration of "actions" constant in dispatch function. You can use it declaring "action" in the next row tho, like const action = actions[actionName] which make sense. It is even highlighted as not used as i can see. I had exactly same questions reading this article: www.smashingmagazine.com/2018/01/rise-state-machines/ It wan't very clear. Anyway, again, i really liked your example and it is much clearer and easier to understand than written article.

[@RameenFallschirmjager]

Great example!

[@leeeric6292]

is there difference between this.dispatch and dispatchEvent?

[@SteveGriffith-Prof3ssorSt3v3]

Yes. dispatch is a method inside our State Machine object. dispatchEvent is a method in the Web APIs that allows us to trigger JavaScript Event objects on targets.

[@leeeric6292]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for your response and help, since I want to know more this.dispatch, I had search this term all day in Google , but it only give me dispatchEvent, do u know where I can get in the web ? Many Thanks.

[@leeeric6292]

@@SteveGriffith-Prof3ssorSt3v3 Today I go through this video again, I got what u mean. The function "dispatch" in this video is the name u defined, and the dispatchEvent function is the built API. Thanks.

[@DelPieroJoga10]

+1 subscribe

[@hansschenker]

It is not sane to test the drunkenState Machine!