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

Kyle explains the difference between functions and procedures, giving the requirements for a function keyword element to be a function as opposed to a procedure. - http://static.frontendmasters.com/resources/2019-05-06-functional-light-v3/functional-light-v3.pdf

Get Unlimited Access Now

Transcript from the "Functions vs Procedures" Lesson

[00:00:00]
>> Kyle Simpson: So functions. What is a function? Is it just the function keyword? True story. In my book, remember I talked about the Functional-Light book, in my book I had started a repo, this is actually how it happened. I was in Poland, teaching, and I had people asking me to write a book about functional programming, but I kept saying no, no, no.

[00:00:22] I'm not qualified. I don't know how to do that. I'm the least qualified person as a matter of fact to write a book on functional programming. But I got this weird idea in my head I said, maybe I could write something about functional programming sort of from the perspective of how somebody learns it.

[00:00:37] Maybe that would be useful, so I started a repo. Empty, and I didn't tell anybody about it. And I did as I do with all of my books, which is everything's out there for free. I just started writing and committing to this repo, late at night in Poland.

[00:00:52] And I wrote a sentence at the beginning of chapter one. And that sentence basically said, almost verbatim, it said, functional programming is not all about functions. And I committed it. That plus a couple of other things that I committed. And remember I hadn't told anybody that I was doing this.

[00:01:12] Before I came back to the repo, because I had to teach the next day. Before I came back to the repo, somebody had found the repo. Several people had found the repo and somebody had filed an issue on the repo. And when I opened the issue, paragraphs of what are you doing, this is terrible.

[00:01:29] I cannot believe there are decades worth of pedagogy on the topic of functional programming. And you are completely spreading misinformation, telling people functional programming is not all about the function, it's all about, just tore into me. It hurt my feelings for about five seconds and then I smiled, because I realized I must be doing something right.

[00:01:52] If I upset the functional programming police then I must be on the right track. Now that sentence still exists, it's the first sentence of chapter 2, and it's been slightly modified to clarify. Because I had a whole plan of what I was going to say in Chapter 1 and I haven't written it yet.

[00:02:06] That was like my you know, my keyword, my buzz line, my catch him attention or whatever, right? That sentence now is the first sentence of chapter two. And it now says functional programming is not all about the function keyword. Because that's what I meant. I've been using function keywords all over my programs but that doesn't mean I've been doing functional programming.

[00:02:32] Here's a function called add numbers. It takes in an x, y, zz and a w, it adds those together to a variable called total and it prints it out to the screen. Well it's using the function keyword, But the question is, is it a function? And then we've got extra numbers.

[00:02:49] Which takes in some other inputs, the dot dot dot rx by the way, if you don't know that, that's the just gathering up everything into an array. So extra numbers seems to basically be calling add numbers, but adding in a few other values into it. Sort of wrapping around or calling this add numbers.

[00:03:06] With some of their inputs. So the question that we need to confront the most critical question we can probably answer in this entire course. Are those functions and if not, why not? So let's look at add numbers from them. It clearly does take some inputs X y z and W and it clearly does do something with those inputs.

[00:03:30] It adds them together into a total and it even prints it out to the console. Because about it to the Dom or whatever but it prints at the console. It's doing something that seems like at least a minimally-based level line that it's doing something with some input. So it's kind of like a function, right?

[00:03:52] Not exactly. Because the bar for being a function is higher than that. If you were thinking about this in Venn diagram sense, we've got this bigger outer bubble here. Of something, and we gotta figure out what that's called. And then there's an inner bubble inside of it of things that qualify as functions.

[00:04:11] And this particular add numbers is in the outer bubble, not the inner one. It's not a function, so what is it? Best term you can give for it is it's a procedure. A procedure is a collection of operations, a collection of things that you need to do in a program.

[00:04:29] We all use procedures cuz we all need to do stuff in our programs, okay? Just cuz it uses the function keyword doesn't make it a function. It at least makes it a procedure Procedures of course can take inputs, they can return outputs, they can do things like print to the console.

[00:04:48] They can be called multiple times. There's lots of benefits to procedures, but it's not called procedural programming. There's a whole thing called procedural programming, we're talking about functional programming which means we got to have functions so. What's the difference? Well, to understand the difference where you and we're actually gonna uncover this across the next several sections of our discussion here.

[00:05:10] We're gonna begin to understand that question, what is the function by first saying, a function not only has to take some input. It has to return some output. Not just print it to the console. It has to return it. In other words if it doesn't have a return keyword, it is most definitely not a function.

[00:05:33] So any functions that you have that don't ever return keywords, those are procedures. Now that's not a complete definition of function. We're gonna evolve that definition over the next, quite a bit of our discussion. And that evolution of that definition is not gonna change or replace or make that statement invalid.

[00:05:54] It's more like if I was holding up a rubix cube and if we looked at one side of the rubix cube, we'd only be getting the part of the story of the puzzle, right? Right now that's just one side of the Rubik's Cube. We got to look at all sides of the Rubik's cube to understand the puzzle.

[00:06:11] So number one, it's not only going to take some inputs and do something with it, it's got to return something, okay? What about extra numbers? It definitely has a return keyword. So is it a function? Well you notice that it's taking some inputs in this case x and then it's got a number 40 that's hard coded.

[00:06:31] And then the rest of any arguments are passed along in args. It's passing those along to this other thing called addNumbers. And whatever that thing returns, which from the perspective of 7 we don't know or care. Whatever it returns we return. So is extra numbers a function, it takes inputs, it does something and it returns some sort of output.

[00:06:52] You may be aware that in JavaScript all functions minimally return the undefined value. So it is returning undefined, right? We see online three and a half that there's no return value, so it's returning undefined. Well, there's a different side of the Rubik's Cube, which is extra numbers, is not a function, because functions can only call other functions.

[00:07:18] Functions can call procedures, or poop, they become procedures. It's turtles all the way down. Okay, if you have a thing that is not a function and it's called by something else, that pollutes that something else to not being a function. It makes it a procedure. It doesn't make it bad.

[00:07:37] It doesn't mean that you should delete it from your program. It just means it's not a function. And if it's not a function, it doesn't get to play at the party. Of all the functional programming stuff that we're gonna learn about. It has to be a function. That's the it has to be the number one if we're going to add one in one to get to.

[00:07:55] Like this is one of the characteristic identity things that has to be true is you can't do any functional programming with a thing that's not a function. You follow me? That sounds obvious, but we need to state that very clearly. It has to be a function for you to take advantage of functional principles.

[00:08:11] There's a lot of ways that people use things that look like functional APIs and they look like functional patterns. And they don't do them with those true, honest-to-goodness functions. And that's not really functional. Okay, it's masquerading as if it's functional. It's not really functional. So both of these don't qualify because both of these violate some aspect of what we mean about a function.

[00:08:37] It's not just enough that you have a key word there and just because it uses the word function, we should still call these procedures. So what about this one? Tuple. Okay? If you don't know the term tuple, just like you might not have known the word coding, you don't know where tuple.

[00:08:57] It sounds more complicated is it's just an array of elements basically. In JavaScript speak right. There's a more formal and other programming languages. But here you just think of a tuple as like two values in an array. So this function takes in an x and y and it produces a two element array a tuple.

[00:09:16] That has x + 1 in the first element and y- 1 in the second element. So if I call this tuple function. With the array five and ten, and I'm just doing some fancy stuff here to show you the dot to dot spread. Can I just pass five and ten, but essentially x is five and y is ten.

[00:09:32] And if I pass those two values in the tuple, it's gonna produce an array that has the values six and nine in it. Because five plus one and ten minus one, okay? So we're gonna produce an array of 6 and 9. Now look what I'm doing on line 5, I'm bringing back an array.

[00:09:52] But line 5 makes it clear that I don't actually care about. Hear about the array. Line 5 is using a de-structuring syntax, if you are not familiar with that. The de-structuring syntax says hey whatever array you get back, what I actually care about is the individual element. In this case, two individual elements.

[00:10:13] Give me those two individual elements, call them a and b, that's what I care about.
>> Kyle Simpson: So in essence what I am saying is as a programmer, what I'm communicating to the reader of my code is that tuple actually has two outputs here. I'm saying I don't care about the one array, what I care about is the two individual values in it.

[00:10:33] It's got two outputs. I'm going a little beyond the technical definition of a function to say It takes some inputs, and return some outputs. It can be one output, or in this case, depending on the style of coding, could end up being multiple options.