A Super Simple Explanation of JavaScript Functions.

Functions make your code easier to read and test. They are more modular than standard procedural programming, and are a basic building block of both Object Oriented Programming and Functional Programming styles. They may seem complicated, but at their most basic level, they really aren’t. Let’s see if I can demystify JavaScript functions for you.

When you are creating a function, you are making special kind of variable. This is why you can also declare functions like

const imAFunction = function(name){
    return “Hello World, I’m “ + name + “!”;
};

So just like const foo = “Boo!”; is a string variable and const bar = 245; is an integer variable, imAFunction is a function variable. In fact, you can pass functions to new variables just like you can other data types: const imAFunctionToo = imAFunction; sets imAFunctionToo to equal

function(name){
    return “Hello World, I’m “ + name + “!”;
};

The uniqueness of a function compared to a integer, or a float, or a string, is that it can do stuff! And the key to turn it on is the parentheses. Notice in the above paragraph where I set imAFunctionToo equal to imAFunction? Passing it like that, without the () to turn it on will act just like assigning any other data type variable, but soon as you add the () the magic happens: if I had typed const imAFunctionToo = imAFunction(“Chad”);, our inappropriately named variable, imAfunctionToo, would not equal:

function(name){
    return “Hello World, I’m “ + name + “!”;
};

Instead it would equal the string, “Hello World, I’m Chad!” Let’s take a look at how the magic happens.

Think of a function like a mini program contained in a box made of curly braces:

function add(){
    1 + 2;
};

is a perfectly valid function that will indeed add 1 and 2. You can assign another variable to equal it just like I was talking about: const myAdd = add; sets myAdd to equal function(){ 1 + 2; }; but what happens when we turn it on with the parentheses: const myAdd = add();? Nothing. It doesn’t equal 3, it equals undefined. What happened? This is because even though the function is adding away inside those curly braces, we have no way to get the results of the addition out of the box.

This is where return comes in. Return tells a function, oddly enough, to “return” the value that is on that line — go figure. So let’s modify add:

function add(){
    return 1 + 2;
};

.Now when we assign const myAdd = add();, myAdd will equal 3! You can write pretty much any code inside a function and when it comes to a line that starts with return it will return to the outside world the value of that line and stop the function.

function returnDemo() {
    4 + 5; // Adds but doesn't go anywhere
    return 1 + 3; // This is what will be returned
    return 6 + 7; // We will never get to this line.
};

So now we can get values out of a function, which is quite useful, but it is limited to whatever you put into it when you wrote the program. What if you want to pass some data to this program to work with? Remember when I said the parentheses were like the key to turn on a function? I’m going to expand that a little: a key is often a part of a door, and you can use this door to pass stuff into the function. Take our add function from above. Lets modify that to attach the key to a door:

function add(addend){
    return 1 + addend;
};

By putting a variable inside the parentheses, we’ve told the program that when we turn add on, we also want to send something into add and assign it to that variable.

So if I do this with our add function: const sum = add(2);, it will be as if we assigned addend = 2 and then executed the program inside of add: 1 + addend, and since that is on the line with return, it spits out the result: 3! You can pass any amount of data into the function as well, just add more variables separated by commas:

function math(addend, subtrahend){
    const subTotal = addend - subtrahend;
    return 1 + subTotal;
};

will work just like you think it will work: subtracting the second variable you passed in from the first one then adding that result to 1 and returning the final result.

Believe it or not, most of what I’ve touched on here will apply to other languages as well as JavaScript with very slight modification. Just another example of how most programming languages are very similar and once you learn one, it is way easier to learn the next one.

So, that was it. Hopefully enough of an explanation to get a relative beginner understanding functions and how to use them. Go forth and code!