Functional programming help/advice needed. The way I've been coding will no longer cut it

I’m at a point where I realize I NEED to fully understand and utilize the concepts of functional programming in order to write effective code and grow, but I get confused and am not sure where to start. I get it at its fundamental level, writing basic functions to use with higher and more complex functions. However, I never know where to start? I can always go back and refactor code but I want to be able to start writing functional from the very beginning lines of code and build off them. How can I learn how to take a functional programming approach from the first lines to the end, instead of from the last lines backwards? Does anyone have any resources for mastering functional programming, such as guidelines, blueprints, general rules of thumb, building patterns, or just approaches in general?

I’m working through the Pomodoro Clock project and realizing that the way I’ve been coding up until this point will no longer cut it. My clock is nearly fully functional and I’ve got it about 95% working except for a few bugs (ex quickly and repeatedly clicking the start button after pause will make it so the progress bar reads over 100% after the clock is finished) but for the most part and for straight forward casual use, it works as it should. However, I started feeling very overwhelmed by my code towards the end and found my self repeatedly getting lost in it. I run into a problem, then think up a solution, then have to go all through my code and make sure the solution is in all the little bits, and then what works in some areas and situations messes up others! I feel like I keep solving one problem and accidentally create another! Any resources of how to write solid functional code from the very beginning to avoid this mess?
Edit: Heres my code for anyone interested, its unstyled :

Thank you!

I don’t have any specific resources for you, but from personal experience, the process you are going through is the best resource to learn from. For me it was also the pomodoro project that was almost the same. I refactored and refactored and got confused and had an idea and refactored again and again… THEN I started to feel like I understood it (functional programming). Your progress will keep accelerating.

1 Like

Thank you so much for your reply! Its good to know that this is all apart of the process… Now that I basically have it completed, I’m going to read through other peoples project code and hopefully gain insight from it.

Learn Haskell, or Lisp. In JavaScript, we can write in a functional style, but it’s not really a functional programming language, so don’t get caught up in a quest for purity. Instead of chasing windmills, just focus on incorporating what little bits of the functional style you learn into your code. forEach, reduce, filter, and map should all see regular use as you transition into the more advanced, data-heavy projects. You’ll get into promises, and after a while, reactive programming. Don’t rush it, because it’s more crucial to get the fundamentals first.

1 Like

ah gotcha, I feel you on that. Am just feeling a bit frustrated, because although I’m proud that I completed the project, my code is a complete mess and I keep finding little annoying bugs. I know its not effective at all. I rarely use the built in functions you mentioned, maybe I should spend some more time playing and internalizing them. Might go back to the basic algorithm challenges and try to complete them all with those… hmm…

This comes back to that old Ira Glass quote about instincts and talent. It’s on the forum somewhere, but I don’t have the patience to dig it out :slight_smile:

Don’t concern yourself too much with the big picture best practices that the really visible and vocal people in tech discuss as the ‘One true path’…

For the most part, they are really talking to other experienced devs.

You can always have better practices in the back of your mind as you work, but don’t let them consume too much of your energy while you’re still learning fundamentals.

The good news is that you are starting to feel why the code you’ve written is problematic for you. This means you will appreciate and retain the better ways of doing things when you learn them, because they fix real problems you have.

If you haven’t come across him yet, MPJ’s YouTube channel Fun Fun Function is nominally about functional programming and his early videos are specifically about those higher level functions @PortableStick mentioned. Those videos alone haven’t been enough to really help it stick for me, but he is very engaging and he lays out some of the fundamentals. Plus you’ll learn a little ES6 too.


Well this can’t be a coincidence! I am doing the Pomodoro project as well, and i feel the same way as you do. I too spent a lot of time structuring my code, putting different sections of my code into separate js files for better maintainability, even went as far as reading up the sass guidelines to better structure my sass code. But as @AdventureBear and @JacksonBates already mentioned that we will learn through the process itself, and the fact that we are already concerned about refactoring our code for better maintainability and usability is evident enough to prove that we will only improve. Cheers!! :beers:

First of all remember that functions can be called from inside other functions and that you can provide arguments to your functions. In your pomodoro clock code you have some pieces of repeated code - often such pieces are good candidates for making them into separate function. And you always can ‘control’ them by providing arguments.

Also before you start actually writing code, try to separate your program into some logical parts. For example, if you’ll need to give users nicely formatted time you might want to make a separate function for this.

Using functional stile will make you to write less code and make your program more structured - so you’ll eventually start doing it instinctively, cause it’s just more convenient for you.

A few ideas:
Don’t declare all your variables with var. It is more efficient just to write:

var x = 7,
y= 3,
z = “some string”;

Don’t declare function expressions unless you need to. Instead of var x = function () {}, it is cleaner to declare function x () {}. Plus you know that you function will be hoisted as the code compiles.

Also, try to avoid multiple click events. You can set the data attribute on each button and then use the THIS keyword to retrieve the data-attribute on click. This way, you can create one click event handler to handle many buttons.