Check out a free preview of the full Functional-Lite JavaScript course:
The "Recursive Example" Lesson is part of the full, Functional-Lite JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Using a function that sums three numbers as an example, Kyle demonstrates how to take a non-recursive operation and add recursion. He also shows a cleaner version of the recursive function which utilizes ES6 syntax.

Get Unlimited Access Now

Transcript from the "Recursive Example" Lesson

[00:00:04]
>> Kyle Simpson: Here's the non-recursive way to sum up three numbers. I'm gonna loop over the list of them, have a running sum that starts at 0, just add them together. I end up with 12 at the end, pretty straightforward. How can we express the same program recursively? Well, this isn't as pretty as recursive functions usually look.

[00:00:29] And part of the reason for that is that there's some JavaScript nonsense here like changing arguments into the args and that sort of thing, that's kind of ugly. But I promise in the very next slide I'm about to show you a prettier way of expressing it now that we have ESX.

[00:00:46] But importantly here we have a base case. Our if statement is a base case in which case we return an immediate operation that doesn't need to call any other function. And then we have a recursive call. So we have our two characteristics that make this a recursive solution.

[00:01:04] And you'll notice that what I'm saying here is that the summation of any list of numbers is the same thing as the first number plus the summation of everything else. So if I then look at that question and I say the summation of that is the same thing as the first number plus the summation of everything else.

[00:01:22] That's what mathematically is so graceful about recursion is that oftentimes you can express it in a very simple concept like this plus everything else. So that's what we're doing here. Line 7 is args of 0, line 8 is the summation of everything else. Okay, so I promise that we could clean up some of the code, make it look a little bit more graceful using some ES6 techniques.

[00:01:48] This isn't an ES6 workshop but I like ES6. And I certainly like it in places where it helps us express code more clearly. So ES6 for the win. I have that ...args up in line 1. That's the REST parameter syntax, which collects all of the arguments into a real array for us.

[00:02:07] So I don't have to do that crazy .slice.call crap. And then on line 7, I have that ...operator happening again, but now it's used in a value rather than in an assignment context. In the value context, the ...operator spreads. So it's going to spread out the array of args.slice into the sumRecur.

[00:02:29] I don't even need to use apply here. Cuz automatically I'm going to spread out that array into those argument positions for me. ES6 is pretty cool, it allows us to express things without getting into the unnecessary details. All that array operation crap is useless. It's not helping us understand this solution.

[00:02:52] So here's a place where ES6 shines cuz it gets that stuff out of the way and lets us understand the solution better.
>> Kyle Simpson: And it's clearer to see where our base case and our [COUGH] recursive call is. All right, so let's practice recursion now, exercise 3. I'm sorry, you have a question for me now?

[00:03:12]
>> Audience: So this one, would it work with any number of parameters, right? Just not 3, 4, 5 but we give like 3, 4, 5, 6, 7, 8.
>> Kyle Simpson: Yep.
>> Audience: It would still slice it?
>> Kyle Simpson: Yep. It would have worked with as many parameters as we have, or as many arguments as we passed to.

[00:03:26] By the way, just as a little nuance nitpick, you've heard me use these terms already, but I just want to make sure everybody understands why I'm choosing the different term. The argument is what you pass in, the parameter is what receives it. So in the function declaration signature on line 1, args is a parameter.

[00:03:44] Line 11, the 3, 4, and 5, those are arguments. Okay, just make sure we understand. Arguments are passed in and assigned to parameters.