This course has been updated! We now recommend you take the Hardcore Functional Programming in JavaScript, v2 course.
Transcript from the "Separating Mutation from Calculation" Lesson
[00:00:00]
>> [MUSIC]
[00:00:04]
>> 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 gonna help out.
[00:00:25] 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.
[00:00:47] So we're gonna make a function where you give it a div or something and it just shortens it down. Now in a real teaser you'd wanna 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.
[00:01:07] 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 gonna be using. But in this one we have, so how would this teaser work, the one that just goes out and changes things?
[00:01:27] 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.
[00:01:49] 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.
[00:02:02] 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.
[00:02:21] It just chops by a certain number of characters. If you had a real teaser that you wanted to test, great, how are we gonna 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.
[00:02:36] 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 gonna be introduced to those, but the point is I can just walk through.
[00:02:59] 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.
[00:03:27] 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.
[00:03:44] 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.