Help Imperative -> Functional style

Hello all, I am learning about functional programming style with Javascript and as an exercise I am trying to convert a function that is written in a more imperative style, to a more functional approach. I have a pretty good understanding of the concepts (currying, partial application, fn purity, side-effect minimization), however i am having a tough time applying them. I know I should be taking in more values as inputs instead of using vals outside the functions scope, as I said just having a hard time seeing how to do this and make them more composable. The animation function in particular calls ease with vals generated outside its scope. I know this is not advisable in the functional world. Been at it for hours with little progress, so any help would be hugely appreciated.

Code

Just some random thoughts, that probably won’t answer your questions.

First, this seems incorrect:

const ease = (d, b, c) => t => {
  // do stuff
};

let run = ease(duration, startPos, distance, timeElapsed);

Second, because of window and requestAnimationFrame your function will never be pure :slightly_frowning_face: Maybe you should choose some part of your code that doesn’t require DOM manipulations and doesn’t depend on browser stuff for practice.

Third, better way to learn functional approach would be to try some functional language like elixir (my mind was blown when I found out that elixir doesn’t have for loops).

And finally, you could just use:

html {
  scroll-behavior: smooth;
}