The full video and many others like it are all available as part of our Frontend Masters subscription.

Brian Lonsdorf

Brian Lonsdorf has taught several workshops and training courses on functional programming with javascript. He'a a regular speaker at conferences and helps organize/host FP events around the Bay Area.

Brian Lonsdorf

SFJS Co-Organizer

A function that reads DOM elements and manipulates them can be difficult to test. This is because a test case must create mock elements to feed to the function. Instead, the function could be simplified to only manipulate a piece of text. This is easier to test and leaves the mutation of the DOM to another routine.

Get Unlimited Access Now

Joe Nelson: So the next one is separating mutation from calculation or at least isolating the places that mutation happens, because those are the tricky parts to reason about. Because the order that you do things matters. So if you can make most your code kind of pure, and then at the very end or wherever plug in the parts that change, it's going to help out.

So for instance in this case, the scenario here is kind of a simplification. So imagine you have a blog online and you have, oops, I made it advance the slide. Imagine you have a blog and you have the articles in your blog. And there is a front page and there's read more for each one and there's kind of a teaser where it shortens it.

So we're going to make a function where you give it a div or something and it just shortens it down. Now in a real teaser you'd want to break at the, not cut a word in half, or hopefully even not cut a sentence in half. But for the purpose of this simplification, our teaser function, you just give how many characters and an element on the page.

So we have teaser cut it down to 25 letters or whatever and do it to this div. And we so have these kind of imaginary functions. And some of them are not actually imaginary. We'll get them in our libraries we're going to be using. But in this one we have, so how would this teaser work, the one that just goes out and changes things?

It says set the text of a certain element where you're slicing the string down. So you get the text of the elements, actually I can point with my pointer. So this guy says grab the text out of the element. And then slice it down to size, from zero to the thing, and then take that and set the text of the element with the sliced down version.

I mean that's pretty simple, right? How are we even going to fix that up? It seems like that's about all you can do. But if we go down we see where's the mutation happening here? If I were to say over all the paragraphs on the page, make them a teaser.

So I'm saying map this teasering of 50 to those things, and the way we're able to do that 50 is actually a little complicated, but we'll get to it. If we're teasering all the elements, where does mutation happen? It happens at the teaser itself. So teaser, our teaser's simple.

It just chops by a certain number of characters. If you had a real teaser that you wanted to test, great, how are we going to test this thing? We actually have to have DOM elements again. We have to mock those DOM elements out in our test, the same way we had pretend to be time and change time.

In order to test that this teaser thing is chopping something down, in our test we have to recreate a fake DOM like you would, and apply it and check. So instead we could make the mutation much smaller, and the specific functions we have here like compose the stuff, you're going to be introduced to those, but the point is I can just walk through.

This, so here the teaser's a lot shorter. It's just slice itself and it could be more complicated but here it's just slice. And so the code that used to say take teaser, map it all over the over the p's, says map this new thing. It's a function which says take the text, teaser it, and then set it, and do it on all the paragraphs.

And if the specific functions we're using seem out of the blue you'll be seeing them more. The point is the mutation on one is happening on teaser and the mutation of the other's happening only on setText. Teaser doesn't go out and change the DOM. You're just given strings.

So, first things we recognize are separating inputs from just random other things, like arguments from environment, and here separating mutation from calculation. There are functions that all they do is calculate, and there are functions that change things about the environment. If you have some functional programming experience, this is probably a little slow for you, but that's just something I wanted to mention about separation.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now