JavaScript for the Complete Beginner | Part 5 — Functions

Last time we discussed objects and arrays. Here we’re going to talk about functions; the part of code where we do stuff™. Click on this link to JS Bin and let’s begin.

What are functions?

Functions are the muscles that make programs do things. It’s probably easier to show rather than explain. Let’s look at a simple and rather stupid function:

function twoPlusTwo() {
    2 + 2;
}

You’ll notice that to create a function we first declare it by typing “function” and then the name of our function, which is is twoPlusTwo in this case. Then we add parentheses (), (I’m talk about why in a second), and finally we’ll add curly braces {} and what we want our function to do in-between them, which in this case is add 2 + 2. Though our function could be written like this:

function twoPlusTwo() { 2 + 2 }

It’s a coding convention to have the opening curly brace on the first line with the name of the function, and the closing one on it’s own line. We indent every line in-between to show that they belong to the twoPlusTwo function. But we’ve only just created (or declared) the function; nothing will happen until we use (or call) the function. We do so my typing the name of the function and then adding the curly braces.

twoPlusTwo
//this doesn't call it!
twoPlusTwo()
// -> undefined             <- it got called!

People working with functions for the first time will inevitably forget to call it at least once. That’s why I’m taking time to point it out.

A quick overview on console.log()

If you’ve been trying out the code for yourself on JS Bin (As I hope you are) then you’ve probably ran into an issue; the console doesn’t like when you try to go to a new line, and if you run anything on the JavaScript side, you don’t see anything. Let’s fix this. Remember that we can access a property of an object by using dot notation? log is a method (a property of an object that happens to be a function) that logs whatever we ask it to in the console. Don’t worry too much if you don’t understand what this means. For our purposes all you need to know is that if you set up your code like the image below, so that you put the function inside of the parentheses of console.log(), and click run on the top right, your output should look exactly like mine. (Notice how I call the twoPlusTwo function inside of console.log. Notice too how we have to call the log method by putting parentheses after it.)

This is how we’ll check our output for the next little while. After you get that working, the question I’m hoping you’re asking is why are we returning undefined? Shouldn’t it be the number 4? I’ll explain in the next part.

Back to discussing our useless function

Our function is purposely bad so that we learn the difference between a good and bad function and to go over some of the common mistakes new programmers might make when using functions.

Problem 1: Our function doesn’t return anything.

Functions in JavaScript always return a value, regardless of whether or not we need one. If no return value is specified, then undefined is returned. Our function does some math, but since we didn’t specify what we wanted returned, it returns undefined. Let’s fix that:

function twoPlusTwo() {
    return 2 + 2;
}

Now click run. the number 4 is returned, which is then passed to the console.log() function, which then logs it into the console. When we use the return statement, the function returns whatever expression or value follows it. That also means the function stops running, and therefore anything after a return statement is not executed.

function nonReachableCode() {
    return "hello";
    2 + 2;    //<- this code isn't reachable!
}

Now that we’re returning something, let’s make our function a little bit more helpful in a real-world scenario, in which case returning 4 is not really that helpful. Let’s start by learning about parameters. We don’t really need functions to return values that don’t change, instead, most functions use input, do something based on that input, and then return something. To pass things into the function, we put it between the parentheses:

twoPlusTwo(2)

Here, we have passed a 2 to the twoPlusTwo function. Currently, however, our function doesn’t actually do anything with it. When we build a function, we can put a list of parameters between the parentheses like so:

function addtwo(number) {
     return number + 2;
}

Now we’ve done added a parameter, number, which we can then use inside the body of our function. Now our function is slightly more useful, and will give us different outputs as we change change the input:

addTwo(5)
//-> 7
addTwo(100)
//-> 102

Try it for yourself.

Arguments vs. Parameters

When we create a function, we give it a list of parameters:

function sayHi(name) {
    console.log('hello, ' + name)
}

In this case the parameter is name. It’s the variable that will hold the argument passed into it:

sayHi('Bob')
// -> "Hi, Bob"
sayHi('Sarah')
// -> "Hi, Sarah"

Arguments are the actual pieces of data; in this case the strings “Bob” and “Sarah”.

Functions can have multiple parameters and take multiple arguments

They must be separated by commas. The first argument is matched with the first parameter, the second with the second, and so on and so forth.

function addNumbers(num1, num2, num3) {
    return num1 + num2 + num3
}
addNumbers(1, 2, 3)
// -> 6

If you pass in less arguments than there are parameters, the unmatched parameters become equal to undefined:

addNumbers(1, 2)
// -> NaN              // NaN means Not a Number, that's because
                       // we've returned 1 + 2 + undefined, and 
                       // undefined is not a number.

If we pass in more arguments than the function accepts, JavaScript doesn’t break, instead the extra arguments are just not used:

addNumbers(1, 2, 3, 4, 5)
//-> 6                 // 4 and 5 are discarded

Finally, functions can be assigned to a variable, as well as the results of a function:

let calculator = addNumbers(num1, num2, num3) {
    return num1 + num2 + num3
}
console.log(calculator)
// -> addNumbers(num1, num2, num3) {
    return num1 + num2 + num3
}
//since we didn't call the function, when we pass it to console.log // it just logs the whole function
let result = calculator(1, 2, 3)
console.log(result)
// -> 6

That’s a lot of info to digest, so spend some time just playing around with it in JS Bin if you’re still a little confused. Next time we’ll dig a little deeper into functions.