Check out a free preview of the full The Hard Parts of Functional JavaScript course
The "The Problem: Repetitive Functions" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Will demonstrates how to use placeholders as a function's argument and how this allows developers to apply the Don't Repeat Yourself (DRY) principle.
Transcript from the "The Problem: Repetitive Functions" Lesson
[00:00:02]
>> Will Sentance: Every one of these functions, Eric, as you rightly indicated by your border is almost exactly the same. What's the only thing that's changing, Eric, each time between these different functions? Yeah, the functionality, the thing that we're doing to what? To the each element of the array, first position zero, then position one, position two, one, two, three.
[00:00:31]
Every single one of them, is otherwise identical. Taking an input array, create a new output array. Loop through the input array to each element, do something different. Look at this. Do something different.
>> Will Sentance: That's all we're doing differently, otherwise, all the code's the same. First principle of functions, but also functional programming, don't repeat yourself.
[00:00:58]
Save it once, do it again and again. And that's exactly what we're gonna have to do here. How, Seth, when I go about, if I made my multiply by two function general by leaving a placeholder, so when I ran it, it could take it any number to be multiple by two.
[00:01:16]
What would I doing here, Seth, in an intuitive manner, no sort of fancy words, but like, intuitively, what would I do here, Seth, to save myself building up these damn functions each time?
>> Seth: Passing a closure to execute?
>> Will Sentance: That's not crazy to say, but keeping it simple, Sam.
[00:01:31]
>> Sam: Passing an additional argument.
>> Will Sentance: Which would be some functionality. Some functionality. Now in theory folk, just as Seth was trying to hint, and Sam as well, I guess I could do theory here, pass in multiply by two, and in theory here pass and divide by two. So, am I allowed to pass in little snippets of codes like that, in JavaScript?
[00:01:56]
Am I allowed to pass those around? [SOUND] I'm not allowed to. In JavaScript folk, the only way I'm allowed to store bundle up code, little snippet of code, and I can imagine I could pass in a string, you would imagine the language where you can just do this, and pass that in and it will fill that bit in.
[00:02:12]
Pass that, you'll multiply by two, and fill it in. No, in JavaScript, I couldn't do that, I can't take the multiply by two, leave that bit of the blank, like I left array a blank, and fill it in later on. No, no, no, no. In JavaScript, the only way I can bundle up code to be used later on, to be inserted into another function is to store it in a?
[00:02:39]
>> Function.
>> Will Sentance: Well done. [LAUGH] That's good. Exactly. We're breaking our principle DRY, we're repeating ourselves heavily. Eric was bored. What can we do? We can generalize our functions and we pause in our specific instruction only when we run, copy array, let's call it now manipulate, go over and do something.
[00:02:59]
We do not, in here, preset that we're going to double each element of the array. We're not gonna multiply by two, or divide it by two, or add three, we're instead gonna leave it a little placeholder, the word instructions, and just like we didn't say copy one, two, three, and multiply by two, we said copy array, and then we filled in that array when we ran the function.
[00:03:20]
So two, we're going to say copy, and do something, and leave a little blank instructions, and just like array becomes one, two, three when we end up running the code of the function, and we save it, it could be anything. We're not using it yet. When we run it, we better fill out the details, and we do with one, two, three for array, and instructions will literally be replaced with the word multiplyBy2.
[00:03:45]
So that anyway you see instructions and they're [SOUND] gone, and it's gonna say multiplyBy2, which, by the way, it feels pretty good. Array position 0, is gonna be the number 1. Instruction is gonna be multiplyBy2. MultiplyBy2(1) means run multiplyBy2 with the input of 1, the 1 will shoot into multiply 2, 1 by 2 returns out 2, and that multiplied by 2 input of 1 will evaluate 2, will become output 2, and that 2, pushed the output.
[00:04:21]
So let's walk through it line, by line, and see exactly what's happening here. But this is actually going to be one of the most important foundational principles, of everything else we do today.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops