Today is the day that we finally start to put together all the pieces we have been learning in all of our past posts.  Today, we talk about functions in JavaScript. Functions are a very powerful feature that exists in almost every modern programming language.  In fact, an entire subset of languages, functional programming languages, use functions as their main way of reasoning about data. Technically, JavaScript falls under this category as well, though it is an impure functional programming language because it uses mutable data.

Functional Functions

So what exactly is a function? Put simply, a function is a piece of code that allows you to do “something” with your data. You may use a function an infinite number of times just by invoking its name in a similar way to variables. Unlike variables, functions have behavior and are complex data structures that perform tasks.

In JavaScript, we can define and invoke a function like so:

function-diagramIn this template example, notice that very general terms were used to describe what we are looking at.  This is because functions can take on many different formats, they can have many parameters (some of which can be functions themselves) and they don’t necessarily need to have a return statement. Though, you’ve probably noticed while working with your JavaScript console that any statement you input returns something even if it’s just undefined.

Functions as Arguments

We’ve discussed a few different functions prior to this and one of the best examples is our console.log() function. The console.log function prints whatever it’s arguments are to the console itself and returns undefined. Believe it or not, you may actually pass console.log() to itself like so.

This will print out "hello \n there" undefined "how are you doing?" undefined and then return undefined.  Note, \n is a way of splitting a string into two lines, it’s called the newline character with the backslash being an escape character (it “escapes” the string with whatever directly follows it). Let’s look at an example of a function to better understand how they are useful.

Abstraction Using Functions

Say we want to write a program that changes Fahrenheit to Celsius (this is a very classic programming example). We could write it using variables and basic math easily with what we’ve learned thus far.

functionsThis will do what we want and it will convert our 90 F to 32.22222222222222 C and print out a string that says, "The temperature is 32.22222222222222C". However, this type of coding becomes clunky when we want to convert multiple different temperatures to Celsius, especially if we are dealing with user input. Wrapping the equation in a function will allow us to “freeze” the code for multiple uses; this is a form of code abstraction.

Notice that you can pass variables as well as numbers directly to the function as arguments and that you can also embed the function in a string statement through the use of concatenation.  Open your console and try throwing as many numbers as you want into this function.  If we want to keep our code even more compact, we can also put the console.log part inside of the function itself as well and drop the return statement.  Now, calling the function will return undefined instead of a number.

Functions are considered “instance objects” in JavaScript though if we call the typeofoperatoron our c_to_f function it will return the type "function". Calling typeof on c_to_f() will return undefined because we are invoking or calling the c_to_f function with the parenthesis even if there are no arguments being passed into it. Running the typeof operator on function with arguments being passed will return the return value type because it runs the function before typeof runs.

One more thing that we need to discuss before closing out today is the difference between a parameter and an argument. While you might find that many people use these words interchangeably (It may have been done in this post), they are not technically the same thing. A function parameter is the name of the variable when you are creating the function; the variable names inside the parenthesis.  These are the variables that are listed in the function definition. An argument is an actual value that is being put into the function when it is being called. Basically, anything inside the function definition parathesis is a parameter and anything inside the function parathesis when it is being called is an argument.

Conclusion

Today’s post covered very basic functions. We talked about how to build a function, what purpose a function serves, and we touched on how JavaScript views functions. We also talked about arguments and parameters, and we looked at a fun example of passing a function into another function. Our next post will start to talk about objects and will expand upon functions further.

As always, feel free to comment with feedback and constructive criticism if you feel that we forgot something.