Lesson 12
Author : Afrixi
Last Updated : October, 2017

Javascript - Program the Web
This course covers the basics of programming in Javascript. Work your way through the videos/articles and I'll teach you everything you need to know to make your website more responsive!

In this lesson I wanna talk to you about a really important concept in JavaScript which makes it really easy to keep our programs organized and re-usable. I'm talking of course about Functions!

Maybe you've heard the word Function floating around as you've begun your programming journey, but today we're gonna break down exactly what they are and I'll show you how to use them in JavaScript.

Functions and Organization

So far in this course we've written a lot of code. All sorts of code to do all sorts of different things. And as we go forward and begin to write more and more complex and time consuming programs, one thing that is going to be vitally important is that we have good organization.

Without good organization a program can quickly get out of hand. Eventually you'll find that you're writing separate pieces of code in different parts of the file or project which do exactly the same thing!

There's a principle in software development which all good programmers try to follow called the DRY principle. It stands for "Don't repeat yourself". In other words, it means, don't write the same code twice!

As programmers, a Function is our best defence against violating the DRY principal. A Function is basically a collection of code which can be executed anywhere in our program and used over and over again.

In many programs there will be certain functionality that needs to be re-used multiple times.

Maybe you want to format a string a specific way, or you want to perform some complex math calculation on two numbers, or you want to parse through an array looking for a particular element. All of these are situations where a Function can be written which encapsulates the code needed to do those things, and can then be re-used throughout the program again and again.

sayHi() Function

To fully illustrate Functions lets take a look at an example of a simple Function which says hi to the user. Below is the JavaScript code for our sayHi Function.

Copyfunction sayHi(){

Right off the bat you'll notice a few things here. First is that just like variables we can actually give Functions descriptive names. In this case we've named the Function sayHi because that's what it's doing, that's the functionality that it's performing.

It's really important that you give these good names, otherwise your program will be significantly less read-able.

We follow the Function name with a set of open and closed parenthesis, and then below the top line (which we call the Function declaration), we can write some code. All of the code below the declaration is considered inside the Function.

Once we've written the code inside the Function (note: you can write as much code as you like), we can then execute that code wherever and whenever we want in our programs by calling the Function.

Calling a Function

When you call a Function you are essentially telling JavaScript that you want it to stop what it's doing and go execute all of the code contained in the Function. Then once it's done, to come back and keep going on with the normal flow of the program. Let's look at how we can call a Function:

Copyfunction sayHi(){


To call a Function we simple state the Function's name and then directly after, place an open and closed parenthesis. The open and closed parenthesis tells JavaScript that you want to actually execute the Function.

Like I mentioned above, when a Function is called JavaScript will stop what it's doing, and jump over to wherever that Function is and execute all of the code inside. Once it's finished with the code in the Function it will return to where it was and keep going.

So if we wanted to sayHi in multiple places in our program, instead of having to duplicate the code for doing that multiple times, we could instead just call the sayHi Function.

This is also advantageous because if we wanted to change the way our program said hi then we could just update the code in the Function body and the program would automatically update the way it's say hi all throughout our program!

Parameters and Arguments

Functions are powerful not only because they allow us to re-use the same code over and over, but because they also allow us to pass them information.

When a Function is called in a program, the code calling it can supply it with information specific to it's wants and needs. For example let's say that we wanted to modify our sayHi to say hi to a specific person. The way it's written right now it can't do that, all it does it just say hello.

In order to allow it to say hi to a specific person, we need to specify in the Function declaration that it accepts the name of a person from the caller. This is referred to as a parameter. Check out our updated sayHi Function below and see if you can spot the parameter.

Copyfunction sayHi(name){
    document.write("Hello " + name);

I'll give you a hint, look inside the parenthesis, notice how we've declared a variable there called name.

This variable is actually called a parameter, and it defines a piece of information that the Function accepts. Often times, Functions will accept parameters which help them to perform their task in a way that is more specific to the needs of the individual caller.

With this Function the way it is now, we can actually call it and have it say hi to whomever we want.

Copyfunction sayHi(name){
    document.write("Hello " + name);


Notice above that now when I call the sayHi Function, instead of leaving the parenthesis blank, I place a string inside "Mike". This string is what's called an argument. This argument will get sent to the Function when it is called and be stored in the name parameter specified in the sayHi Function.

This is an important point of terminology.

A parameter is a special variable that a Function will use to perform it’s task in a way that is more specific to the needs of the caller. An argument is the value the caller gives to the Function which will get stored inside the parameter variable.

In the case above we only specified one single parameter, but you can specify as many as you want (although any more than 4 or 5 is generally considered too many). Let's take a look at this same Function but with an additional parameter age:

Copyfunction sayHi(name, age){
    document.write("Hello " + name + " you are " + age);

sayHi("Mike", 24)

This looks pretty similar to our previous example, but now in addition to the name parameter, I've also specified the age parameter. Multiple parameters are separated with a comma, and you can't have two parameters with the same name.

When we call the Function now we can pass in the age as well. Notice that the position of the arguments matches the position of the parameters; The name is first and the age is second in both cases, this is crucial!

Wrapping it up

So there you have it, an introduction to Functions. This is just the first step, but an important step towards mastering Functions and being able to really take advantage of them in our programs. Try writing some Functions of your own and see if you can come up with anything cool!


Copyvar sum = addNumbers(4, 60);

function addNumbers(num1, num2){
     return num1 + num2;