JavaScript – Beginning to work with functions

Functions are another extremely important part of JavaScript. Most of the work you do will involve working with functions and objects. What is a function? A function is effectively a way to create a mini program within your program. Let’s open up our browser console and dive right in.

// Function declaration below
function getTen() { return 10; }

// Function call below
getTen()
// Outputs 10

The two most important parts of working with functions, are declaring them, and then calling them. Above in our declaration we are making a function getTen that returns the value 10. We can then call getTen by using the parentheses, (), syntax.

When we call a function JavaScript finds that function and then runs the code found in between the curly braces {}. To call any function we use it’s name and tack on () at the end. This can also be achieve like so:

getTen.call()
// Outputs 10

The getTen() syntax is used for brevity, so .call is not used everywhere. Let’s look at some built in functions in JavaScript. In our browser console we can run:

document.write('I am learning functions!')

When this runs there is an undefined output in our console, but “I am learning functions!” is printed onto our browser screen! So what is happening here is we are grabbing the document object in our browser, and getting the write function attached to it. Inside our calling parentheses we have a string 'I am learning functions!'. This string would be known as a function argument, we pass this argument to our function, and it does stuff with that. Let’s look more in depth at working with arguments, it can get tricky.

Function arguments

Enter the following into the console:

// Declare our function getThing
function getThing( thing ) { return thing; }

// Call our function with 20
getThing( 20 );
// Outputs 20

getThing( 'Hello!' )
// Outputs "Hello!"

Experiment calling getThing with other values you can think of. Lets breakdown the declaration. We name our function; getThing. Then we add an argument thing; ( thing ) and finally we have the code that runs when we execute our function; { return thing; }. These three parts can be respectively referred to as the name, arguments, and body. The argument thing is whatever gets passed into the function when we call it. In the body of the function we return whatever thing is.

Multiple arguments

We can create functions that have multiple arguments as well, let’s create a simple addition function.

function add( number1, number2 ) { return number1 + number2; }

add( 10, 1 )
// Outputs 11

add( 33, 55 )
// Outputs 88

To create multiple arguments we name them differently and separate each by a comma within the parentheses. You can effectively have as many arguments as you want. Inside the function body you can then access each argument by matching the names. Functions at this point, probably seem somewhat useless, however I assure you as we progress further you will see how powerful they are in JavaScript.

Why use functions?

Functions bring a number of benefits. One benefit is that they allow us to name an idea that we execute in code. In the last example we created a function add, which takes two numbers and returns their sum. We could create a function doComplicatedThing() { // Do complicated stuff }. Then every time we needed to do that complicated thing we would simply call doComplicatedThing(). This helps make our code easier to follow and read, and brings other benefits.

Another major benefit of functions is that we can choose when we need to call the function. Try this in your console:

function alertMe() { console.log('Function is alerting you!' ); }

alertMe()
// Logs to the console "Function is alerting you!"

setTimeout( alertMe, 1000 )
// One second delay occurs then we are alerted.

Above we see the timeout delays when alertMe gets called by 1000 milliseconds. setTimeout itself is a function and we pass the function alertMe to it, and set the delay as the second argument. Functions can get pretty confusing, so spending extra time to get a good handle on them is very crucial in learning JavaScript.

Input and output

Another way to think of functions is in terms of input and output. Let’s look at a couple of examples.

// Only has input, but does not return anything as output.
function doNothing( input ) { 'Hi!'; }

// Has both input and output.
function getGreeting( input ) { return 'Hello ' + input + '!'; }

// No input, but has an output.
function getTen() { return 10; }

The return statement we have been using is how we get a function to output a value. If there is not a return statement, by default a function will return undefined. The concept of input and output is key moving forward, and I encourage you to think about how things come into and go out of the various parts of your programs.

Wrapping up functions

Functions are a very important aspect of JavaScript. They have three parts: name, arguments, and body. We must declare a function before we can call it. Once declared we can call it to execute the code we put in the function body. Functions are a way to chop our programs up into smaller mini programs. Input and output play a critical role in functions. This is just the tip of the iceberg with functions, there are a lot more really interesting things that can be done with them.